From 457c6ed1139c20b0cc2d77bfa3db517593895683 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Wed, 23 Apr 2025 13:20:13 +0200 Subject: [PATCH] Improve storybook stories (#11694) ## Improvements ### TaskGroups image ### EventCardMessage image ### Blocklist stories image ### WorkflowEditActionUpdateRecord image --- .../activities/tasks/components/TaskList.tsx | 2 +- .../__stories__/TaskGroups.stories.tsx | 2 ++ .../__stories__/EventCardMessage.stories.tsx | 13 +++++++++++- ...tingsAccountsBlocklistTableRow.stories.tsx | 4 ++-- .../components/__stories__/mockedBlocklist.ts | 20 +++++++++++++++---- ...WorkflowEditActionUpdateRecord.stories.tsx | 4 ++-- .../src/testing/mock-data/tasks.ts | 4 ++-- 7 files changed, 37 insertions(+), 12 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx index 56082db0d..4b223797e 100644 --- a/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx +++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx @@ -6,7 +6,7 @@ import { Task } from '@/activities/types/Task'; import { TaskRow } from './TaskRow'; type TaskListProps = { - title?: string; + title: string; tasks: Task[]; button?: ReactElement | false; }; diff --git a/packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskGroups.stories.tsx b/packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskGroups.stories.tsx index 1c04b799d..fc62b5e86 100644 --- a/packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskGroups.stories.tsx +++ b/packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskGroups.stories.tsx @@ -6,6 +6,7 @@ import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/ob import { TabListComponentInstanceContext } from '@/ui/layout/tab/states/contexts/TabListComponentInstanceContext'; import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator'; import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator'; +import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; import { graphqlMocks } from '~/testing/graphqlMocks'; @@ -30,6 +31,7 @@ const meta: Meta = { ComponentWithRecoilScopeDecorator, ObjectMetadataItemsDecorator, SnackBarDecorator, + I18nFrontDecorator, ], }; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/__stories__/EventCardMessage.stories.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/__stories__/EventCardMessage.stories.tsx index 63087827f..b9b84f70a 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/__stories__/EventCardMessage.stories.tsx +++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/__stories__/EventCardMessage.stories.tsx @@ -1,11 +1,12 @@ import { Meta, StoryObj } from '@storybook/react'; +import { within } from '@storybook/testing-library'; import { HttpResponse, graphql } from 'msw'; import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext'; import { EventCardMessage } from '@/activities/timeline-activities/rows/message/components/EventCardMessage'; +import { ComponentDecorator } from 'twenty-ui/testing'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; -import { ComponentDecorator } from 'twenty-ui/testing'; const meta: Meta = { title: 'Modules/TimelineActivities/Rows/Message/EventCardMessage', @@ -32,6 +33,11 @@ export const Default: Story = { messageId: '1', authorFullName: 'John Doe', }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await canvas.findByText('Mock title'); + }, parameters: { msw: { handlers: [ @@ -57,6 +63,11 @@ export const NotShared: Story = { messageId: '1', authorFullName: 'John Doe', }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await canvas.findByText('Subject not shared'); + }, parameters: { msw: { handlers: [ diff --git a/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsBlocklistTableRow.stories.tsx b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsBlocklistTableRow.stories.tsx index 820ea2354..62afa05e9 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsBlocklistTableRow.stories.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsBlocklistTableRow.stories.tsx @@ -1,10 +1,10 @@ import { Decorator, Meta, StoryObj } from '@storybook/react'; import { expect, fn, userEvent, within } from '@storybook/test'; -import { mockedBlocklist } from '@/settings/accounts/components/__stories__/mockedBlocklist'; import { SettingsAccountsBlocklistTableRow } from '@/settings/accounts/components/SettingsAccountsBlocklistTableRow'; -import { formatToHumanReadableDate } from '~/utils/date-utils'; +import { mockedBlocklist } from '@/settings/accounts/components/__stories__/mockedBlocklist'; import { ComponentDecorator } from 'twenty-ui/testing'; +import { formatToHumanReadableDate } from '~/utils/date-utils'; const onRemoveJestFn = fn(); diff --git a/packages/twenty-front/src/modules/settings/accounts/components/__stories__/mockedBlocklist.ts b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/mockedBlocklist.ts index a03fa5207..a808133e4 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/__stories__/mockedBlocklist.ts +++ b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/mockedBlocklist.ts @@ -7,28 +7,40 @@ export const mockedBlocklist: BlocklistItem[] = [ id: '1', handle: 'test1@twenty.com', workspaceMemberId: '1', - createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '', + createdAt: + DateTime.fromISO('2023-04-26T10:12:42.33625+00:00') + .minus({ hours: 2 }) + .toISO() ?? '', __typename: 'BlocklistItem', }, { id: '2', handle: 'test2@twenty.com', workspaceMemberId: '1', - createdAt: DateTime.now().minus({ days: 2 }).toISO() ?? '', + createdAt: + DateTime.fromISO('2023-04-26T10:12:42.33625+00:00') + .minus({ days: 2 }) + .toISO() ?? '', __typename: 'BlocklistItem', }, { id: '3', handle: 'test3@twenty.com', workspaceMemberId: '1', - createdAt: DateTime.now().minus({ days: 3 }).toISO() ?? '', + createdAt: + DateTime.fromISO('2023-04-26T10:12:42.33625+00:00') + .minus({ days: 3 }) + .toISO() ?? '', __typename: 'BlocklistItem', }, { id: '4', handle: '@twenty.com', workspaceMemberId: '1', - createdAt: DateTime.now().minus({ days: 4 }).toISO() ?? '', + createdAt: + DateTime.fromISO('2023-04-26T10:12:42.33625+00:00') + .minus({ days: 4 }) + .toISO() ?? '', __typename: 'BlocklistItem', }, ]; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/__stories__/WorkflowEditActionUpdateRecord.stories.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/__stories__/WorkflowEditActionUpdateRecord.stories.tsx index 7a2d9f17d..838b8f24d 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/__stories__/WorkflowEditActionUpdateRecord.stories.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/__stories__/WorkflowEditActionUpdateRecord.stories.tsx @@ -1,6 +1,7 @@ import { WorkflowUpdateRecordAction } from '@/workflow/types/Workflow'; import { Meta, StoryObj } from '@storybook/react'; import { expect, fn, userEvent, within } from '@storybook/test'; +import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing'; import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; @@ -11,7 +12,6 @@ import { graphqlMocks } from '~/testing/graphqlMocks'; import { allMockPersonRecords } from '~/testing/mock-data/people'; import { getWorkflowNodeIdMock } from '~/testing/mock-data/workflow'; import { WorkflowEditActionUpdateRecord } from '../WorkflowEditActionUpdateRecord'; -import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing'; const DEFAULT_ACTION = { id: getWorkflowNodeIdMock(), @@ -176,7 +176,7 @@ export const DisabledWithDefaultStaticValues: Story = { const selectedRecord = await canvas.findByText( `${peopleMock.name.firstName} ${peopleMock.name.lastName}`, undefined, - { timeout: 3000 }, + { timeout: 5000 }, ); expect(selectedRecord).toBeVisible(); diff --git a/packages/twenty-front/src/testing/mock-data/tasks.ts b/packages/twenty-front/src/testing/mock-data/tasks.ts index dc0dea3b9..54b3b84b5 100644 --- a/packages/twenty-front/src/testing/mock-data/tasks.ts +++ b/packages/twenty-front/src/testing/mock-data/tasks.ts @@ -25,13 +25,13 @@ export const mockedTasks: Array = [ id: '3ecaa1be-aac7-463a-a38e-64078dd451d5', createdAt: '2023-04-26T10:12:42.33625+00:00', updatedAt: '2023-04-26T10:23:42.33625+00:00', - title: 'My very first note', + title: 'My very first task', bodyV2: { blocknote: null, markdown: null, }, dueAt: '2023-04-26T10:12:42.33625+00:00', - status: null, + status: 'TODO', assignee: workspaceMember, assigneeId: workspaceMember.id, taskTargets: [