fix: fix storybook pages tests coverage (#5319)

.github/workflows/ci-front.yaml

@@ -38,7 +38,7 @@ jobs:
       - name: Front / Write .env
         run: npx nx reset:env twenty-front
       - name: Front / Build storybook
-        run: NODE_OPTIONS=--max-old-space-size=5000 npx nx storybook:build twenty-front
+        run: npx nx storybook:build twenty-front
   front-sb-test:
     runs-on: ci-8-cores
     needs: front-sb-build
@@ -87,7 +87,7 @@ jobs:
           touch .env
           echo "REACT_APP_SERVER_BASE_URL: $REACT_APP_SERVER_BASE_URL" >> .env
       - name: Publish to Chromatic
-        run: NODE_OPTIONS=--max-old-space-size=5000 npx nx run twenty-front:chromatic:ci
+        run: npx nx run twenty-front:chromatic:ci
   front-task:
     runs-on: ubuntu-latest
     strategy:

nx.json

@@ -106,30 +106,38 @@
       "dependsOn": ["^build"]
     },
     "storybook:build": {
-      "executor": "@nx/storybook:build",
+      "executor": "nx:run-commands",
       "cache": true,
       "dependsOn": ["^build"],
       "inputs": ["^default", "excludeTests"],
-      "outputs": ["{options.outputDir}"],
+      "outputs": ["{options.output-dir}"],
       "options": {
-        "outputDir": "{projectRoot}/storybook-static",
+        "cwd": "{projectRoot}",
-        "configDir": "{projectRoot}/.storybook"
+        "command": "storybook build",
+        "output-dir": "storybook-static",
+        "config-dir": ".storybook"
       }
     },
     "storybook:dev": {
-      "executor": "@nx/storybook:storybook",
+      "executor": "nx:run-commands",
       "cache": true,
       "dependsOn": ["^build"],
       "options": {
-        "configDir": "{projectRoot}/.storybook"
+        "cwd": "{projectRoot}",
+        "command": "storybook dev",
+        "config-dir": ".storybook"
       }
     },
     "storybook:static": {
-      "executor": "@nx/web:file-server",
+      "executor": "nx:run-commands",
+      "dependsOn": ["storybook:build"],
       "options": {
-        "staticFilePath": "{projectRoot}/storybook-static",
+        "cwd": "{projectRoot}",
-        "parallel": false,
+        "command": "npx http-server {args.staticDir} -a={args.host} --port={args.port} --silent={args.silent}",
-        "watch": false
+        "staticDir": "storybook-static",
+        "host": "localhost",
+        "port": 6006,
+        "silent": true
       }
     },
     "storybook:coverage": {
@@ -148,6 +156,9 @@
         "command": "npx nyc report --reporter={args.reporter} --reporter=text-summary -t {args.coverageDir} --report-dir {args.coverageDir} --check-coverage --cwd={projectRoot}",
         "coverageDir": "coverage/storybook",
         "reporter": "lcov"
+      },
+      "configurations": {
+        "text": { "reporter": "text" }
       }
     },
     "storybook:test": {
@@ -179,8 +190,9 @@
       "executor": "nx:run-commands",
       "options": {
         "cwd": "{projectRoot}",
-        "command": "cross-var chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --build-script-name=build-storybook --exit-zero-on-changes={args.ci}",
+        "command": "cross-var chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --build-script-name={args.targetPackageJsonScript} --exit-zero-on-changes={args.ci}",
-        "ci": false
+        "ci": false,
+        "targetPackageJsonScript": "storybook:build:chromatic"
       },
       "configurations": {
         "ci": {

packages/twenty-front/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "npx vite build && sh ./scripts/inject-runtime-env.sh",
     "build:sourcemaps": "VITE_BUILD_SOURCEMAP=true NODE_OPTIONS=--max-old-space-size=4096 npx nx build",
-    "build-storybook": "cd ../.. && npx nx storybook:build twenty-front",
+    "storybook:build:chromatic": "nx storybook:build",
     "start:prod": "NODE_ENV=production npx vite --host",
     "tsup": "npx tsup"
   },

packages/twenty-front/project.json

@@ -59,26 +59,33 @@
       }
     },
     "test": {},
-    "storybook:build": {},
+    "storybook:build": {
-    "storybook:build:scope": {
-      "executor": "nx:run-commands",
       "options": {
-        "command": "nx storybook:build twenty-front"
+        "env": { "NODE_OPTIONS": "--max_old_space_size=5000" }
       },
       "configurations": {
-        "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
+        "docs": {
-        "modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
+          "env": {
-        "pages": { "env": { "STORYBOOK_SCOPE": "pages" } }
+            "NODE_OPTIONS": "--max_old_space_size=5000",
+            "STORYBOOK_SCOPE": "ui-docs"
+          }
+        },
+        "modules": {
+          "env": {
+            "NODE_OPTIONS": "--max_old_space_size=5000",
+            "STORYBOOK_SCOPE": "modules"
+          }
+        },
+        "pages": {
+          "env": {
+            "NODE_OPTIONS": "--max_old_space_size=5000",
+            "STORYBOOK_SCOPE": "pages"
+          }
+        }
       }
     },
     "storybook:dev": {
-      "options": { "port": 6006 }
+      "options": { "port": 6006 },
-    },
-    "storybook:dev:scope": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "nx storybook:dev twenty-front"
-      },
       "configurations": {
         "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
         "modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
@@ -86,16 +93,7 @@
       }
     },
     "storybook:static": {
-      "options": {
+      "options": { "port": 6006 },
-        "buildTarget": "twenty-front:storybook:build",
-        "port": 6006
-      }
-    },
-    "storybook:static:scope": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "nx storybook:static twenty-front"
-      },
       "configurations": {
         "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
         "modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
@@ -104,15 +102,14 @@
     },
     "storybook:coverage": {
       "configurations": {
+        "text": {},
         "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
         "modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
         "pages": { "env": { "STORYBOOK_SCOPE": "pages" } }
       }
     },
     "storybook:test": {
-      "options": {
+      "options": { "port": 6006 },
-        "port": 6006
-      },
       "configurations": {
         "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
         "modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
@@ -124,8 +121,7 @@
         "commands": [
           "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:static {projectName} --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port} --configuration={args.scope}'"
         ],
-        "port": 6006,
+        "port": 6006
-        "env": { "NODE_OPTIONS": "--max-old-space-size=5000" }
       },
       "configurations": {
         "docs": { "scope": "ui-docs" },

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx

@@ -51,7 +51,11 @@ export const SettingsObjectFieldActiveActionDropdown = ({
     <Dropdown
       dropdownId={dropdownId}
       clickableComponent={
-        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+        <LightIconButton
+          aria-label="Active Field Options"
+          Icon={IconDotsVertical}
+          accent="tertiary"
+        />
       }
       dropdownComponents={
         <DropdownMenu width="160px">

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx

@@ -67,7 +67,11 @@ export const SettingsObjectSummaryCard = ({
           <Dropdown
             dropdownId={dropdownId}
             clickableComponent={
-              <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+              <LightIconButton
+                aria-label="Object Options"
+                Icon={IconDotsVertical}
+                accent="tertiary"
+              />
             }
             dropdownComponents={
               <DropdownMenu width="160px">

packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { v4 } from 'uuid';
 
 import { RecordIndexContainer } from '@/object-record/record-index/components/RecordIndexContainer';
+import { RecordIndexPageHeader } from '@/object-record/record-index/components/RecordIndexPageHeader';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCell';
 import { useSelectedTableCellEditMode } from '@/object-record/record-table/record-table-cell/hooks/useSelectedTableCellEditMode';
@@ -10,7 +11,6 @@ import { PageBody } from '@/ui/layout/page/PageBody';
 import { PageContainer } from '@/ui/layout/page/PageContainer';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
-import { RecordIndexPageHeader } from '~/pages/object-record/RecordIndexPageHeader';
 import { capitalize } from '~/utils/string/capitalize';
 
 const StyledIndexContainer = styled.div`

packages/twenty-front/src/pages/object-record/__stories__/RecordIndexPage.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { RecordIndexPage } from '../RecordIndexPage';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/ObjectRecord/RecordIndexPage',
+  component: RecordIndexPage,
+  decorators: [PageDecorator],
+  args: {
+    routePath: '/objects/:objectNamePlural',
+    routeParams: {
+      ':objectNamePlural': 'companies',
+    },
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof RecordIndexPage>;
+
+export const Default: Story = {};

packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
 
 import {
   PageDecorator,
@@ -37,3 +38,38 @@ export const CustomObject: Story = {
     routeParams: { ':objectSlug': 'workspaces' },
   },
 };
+
+export const ObjectDropdownMenu: Story = {
+  play: async ({ canvasElement }) => {
+    await sleep(100);
+
+    const canvas = within(canvasElement);
+    const objectSummaryVerticalDotsIconButton = await canvas.findByRole(
+      'button',
+      {
+        name: 'Object Options',
+      },
+    );
+
+    await userEvent.click(objectSummaryVerticalDotsIconButton);
+
+    await canvas.findByText('Edit');
+    await canvas.findByText('Deactivate');
+  },
+};
+
+export const FieldDropdownMenu: Story = {
+  play: async ({ canvasElement }) => {
+    await sleep(100);
+
+    const canvas = within(canvasElement);
+    const [fieldVerticalDotsIconButton] = await canvas.findAllByRole('button', {
+      name: 'Active Field Options',
+    });
+
+    await userEvent.click(fieldVerticalDotsIconButton);
+
+    await canvas.findByText('View');
+    await canvas.findByText('Deactivate');
+  },
+};