Improve start-frontend CLI test #1257

jinmayamashita · 2024-05-17T04:01:21Z

Pull Request Checklist

Description

In the existing tests, there was no check to verify if the output generated by running the CLI was correct, so I added it.

Context

Resolves #1255

Before

ml-frontend/packages/start-frontend/__tests__/cli.test.ts

Lines 72 to 98 in e589781

    
           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 
        
               ); 
        
             }); 
        
           });

After

ml-frontend/packages/start-frontend/__tests__/cli.test.ts

Lines 108 to 174 in 6ebf40f

    
                 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`);

changeset-bot · 2024-05-17T04:01:24Z

🦋 Changeset detected

Latest commit: 3b0ba4f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
start-frontend	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

jinmayamashita

@ptrkdan @G-N555

Please review this PR.
Once it's merged, I will merge it into the PRs where CI tests are currently failing and check them again.

jinmayamashita · 2024-06-03T01:16:18Z

packages/start-frontend/__tests__/cli.test.ts

-      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".`);


Since the wording of the CLI prompts is likely to change frequnetly, I thought it would be better to test the contests of the files generated by running the CLI rather than the working itself.

I think the file contents may change a bit after this, since we're reorganizing the templates and how the projects are generated 😅

We'll just have to keep this in mind and modify the tests in order to accommodate any changes.

That's right. Even if we change the tests to check the file structure from the messages, the file structure might change frequently for a while, so we'll need to update the tests each time. 😶‍🌫️

In the future, it might be more flexible to focus on whether the generated files can be built, rather than their structure. 🤔

jinmayamashita · 2024-06-03T01:18:56Z

packages/start-frontend/__tests__/cli.test.ts

-const exe = util.promisify(child.execFile);
+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");


The test folder is set to be created within a suitable folder in the OS's temp directory. Since mktemp does not work well with Github Actions, I configured it to use the temp folder already specified in the environment variables.

jinmayamashita · 2024-06-03T01:24:46Z

packages/start-frontend/__tests__/cli.test.ts

-      expect(stdout.trim()).toBe(process.env.npm_package_version);
+      const { stdout } = await exe("node", [START_FRONTEND, "--version"]);
+      expect(stdout.trim()).toMatch(/^(\d+\.)?(\d+\.)?(\*|\d+)$/);


It doesn't need to be very strict; using a semantic versioning is sufficient.

jinmayamashita · 2024-06-03T01:26:28Z

packages/start-frontend/__tests__/cli.test.ts

+      const result = execSync(
+        `npx tree-cli -a -l 5 --base ${TEST_DIR}`
+      ).toString("utf-8");


I used tree-cli because it provides a visually clear folder structure. Do you have any other recommendations for a shell tree tool that works on macOS, Linux, and (if possible) Windows? 🤔

I've only ever used tree-cli myself. 🤔

ptrkdan

Thank you for working the tests! I think it's a good idea to test out the generated project; it definitely looks more meaningful!

I have a couple of questions regarding your implementation, though, so could you please take a look?

ptrkdan · 2024-06-05T04:55:54Z

packages/start-frontend/__tests__/cli.test.ts

-      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".`);


I think the file contents may change a bit after this, since we're reorganizing the templates and how the projects are generated 😅

We'll just have to keep this in mind and modify the tests in order to accommodate any changes.

packages/start-frontend/__tests__/cli.test.ts

ptrkdan · 2024-06-05T05:05:13Z

packages/start-frontend/__tests__/cli.test.ts

+      const result = execSync(
+        `npx tree-cli -a -l 5 --base ${TEST_DIR}`
+      ).toString("utf-8");


I've only ever used tree-cli myself. 🤔

ptrkdan · 2024-06-05T05:06:10Z

packages/start-frontend/__tests__/cli.test.ts


-const testDir = "my-test" as const;
+let TEST_DIR;


If it's not a constant, I think testDir would be more appropriate.

Done in 2661d0a

ptrkdan · 2024-06-05T05:09:06Z

packages/start-frontend/__tests__/cli.test.ts

-import concat from "concat-stream";
-import { spawn } from "node:child_process";
+import { execFile, exec, execSync } from "node:child_process";
+import fse from "fs-extra";


Minor suggestion, but what do you think about sorting the imports? (Opt + Shift + O on Mac VS Code)

It would be nice if there's a way to include it in the pre-commit script.

Opt + Shift + O on Mac VS Code

Personally, I've been using Helix as my editor recently 🙏🏼
But for import order, I think your suggestion to handle it with a precommit hook could work. 👍🏼

It would be nice if there's a way to include it in the pre-commit script.

Yeah, it would be nice if we could ensure this with a formatter, like

https://github.com/trivago/prettier-plugin-sort-imports

https://biomejs.dev/analyzer/import-sorting/

FYI @mvn-luanvu-hn @seiya0914

ptrkdan

LGTM!

test: improve cli test

24b2ccb

jinmayamashita self-assigned this May 17, 2024

jinmayamashita added the CLI label May 17, 2024

jinmayamashita changed the title ~~Improve cli test~~ Improve start-frontend CLI test May 17, 2024

jinmayamashita added 4 commits June 2, 2024 22:00

check generated files

65d88c1

ci temp dir

dc7f22c

Create wet-days-double.md

688770e

Merge branch 'main' into refactor/improve-cli-test

6ebf40f

jinmayamashita marked this pull request as ready for review June 2, 2024 13:14

jinmayamashita enabled auto-merge June 2, 2024 13:14

jinmayamashita requested review from ptrkdan and G-N555 June 3, 2024 00:49

jinmayamashita disabled auto-merge June 3, 2024 00:50

jinmayamashita commented Jun 3, 2024

View reviewed changes

refactor test codes

e2943c8

ptrkdan reviewed Jun 5, 2024

View reviewed changes

jinmayamashita marked this pull request as draft June 7, 2024 01:03

jinmayamashita added 3 commits June 7, 2024 10:06

rename to testDir

2661d0a

remove unused setting

a1d5bd7

add comment

3b0ba4f

jinmayamashita marked this pull request as ready for review June 7, 2024 01:29

jinmayamashita requested a review from ptrkdan June 7, 2024 01:29

jinmayamashita enabled auto-merge June 10, 2024 08:40

ptrkdan mentioned this pull request Jun 14, 2024

Improve CLI process #1268

Open

7 tasks

ptrkdan approved these changes Jun 25, 2024

View reviewed changes

jinmayamashita merged commit d128cde into main Jun 25, 2024
1 check passed

jinmayamashita deleted the refactor/improve-cli-test branch June 25, 2024 05:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve start-frontend CLI test #1257

Improve start-frontend CLI test #1257

jinmayamashita commented May 17, 2024 •

edited

Loading

changeset-bot bot commented May 17, 2024 •

edited

Loading

jinmayamashita left a comment •

edited

Loading

jinmayamashita Jun 3, 2024 •

edited

Loading

ptrkdan Jun 5, 2024

jinmayamashita Jun 7, 2024

jinmayamashita Jun 3, 2024

jinmayamashita Jun 3, 2024 •

edited

Loading

jinmayamashita Jun 3, 2024

ptrkdan Jun 5, 2024

ptrkdan left a comment

ptrkdan Jun 5, 2024

ptrkdan Jun 5, 2024

ptrkdan Jun 5, 2024

jinmayamashita Jun 7, 2024

ptrkdan Jun 5, 2024

jinmayamashita Jun 7, 2024

ptrkdan left a comment

	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
	);
	});
	});

	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`);

Improve start-frontend CLI test #1257

Improve start-frontend CLI test #1257

Conversation

jinmayamashita commented May 17, 2024 • edited Loading

Pull Request Checklist

Description

Context

Before

After

changeset-bot bot commented May 17, 2024 • edited Loading

🦋 Changeset detected

jinmayamashita left a comment • edited Loading

Choose a reason for hiding this comment

jinmayamashita Jun 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jinmayamashita Jun 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ptrkdan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ptrkdan left a comment

Choose a reason for hiding this comment

jinmayamashita commented May 17, 2024 •

edited

Loading

changeset-bot bot commented May 17, 2024 •

edited

Loading

jinmayamashita left a comment •

edited

Loading

jinmayamashita Jun 3, 2024 •

edited

Loading

jinmayamashita Jun 3, 2024 •

edited

Loading