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`

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": {
-      "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",

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