diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RatingFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RatingFieldDisplay.perf.stories.tsx index 173612ffbdf0..3c31dc6d5682 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RatingFieldDisplay.perf.stories.tsx +++ b/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, }); diff --git a/packages/twenty-front/src/pages/settings/__stories__/SettingsAppearance.stories.tsx b/packages/twenty-front/src/pages/settings/__stories__/SettingsAppearance.stories.tsx index 5ad191a10a57..b6017b4f0a36 100644 --- a/packages/twenty-front/src/pages/settings/__stories__/SettingsAppearance.stories.tsx +++ b/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 = { title: 'Pages/Settings/SettingsAppearance', component: SettingsAppearance, @@ -15,6 +18,7 @@ const meta: Meta = { args: { routePath: '/settings/appearance' }, parameters: { msw: graphqlMocks, + date: new Date(2021, 1, 1), }, }; @@ -22,4 +26,72 @@ export default meta; export type Story = StoryObj; -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)'); + }, +}; diff --git a/packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccounts.stories.tsx b/packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccounts.stories.tsx index 747a43b24a25..402d9408cd73 100644 --- a/packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccounts.stories.tsx +++ b/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, + }); }, }; diff --git a/packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopers.stories.tsx b/packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopers.stories.tsx index ebe8d272f505..40b3b8ae69cc 100644 --- a/packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopers.stories.tsx +++ b/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 = { title: 'Pages/Settings/Developers/SettingsDevelopers', @@ -26,8 +25,9 @@ export type Story = StoryObj; 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, + }); }, }; diff --git a/packages/twenty-front/src/pages/settings/developers/__stories__/api-keys/SettingsDevelopersApiKeysDetail.stories.tsx b/packages/twenty-front/src/pages/settings/developers/__stories__/api-keys/SettingsDevelopersApiKeysDetail.stories.tsx index 88e6cd7ac253..37c96a2a5ed4 100644 --- a/packages/twenty-front/src/pages/settings/developers/__stories__/api-keys/SettingsDevelopersApiKeysDetail.stories.tsx +++ b/packages/twenty-front/src/pages/settings/developers/__stories__/api-keys/SettingsDevelopersApiKeysDetail.stories.tsx @@ -50,17 +50,14 @@ export type Story = StoryObj; 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')); diff --git a/packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationNewDatabaseConnection.stories.tsx b/packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationNewDatabaseConnection.stories.tsx index 5f95eacb238b..c28749873556 100644 --- a/packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationNewDatabaseConnection.stories.tsx +++ b/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 = { title: 'Pages/Settings/Integrations/SettingsIntegrationNewDatabaseConnection', @@ -29,8 +28,9 @@ export type Story = StoryObj; 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, + }); }, }; diff --git a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx index 19453453c664..2381241c4a06 100644 --- a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx +++ b/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 ( + @@ -73,11 +76,13 @@ const Providers = () => { - - - - - + + + + + + + diff --git a/packages/twenty-front/src/testing/mock-data/view-fields.ts b/packages/twenty-front/src/testing/mock-data/view-fields.ts index f8af8db65787..b68cfb706a27 100644 --- a/packages/twenty-front/src/testing/mock-data/view-fields.ts +++ b/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, diff --git a/packages/twenty-front/src/testing/mock-data/views.ts b/packages/twenty-front/src/testing/mock-data/views.ts index f924a9fccd7b..d13c0dc3fdfb 100644 --- a/packages/twenty-front/src/testing/mock-data/views.ts +++ b/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',