Increase storybook pages code coverage

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RatingFieldDisplay.perf.stories.tsx

@@ -30,5 +30,5 @@ export const Performance = getProfilingStory({
   componentName: 'RatingFieldDisplay',
   averageThresholdInMs: 0.5,
   numberOfRuns: 30,
-  numberOfTestsPerRun: 100,
+  numberOfTestsPerRun: 50,
 });

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

@@ -6,8 +6,11 @@ import {
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
+import { userEvent, within } from '@storybook/test';
 import { SettingsAppearance } from '../profile/appearance/components/SettingsAppearance';
 
+Date.now = () => new Date('2022-06-13T12:33:37.000Z').getTime();
+
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsAppearance',
   component: SettingsAppearance,
@@ -15,6 +18,7 @@ const meta: Meta<PageDecoratorArgs> = {
   args: { routePath: '/settings/appearance' },
   parameters: {
     msw: graphqlMocks,
+    date: new Date(2021, 1, 1),
   },
 };
 
@@ -22,4 +26,72 @@ export default meta;
 
 export type Story = StoryObj<typeof SettingsAppearance>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText('Theme', undefined, {
+      timeout: 3000,
+    });
+
+    await canvas.findByText('Date and time');
+  },
+};
+
+export const DateTimeSettingsTimezone: Story = {
+  play: async () => {
+    const canvas = within(document.body);
+
+    await canvas.findByText('Date and time');
+
+    const timezoneSelect = await canvas.findByText(
+      '(GMT-04:00) Eastern Daylight Time - New York',
+    );
+
+    userEvent.click(timezoneSelect);
+
+    const systemSettingsOptions = await canvas.findByText(
+      '(GMT-11:00) Niue Time',
+    );
+
+    userEvent.click(systemSettingsOptions);
+
+    await canvas.findByText('(GMT-11:00) Niue Time');
+  },
+};
+
+export const DateTimeSettingsDateFormat: Story = {
+  play: async () => {
+    const canvas = within(document.body);
+
+    await canvas.findByText('Date and time');
+
+    const timeFormatSelect = await canvas.findByText('13 Jun, 2022');
+
+    userEvent.click(timeFormatSelect);
+
+    const timeFormatOptions = await canvas.findByText('Jun 13, 2022');
+
+    userEvent.click(timeFormatOptions);
+
+    await canvas.findByText('Jun 13, 2022');
+  },
+};
+
+export const DateTimeSettingsTimeFormat: Story = {
+  play: async () => {
+    const canvas = within(document.body);
+
+    await canvas.findByText('Date and time');
+
+    const timeFormatSelect = await canvas.findByText('24h (08:33)');
+
+    userEvent.click(timeFormatSelect);
+
+    const timeFormatOptions = await canvas.findByText('12h (8:33 AM)');
+
+    userEvent.click(timeFormatOptions);
+
+    await canvas.findByText('12h (8:33 AM)');
+  },
+};

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

@@ -30,6 +30,8 @@ export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    await canvas.findByText('Connected accounts');
+    await canvas.findByText('Connected accounts', undefined, {
+      timeout: 3000,
+    });
   },
 };

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

@@ -7,7 +7,6 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { sleep } from '~/utils/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Developers/SettingsDevelopers',
@@ -26,8 +25,9 @@ export type Story = StoryObj<typeof SettingsDevelopers>;
 export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await sleep(100);
 
-    await canvas.findByText('API keys');
+    await canvas.findByText('API keys', undefined, {
+      timeout: 3000,
+    });
   },
 };

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

@@ -50,17 +50,14 @@ export type Story = StoryObj<typeof SettingsDevelopersApiKeyDetail>;
 export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await canvas.findByText('Developers');
+    await canvas.findByText('sfsfdsf API Key', undefined, { timeout: 3000 });
-    await canvas.findByText('sfsfdsf API Key');
   },
 };
 
 export const RegenerateApiKey: Story = {
   play: async ({ step }) => {
     const canvas = within(document.body);
-    await canvas.findByText('sfsfdsf API Key', undefined, { timeout: 10000 });
+    await canvas.findByText('sfsfdsf API Key', undefined, { timeout: 3000 });
-
-    // userEvent.dblClick(await canvas.findByDisplayValue('sfsfdsf'));
 
     await userEvent.click(await canvas.findByText('Regenerate Key'));
 
@@ -88,7 +85,7 @@ export const RegenerateApiKey: Story = {
 export const DeleteApiKey: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await canvas.findByText('sfsfdsf API Key');
+    await canvas.findByText('sfsfdsf API Key', undefined, { timeout: 3000 });
 
     await userEvent.click(await canvas.findByText('Delete'));
 

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

@@ -7,7 +7,6 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { sleep } from '~/utils/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Integrations/SettingsIntegrationNewDatabaseConnection',
@@ -29,8 +28,9 @@ export type Story = StoryObj<typeof SettingsIntegrationNewDatabaseConnection>;
 export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    sleep(100);
 
-    await canvas.findByText('Connect a new database');
+    await canvas.findByText('Connect a new database', undefined, {
+      timeout: 3000,
+    });
   },
 };

packages/twenty-front/src/testing/decorators/PageDecorator.tsx

@@ -21,7 +21,9 @@ import { DefaultLayout } from '~/modules/ui/layout/page/DefaultLayout';
 import { UserProvider } from '~/modules/users/components/UserProvider';
 import { mockedApolloClient } from '~/testing/mockedApolloClient';
 
+import { RecoilDebugObserverEffect } from '@/debug/components/RecoilDebugObserver';
 import { PrefetchDataProvider } from '@/prefetch/components/PrefetchDataProvider';
+import { IconsProvider } from 'twenty-ui';
 import { FullHeightStorybookLayout } from '../FullHeightStorybookLayout';
 
 export type PageDecoratorArgs = {
@@ -63,6 +65,7 @@ const ApolloStorybookDevLogEffect = () => {
 const Providers = () => {
   return (
     <RecoilRoot>
+      <RecoilDebugObserverEffect />
       <ApolloProvider client={mockedApolloClient}>
         <ApolloStorybookDevLogEffect />
         <ApolloMetadataClientMockedProvider>
@@ -73,11 +76,13 @@ const Providers = () => {
               <FullHeightStorybookLayout>
                 <HelmetProvider>
                   <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-                    <ObjectMetadataItemsProvider>
+                    <IconsProvider>
-                      <PrefetchDataProvider>
+                      <ObjectMetadataItemsProvider>
-                        <Outlet />
+                        <PrefetchDataProvider>
-                      </PrefetchDataProvider>
+                          <Outlet />
-                    </ObjectMetadataItemsProvider>
+                        </PrefetchDataProvider>
+                      </ObjectMetadataItemsProvider>
+                    </IconsProvider>
                   </SnackBarProviderScope>
                 </HelmetProvider>
               </FullHeightStorybookLayout>

packages/twenty-front/src/testing/mock-data/view-fields.ts

@@ -4,7 +4,7 @@ export const mockedViewFieldsData = [
   // Companies
   {
     id: '79035310-e955-4986-a4a4-73f9d9949c6a',
-    fieldMetadataId: 'name',
+    fieldMetadataId: '9e123592-cd2b-471c-8143-3cc0b46089ef',
     viewId: mockedViewsData[0].id,
     position: 0,
     isVisible: true,

packages/twenty-front/src/testing/mock-data/views.ts

@@ -807,7 +807,7 @@ export const mockedViewsData = [
   {
     id: '37a8a866-eb17-4e76-9382-03143a2f6a80',
     name: 'All companies',
-    objectMetadataId: 'f9fd99a8-108f-4066-9675-cde753cf5de9',
+    objectMetadataId: '701aecf9-eb1c-4d84-9d94-b954b231b64b',
     type: 'table',
     icon: 'IconSkyline',
     key: 'INDEX',
@@ -850,7 +850,7 @@ export const mockedViewsData = [
   {
     id: '5c307222-1dd5-4ff3-ab06-8d990e9b3c74',
     name: 'All companies (v2)',
-    objectMetadataId: 'f9fd99a8-108f-4066-9675-cde753cf5de9',
+    objectMetadataId: '701aecf9-eb1c-4d84-9d94-b954b231b64b',
     type: 'table',
     icon: 'IconSkyline',
     key: 'INDEX',