Increase storybook pages code coverage

This commit is contained in:
Charles Bochet
2024-08-31 12:09:52 +02:00
parent 56f8091a42
commit e903ce398e
9 changed files with 99 additions and 23 deletions

View File

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

View File

@ -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)');
},
};

View File

@ -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,
});
},
};

View File

@ -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,
});
},
};

View File

@ -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'));

View File

@ -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,
});
},
};

View File

@ -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>
<PrefetchDataProvider>
<Outlet />
</PrefetchDataProvider>
</ObjectMetadataItemsProvider>
<IconsProvider>
<ObjectMetadataItemsProvider>
<PrefetchDataProvider>
<Outlet />
</PrefetchDataProvider>
</ObjectMetadataItemsProvider>
</IconsProvider>
</SnackBarProviderScope>
</HelmetProvider>
</FullHeightStorybookLayout>

View File

@ -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,

View File

@ -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',