From 6683ffb890b2e68ab7154ba36376f93fc820120a Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Sun, 30 Jun 2024 20:02:13 +0200 Subject: [PATCH] Clarify storybook tests (#6073) In this PR, I'm simplifying storybook setup: 1) Remove build --test configuration that prevent autodocs. We are not using autodocs at all (the dev experience is not good enough), so I have completely disabled it. 2) Clarify `serve` vs `test` vs `serve-and-test` configurations After this PR: - you can serve storybook in two modes: `npx nx run twenty-front:storybook:serve:dev` and `npx nx run twenty-front:storybook:serve:static` - you can run tests agains an already served storybook (this is useful in dev so you don't have to rebuild everytime to run tests): `npx nx run twenty-front:storybook:test` - you can conbine both: `npx nx run twenty-front:storybook:serve-and-test:static` --- .github/workflows/ci-front.yaml | 6 +- nx.json | 76 +++++++++---------- packages/twenty-front/.storybook/main.ts | 12 --- packages/twenty-front/project.json | 34 ++++----- .../DateTimeFieldInput.stories.tsx | 12 +-- .../__stories__/DatePicker.stories.tsx | 2 +- packages/twenty-ui/.storybook/main.ts | 9 --- packages/twenty-ui/project.json | 6 +- .../frontend-commands.mdx | 6 +- 9 files changed, 64 insertions(+), 99 deletions(-) diff --git a/.github/workflows/ci-front.yaml b/.github/workflows/ci-front.yaml index 265bf6d03a..aa69557237 100644 --- a/.github/workflows/ci-front.yaml +++ b/.github/workflows/ci-front.yaml @@ -39,7 +39,7 @@ jobs: - name: Front / Write .env run: npx nx reset:env twenty-front - name: Front / Build storybook - run: npx nx storybook:build twenty-front --configuration=test + run: npx nx storybook:build twenty-front front-sb-test: runs-on: ci-8-cores needs: front-sb-build @@ -64,7 +64,7 @@ jobs: - name: Front / Write .env run: npx nx reset:env twenty-front - name: Run storybook tests - run: npx nx storybook:static:test twenty-front --configuration=${{ matrix.storybook_scope }} + run: npx nx storybook:serve-and-test:static twenty-front --configuration=${{ matrix.storybook_scope }} front-sb-test-performance: runs-on: ci-8-cores env: @@ -80,7 +80,7 @@ jobs: - name: Front / Write .env run: npx nx reset:env twenty-front - name: Run storybook tests - run: npx nx storybook:performance:test twenty-front + run: npx nx storybook:serve-and-test:static:performance twenty-front front-chromatic-deployment: if: contains(github.event.pull_request.labels.*.name, 'run-chromatic') || github.event_name == 'push' needs: front-sb-build diff --git a/nx.json b/nx.json index 40a7d1a3d7..81be371e47 100644 --- a/nx.json +++ b/nx.json @@ -116,14 +116,9 @@ "command": "storybook build", "output-dir": "storybook-static", "config-dir": ".storybook" - }, - "configurations": { - "test": { - "command": "storybook build --test" - } } }, - "storybook:dev": { + "storybook:serve:dev": { "executor": "nx:run-commands", "cache": true, "dependsOn": ["^build"], @@ -133,7 +128,7 @@ "config-dir": ".storybook" } }, - "storybook:static": { + "storybook:serve:static": { "executor": "nx:run-commands", "dependsOn": ["storybook:build"], "options": { @@ -143,9 +138,33 @@ "host": "localhost", "port": 6006, "silent": true - }, - "configurations": { - "test": {} + } + }, + "storybook:test": { + "executor": "nx:run-commands", + "cache": true, + "inputs": ["^default", "excludeTests"], + "outputs": ["{projectRoot}/coverage/storybook"], + "options": { + "cwd": "{projectRoot}", + "commands": [ + "test-storybook --url http://localhost:{args.port} --maxWorkers=3 --coverage --coverageDirectory={args.coverageDir}", + "nx storybook:coverage {projectName} --coverageDir={args.coverageDir}" + ], + "parallel": false, + "coverageDir": "coverage/storybook", + "port": 6006 + } + }, + "storybook:test:no-coverage": { + "executor": "nx:run-commands", + "inputs": ["^default", "excludeTests"], + "options": { + "cwd": "{projectRoot}", + "commands": [ + "test-storybook --url http://localhost:{args.port} --maxWorkers=3" + ], + "port": 6006 } }, "storybook:coverage": { @@ -169,47 +188,20 @@ "text": { "reporter": "text" } } }, - "storybook:test": { + "storybook:serve-and-test:static": { "executor": "nx:run-commands", - "cache": true, - "inputs": ["^default", "excludeTests"], - "outputs": ["{projectRoot}/coverage/storybook"], "options": { - "cwd": "{projectRoot}", "commands": [ - "test-storybook --url http://localhost:{args.port} --maxWorkers=3 --coverage --coverageDirectory={args.coverageDir}", - "nx storybook:coverage {projectName} --coverageDir={args.coverageDir}" - ], - "parallel": false, - "coverageDir": "coverage/storybook", - "port": 6006 - } - }, - "storybook:test:nocoverage": { - "executor": "nx:run-commands", - "inputs": ["^default", "excludeTests"], - "options": { - "cwd": "{projectRoot}", - "commands": [ - "test-storybook --url http://localhost:{args.port} --maxWorkers=3" + "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:serve:static {projectName} --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port}'" ], "port": 6006 } }, - "storybook:static:test": { + "storybook:serve-and-test:static:performance": { "executor": "nx:run-commands", "options": { "commands": [ - "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:static {projectName} --port={args.port} --configuration=test' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port}'" - ], - "port": 6006 - } - }, - "storybook:performance:test": { - "executor": "nx:run-commands", - "options": { - "commands": [ - "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:dev {projectName} --configuration=performance --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test:nocoverage {projectName} --port={args.port} --configuration=performance'" + "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:serve:dev {projectName} --configuration=performance --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test:no-coverage {projectName} --port={args.port} --configuration=performance'" ], "port": 6006 } @@ -220,7 +212,7 @@ "cwd": "{projectRoot}", "commands": [ { - "command": "nx storybook:build {projectName} --configuration=test", + "command": "nx storybook:build {projectName}", "forwardAllArgs": false }, "cross-var chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --storybook-build-dir=storybook-static {args.ci}" diff --git a/packages/twenty-front/.storybook/main.ts b/packages/twenty-front/.storybook/main.ts index 764ae8aecf..633df49b3d 100644 --- a/packages/twenty-front/.storybook/main.ts +++ b/packages/twenty-front/.storybook/main.ts @@ -45,17 +45,5 @@ const config: StorybookConfig = { name: '@storybook/react-vite', options: {}, }, - build: { - test: { - disableMDXEntries: true, - disabledAddons: [ - '@storybook/addon-docs', - '@storybook/addon-essentials/docs', - ], - }, - }, - docs: { - autodocs: false, - }, }; export default config; diff --git a/packages/twenty-front/project.json b/packages/twenty-front/project.json index 332bfc4faf..4c427109b0 100644 --- a/packages/twenty-front/project.json +++ b/packages/twenty-front/project.json @@ -62,12 +62,9 @@ "storybook:build": { "options": { "env": { "NODE_OPTIONS": "--max_old_space_size=5000" } - }, - "configurations": { - "test": {} } }, - "storybook:dev": { + "storybook:serve:dev": { "options": { "port": 6006 }, "configurations": { "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } }, @@ -76,11 +73,8 @@ "performance": { "env": { "STORYBOOK_SCOPE": "performance" } } } }, - "storybook:static": { - "options": { "port": 6006 }, - "configurations": { - "test": {} - } + "storybook:serve:static": { + "options": { "port": 6006 } }, "storybook:coverage": { "configurations": { @@ -100,18 +94,10 @@ "performance": { "env": { "STORYBOOK_SCOPE": "performance" } } } }, - "storybook:test:nocoverage": { - "configurations": { - "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } }, - "modules": { "env": { "STORYBOOK_SCOPE": "modules" } }, - "pages": { "env": { "STORYBOOK_SCOPE": "pages" } }, - "performance": { "env": { "STORYBOOK_SCOPE": "performance" } } - } - }, - "storybook:static:test": { + "storybook:serve-and-test:static": { "options": { "commands": [ - "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:static {projectName} --configuration=test --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port} --configuration={args.scope}'" + "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:serve:static {projectName} --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port} --configuration={args.scope}'" ], "port": 6006 }, @@ -122,7 +108,15 @@ "performance": { "scope": "performance" } } }, - "storybook:performance:test": {}, + "storybook:serve-and-test:static:performance": {}, + "storybook:test:no-coverage": { + "configurations": { + "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } }, + "modules": { "env": { "STORYBOOK_SCOPE": "modules" } }, + "pages": { "env": { "STORYBOOK_SCOPE": "pages" } }, + "performance": { "env": { "STORYBOOK_SCOPE": "performance" } } + } + }, "graphql:generate": { "executor": "nx:run-commands", "defaultConfiguration": "data", diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx index 00813a0bb1..5a8d23898b 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx @@ -12,7 +12,7 @@ import { DateTimeFieldInputProps, } from '../DateTimeFieldInput'; -const formattedDate = new Date(2022, 1, 1); +const formattedDate = new Date(2022, 0, 1, 2, 0, 0); const DateFieldValueSetterEffect = ({ value }: { value: Date }) => { const { setFieldValue } = useDateTimeField(); @@ -126,9 +126,9 @@ type Story = StoryObj; export const Default: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const div = await canvas.findByText('February'); + const div = await canvas.findByText('January'); - await expect(div.innerText).toContain('February'); + await expect(div.innerText).toContain('January'); }, }; @@ -138,7 +138,7 @@ export const ClickOutside: Story = { await expect(clickOutsideJestFn).toHaveBeenCalledTimes(0); - await canvas.findByText('February'); + await canvas.findByText('January'); const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div'); await userEvent.click(emptyDiv); @@ -151,7 +151,7 @@ export const Escape: Story = { await expect(escapeJestFn).toHaveBeenCalledTimes(0); const canvas = within(canvasElement); - await canvas.findByText('February'); + await canvas.findByText('January'); await userEvent.keyboard('{escape}'); await expect(escapeJestFn).toHaveBeenCalledTimes(1); @@ -163,7 +163,7 @@ export const Enter: Story = { await expect(enterJestFn).toHaveBeenCalledTimes(0); const canvas = within(canvasElement); - await canvas.findByText('February'); + await canvas.findByText('January'); await userEvent.keyboard('{enter}'); await expect(enterJestFn).toHaveBeenCalledTimes(1); diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/DatePicker.stories.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/DatePicker.stories.tsx index 2d7360cd6b..fdaf457543 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/DatePicker.stories.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/DatePicker.stories.tsx @@ -11,7 +11,7 @@ const meta: Meta = { argTypes: { date: { control: 'date' }, }, - args: { date: new Date('January 1, 2023 00:00:00') }, + args: { date: new Date('January 1, 2023 02:00:00') }, }; export default meta; diff --git a/packages/twenty-ui/.storybook/main.ts b/packages/twenty-ui/.storybook/main.ts index a27e1bccf9..270259adfd 100644 --- a/packages/twenty-ui/.storybook/main.ts +++ b/packages/twenty-ui/.storybook/main.ts @@ -16,15 +16,6 @@ const config: StorybookConfig = { name: '@storybook/react-vite', options: {}, }, - build: { - test: { - disableMDXEntries: true, - disabledAddons: [ - '@storybook/addon-docs', - '@storybook/addon-essentials/docs', - ], - }, - }, }; export default config; diff --git a/packages/twenty-ui/project.json b/packages/twenty-ui/project.json index 641a15fae5..951e50cd78 100644 --- a/packages/twenty-ui/project.json +++ b/packages/twenty-ui/project.json @@ -43,10 +43,10 @@ "test": {} } }, - "storybook:dev": { + "storybook:serve:dev": { "options": { "port": 6007 } }, - "storybook:static": { + "storybook:serve:static": { "options": { "buildTarget": "twenty-ui:storybook:build", "port": 6007 @@ -59,7 +59,7 @@ "storybook:test": { "options": { "port": 6007 } }, - "storybook:static:test": { + "storybook:serve-and-test:static": { "options": { "port": 6007 } } } diff --git a/packages/twenty-website/src/content/developers/frontend-development/frontend-commands.mdx b/packages/twenty-website/src/content/developers/frontend-development/frontend-commands.mdx index 3dfcdd5f61..56dc4e718a 100644 --- a/packages/twenty-website/src/content/developers/frontend-development/frontend-commands.mdx +++ b/packages/twenty-website/src/content/developers/frontend-development/frontend-commands.mdx @@ -28,9 +28,9 @@ nx lint twenty-front ```bash nx test twenty-front# run jest tests -nx storybook:dev twenty-front# run storybook -nx storybook:test twenty-front# run tests # (needs yarn storybook:dev to be running) -nx storybook:coverage twenty-front # (needs yarn storybook:dev to be running) +nx storybook:serve:dev twenty-front# run storybook +nx storybook:test twenty-front# run tests # (needs yarn storybook:serve:dev to be running) +nx storybook:coverage twenty-front # (needs yarn storybook:serve:dev to be running) ``` ## Tech Stack