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`
2024-07-07 10:46:48 +03:00 · 2024-06-30 20:02:13 +02:00 · 2024-06-30 20:02:13 +02:00 · 6683ffb890
commit 6683ffb890
parent 36530dbe89
9 changed files with 64 additions and 99 deletions
--- 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
--- 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}"
--- 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;
--- 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",
--- 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<typeof DateFieldInputWithContext>;
 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);
--- 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<typeof InternalDatePicker> = {
  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;
--- 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;
--- 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 }
    }
  }
--- 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