Skip to content

Commit 8b23415

Browse files
gitstart-twentyv1b3mThiagomn1
authored
Add storybook tests for User & Metadata loading (twentyhq#5650)
### Description Add storybook tests for User & Metadata loading ### Refs twentyhq#5590 ### Demo https://github.com/twentyhq/twenty/assets/140154534/2434fc50-8d95-420b-9f62-6fbdf43ce9e5 Fixes twentyhq#5590 --------- Co-authored-by: gitstart-twenty <[email protected]> Co-authored-by: v1b3m <[email protected]> Co-authored-by: Thiago Nascimbeni <[email protected]>
1 parent f5034d3 commit 8b23415

File tree

44 files changed

+175
-95
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+175
-95
lines changed

‎packages/twenty-front/src/loading/components/__stories__/PrefetchLoading.stories.tsx

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { expect } from '@storybook/jest';
2+
import { Meta, StoryObj } from '@storybook/react';
3+
import { within } from '@storybook/test';
4+
5+
import { RecordIndexPage } from '~/pages/object-record/RecordIndexPage';
6+
import {
7+
PageDecorator,
8+
PageDecoratorArgs,
9+
} from '~/testing/decorators/PageDecorator';
10+
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
11+
import { graphqlMocks } from '~/testing/graphqlMocks';
12+
13+
const meta: Meta<PageDecoratorArgs> = {
14+
title: 'App/Loading/PrefetchLoading',
15+
component: RecordIndexPage,
16+
args: {
17+
routePath: '/objects/:objectNamePlural',
18+
routeParams: {
19+
':objectNamePlural': 'companies',
20+
},
21+
},
22+
parameters: {
23+
msw: graphqlMocks,
24+
},
25+
};
26+
27+
export default meta;
28+
29+
export type Story = StoryObj<typeof RecordIndexPage>;
30+
31+
export const Default: Story = {
32+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
33+
// @ts-ignore
34+
decorators: [PrefetchLoadingDecorator, PageDecorator],
35+
play: async ({ canvasElement }) => {
36+
const canvas = within(canvasElement);
37+
38+
await canvas.findByText('Search');
39+
await canvas.findByText('Settings');
40+
await canvas.findByText('Tasks');
41+
42+
expect(canvas.queryByText('People')).toBeNull();
43+
expect(canvas.queryByText('Opportunities')).toBeNull();
44+
expect(canvas.queryByText('Listings')).toBeNull();
45+
expect(canvas.queryByText('My Customs')).toBeNull();
46+
},
47+
};

‎packages/twenty-front/src/loading/components/__stories__/UserOrMetadataLoader.stories.tsx

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { getOperationName } from '@apollo/client/utilities';
2+
import { expect } from '@storybook/jest';
3+
import { Meta, StoryObj } from '@storybook/react';
4+
import { within } from '@storybook/test';
5+
import { graphql, HttpResponse } from 'msw';
6+
7+
import { GET_CLIENT_CONFIG } from '@/client-config/graphql/queries/getClientConfig';
8+
import { FIND_MANY_OBJECT_METADATA_ITEMS } from '@/object-metadata/graphql/queries';
9+
import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
10+
import { RecordIndexPage } from '~/pages/object-record/RecordIndexPage';
11+
import {
12+
PageDecorator,
13+
PageDecoratorArgs,
14+
} from '~/testing/decorators/PageDecorator';
15+
import { graphqlMocks, metadataGraphql } from '~/testing/graphqlMocks';
16+
import { mockedClientConfig } from '~/testing/mock-data/config';
17+
import { mockedUsersData } from '~/testing/mock-data/users';
18+
19+
const userMetadataLoaderMocks = {
20+
msw: {
21+
handlers: [
22+
graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
23+
return HttpResponse.json({
24+
data: {
25+
currentUser: mockedUsersData[0],
26+
},
27+
});
28+
}),
29+
graphql.query(getOperationName(GET_CLIENT_CONFIG) ?? '', () => {
30+
return HttpResponse.json({
31+
data: {
32+
clientConfig: mockedClientConfig,
33+
},
34+
});
35+
}),
36+
metadataGraphql.query(
37+
getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? '',
38+
() => {
39+
return HttpResponse.json({
40+
data: {
41+
objects: {
42+
// simulate no metadata items
43+
edges: [],
44+
},
45+
},
46+
});
47+
},
48+
),
49+
],
50+
},
51+
};
52+
53+
const meta: Meta<PageDecoratorArgs> = {
54+
title: 'App/Loading/UserOrMetadataLoader',
55+
component: RecordIndexPage,
56+
args: {
57+
routePath: '/objects/:objectNamePlural',
58+
routeParams: {
59+
':objectNamePlural': 'companies',
60+
},
61+
},
62+
parameters: {
63+
msw: graphqlMocks,
64+
},
65+
};
66+
67+
export default meta;
68+
69+
export type Story = StoryObj<typeof RecordIndexPage>;
70+
71+
export const Default: Story = {
72+
parameters: userMetadataLoaderMocks,
73+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
74+
// @ts-ignore
75+
decorators: [PageDecorator],
76+
play: async ({ canvasElement }) => {
77+
const canvas = within(canvasElement);
78+
79+
expect(canvas.queryByText('Search')).toBeNull();
80+
expect(canvas.queryByText('Settings')).toBeNull();
81+
expect(canvas.queryByText('Tasks')).toBeNull();
82+
expect(canvas.queryByText('People')).toBeNull();
83+
expect(canvas.queryByText('Opportunities')).toBeNull();
84+
expect(canvas.queryByText('Listings')).toBeNull();
85+
expect(canvas.queryByText('My Customs')).toBeNull();
86+
},
87+
};

‎packages/twenty-front/src/modules/object-metadata/components/__stories__/ObjectMetadataNavItems.stories.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/Componen
66
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
77
import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
88
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
9-
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
109
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
1110
import { graphqlMocks } from '~/testing/graphqlMocks';
1211

@@ -21,7 +20,6 @@ const meta: Meta<typeof ObjectMetadataNavItems> = {
2120
ComponentWithRouterDecorator,
2221
ComponentWithRecoilScopeDecorator,
2322
SnackBarDecorator,
24-
PrefetchLoadingDecorator,
2523
],
2624
parameters: {
2725
msw: graphqlMocks,

‎packages/twenty-front/src/modules/support/components/__stories__/SupportChat.stories.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { currentUserState } from '@/auth/states/currentUserState';
77
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
88
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
99
import { supportChatState } from '@/client-config/states/supportChatState';
10-
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
1110
import { graphqlMocks } from '~/testing/graphqlMocks';
1211
import {
1312
mockDefaultWorkspace,
@@ -36,7 +35,6 @@ const meta: Meta<typeof SupportChat> = {
3635

3736
return <Story />;
3837
},
39-
PrefetchLoadingDecorator,
4038
],
4139
parameters: {
4240
msw: graphqlMocks,

‎packages/twenty-front/src/pages/auth/__stories__/ChooseYourPlan.stories.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
PageDecorator,
1010
PageDecoratorArgs,
1111
} from '~/testing/decorators/PageDecorator';
12-
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
1312
import { graphqlMocks } from '~/testing/graphqlMocks';
1413
import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
1514
import { sleep } from '~/testing/sleep';
@@ -19,7 +18,7 @@ import { ChooseYourPlan } from '../ChooseYourPlan';
1918
const meta: Meta<PageDecoratorArgs> = {
2019
title: 'Pages/Auth/ChooseYourPlan',
2120
component: ChooseYourPlan,
22-
decorators: [PrefetchLoadingDecorator, PageDecorator],
21+
decorators: [PageDecorator],
2322
args: { routePath: AppPath.PlanRequired },
2423
parameters: {
2524
msw: {

‎packages/twenty-front/src/pages/auth/__stories__/CreateProfile.stories.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
PageDecorator,
1010
PageDecoratorArgs,
1111
} from '~/testing/decorators/PageDecorator';
12-
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
1312
import { graphqlMocks } from '~/testing/graphqlMocks';
1413
import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
1514

@@ -18,7 +17,7 @@ import { CreateProfile } from '../CreateProfile';
1817
const meta: Meta<PageDecoratorArgs> = {
1918
title: 'Pages/Auth/CreateProfile',
2019
component: CreateProfile,
21-
decorators: [PrefetchLoadingDecorator, PageDecorator],
20+
decorators: [PageDecorator],
2221
args: { routePath: AppPath.CreateProfile },
2322
parameters: {
2423
msw: {

‎packages/twenty-front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
PageDecorator,
1212
PageDecoratorArgs,
1313
} from '~/testing/decorators/PageDecorator';
14-
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
1514
import { graphqlMocks } from '~/testing/graphqlMocks';
1615
import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
1716

@@ -26,7 +25,6 @@ const meta: Meta<PageDecoratorArgs> = {
2625
setCurrentWorkspace(mockedOnboardingUsersData[1].defaultWorkspace);
2726
return <Story />;
2827
},
29-
PrefetchLoadingDecorator,
3028
PageDecorator,
3129
],
3230
args: { routePath: AppPath.CreateWorkspace },

‎packages/twenty-front/src/pages/auth/__stories__/PasswordReset.stories.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,13 @@ import {
1010
PageDecorator,
1111
PageDecoratorArgs,
1212
} from '~/testing/decorators/PageDecorator';
13-
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
1413
import { graphqlMocks } from '~/testing/graphqlMocks';
1514
import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
1615

1716
const meta: Meta<PageDecoratorArgs> = {
1817
title: 'Pages/Auth/PasswordReset',
1918
component: PasswordReset,
20-
decorators: [PrefetchLoadingDecorator, PageDecorator],
19+
decorators: [PageDecorator],
2120
args: {
2221
routePath: '/reset-password/:passwordResetToken',
2322
routeParams: { ':passwordResetToken': 'MOCKED_TOKEN' },

‎packages/twenty-front/src/pages/auth/__stories__/PaymentSuccess.stories.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
PageDecorator,
1010
PageDecoratorArgs,
1111
} from '~/testing/decorators/PageDecorator';
12-
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
1312
import { graphqlMocks } from '~/testing/graphqlMocks';
1413
import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
1514

@@ -18,7 +17,7 @@ import { PaymentSuccess } from '../PaymentSuccess';
1817
const meta: Meta<PageDecoratorArgs> = {
1918
title: 'Pages/Auth/PaymentSuccess',
2019
component: PaymentSuccess,
21-
decorators: [PrefetchLoadingDecorator, PageDecorator],
20+
decorators: [PageDecorator],
2221
args: { routePath: AppPath.PlanRequiredSuccess },
2322
parameters: {
2423
msw: {

‎packages/twenty-front/src/pages/auth/__stories__/SignInUp.stories.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,14 @@ import {
99
PageDecorator,
1010
PageDecoratorArgs,
1111
} from '~/testing/decorators/PageDecorator';
12-
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
1312
import { graphqlMocks } from '~/testing/graphqlMocks';
1413

1514
import { SignInUp } from '../SignInUp';
1615

1716
const meta: Meta<PageDecoratorArgs> = {
1817
title: 'Pages/Auth/SignInUp',
1918
component: SignInUp,
20-
decorators: [PrefetchLoadingDecorator, PageDecorator],
19+
decorators: [PageDecorator],
2120
args: { routePath: AppPath.SignInUp },
2221
parameters: {
2322
msw: {

‎packages/twenty-front/src/pages/impersonate/__stories__/ImpersonateEffect.stories.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
PageDecorator,
66
PageDecoratorArgs,
77
} from '~/testing/decorators/PageDecorator';
8-
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
98
import { graphqlMocks } from '~/testing/graphqlMocks';
109
import { sleep } from '~/testing/sleep';
1110

@@ -14,7 +13,7 @@ import { ImpersonateEffect } from '../ImpersonateEffect';
1413
const meta: Meta<PageDecoratorArgs> = {
1514
title: 'Pages/Impersonate/Impersonate',
1615
component: ImpersonateEffect,
17-
decorators: [PrefetchLoadingDecorator, PageDecorator],
16+
decorators: [PageDecorator],
1817
args: {
1918
routePath: AppPath.Impersonate,
2019
routeParams: { ':userId': '1' },

‎packages/twenty-front/src/pages/object-record/__stories__/RecordIndexPage.stories.tsx

-14
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import { expect } from '@storybook/jest';
21
import { Meta, StoryObj } from '@storybook/react';
32
import { within } from '@storybook/test';
43

54
import {
65
PageDecorator,
76
PageDecoratorArgs,
87
} from '~/testing/decorators/PageDecorator';
9-
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
108
import { graphqlMocks } from '~/testing/graphqlMocks';
119

1210
import { RecordIndexPage } from '../RecordIndexPage';
@@ -31,7 +29,6 @@ export default meta;
3129
export type Story = StoryObj<typeof RecordIndexPage>;
3230

3331
export const Default: Story = {
34-
decorators: [PrefetchLoadingDecorator],
3532
play: async ({ canvasElement }) => {
3633
const canvas = within(canvasElement);
3734

@@ -42,14 +39,3 @@ export const Default: Story = {
4239
await canvas.findByText('My Customs');
4340
},
4441
};
45-
46-
export const Loading: Story = {
47-
play: async ({ canvasElement }) => {
48-
const canvas = within(canvasElement);
49-
50-
expect(canvas.queryByText('People')).toBeNull();
51-
expect(canvas.queryByText('Opportunities')).toBeNull();
52-
expect(canvas.queryByText('Listings')).toBeNull();
53-
expect(canvas.queryByText('My Customs')).toBeNull();
54-
},
55-
};

‎packages/twenty-front/src/pages/object-record/__stories__/RecordShowPage.stories.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
PageDecorator,
88
PageDecoratorArgs,
99
} from '~/testing/decorators/PageDecorator';
10-
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
1110
import { graphqlMocks } from '~/testing/graphqlMocks';
1211
import { mockedPeopleData } from '~/testing/mock-data/people';
1312
import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
@@ -84,7 +83,7 @@ export type Story = StoryObj<typeof RecordShowPage>;
8483
export const Default: Story = {
8584
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
8685
// @ts-ignore
87-
decorators: [PrefetchLoadingDecorator, PageDecorator],
86+
decorators: [PageDecorator],
8887
play: async ({ canvasElement }) => {
8988
const canvas = within(canvasElement);
9089

‎packages/twenty-front/src/pages/settings/__stories__/SettingsAppearance.stories.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@ import {
44
PageDecorator,
55
PageDecoratorArgs,
66
} from '~/testing/decorators/PageDecorator';
7-
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
87
import { graphqlMocks } from '~/testing/graphqlMocks';
98

109
import { SettingsAppearance } from '../SettingsAppearance';
1110

1211
const meta: Meta<PageDecoratorArgs> = {
1312
title: 'Pages/Settings/SettingsAppearance',
1413
component: SettingsAppearance,
15-
decorators: [PrefetchLoadingDecorator, PageDecorator],
14+
decorators: [PageDecorator],
1615
args: { routePath: '/settings/appearance' },
1716
parameters: {
1817
msw: graphqlMocks,

‎packages/twenty-front/src/pages/settings/__stories__/SettingsBilling.stories.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
PageDecorator,
88
PageDecoratorArgs,
99
} from '~/testing/decorators/PageDecorator';
10-
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
1110
import { graphqlMocks } from '~/testing/graphqlMocks';
1211
import { sleep } from '~/testing/sleep';
1312

@@ -16,7 +15,7 @@ import { SettingsBilling } from '../SettingsBilling';
1615
const meta: Meta<PageDecoratorArgs> = {
1716
title: 'Pages/Settings/SettingsBilling',
1817
component: SettingsBilling,
19-
decorators: [PrefetchLoadingDecorator, PageDecorator],
18+
decorators: [PageDecorator],
2019
args: { routePath: getSettingsPagePath(SettingsPath.Billing) },
2120
parameters: {
2221
msw: graphqlMocks,

‎packages/twenty-front/src/pages/settings/__stories__/SettingsProfile.stories.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,14 @@ import {
55
PageDecorator,
66
PageDecoratorArgs,
77
} from '~/testing/decorators/PageDecorator';
8-
import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
98
import { graphqlMocks } from '~/testing/graphqlMocks';
109

1110
import { SettingsProfile } from '../SettingsProfile';
1211

1312
const meta: Meta<PageDecoratorArgs> = {
1413
title: 'Pages/Settings/SettingsProfile',
1514
component: SettingsProfile,
16-
decorators: [PrefetchLoadingDecorator, PageDecorator],
15+
decorators: [PageDecorator],
1716
args: {
1817
routePath: '/settings/profile',
1918
additionalRoutes: ['/welcome'],

0 commit comments

Comments
 (0)