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

@@ -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

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": {
+    "storybook:test": {
-        "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}",
+          "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}'"
-          "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"
         ],
         "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}'"
+          "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
-      }
-    },
-    "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'"
         ],
         "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}"

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;

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": {
+    "storybook:serve:static": {
-      "options": { "port": 6006 },
+      "options": { "port": 6006 }
-      "configurations": {
-        "test": {}
-      }
     },
     "storybook:coverage": {
       "configurations": {
@@ -100,18 +94,10 @@
         "performance": { "env": { "STORYBOOK_SCOPE": "performance" } }
       }
     },
-    "storybook:test:nocoverage": {
+    "storybook:serve-and-test:static": {
-      "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": {
       "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",

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

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;

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;

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

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:serve:dev twenty-front# run storybook
-nx storybook:test twenty-front# run tests # (needs yarn storybook:dev to be running)
+nx storybook:test twenty-front# run tests # (needs yarn storybook:serve:dev to be running)
-nx storybook:coverage twenty-front # (needs yarn storybook:dev to be running)
+nx storybook:coverage twenty-front # (needs yarn storybook:serve:dev to be running)
 ```
 
 ## Tech Stack