From ab12d9e8dab3fc7dd2eecc724216d20db8c5c0af Mon Sep 17 00:00:00 2001 From: Thomas Trompette Date: Thu, 8 Aug 2024 21:43:02 +0200 Subject: [PATCH] Fix perf tests storybook (#6584) As title --- .../perf/ActorFieldDisplay.perf.stories.tsx | 8 +-- .../perf/AddressFieldDisplay.perf.stories.tsx | 13 +++- .../perf/BooleanFieldDisplay.perf.stories.tsx | 2 +- .../perf/JsonFieldDisplay.perf.stories.tsx | 5 +- .../perf/LinkFieldDisplay.perf.stories.tsx | 34 --------- .../perf/LinksFieldDisplay.perf.stories.tsx | 8 ++- .../MultiSelectFieldDisplay.perf.stories.tsx | 8 ++- .../perf/RatingFieldDisplay.perf.stories.tsx | 2 +- .../perf/SelectFieldDisplay.perf.stories.tsx | 2 +- .../testing/decorators/getFieldDecorator.tsx | 39 ++++++++--- .../standard-metadata-query-result.ts | 69 +++++++++++++++++++ .../src/testing/mock-data/people.ts | 62 +++++++++++++++++ 12 files changed, 195 insertions(+), 57 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/LinkFieldDisplay.perf.stories.tsx diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ActorFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ActorFieldDisplay.perf.stories.tsx index dabbfb6ae7a2..a03427a7c265 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ActorFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ActorFieldDisplay.perf.stories.tsx @@ -1,5 +1,4 @@ import { ActorFieldDisplay } from '@/object-record/record-field/meta-types/display/components/ActorFieldDisplay'; -import { FieldActorValue } from '@/object-record/record-field/types/FieldMetadata'; import { Meta, StoryObj } from '@storybook/react'; import { ComponentDecorator } from 'twenty-ui'; @@ -13,11 +12,10 @@ const meta: Meta = { decorators: [ MemoryRouterDecorator, ChipGeneratorsDecorator, - getFieldDecorator('person', 'actor', { + getFieldDecorator('company', 'createdBy', { + id: '1', name: 'John Doe', - source: 'API', - workspaceMemberId: undefined, - } satisfies FieldActorValue), + }), ComponentDecorator, ], component: ActorFieldDisplay, diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/AddressFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/AddressFieldDisplay.perf.stories.tsx index f97418a5af23..708ebe4e54c7 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/AddressFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/AddressFieldDisplay.perf.stories.tsx @@ -11,7 +11,16 @@ const meta: Meta = { title: 'UI/Data/Field/Display/AddressFieldDisplay', decorators: [ MemoryRouterDecorator, - getFieldDecorator('person', 'testAddress'), + getFieldDecorator('company', 'address', { + addressCity: 'San Francisco', + addressCountry: 'United States', + addressStreet1: '1234 Elm Street', + addressStreet2: 'Apt 1234', + addressLat: 0, + addressLng: 0, + addressPostcode: '12345', + addressState: 'CA', + } as FieldAddressValue), ComponentDecorator, ], component: AddressFieldDisplay, @@ -32,7 +41,7 @@ export const Elipsis: Story = { container: { width: 100 }, }, decorators: [ - getFieldDecorator('person', 'testAddress', { + getFieldDecorator('company', 'address', { addressCity: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam', addressCountry: 'United States', diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/BooleanFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/BooleanFieldDisplay.perf.stories.tsx index 5c009dba9dcb..ded792eaf4e9 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/BooleanFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/BooleanFieldDisplay.perf.stories.tsx @@ -10,7 +10,7 @@ const meta: Meta = { title: 'UI/Data/Field/Display/BooleanFieldDisplay', decorators: [ MemoryRouterDecorator, - getFieldDecorator('person', 'testBoolean'), + getFieldDecorator('company', 'idealCustomerProfile'), ComponentDecorator, ], component: BooleanFieldDisplay, diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/JsonFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/JsonFieldDisplay.perf.stories.tsx index ff444b4dc17e..be1567d863b0 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/JsonFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/JsonFieldDisplay.perf.stories.tsx @@ -10,7 +10,10 @@ const meta: Meta = { title: 'UI/Data/Field/Display/JsonFieldDisplay', decorators: [ MemoryRouterDecorator, - getFieldDecorator('person', 'testJson'), + getFieldDecorator('company', 'testRawJson', { + key1: 'value1', + key2: 'value2', + }), ComponentDecorator, ], component: JsonFieldDisplay, diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/LinkFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/LinkFieldDisplay.perf.stories.tsx deleted file mode 100644 index d169a4e3ceee..000000000000 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/LinkFieldDisplay.perf.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; - -import { LinkFieldDisplay } from '@/object-record/record-field/meta-types/display/components/LinkFieldDisplay'; -import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; -import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; -import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory'; - -const meta: Meta = { - title: 'UI/Data/Field/Display/LinkFieldDisplay', - decorators: [ - MemoryRouterDecorator, - getFieldDecorator('person', 'testLink'), - ComponentDecorator, - ], - component: LinkFieldDisplay, - args: {}, - parameters: { - chromatic: { disableSnapshot: true }, - }, -}; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = {}; - -export const Performance = getProfilingStory({ - componentName: 'LinkFieldDisplay', - averageThresholdInMs: 0.5, - numberOfRuns: 50, - numberOfTestsPerRun: 100, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/LinksFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/LinksFieldDisplay.perf.stories.tsx index 0e7776f035bf..1f6d09a8aa4e 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/LinksFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/LinksFieldDisplay.perf.stories.tsx @@ -1,5 +1,5 @@ -import { useContext, useEffect } from 'react'; import { Meta, StoryObj } from '@storybook/react'; +import { useContext, useEffect } from 'react'; import { ComponentDecorator } from 'twenty-ui'; import { FieldFocusContext } from '@/object-record/record-field/contexts/FieldFocusContext'; @@ -23,7 +23,11 @@ const meta: Meta = { title: 'UI/Data/Field/Display/LinksFieldDisplay', decorators: [ MemoryRouterDecorator, - getFieldDecorator('person', 'testLinks'), + getFieldDecorator('company', 'domainName', { + primaryLinkUrl: 'https://www.google.com', + primaryLinkLabel: 'Google', + secondaryLinks: ['https://www.toto.com'], + }), ComponentDecorator, ], component: LinksFieldDisplay, diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/MultiSelectFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/MultiSelectFieldDisplay.perf.stories.tsx index 34ab051b24cc..ec9a8291d2c5 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/MultiSelectFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/MultiSelectFieldDisplay.perf.stories.tsx @@ -1,5 +1,5 @@ -import { useContext, useEffect } from 'react'; import { Meta, StoryObj } from '@storybook/react'; +import { useContext, useEffect } from 'react'; import { ComponentDecorator } from 'twenty-ui'; import { FieldFocusContext } from '@/object-record/record-field/contexts/FieldFocusContext'; @@ -23,7 +23,11 @@ const meta: Meta = { title: 'UI/Data/Field/Display/MultiSelectFieldDisplay', decorators: [ MemoryRouterDecorator, - getFieldDecorator('person', 'testMultiSelect'), + getFieldDecorator('company', 'testMultiSelect', [ + 'Option 1', + 'Option 2', + 'Option 3', + ]), ComponentDecorator, ], component: MultiSelectFieldDisplay, 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 cffa101426cf..bf769c6474bd 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 @@ -10,7 +10,7 @@ const meta: Meta = { title: 'UI/Data/Field/Display/RatingFieldDisplay', decorators: [ MemoryRouterDecorator, - getFieldDecorator('person', 'testRating'), + getFieldDecorator('company', 'testRating'), ComponentDecorator, ], component: RatingFieldDisplay, diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/SelectFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/SelectFieldDisplay.perf.stories.tsx index 5d92422c7055..98e5eb566a67 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/SelectFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/SelectFieldDisplay.perf.stories.tsx @@ -10,7 +10,7 @@ const meta: Meta = { title: 'UI/Data/Field/Display/SelectFieldDisplay', decorators: [ MemoryRouterDecorator, - getFieldDecorator('person', 'testSelect'), + getFieldDecorator('task', 'status'), ComponentDecorator, ], component: SelectFieldDisplay, diff --git a/packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx b/packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx index 191957b4e24f..62cee6f5077b 100644 --- a/packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx +++ b/packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx @@ -14,18 +14,21 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { getCompaniesMock } from '~/testing/mock-data/companies'; import { generatedMockObjectMetadataItems } from '~/testing/mock-data/objectMetadataItems'; import { getPeopleMock } from '~/testing/mock-data/people'; +import { mockedTasks } from '~/testing/mock-data/tasks'; import { isDefined } from '~/utils/isDefined'; const RecordMockSetterEffect = ({ companies, people, + tasks, }: { companies: ObjectRecord[]; people: ObjectRecord[]; + tasks: ObjectRecord[]; }) => { const setRecordValue = useSetRecordValue(); - const setRecordInBothStores = useRecoilCallback( + const setRecordInStores = useRecoilCallback( ({ set }) => (record: ObjectRecord) => { set(recordStoreFamilyState(record.id), record); @@ -36,20 +39,24 @@ const RecordMockSetterEffect = ({ useEffect(() => { for (const company of companies) { - setRecordInBothStores(company); + setRecordInStores(company); } for (const person of people) { - setRecordInBothStores(person); + setRecordInStores(person); } - }, [setRecordInBothStores, companies, people]); + + for (const task of tasks) { + setRecordInStores(task); + } + }, [companies, people, tasks, setRecordInStores]); return null; }; export const getFieldDecorator = ( - objectNameSingular: 'company' | 'person', + objectNameSingular: 'company' | 'person' | 'task', fieldName: string, fieldValue?: any, ): Decorator => @@ -74,7 +81,19 @@ export const getFieldDecorator = ] : peopleMock; - const record = objectNameSingular === 'company' ? companies[0] : people[0]; + const tasksMock = mockedTasks; + + const tasks = + objectNameSingular === 'task' + ? [{ ...tasksMock[0], [fieldName]: fieldValue }, ...tasksMock.slice(1)] + : tasksMock; + + const record = + objectNameSingular === 'company' + ? companies[0] + : objectNameSingular === 'person' + ? people[0] + : tasks[0]; if (isDefined(fieldValue)) { (record as any)[fieldName] = fieldValue; @@ -113,13 +132,17 @@ export const getFieldDecorator = isLabelIdentifier, fieldDefinition: formatFieldMetadataItemAsColumnDefinition({ field: fieldMetadataItem, - position: record.position ?? 0, + position: 0, objectMetadataItem, }), hotkeyScope: 'hotkey-scope', }} > - + diff --git a/packages/twenty-front/src/testing/mock-data/generated/standard-metadata-query-result.ts b/packages/twenty-front/src/testing/mock-data/generated/standard-metadata-query-result.ts index af408a9535ac..8bf7799370dd 100644 --- a/packages/twenty-front/src/testing/mock-data/generated/standard-metadata-query-result.ts +++ b/packages/twenty-front/src/testing/mock-data/generated/standard-metadata-query-result.ts @@ -7936,6 +7936,75 @@ export const mockedStandardObjectMetadataQueryResult: ObjectMetadataItemsQuery = "fromRelationMetadata": null, "toRelationMetadata": null } + }, + { + "__typename": "fieldEdge", + "node": { + "__typename": "field", + "id": "af19a3ba-b725-4b9d-a0b7-8bf6b04fadds", + "type": "MULTI_SELECT", + "name": "testMultiSelect", + "label": "Test Multi Select", + "description": "Test Multi Select", + "icon": "IconSelect", + "isCustom": false, + "isActive": true, + "isSystem": true, + "isNullable": false, + "createdAt": "2024-08-02T16:00:05.938Z", + "updatedAt": "2024-08-02T16:00:05.938Z", + "defaultValue": null, + "options": null, + "relationDefinition": null, + "fromRelationMetadata": null, + "toRelationMetadata": null + } + }, + { + "__typename": "fieldEdge", + "node": { + "__typename": "field", + "id": "tt929592-4f74-419e-8b26-6d216859078f", + "type": "RAW_JSON", + "name": "testRawJson", + "label": "Test Raw Json", + "description": "Json value for event details", + "icon": "IconListDetails", + "isCustom": false, + "isActive": true, + "isSystem": true, + "isNullable": true, + "createdAt": "2024-08-02T16:00:05.938Z", + "updatedAt": "2024-08-02T16:00:05.938Z", + "defaultValue": null, + "options": null, + "relationDefinition": null, + "fromRelationMetadata": null, + "toRelationMetadata": null + } + }, + { + "__typename": "fieldEdge", + "node": { + "__typename": "field", + "id": "vv929592-4f74-419e-8b26-6d216859078f", + "type": "RATING", + "name": "testRating", + "label": "Rating", + "description": "Rating value", + "icon": "IconListDetails", + "isCustom": false, + "isActive": true, + "isSystem": true, + "isNullable": true, + "createdAt": "2024-08-02T16:00:05.938Z", + "updatedAt": "2024-08-02T16:00:05.938Z", + "defaultValue": null, + "options": null, + "relationDefinition": null, + "fromRelationMetadata": null, + "toRelationMetadata": null + } }, { "__typename": "fieldEdge", diff --git a/packages/twenty-front/src/testing/mock-data/people.ts b/packages/twenty-front/src/testing/mock-data/people.ts index c4da215bb807..439730e43ae8 100644 --- a/packages/twenty-front/src/testing/mock-data/people.ts +++ b/packages/twenty-front/src/testing/mock-data/people.ts @@ -132,6 +132,37 @@ export const peopleQueryResult: { people: RecordGqlConnection } = { secondaryLinks: null, }, }, + testSelect: { + __typename: 'Select', + value: 'Option 1', + label: 'Option 1', + }, + testMultiSelect: { + __typename: 'MultiSelect', + values: [ + { + __typename: 'Select', + value: 'Option 1', + label: 'Option 1', + }, + ], + }, + testRating: { + __typename: 'Rating', + value: 3, + }, + testJson: { + __typename: 'Json', + value: { + key: 'value', + }, + }, + testActor: { + __typename: 'Actor', + source: 'MANUAL', + workspaceMemberId: '20202020-0687-4c41-b707-ed1bfca972a7', + name: 'Tim Apple', + }, }, }, { @@ -228,6 +259,37 @@ export const peopleQueryResult: { people: RecordGqlConnection } = { secondaryLinks: null, }, }, + testSelect: { + __typename: 'Select', + value: 'Option 1', + label: 'Option 1', + }, + testMultiSelect: { + __typename: 'MultiSelect', + values: [ + { + __typename: 'Select', + value: 'Option 1', + label: 'Option 1', + }, + ], + }, + testRating: { + __typename: 'Rating', + value: 3, + }, + testJson: { + __typename: 'Json', + value: { + key: 'value', + }, + }, + testActor: { + __typename: 'Actor', + source: 'MANUAL', + workspaceMemberId: '20202020-0687-4c41-b707-ed1bfca972a7', + name: 'Tim Apple', + }, }, }, {