From 24b2ccb7847052a5d495f21a57e9be177e37e8c3 Mon Sep 17 00:00:00 2001
From: Jinma <9401060+jinmayamashita@users.noreply.github.com>
Date: Fri, 17 May 2024 12:59:56 +0900
Subject: [PATCH 1/8] test: improve cli test

---
 packages/start-frontend/__tests__/cli.test.ts | 222 +++++++-----------
 1 file changed, 89 insertions(+), 133 deletions(-)

diff --git a/packages/start-frontend/__tests__/cli.test.ts b/packages/start-frontend/__tests__/cli.test.ts
index 37efe4c98..164735b30 100644
--- a/packages/start-frontend/__tests__/cli.test.ts
+++ b/packages/start-frontend/__tests__/cli.test.ts
@@ -1,168 +1,124 @@
 import { describe, test, expect, beforeAll, afterAll } from "vitest";
 import path from "node:path";
-import fse from "fs-extra";
-import child, { ChildProcessWithoutNullStreams } from "node:child_process";
 import util from "node:util";
+import { execFile, spawn } from "node:child_process";
+import fse from "fs-extra";
 import concat from "concat-stream";
-import { spawn } from "node:child_process";
 
+// variables
 const keys = {
   ENTER: "\x0D",
   DOWN: "\u001B\u005B\u0042",
+  SPACE: "\x20",
 };
 
-// outside monorepo
 const cwd = path.resolve(__dirname, "../../../..");
-
 const testDir = "my-test" as const;
+const cli = path.resolve(__dirname, "..", "dist", "index.js");
 
-const exe = util.promisify(child.execFile);
+// helpers
+const exe = util.promisify(execFile);
 
-const startFrontend = path.resolve(__dirname, "../dist/index.js");
+async function cleanupTestDir() {
+  const installedTestDir = path.resolve(cwd, testDir);
 
-const EXPECTED_HELP = `Create a new codes for front-end app
+  fse.existsSync(installedTestDir) &&
+    fse.rmSync(installedTestDir, { recursive: true });
+}
 
-    Usage:
-      $ npx start-frontend [<dir>] [flags...]
+type RunCLIOptions = {
+  inputs?: string[];
+  delay?: number;
+};
+function runCLIWithInputs(cliPath: string, opts: RunCLIOptions) {
+  const cliProcess = spawn("node", [cliPath], { cwd });
+  const { inputs = [], delay = 500 } = opts;
 
-    Flags:
-      --help, -h          Show this help message
-      --version, -v       Show the version of this script`;
+  let currentInputTimeout: NodeJS.Timeout;
 
-describe("start-frontend cli", () => {
-  beforeAll(() => cleanupTestDir());
-  afterAll(() => cleanupTestDir());
+  function loop(inputs: string[]) {
+    if (!inputs.length) {
+      clearTimeout(currentInputTimeout);
+      return cliProcess.stdin.end();
+    }
 
-  describe("install react boilerplate with cli", () => {
-    test("interactively configure", async () => {
-      const cli = spawn("node", [startFrontend], { cwd });
-      const results = await exeInteractive(cli, [
-        testDir,
-        keys.ENTER,
-        keys.ENTER,
-        keys.ENTER,
-        keys.ENTER,
-        keys.ENTER,
-        keys.ENTER,
-        keys.ENTER,
-        keys.ENTER,
-        keys.ENTER,
-        keys.ENTER,
-      ]);
-
-      expect(results).toContain(`start-frontend`);
-      expect(results).toContain(`Welcome!`);
-      expect(results).toContain(
-        `? Where Would You like to Create Your Application?`
-      );
-      expect(results).toContain(`? Select a JavsScript library for UI`);
-      expect(results).toContain(`? Select an API Solution`);
-      expect(results).toContain(`? Select module do you want to use`);
-      expect(results).toContain(`? Add Testing codes for Catching bugs early?`);
-      expect(results).toContain(`? Add Vitest for Unit Testing?`);
-      expect(results).toContain(`? Add Storybook for Visual Testing?`);
-      expect(results).toContain(`? Add Playwright for End-To-End Testing?`);
-      expect(results).toContain(`? Add ESLint for Code Linting?`);
-      expect(results).toContain(`? Add Prettier for Code Formatting?`);
-      expect(results).toContain(`Success! Created a new app at "my-test".`);
-    });
-  });
+    currentInputTimeout = setTimeout(() => {
+      cliProcess.stdin.write(inputs[0]);
 
-  // TODO: Skip testing as it is not yet implemented.
-  describe.skip("install react boilerplate to specify dir", () => {
-    test("install", async () => {
-      await exe("node", [startFrontend, testDir], { cwd });
-
-      const expectDirs = [
-        ".env.template",
-        ".eslintrc.js",
-        ".gitignore",
-        "README.md",
-        "__mocks__",
-        "babel.config.js",
-        "index.html",
-        "jest-setup.ts",
-        "package.json",
-        "public",
-        "src",
-        "tests",
-        "tsconfig.json",
-        "vite.config.ts",
-        "yarn.lock",
-      ];
-
-      expect(fse.readdirSync(path.resolve(cwd, testDir))).toStrictEqual(
-        expectDirs
-      );
-    });
-  });
+      loop(inputs.slice(1));
+    }, delay);
+  }
 
-  describe("printing help message", () => {
-    test("--help flag works", async () => {
-      const { stdout } = await exe("node", [startFrontend, "--help"]);
-      expect(stdout.trim()).toBe(EXPECTED_HELP);
-    });
+  return new Promise((resolve) => {
+    loop(inputs);
 
-    test("-h flag works", async () => {
-      const { stdout } = await exe("node", [startFrontend, "-h"]);
-      expect(stdout.trim()).toBe(EXPECTED_HELP);
-    });
+    cliProcess.stdout.pipe(
+      concat((result: Buffer) => resolve(result.toString("utf-8")))
+    );
   });
+}
 
-  describe("printing version", () => {
-    test("--version flag works", async () => {
-      const { stdout } = await exe("node", [startFrontend, "--version"]);
-      // eslint-disable-next-line turbo/no-undeclared-env-vars
-      expect(stdout.trim()).toBe(process.env.npm_package_version);
-    });
+// tests
+describe("start-frontend cli", async () => {
+  beforeAll(() => cleanupTestDir());
+  afterAll(() => cleanupTestDir());
 
-    test("-v flag works", async () => {
-      const { stdout } = await exe("node", [startFrontend, "-v"]);
-      // eslint-disable-next-line turbo/no-undeclared-env-vars
-      expect(stdout.trim()).toBe(process.env.npm_package_version);
-    });
+  test("--version flag works", async () => {
+    const { stdout } = await exe("node", [cli, "--version"]);
+    expect(stdout.trim()).toMatch(/^(\d+\.)?(\d+\.)?(\*|\d+)$/);
   });
-});
-
-function cleanupTestDir() {
-  const installedTestDir = path.resolve(cwd, testDir);
-
-  fse.existsSync(installedTestDir) &&
-    fse.rmSync(installedTestDir, { recursive: true });
-}
-// FIXME: Displaying loading in the process of cli execution cause test errors.
-function exeInteractive(
-  cli: ChildProcessWithoutNullStreams,
-  inputs: string[] = [],
-  delay: number = 200
-) {
-  let currentInputTimeout: NodeJS.Timeout;
 
-  cli.stdin.setDefaultEncoding("utf-8");
+  test("-v flag works", async () => {
+    const { stdout } = await exe("node", [cli, "-v"]);
+    expect(stdout.trim()).toMatch(/^(\d+\.)?(\d+\.)?(\*|\d+)$/);
+  });
 
-  const loop = (inputs: string[]) => {
-    if (!inputs.length) return void cli.stdin.end();
+  test("--help flag works", async () => {
+    const { stdout } = await exe("node", [cli, "-h"]);
+    expect(stdout.trim()).toBe(`Create a new codes for front-end app
 
-    currentInputTimeout = setTimeout(() => {
-      cli.stdin.write(inputs[0]);
-      loop(inputs.slice(1));
-    }, delay);
-  };
+    Usage:
+      $ npx start-frontend [<dir>] [flags...]
 
-  return new Promise((resolve, reject) => {
-    cli.stderr.once("data", (err) => {
-      cli.stdin.end();
+    Flags:
+      --help, -h          Show this help message
+      --version, -v       Show the version of this script`);
+  });
 
-      if (currentInputTimeout) clearTimeout(currentInputTimeout);
-      reject(err.toString());
-    });
+  test("-h flag works", async () => {
+    const { stdout } = await exe("node", [cli, "-h"]);
+    expect(stdout.trim()).toBe(`Create a new codes for front-end app
 
-    cli.on("error", reject);
+    Usage:
+      $ npx start-frontend [<dir>] [flags...]
 
-    loop(inputs);
+    Flags:
+      --help, -h          Show this help message
+      --version, -v       Show the version of this script`);
+  });
 
-    cli.stdout.pipe(
-      concat((result: Buffer) => resolve(result.toString("utf-8")))
-    );
+  test("handle interactive configuration on CLI", async () => {
+    await runCLIWithInputs(cli, {
+      inputs: [
+        // Where Would You like to Create Your Application?
+        keys.ENTER,
+        // Select a JavsScript library for UI (Use arrow keys)
+        keys.ENTER,
+        // Select an API Solution (Use arrow keys)
+        keys.ENTER,
+        // Select module do you want to use
+        keys.ENTER,
+        // Add Testing codes for Catching bugs early?
+        keys.ENTER,
+        // Add Vitest for Unit Testing?
+        keys.ENTER,
+        // Add Storybook for Visual Testing?
+        keys.ENTER,
+        // Add Playwright for End-To-End Testing?
+        keys.ENTER,
+        // Add Prettier for Code Formatting?
+        keys.ENTER,
+      ],
+    });
   });
-}
+});

From 65d88c1b774d9ce45f18b5ea6fe78038a5071b69 Mon Sep 17 00:00:00 2001
From: Jinma <9401060+jinmayamashita@users.noreply.github.com>
Date: Sun, 2 Jun 2024 22:00:29 +0900
Subject: [PATCH 2/8] check generated files

---
 packages/start-frontend/__tests__/cli.test.ts | 198 +++++++++++-------
 1 file changed, 126 insertions(+), 72 deletions(-)

diff --git a/packages/start-frontend/__tests__/cli.test.ts b/packages/start-frontend/__tests__/cli.test.ts
index 164735b30..8b23fc8c9 100644
--- a/packages/start-frontend/__tests__/cli.test.ts
+++ b/packages/start-frontend/__tests__/cli.test.ts
@@ -1,81 +1,61 @@
 import { describe, test, expect, beforeAll, afterAll } from "vitest";
 import path from "node:path";
 import util from "node:util";
-import { execFile, spawn } from "node:child_process";
+import { execFile, exec, execSync } from "node:child_process";
 import fse from "fs-extra";
-import concat from "concat-stream";
 
-// variables
-const keys = {
+const START_FRONTEND = path.resolve(__dirname, "..", "dist", "index.js");
+
+const KEY = {
   ENTER: "\x0D",
   DOWN: "\u001B\u005B\u0042",
   SPACE: "\x20",
 };
 
-const cwd = path.resolve(__dirname, "../../../..");
-const testDir = "my-test" as const;
-const cli = path.resolve(__dirname, "..", "dist", "index.js");
-
-// helpers
+const TEST_DIR = execSync("mktemp -d -t my-test").toString("utf-8");
 const exe = util.promisify(execFile);
 
 async function cleanupTestDir() {
-  const installedTestDir = path.resolve(cwd, testDir);
-
-  fse.existsSync(installedTestDir) &&
-    fse.rmSync(installedTestDir, { recursive: true });
+  fse.existsSync(TEST_DIR) && fse.rmSync(TEST_DIR, { recursive: true });
 }
 
-type RunCLIOptions = {
-  inputs?: string[];
-  delay?: number;
-};
-function runCLIWithInputs(cliPath: string, opts: RunCLIOptions) {
-  const cliProcess = spawn("node", [cliPath], { cwd });
-  const { inputs = [], delay = 500 } = opts;
-
-  let currentInputTimeout: NodeJS.Timeout;
-
-  function loop(inputs: string[]) {
-    if (!inputs.length) {
-      clearTimeout(currentInputTimeout);
-      return cliProcess.stdin.end();
-    }
+async function executeCLI(inputs: string[], delay = 500) {
+  const cliProcess = exec(`node ${START_FRONTEND} ${TEST_DIR}`);
+  cliProcess.stdin?.setDefaultEncoding("utf-8");
 
-    currentInputTimeout = setTimeout(() => {
-      cliProcess.stdin.write(inputs[0]);
+  function nextPrompt(inputs: string[]) {
+    if (!inputs.length) return;
 
-      loop(inputs.slice(1));
+    setTimeout(() => {
+      cliProcess?.stdin?.write(inputs[0]);
+      nextPrompt(inputs.slice(1));
     }, delay);
   }
 
-  return new Promise((resolve) => {
-    loop(inputs);
+  nextPrompt(inputs);
 
-    cliProcess.stdout.pipe(
-      concat((result: Buffer) => resolve(result.toString("utf-8")))
-    );
-  });
+  return new Promise((resolve) => cliProcess.on("exit", resolve));
 }
 
-// tests
-describe("start-frontend cli", async () => {
-  beforeAll(() => cleanupTestDir());
-  afterAll(() => cleanupTestDir());
+describe(
+  "start-frontend",
+  async () => {
+    beforeAll(cleanupTestDir);
+    afterAll(cleanupTestDir);
 
-  test("--version flag works", async () => {
-    const { stdout } = await exe("node", [cli, "--version"]);
-    expect(stdout.trim()).toMatch(/^(\d+\.)?(\d+\.)?(\*|\d+)$/);
-  });
+    test("--version flag works", async () => {
+      const { stdout } = await exe("node", [START_FRONTEND, "--version"]);
+      expect(stdout.trim()).toMatch(/^(\d+\.)?(\d+\.)?(\*|\d+)$/);
+    });
 
-  test("-v flag works", async () => {
-    const { stdout } = await exe("node", [cli, "-v"]);
-    expect(stdout.trim()).toMatch(/^(\d+\.)?(\d+\.)?(\*|\d+)$/);
-  });
+    test("-v flag works", async () => {
+      const { stdout } = await exe("node", [START_FRONTEND, "-v"]);
+      expect(stdout.trim()).toMatch(/^(\d+\.)?(\d+\.)?(\*|\d+)$/);
+    });
 
-  test("--help flag works", async () => {
-    const { stdout } = await exe("node", [cli, "-h"]);
-    expect(stdout.trim()).toBe(`Create a new codes for front-end app
+    test("--help flag works", async () => {
+      const { stdout } = await exe("node", [START_FRONTEND, "-h"]);
+      expect(stdout.trim()).toBe(`Create a new codes for front-end app
 
     Usage:
       $ npx start-frontend [<dir>] [flags...]
@@ -83,11 +63,11 @@ describe("start-frontend cli", async () => {
     Flags:
       --help, -h          Show this help message
       --version, -v       Show the version of this script`);
-  });
+    });
 
-  test("-h flag works", async () => {
-    const { stdout } = await exe("node", [cli, "-h"]);
-    expect(stdout.trim()).toBe(`Create a new codes for front-end app
+    test("-h flag works", async () => {
+      const { stdout } = await exe("node", [START_FRONTEND, "-h"]);
+      expect(stdout.trim()).toBe(`Create a new codes for front-end app
 
     Usage:
       $ npx start-frontend [<dir>] [flags...]
@@ -95,30 +75,104 @@ describe("start-frontend cli", async () => {
     Flags:
       --help, -h          Show this help message
       --version, -v       Show the version of this script`);
-  });
+    });
 
-  test("handle interactive configuration on CLI", async () => {
-    await runCLIWithInputs(cli, {
-      inputs: [
+    test("handle interactive configuration on CLI", async () => {
+      await executeCLI([
         // Where Would You like to Create Your Application?
-        keys.ENTER,
+        KEY.ENTER,
         // Select a JavsScript library for UI (Use arrow keys)
-        keys.ENTER,
+        KEY.ENTER,
         // Select an API Solution (Use arrow keys)
-        keys.ENTER,
+        KEY.ENTER,
         // Select module do you want to use
-        keys.ENTER,
+        KEY.ENTER,
         // Add Testing codes for Catching bugs early?
-        keys.ENTER,
+        KEY.ENTER,
         // Add Vitest for Unit Testing?
-        keys.ENTER,
+        KEY.ENTER,
         // Add Storybook for Visual Testing?
-        keys.ENTER,
+        KEY.ENTER,
         // Add Playwright for End-To-End Testing?
-        keys.ENTER,
+        KEY.ENTER,
         // Add Prettier for Code Formatting?
-        keys.ENTER,
-      ],
+        KEY.ENTER,
+      ]);
+
+      const result = execSync(
+        `npx tree-cli -a -l 5 --base ${TEST_DIR}`
+      ).toString("utf-8");
+
+      expect(result).toContain(`
+├── .eslintignore
+├── .eslintrc.cjs
+├── .gitignore
+├── .prettierignore
+├── .prettierrc
+├── .storybook
+|  ├── main.ts
+|  ├── preview-head.html
+|  └── preview.ts
+├── __mocks__
+|  ├── browser.ts
+|  ├── index.ts
+|  ├── request-handlers.ts
+|  └── server.ts
+├── __tests__
+|  ├── About.test.ts
+|  ├── Home.test.ts
+|  └── utils
+|     └── global-setup.ts
+├── env.d.ts
+├── index.html
+├── package.json
+├── playwright.config.ts
+├── public
+|  ├── favicon.svg
+|  └── mockServiceWorker.js
+├── src
+|  ├── app.tsx
+|  ├── assets
+|  |  ├── base.css
+|  |  └── main.css
+|  ├── components
+|  |  ├── Button.tsx
+|  |  └── button.module.css
+|  ├── context.tsx
+|  ├── main.tsx
+|  ├── modules
+|  |  └── restful
+|  |     ├── components
+|  |     |  ├── user-form.test.tsx
+|  |     |  ├── user-form.tsx
+|  |     |  ├── user-list.test.tsx
+|  |     |  ├── user-list.tsx
+|  |     |  ├── user-view.test.tsx
+|  |     |  └── user-view.tsx
+|  |     ├── hooks
+|  |     |  ├── use-user.test.tsx
+|  |     |  └── use-user.ts
+|  |     └── index.ts
+|  ├── routes.tsx
+|  └── ui
+|     ├── nav-link.tsx
+|     └── pages
+|        ├── about
+|        |  └── index.tsx
+|        ├── index.tsx
+|        ├── layout.tsx
+|        └── not-found
+|           └── index.tsx
+├── stories
+|  └── Button.stories.tsx
+├── tsconfig.json
+├── tsconfig.node.json
+├── vite.config.ts
+├── vitest.config.ts
+└── vitest.setup.ts`);
     });
-  });
-});
+  },
+  {
+    timeout: 10000,
+  }
+);

From dc7f22cd8b9c90eaf0a727977dcf6b8b877c5158 Mon Sep 17 00:00:00 2001
From: Jinma <9401060+jinmayamashita@users.noreply.github.com>
Date: Sun, 2 Jun 2024 22:08:49 +0900
Subject: [PATCH 3/8] ci temp dir

---
 packages/start-frontend/__tests__/cli.test.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/start-frontend/__tests__/cli.test.ts b/packages/start-frontend/__tests__/cli.test.ts
index 8b23fc8c9..7dbeaeb47 100644
--- a/packages/start-frontend/__tests__/cli.test.ts
+++ b/packages/start-frontend/__tests__/cli.test.ts
@@ -12,7 +12,9 @@ const KEY = {
   SPACE: "\x20",
 };
 
-const TEST_DIR = execSync("mktemp -d -t my-test").toString("utf-8");
+const TEST_DIR =
+  // eslint-disable-next-line turbo/no-undeclared-env-vars
+  process.env.RUNNER_TEMP || execSync("mktemp -d -t my-test").toString("utf-8");
 const exe = util.promisify(execFile);
 
 async function cleanupTestDir() {

From 688770ebeffdcdf6c7cfbcfd259f5f73dacb9da1 Mon Sep 17 00:00:00 2001
From: Jinma Yamashita <9401060+jinmayamashita@users.noreply.github.com>
Date: Sun, 2 Jun 2024 22:11:37 +0900
Subject: [PATCH 4/8] Create wet-days-double.md

---
 .changeset/wet-days-double.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/wet-days-double.md

diff --git a/.changeset/wet-days-double.md b/.changeset/wet-days-double.md
new file mode 100644
index 000000000..6354d9e74
--- /dev/null
+++ b/.changeset/wet-days-double.md
@@ -0,0 +1,5 @@
+---
+"start-frontend": patch
+---
+
+Improve start-frontend CLI test

From e2943c81ae680995f9eeade295f4cef3fdb1757f Mon Sep 17 00:00:00 2001
From: Jinma <9401060+jinmayamashita@users.noreply.github.com>
Date: Mon, 3 Jun 2024 10:09:35 +0900
Subject: [PATCH 5/8] refactor test codes

---
 packages/start-frontend/__tests__/cli.test.ts | 74 +++++++++++--------
 1 file changed, 42 insertions(+), 32 deletions(-)

diff --git a/packages/start-frontend/__tests__/cli.test.ts b/packages/start-frontend/__tests__/cli.test.ts
index 7dbeaeb47..777adc92f 100644
--- a/packages/start-frontend/__tests__/cli.test.ts
+++ b/packages/start-frontend/__tests__/cli.test.ts
@@ -12,9 +12,11 @@ const KEY = {
   SPACE: "\x20",
 };
 
-const TEST_DIR =
-  // eslint-disable-next-line turbo/no-undeclared-env-vars
-  process.env.RUNNER_TEMP || execSync("mktemp -d -t my-test").toString("utf-8");
+// Timeout duration for interactive tests, to allow for code stub downloads
+const INTERACTIVE_TEST_TIMEOUT = 10000;
+
+let TEST_DIR;
+
 const exe = util.promisify(execFile);
 
 async function cleanupTestDir() {
@@ -28,6 +30,7 @@ async function executeCLI(inputs: string[], delay = 500) {
   function nextPrompt(inputs: string[]) {
     if (!inputs.length) return;
 
+    // Write the input to the CLI process with a delay
     setTimeout(() => {
       cliProcess?.stdin?.write(inputs[0]);
       nextPrompt(inputs.slice(1));
@@ -39,25 +42,31 @@ async function executeCLI(inputs: string[], delay = 500) {
   return new Promise((resolve) => cliProcess.on("exit", resolve));
 }
 
-describe(
-  "start-frontend",
-  async () => {
-    beforeAll(cleanupTestDir);
-    afterAll(cleanupTestDir);
+describe("start-frontend", () => {
+  beforeAll(() => {
+    // Initialize TEST_DIR before all tests
+    TEST_DIR =
+      // eslint-disable-next-line turbo/no-undeclared-env-vars
+      process.env.RUNNER_TEMP ||
+      execSync("mktemp -d -t my-test").toString("utf-8");
+    cleanupTestDir();
+  });
 
-    test("--version flag works", async () => {
-      const { stdout } = await exe("node", [START_FRONTEND, "--version"]);
-      expect(stdout.trim()).toMatch(/^(\d+\.)?(\d+\.)?(\*|\d+)$/);
-    });
+  afterAll(cleanupTestDir);
 
-    test("-v flag works", async () => {
-      const { stdout } = await exe("node", [START_FRONTEND, "-v"]);
-      expect(stdout.trim()).toMatch(/^(\d+\.)?(\d+\.)?(\*|\d+)$/);
-    });
+  test("--version works", async () => {
+    const { stdout } = await exe("node", [START_FRONTEND, "--version"]);
+    expect(stdout.trim()).toMatch(/^(\d+\.)?(\d+\.)?(\*|\d+)$/);
+  });
 
-    test("--help flag works", async () => {
-      const { stdout } = await exe("node", [START_FRONTEND, "-h"]);
-      expect(stdout.trim()).toBe(`Create a new codes for front-end app
+  test("-v flag works", async () => {
+    const { stdout } = await exe("node", [START_FRONTEND, "-v"]);
+    expect(stdout.trim()).toMatch(/^(\d+\.)?(\d+\.)?(\*|\d+)$/);
+  });
+
+  test("--help flag works", async () => {
+    const { stdout } = await exe("node", [START_FRONTEND, "--help"]);
+    expect(stdout.trim()).toBe(`Create a new codes for front-end app
 
     Usage:
       $ npx start-frontend [<dir>] [flags...]
@@ -65,11 +74,11 @@ describe(
     Flags:
       --help, -h          Show this help message
       --version, -v       Show the version of this script`);
-    });
+  });
 
-    test("-h flag works", async () => {
-      const { stdout } = await exe("node", [START_FRONTEND, "-h"]);
-      expect(stdout.trim()).toBe(`Create a new codes for front-end app
+  test("-h flag works", async () => {
+    const { stdout } = await exe("node", [START_FRONTEND, "-h"]);
+    expect(stdout.trim()).toBe(`Create a new codes for front-end app
 
     Usage:
       $ npx start-frontend [<dir>] [flags...]
@@ -77,13 +86,15 @@ describe(
     Flags:
       --help, -h          Show this help message
       --version, -v       Show the version of this script`);
-    });
+  });
 
-    test("handle interactive configuration on CLI", async () => {
+  test(
+    "handle interactive configuration on CLI",
+    async () => {
       await executeCLI([
         // Where Would You like to Create Your Application?
         KEY.ENTER,
-        // Select a JavsScript library for UI (Use arrow keys)
+        // Select a JavaScript library for UI (Use arrow keys)
         KEY.ENTER,
         // Select an API Solution (Use arrow keys)
         KEY.ENTER,
@@ -101,6 +112,7 @@ describe(
         KEY.ENTER,
       ]);
 
+      // Execute tree-cli to get the directory structure and convert it to a string
       const result = execSync(
         `npx tree-cli -a -l 5 --base ${TEST_DIR}`
       ).toString("utf-8");
@@ -172,9 +184,7 @@ describe(
 ├── vite.config.ts
 ├── vitest.config.ts
 └── vitest.setup.ts`);
-    });
-  },
-  {
-    timeout: 10000,
-  }
-);
+    },
+    INTERACTIVE_TEST_TIMEOUT
+  );
+});

From 2661d0aa5004b2e26572af44f32a4bb6a5558c4b Mon Sep 17 00:00:00 2001
From: Jinma <9401060+jinmayamashita@users.noreply.github.com>
Date: Fri, 7 Jun 2024 10:06:14 +0900
Subject: [PATCH 6/8] rename to testDir

---
 packages/start-frontend/__tests__/cli.test.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/start-frontend/__tests__/cli.test.ts b/packages/start-frontend/__tests__/cli.test.ts
index 777adc92f..791f7f084 100644
--- a/packages/start-frontend/__tests__/cli.test.ts
+++ b/packages/start-frontend/__tests__/cli.test.ts
@@ -15,16 +15,16 @@ const KEY = {
 // Timeout duration for interactive tests, to allow for code stub downloads
 const INTERACTIVE_TEST_TIMEOUT = 10000;
 
-let TEST_DIR;
+let testDir: string;
 
 const exe = util.promisify(execFile);
 
 async function cleanupTestDir() {
-  fse.existsSync(TEST_DIR) && fse.rmSync(TEST_DIR, { recursive: true });
+  fse.existsSync(testDir) && fse.rmSync(testDir, { recursive: true });
 }
 
 async function executeCLI(inputs: string[], delay = 500) {
-  const cliProcess = exec(`node ${START_FRONTEND} ${TEST_DIR}`);
+  const cliProcess = exec(`node ${START_FRONTEND} ${testDir}`);
   cliProcess.stdin?.setDefaultEncoding("utf-8");
 
   function nextPrompt(inputs: string[]) {
@@ -45,7 +45,7 @@ async function executeCLI(inputs: string[], delay = 500) {
 describe("start-frontend", () => {
   beforeAll(() => {
     // Initialize TEST_DIR before all tests
-    TEST_DIR =
+    testDir =
       // eslint-disable-next-line turbo/no-undeclared-env-vars
       process.env.RUNNER_TEMP ||
       execSync("mktemp -d -t my-test").toString("utf-8");
@@ -114,7 +114,7 @@ describe("start-frontend", () => {
 
       // Execute tree-cli to get the directory structure and convert it to a string
       const result = execSync(
-        `npx tree-cli -a -l 5 --base ${TEST_DIR}`
+        `npx tree-cli -a -l 5 --base ${testDir}`
       ).toString("utf-8");
 
       expect(result).toContain(`

From a1d5bd72caba7e01d98ad270ff0b9aca5e11ae8a Mon Sep 17 00:00:00 2001
From: Jinma <9401060+jinmayamashita@users.noreply.github.com>
Date: Fri, 7 Jun 2024 10:23:56 +0900
Subject: [PATCH 7/8] remove unused setting

---
 packages/start-frontend/__tests__/cli.test.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/start-frontend/__tests__/cli.test.ts b/packages/start-frontend/__tests__/cli.test.ts
index 791f7f084..dd5c7fd9d 100644
--- a/packages/start-frontend/__tests__/cli.test.ts
+++ b/packages/start-frontend/__tests__/cli.test.ts
@@ -25,7 +25,6 @@ async function cleanupTestDir() {
 
 async function executeCLI(inputs: string[], delay = 500) {
   const cliProcess = exec(`node ${START_FRONTEND} ${testDir}`);
-  cliProcess.stdin?.setDefaultEncoding("utf-8");
 
   function nextPrompt(inputs: string[]) {
     if (!inputs.length) return;

From 3b0ba4fd2a70b10148d740291a1da63740d230da Mon Sep 17 00:00:00 2001
From: Jinma <9401060+jinmayamashita@users.noreply.github.com>
Date: Fri, 7 Jun 2024 10:28:04 +0900
Subject: [PATCH 8/8] add comment

---
 packages/start-frontend/__tests__/cli.test.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/start-frontend/__tests__/cli.test.ts b/packages/start-frontend/__tests__/cli.test.ts
index dd5c7fd9d..ea7ac5476 100644
--- a/packages/start-frontend/__tests__/cli.test.ts
+++ b/packages/start-frontend/__tests__/cli.test.ts
@@ -45,6 +45,8 @@ describe("start-frontend", () => {
   beforeAll(() => {
     // Initialize TEST_DIR before all tests
     testDir =
+      // Use the default GitHub Actions temporary directory for development in the CI environment.
+      // refs: https://docs.github.com/en/actions/learn-github-actions/variables#default-environment-variables
       // eslint-disable-next-line turbo/no-undeclared-env-vars
       process.env.RUNNER_TEMP ||
       execSync("mktemp -d -t my-test").toString("utf-8");