Increase storybook pages coverage (#4885)

On FE:
- refreshing metadata mocks
- updating jest tests
- fixing storybook pages coverage
- fixing storybook modules coverage

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

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -7,6 +8,7 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
 
 import { SettingsBilling } from '../SettingsBilling';
 
@@ -24,4 +26,11 @@ export default meta;
 
 export type Story = StoryObj<typeof SettingsBilling>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    sleep(1000);
+
+    await canvas.findByRole('button', { name: 'View billing details' });
+  },
+};

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

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -7,6 +8,7 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
 
 import { SettingsAccountsCalendars } from '../SettingsAccountsCalendars';
 
@@ -27,4 +29,11 @@ export default meta;
 
 export type Story = StoryObj<typeof SettingsAccountsCalendars>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    sleep(100);
+
+    await canvas.findByText('Calendar settings');
+  },
+};

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

@@ -1,4 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+import { graphql, HttpResponse } from 'msw';
 
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -8,6 +10,7 @@ import {
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
+import { sleep } from '~/testing/sleep';
 
 import { SettingsAccountsCalendarsSettings } from '../SettingsAccountsCalendarsSettings';
 
@@ -21,7 +24,26 @@ const meta: Meta<PageDecoratorArgs> = {
   },
   parameters: {
     layout: 'fullscreen',
-    msw: graphqlMocks,
+    msw: {
+      handlers: [
+        ...graphqlMocks.handlers,
+        graphql.query('FindOneCalendarChannel', () => {
+          return HttpResponse.json({
+            data: {
+              calendarChannel: {
+                edges: [],
+                pageInfo: {
+                  hasNextPage: false,
+                  hasPreviousPage: false,
+                  startCursor: null,
+                  endCursor: null,
+                },
+              },
+            },
+          });
+        }),
+      ],
+    },
   },
 };
 
@@ -29,4 +51,11 @@ export default meta;
 
 export type Story = StoryObj<typeof SettingsAccountsCalendarsSettings>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    sleep(100);
+
+    await canvas.findByText('Event visibility');
+  },
+};

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

@@ -34,6 +34,6 @@ export const StandardObject: Story = {
 
 export const CustomObject: Story = {
   args: {
-    routeParams: { ':objectSlug': 'workspaces' },
+    routeParams: { ':objectSlug': 'listings' },
   },
 };

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

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 
 import { SettingsDevelopers } from '~/pages/settings/developers/SettingsDevelopers';
 import {
@@ -23,7 +24,10 @@ export default meta;
 export type Story = StoryObj<typeof SettingsDevelopers>;
 
 export const Default: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
     await sleep(100);
+
+    await canvas.findByText('API keys');
   },
 };

packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationDatabase.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -8,6 +9,7 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Integrations/SettingsIntegrationDatabase',
@@ -26,4 +28,11 @@ export default meta;
 
 export type Story = StoryObj<typeof SettingsIntegrationDatabase>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    sleep(1000);
+
+    await canvas.findByText('PostgreSQL database');
+  },
+};

packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationDatabaseConnection.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -8,6 +9,7 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Integrations/SettingsIntegrationDatabaseConnection',
@@ -29,4 +31,12 @@ export default meta;
 
 export type Story = StoryObj<typeof SettingsIntegrationDatabaseConnection>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    within(canvasElement);
+    sleep(1000);
+
+    // Todo: Implement mocks in graphqlMocks for databaseConnection
+    // await canvas.findByText('Tables');
+  },
+};

packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationNewDatabaseConnection.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 
 import { SettingsIntegrationNewDatabaseConnection } from '~/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection';
 import {
@@ -6,6 +7,7 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Integrations/SettingsIntegrationNewDatabaseConnection',
@@ -24,4 +26,11 @@ export default meta;
 
 export type Story = StoryObj<typeof SettingsIntegrationNewDatabaseConnection>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    sleep(100);
+
+    await canvas.findByText('Connect a new database');
+  },
+};