admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix perf tests storybook (#6584)

Browse Source 
As title
This commit is contained in:
Thomas Trompette
2024-08-08 21:43:02 +02:00
committed by GitHub
parent b4e2ada3b0
commit ab12d9e8da
12 changed files with 195 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ActorFieldDisplay.perf.stories.tsx
View File

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

13
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/AddressFieldDisplay.perf.stories.tsx
View File

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

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/BooleanFieldDisplay.perf.stories.tsx
View File

@ -10,7 +10,7 @@ const meta: Meta = {
title: 'UI/Data/Field/Display/BooleanFieldDisplay',
decorators: [
MemoryRouterDecorator,
getFieldDecorator('person', 'testBoolean'),
getFieldDecorator('company', 'idealCustomerProfile'),
ComponentDecorator,
],
component: BooleanFieldDisplay,

5
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/JsonFieldDisplay.perf.stories.tsx
View File

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

34
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/LinkFieldDisplay.perf.stories.tsx
View File

@ -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<typeof LinkFieldDisplay>;
export const Default: Story = {};
export const Performance = getProfilingStory({
componentName: 'LinkFieldDisplay',
averageThresholdInMs: 0.5,
numberOfRuns: 50,
numberOfTestsPerRun: 100,
});

8
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/LinksFieldDisplay.perf.stories.tsx
View File

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

8
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/MultiSelectFieldDisplay.perf.stories.tsx
View File

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

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RatingFieldDisplay.perf.stories.tsx
View File

@ -10,7 +10,7 @@ const meta: Meta = {
title: 'UI/Data/Field/Display/RatingFieldDisplay',
decorators: [
MemoryRouterDecorator,
getFieldDecorator('person', 'testRating'),
getFieldDecorator('company', 'testRating'),
ComponentDecorator,
],
component: RatingFieldDisplay,

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/SelectFieldDisplay.perf.stories.tsx
View File

@ -10,7 +10,7 @@ const meta: Meta = {
title: 'UI/Data/Field/Display/SelectFieldDisplay',
decorators: [
MemoryRouterDecorator,
getFieldDecorator('person', 'testSelect'),
getFieldDecorator('task', 'status'),
ComponentDecorator,
],
component: SelectFieldDisplay,

39
packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx
View File

@ -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',
}}
>
<RecordMockSetterEffect companies={companies} people={people} />
<RecordMockSetterEffect
companies={companies}
people={people}
tasks={tasks}
/>
<Story />
</FieldContext.Provider>
</RecordFieldValueSelectorContextProvider>

69
packages/twenty-front/src/testing/mock-data/generated/standard-metadata-query-result.ts
View File

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

62
packages/twenty-front/src/testing/mock-data/people.ts
View File

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