TWNTY-3968 - Fix and enhance storybook:pages tests (#4072)

* Fix and enhance storybook:pages tests

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

* Fix and enhance storybook:pages tests

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

* Add minor refactors

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

* Revert temporary changes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

* Fix tests

* Fix tests duplicated locale

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/nyc.config.cjs

@@ -16,7 +16,7 @@ const pagesCoverage = {
   statements: 50,
   lines: 50,
   functions: 45,
-  exclude: ['src/generated/**/*', 'src/modules/**/*'],
+  exclude: ['src/generated/**/*', 'src/modules/**/*', '*.ts'],
 };
 
 const storybookStoriesFolders = process.env.STORYBOOK_SCOPE;

packages/twenty-front/package.json

@@ -32,7 +32,7 @@
     "storybook:test": "test-storybook",
     "storybook:test-slow": "test-storybook --maxWorkers=3",
     "storybook:test-single-worker": "test-storybook --maxWorkers=1",
-    "storybook:coverage": "yarn storybook:test-slow --coverage && npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook --check-coverage",
+    "storybook:coverage": "yarn storybook:test-slow --coverage ; npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook --check-coverage",
     "storybook:modules:coverage": "STORYBOOK_SCOPE=modules yarn storybook:coverage",
     "storybook:pages:coverage": "STORYBOOK_SCOPE=pages yarn storybook:coverage",
     "graphql:data:generate": "dotenv cross-var graphql-codegen -- --config codegen.cjs",

packages/twenty-front/src/modules/settings/accounts/constants/ianaTimeZones.ts

@@ -452,7 +452,6 @@ export const ianaTimeZones = [
   'Europe/Kaliningrad',
   'Europe/Kiev',
   'Europe/Kirov',
-  'Europe/Kyiv',
   'Europe/Lisbon',
   'Europe/Ljubljana',
   'Europe/London',

packages/twenty-front/src/pages/auth/__stories__/PasswordResert.stories.tsx

@@ -0,0 +1,46 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+import { graphql, HttpResponse } from 'msw';
+
+import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
+import { PasswordReset } from '~/pages/auth/PasswordReset';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Auth/PasswordReset',
+  component: PasswordReset,
+  decorators: [PageDecorator],
+  args: { routePath: '/reset-password/resetToken' },
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
+          return HttpResponse.json({
+            data: {
+              currentUser: mockedOnboardingUsersData[0],
+            },
+          });
+        }),
+        graphqlMocks.handlers,
+      ],
+    },
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof PasswordReset>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText('Reset Password');
+  },
+};

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

@@ -0,0 +1,90 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+import { graphql, HttpResponse } from 'msw';
+
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedPeopleData } from '~/testing/mock-data/people';
+import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
+
+import { RecordShowPage } from '../RecordShowPage';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/ObjectRecord/RecordShowPage',
+  component: RecordShowPage,
+  decorators: [PageDecorator],
+  args: {
+    routePath: '/object/:objectNameSingular/:objectRecordId',
+    routeParams: {
+      ':objectNameSingular': 'person',
+      ':objectRecordId': '1234',
+    },
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('FindOneperson', () => {
+          return HttpResponse.json({
+            data: {
+              person: mockedPeopleData[0],
+            },
+          });
+        }),
+        graphql.query('FindManyActivityTargets', () => {
+          return HttpResponse.json({
+            data: {
+              activityTargets: {
+                edges: [],
+                pageInfo: {
+                  hasNextPage: false,
+                  startCursor: '',
+                  endCursor: '',
+                },
+                totalCount: 0,
+              },
+            },
+          });
+        }),
+        graphql.query('FindOneworkspaceMember', () => {
+          return HttpResponse.json({
+            data: {
+              workspaceMember: mockedWorkspaceMemberData,
+            },
+          });
+        }),
+        graphql.query('FindManyViews', () => {
+          return HttpResponse.json({
+            data: {
+              views: {
+                edges: [],
+                pageInfo: {
+                  hasNextPage: false,
+                  startCursor: '1234',
+                  endCursor: '1234',
+                },
+                totalCount: 0,
+              },
+            },
+          });
+        }),
+        graphqlMocks.handlers,
+      ],
+    },
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof RecordShowPage>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findAllByText('Alexandre Prot');
+    await canvas.findByText('Add your first Activity');
+  },
+};

packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccounts.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 
 import {
   PageDecorator,
@@ -25,4 +26,10 @@ export default meta;
 
 export type Story = StoryObj<typeof SettingsAccounts>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText('Connected accounts');
+  },
+};

packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccountsEmailsInboxSettings.stories.tsx

@@ -0,0 +1,78 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+import { graphql, HttpResponse } from 'msw';
+
+import { SettingsAccountsEmailsInboxSettings } from '~/pages/settings/accounts/SettingsAccountsEmailsInboxSettings';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/Accounts/SettingsAccountsEmailsInboxSettings',
+  component: SettingsAccountsEmailsInboxSettings,
+  decorators: [PageDecorator],
+  args: {
+    routePath: '/settings/accounts/emails/:accountUuid',
+    routeParams: { ':accountUuid': '123' },
+  },
+  parameters: {
+    layout: 'fullscreen',
+    msw: {
+      handlers: [
+        graphql.query('FindOnemessageChannel', () => {
+          return HttpResponse.json({
+            data: {
+              messageChannel: {
+                id: '1',
+                visibility: 'share_everything',
+                messageThreads: { edges: [] },
+                createdAt: '2021-08-27T12:00:00Z',
+                type: 'email',
+                updatedAt: '2021-08-27T12:00:00Z',
+                targetUrl: 'https://example.com/webhook',
+                connectedAccountId: '1',
+                handle: 'handle',
+                connectedAccount: {
+                  id: '1',
+                  handle: 'handle',
+                  updatedAt: '2021-08-27T12:00:00Z',
+                  accessToken: 'accessToken',
+                  messageChannels: { edges: [] },
+                  refreshToken: 'refreshToken',
+                  __typename: 'ConnectedAccount',
+                  accountOwner: { id: '1', __typename: 'WorkspaceMember' },
+                  provider: 'provider',
+                  createdAt: '2021-08-27T12:00:00Z',
+                  accountOwnerId: '1',
+                },
+                __typename: 'MessageChannel',
+              },
+            },
+          });
+        }),
+        graphqlMocks.handlers,
+      ],
+    },
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsAccountsEmailsInboxSettings>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText('Email visibility');
+    await canvas.findByText(
+      'Define what will be visible to other users in your workspace',
+    );
+    await canvas.findByText('Contact auto-creation');
+    await canvas.findByText(
+      'Automatically create contacts for people you’ve sent emails to',
+    );
+  },
+};

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

@@ -1,11 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
 
 import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { sleep } from '~/testing/sleep';
 
 import { SettingsNewObject } from '../SettingsNewObject';
 
@@ -27,6 +27,17 @@ export type Story = StoryObj<typeof SettingsNewObject>;
 
 export const WithStandardSelected: Story = {
   play: async () => {
-    await sleep(100);
+    const canvas = within(document.body);
+    const listingInput = await canvas.findByPlaceholderText('Listing');
+    const pluralInput = await canvas.findByPlaceholderText('Listings');
+    const descriptionInput = await canvas.findByPlaceholderText(
+      'Write a description',
+    );
+    const saveButton = await canvas.findByText('Save');
+    await userEvent.type(listingInput, 'Company');
+    await userEvent.type(pluralInput, 'Companies');
+    await userEvent.type(descriptionInput, 'Test Description');
+
+    await userEvent.click(saveButton);
   },
 };

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

@@ -1,11 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 
 import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { sleep } from '~/testing/sleep';
 
 import { SettingsObjectNewFieldStep1 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep1';
 
@@ -28,7 +28,12 @@ export default meta;
 export type Story = StoryObj<typeof SettingsObjectNewFieldStep1>;
 
 export const Default: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
-    await sleep(100);
+    const canvas = within(canvasElement);
+    await canvas.findByText('Settings');
+    await canvas.findByText('Objects');
+    await canvas.findByText('Companies');
+    await canvas.findByText('Check disabled fields');
+    await canvas.findByText('Add Custom Field');
   },
 };

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

@@ -1,11 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
 
 import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { sleep } from '~/testing/sleep';
 
 import { SettingsObjectNewFieldStep2 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep2';
 
@@ -28,7 +28,24 @@ export default meta;
 export type Story = StoryObj<typeof SettingsObjectNewFieldStep2>;
 
 export const Default: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
-    await sleep(100);
+    const canvas = within(canvasElement);
+    await canvas.findByText('Settings');
+    await canvas.findByText('Objects');
+    await canvas.findByText('Name and description');
+
+    const employeeInput = await canvas.findByPlaceholderText('Employees');
+    await userEvent.type(employeeInput, 'Test');
+
+    const descriptionInput = await canvas.findByPlaceholderText(
+      'Write a description',
+    );
+
+    await userEvent.type(descriptionInput, 'Test description');
+    await canvas.findByText('Type and values');
+
+    const saveButton = await canvas.findByText('Save');
+
+    await userEvent.click(saveButton);
   },
 };

packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopersApiKeysDetail.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 import { graphql, HttpResponse } from 'msw';
 
 import { SettingsDevelopersApiKeyDetail } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail';
@@ -7,7 +8,6 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { sleep } from '~/testing/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Developers/ApiKeys/SettingsDevelopersApiKeyDetail',
@@ -47,7 +47,9 @@ export default meta;
 export type Story = StoryObj<typeof SettingsDevelopersApiKeyDetail>;
 
 export const Default: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
-    await sleep(100);
+    const canvas = within(canvasElement);
+    await canvas.findByText('Settings');
+    await canvas.findByText('Regenerate an Api key');
   },
 };

packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopersApiKeysNew.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
 
 import { SettingsDevelopersApiKeysNew } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew';
 import {
@@ -6,7 +7,6 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { sleep } from '~/testing/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Developers/ApiKeys/SettingsDevelopersApiKeysNew',
@@ -23,7 +23,21 @@ export default meta;
 export type Story = StoryObj<typeof SettingsDevelopersApiKeysNew>;
 
 export const Default: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
-    await sleep(100);
+    const canvas = within(canvasElement);
+    await canvas.findByText('Settings');
+    await canvas.findByText('New API Key');
+    await canvas.findByText('Name');
+    await canvas.findByText('Expiration Date');
+
+    const input = await canvas.findByPlaceholderText(
+      'E.g. backoffice integration',
+    );
+
+    await userEvent.type(input, 'Test');
+
+    const saveButton = await canvas.findByText('Save');
+
+    await userEvent.click(saveButton);
   },
 };

packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopersWebhooksDetail.stories.tsx

@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+import { graphql, HttpResponse } from 'msw';
+
+import { SettingsDevelopersWebhooksDetail } from '~/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/Developers/SettingsDevelopersWebhooksDetail',
+  component: SettingsDevelopersWebhooksDetail,
+  decorators: [PageDecorator],
+  args: {
+    routePath: '/settings/developers/webhooks/:webhookId',
+    routeParams: { ':webhookId': '1234' },
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('FindOnewebhook', () => {
+          return HttpResponse.json({
+            data: {
+              webhook: {
+                id: '1',
+                createdAt: '2021-08-27T12:00:00Z',
+                targetUrl: 'https://example.com/webhook',
+                updatedAt: '2021-08-27T12:00:00Z',
+                operation: 'create',
+                __typename: 'Webhook',
+              },
+            },
+          });
+        }),
+        graphqlMocks.handlers,
+      ],
+    },
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsDevelopersWebhooksDetail>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText(
+      'We will send POST requests to this endpoint for every new event',
+    );
+    await canvas.findByText('Delete this integration');
+  },
+};

packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopersWebhooksNew.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+
+import { SettingsDevelopersWebhooksNew } from '~/pages/settings/developers/webhooks/SettingsDevelopersWebhooksNew';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/Developers/SettingsDevelopersWebhooksNew',
+  component: SettingsDevelopersWebhooksNew,
+  decorators: [PageDecorator],
+  args: { routePath: '/settings/developers' },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsDevelopersWebhooksNew>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText(
+      'We will send POST requests to this endpoint for every new event',
+    );
+  },
+};