Increase storybook pages code coverage

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');
+    await canvas.findByText('sfsfdsf API Key', undefined, { timeout: 3000 });
   },
 };
 
 export const RegenerateApiKey: Story = {
   play: async ({ step }) => {
     const canvas = within(document.body);
-    await canvas.findByText('sfsfdsf API Key', undefined, { timeout: 10000 });
-
-    // userEvent.dblClick(await canvas.findByDisplayValue('sfsfdsf'));
+    await canvas.findByText('sfsfdsf API Key', undefined, { timeout: 3000 });
 
     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,
+    });
   },
 };