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

fix: fix Pages Storybook tests (#2305)

Browse Source 
* fix: fix Companies pages tests

* fix: fix People pages tests

* fix: fix Opportunities page tests
This commit is contained in:
Thaïs
2023-11-03 14:25:36 +01:00
committed by GitHub
parent 9c2c1e879a
commit 56a5f99108
21 changed files with 936 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
front/src/testing/graphqlMocks.ts
View File

@ -33,12 +33,17 @@ import {
import { mockedApiKeys } from '~/testing/mock-data/api-keys';
import { mockedActivities, mockedTasks } from './mock-data/activities';
import { mockedCompaniesData } from './mock-data/companies';
import {
mockedCompaniesData,
mockedEmptyCompanyData,
} from './mock-data/companies';
import { mockedObjectMetadataItems } from './mock-data/metadata';
import { mockedPeopleData } from './mock-data/people';
import { mockedEmptyPersonData, mockedPeopleData } from './mock-data/people';
import { mockedPipelineProgressData } from './mock-data/pipeline-progress';
import { mockedPipelinesData } from './mock-data/pipelines';
import { mockedUsersData } from './mock-data/users';
import { mockedViewFieldsData } from './mock-data/view-fields';
import { mockedViewsData } from './mock-data/views';
import {
fetchOneFromData,
filterAndSortData,
@ -73,7 +78,7 @@ export const graphqlMocks = [
>(
mockedCompaniesData,
req.variables.where,
Array.isArray(req.variables.orderBy)
!req.variables.orderBy || Array.isArray(req.variables.orderBy)
? req.variables.orderBy
: [req.variables.orderBy],
req.variables.limit,
@ -93,7 +98,7 @@ export const graphqlMocks = [
>(
mockedPeopleData,
req.variables.where,
Array.isArray(req.variables.orderBy)
!req.variables.orderBy || Array.isArray(req.variables.orderBy)
? req.variables.orderBy
: [req.variables.orderBy],
req.variables.limit,
@ -128,7 +133,7 @@ export const graphqlMocks = [
>(
mockedActivities,
req.variables.where,
Array.isArray(req.variables.orderBy)
!req.variables.orderBy || Array.isArray(req.variables.orderBy)
? req.variables.orderBy
: [req.variables.orderBy],
req.variables.limit,
@ -173,13 +178,31 @@ export const graphqlMocks = [
graphql.mutation(
getOperationName(UPDATE_ONE_PERSON) ?? '',
(req, res, ctx) => {
const updatedCompanyId = req.variables.data?.company?.connect?.id;
const updatedCompany = mockedCompaniesData.find(
({ id }) => id === updatedCompanyId,
);
const updatedCompanyData = updatedCompany
? {
companyId: updatedCompany.id,
company: {
id: updatedCompany.id,
name: updatedCompany.name,
domainName: updatedCompany.domainName,
__typename: 'Company',
},
}
: {};
return res(
ctx.data({
updateOnePerson: updateOneFromData(
mockedPeopleData,
req.variables.where.id,
req.variables,
),
updateOnePerson: {
...updateOneFromData(
mockedPeopleData,
req.variables.where.id,
req.variables,
),
...updatedCompanyData,
},
}),
);
},
@ -267,8 +290,8 @@ export const graphqlMocks = [
return res(
ctx.data({
createOneCompany: {
id: '9d162de1-cfbf-4156-a790-e39854dcd4ef',
__typename: 'Company',
...mockedEmptyCompanyData,
...req.variables.data,
},
}),
);
@ -280,8 +303,8 @@ export const graphqlMocks = [
return res(
ctx.data({
createOnePerson: {
id: '9d162de1-cfbf-4156-a790-e39854dcd4ef',
__typename: 'Person',
...mockedEmptyPersonData,
...req.variables.data,
},
}),
);
@ -293,4 +316,39 @@ export const graphqlMocks = [
return res(ctx.data({ objects: mockedObjectMetadataItems }));
},
),
graphql.query('FindManyviewsV2', (req, res, ctx) => {
const objectId = req.variables.filter.objectId.eq;
const viewType = req.variables.filter.type.eq;
return res(
ctx.data({
viewsV2: {
edges: mockedViewsData
.filter(
(view) => view.objectId === objectId && view.type === viewType,
)
.map((view) => ({
node: view,
cursor: null,
})),
},
}),
);
}),
graphql.query('FindManyviewFieldsV2', (req, res, ctx) => {
const viewId = req.variables.filter.viewId.eq;
return res(
ctx.data({
viewFieldsV2: {
edges: mockedViewFieldsData
.filter((viewField) => viewField.viewId === viewId)
.map((viewField) => ({
node: viewField,
cursor: null,
})),
},
}),
);
}),
];

25
front/src/testing/mock-data/companies.ts
View File

@ -1,5 +1,7 @@
import { Company, Favorite, User } from '~/generated/graphql';
import { mockedUsersData } from './users';
type MockedCompany = Pick<
Company,
| 'id'
@ -14,6 +16,7 @@ type MockedCompany = Pick<
| 'annualRecurringRevenue'
| 'idealCustomerProfile'
| '_activityCount'
| 'accountOwnerId'
> & {
accountOwner: Pick<
User,
@ -25,7 +28,8 @@ type MockedCompany = Pick<
| 'firstName'
| 'lastName'
> | null;
} & { Favorite: Pick<Favorite, 'id'> | null };
Favorite: Pick<Favorite, 'id'> | null;
};
export const mockedCompaniesData: Array<MockedCompany> = [
{
@ -41,13 +45,14 @@ export const mockedCompaniesData: Array<MockedCompany> = [
idealCustomerProfile: true,
_activityCount: 1,
Favorite: null,
accountOwnerId: mockedUsersData[0].id,
accountOwner: {
email: 'charles@test.com',
displayName: 'Charles Test',
firstName: 'Charles',
lastName: 'Test',
avatarUrl: null,
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
id: mockedUsersData[0].id,
__typename: 'User',
},
__typename: 'Company',
@ -149,3 +154,19 @@ export const mockedCompaniesData: Array<MockedCompany> = [
__typename: 'Company',
},
];
export const mockedEmptyCompanyData = {
id: '9231e6ee-4cc2-4c7b-8c55-dff16f4d968a',
name: '',
domainName: '',
address: '',
accountOwner: null,
annualRecurringRevenue: null,
createdAt: null,
employees: null,
idealCustomerProfile: null,
linkedinUrl: null,
xUrl: null,
_activityCount: null,
__typename: 'Company',
};

2
front/src/testing/mock-data/index.ts
View File

@ -103,7 +103,7 @@ export const filterAndSortData = <DataT>(
filteredData = filterData<DataT>(data, where);
}
if (orderBy && Array.isArray(orderBy) && orderBy.length > 0 && orderBy[0]) {
if (Array.isArray(orderBy) && orderBy.length > 0 && orderBy[0]) {
const firstOrderBy = orderBy[0];
const key = Object.keys(firstOrderBy)[0];

184
front/src/testing/mock-data/metadata.ts
View File

@ -1,5 +1,187 @@
export const mockedObjectMetadataItems = {
edges: [
{
node: {
id: 'b25eb5e6-9fdc-4df2-a039-40ccea4c8032',
dataSourceId: '',
nameSingular: 'viewV2',
namePlural: 'viewsV2',
labelSingular: 'View',
labelPlural: 'Views',
description: '(System) Views',
icon: 'IconLayoutCollage',
isCustom: false,
isActive: true,
createdAt: '',
updatedAt: '',
fields: {
edges: [
{
node: {
id: '5db475e7-8208-402d-97a1-62c9ce344dd4',
type: 'text',
name: 'objectId',
label: 'Object Id',
description: 'View target object',
icon: null,
placeholder: null,
isCustom: false,
isActive: true,
isNullable: false,
createdAt: '',
updatedAt: '',
},
},
{
node: {
id: 'ddc89a56-9add-4110-aa53-4ecdbba36767',
type: 'text',
name: 'type',
label: 'Type',
description: 'View type',
icon: null,
placeholder: null,
isCustom: false,
isActive: true,
isNullable: false,
createdAt: '',
updatedAt: '',
},
},
{
node: {
id: '35fa806b-5d9d-446d-bd0e-1a6874b871ee',
type: 'text',
name: 'name',
label: 'Name',
description: 'View name',
icon: null,
placeholder: null,
isCustom: false,
isActive: true,
isNullable: false,
createdAt: '',
updatedAt: '',
},
},
],
pageInfo: {
hasNextPage: false,
hasPreviousPage: false,
startCursor: null,
endCursor: null,
},
totalCount: 3,
},
},
},
{
node: {
id: 'c419540f-ff6e-47bf-9d87-3aa366afd8e4',
dataSourceId: '',
nameSingular: 'viewFieldV2',
namePlural: 'viewFieldsV2',
labelSingular: 'View Field',
labelPlural: 'View Fields',
description: '(System) View Fields',
icon: 'IconColumns3',
isCustom: false,
isActive: true,
createdAt: '',
updatedAt: '',
fields: {
edges: [
{
node: {
id: '1d718fcf-5a17-4694-91a4-4d3968a51aa4',
type: 'text',
name: 'viewId',
label: 'View Id',
description: 'View Field related view',
icon: null,
placeholder: null,
isCustom: false,
isActive: true,
isNullable: false,
createdAt: '',
updatedAt: '',
},
},
{
node: {
id: '8ead2e86-7b60-4a47-9b4f-ad008e744d52',
type: 'number',
name: 'position',
label: 'Position',
description: 'View Field position',
icon: null,
placeholder: null,
isCustom: false,
isActive: true,
isNullable: false,
createdAt: '',
updatedAt: '',
},
},
{
node: {
id: '4d77c2dd-2b04-4989-b11e-cb0e386d1b4d',
type: 'text',
name: 'fieldId',
label: 'Field Id',
description: 'View Field target field',
icon: null,
placeholder: null,
isCustom: false,
isActive: true,
isNullable: false,
createdAt: '',
updatedAt: '',
},
},
{
node: {
id: '0f5ab566-9fc4-44b7-85c5-1e05db9f6b49',
type: 'boolean',
name: 'isVisible',
label: 'Visible',
description: 'View Field visibility',
icon: null,
placeholder: null,
isCustom: false,
isActive: true,
isNullable: false,
createdAt: '',
updatedAt: '',
},
},
{
node: {
id: '21268ece-7002-4b04-a442-f25278f8ca13',
type: 'number',
name: 'size',
label: 'Size',
description: 'View Field size',
icon: null,
placeholder: null,
isCustom: false,
isActive: true,
isNullable: false,
createdAt: '',
updatedAt: '',
},
},
],
pageInfo: {
hasNextPage: false,
hasPreviousPage: false,
startCursor: null,
endCursor: null,
},
totalCount: 5,
},
},
},
{
node: {
id: 'a3195559-cc20-4749-9565-572a2f506581',
@ -175,5 +357,5 @@ export const mockedObjectMetadataItems = {
startCursor: null,
endCursor: null,
},
totalCount: 2,
totalCount: 4,
};

27
front/src/testing/mock-data/people.ts
View File

@ -21,6 +21,7 @@ type MockedPerson = RequiredAndNotNull<
| 'avatarUrl'
| '_activityCount'
| 'createdAt'
| 'companyId'
> & {
company: Pick<Company, 'id' | 'name' | 'domainName' | '__typename'>;
}
@ -39,6 +40,7 @@ export const mockedPeopleData: MockedPerson[] = [
avatarUrl:
'data:image/jpeg;base64,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',
jobTitle: 'CEO',
companyId: '5c21e19e-e049-4393-8c09-3e3f8fb09ecb',
company: {
id: '5c21e19e-e049-4393-8c09-3e3f8fb09ecb',
name: 'Qonto',
@ -48,7 +50,6 @@ export const mockedPeopleData: MockedPerson[] = [
phone: '06 12 34 56 78',
_activityCount: 1,
createdAt: '2023-04-20T13:20:09.158312+00:00',
city: 'Paris',
},
{
@ -62,6 +63,7 @@ export const mockedPeopleData: MockedPerson[] = [
avatarUrl: '',
jobTitle: 'CTO',
email: 'john@linkedin.com',
companyId: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6e',
company: {
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6e',
name: 'LinkedIn',
@ -71,7 +73,6 @@ export const mockedPeopleData: MockedPerson[] = [
phone: '06 12 34 56 78',
_activityCount: 1,
createdAt: '2023-04-20T13:20:09.158312+00:00',
city: 'Paris',
},
{
@ -85,6 +86,7 @@ export const mockedPeopleData: MockedPerson[] = [
avatarUrl: '',
jobTitle: 'Investor',
email: 'jane@sequoiacap.com',
companyId: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6g',
company: {
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6g',
name: 'Sequoia',
@ -94,7 +96,6 @@ export const mockedPeopleData: MockedPerson[] = [
phone: '06 12 34 56 78',
_activityCount: 1,
createdAt: '2023-04-20T13:20:09.158312+00:00',
city: 'Paris',
},
{
@ -108,6 +109,7 @@ export const mockedPeopleData: MockedPerson[] = [
xUrl: 'https://twitter.com/janicedane',
avatarUrl: '',
jobTitle: 'CEO',
companyId: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6i',
company: {
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6i',
name: 'Facebook',
@ -117,7 +119,24 @@ export const mockedPeopleData: MockedPerson[] = [
phone: '06 12 34 56 78',
_activityCount: 2,
createdAt: '2023-04-20T13:20:09.158312+00:00',
city: 'Paris',
},
];
export const mockedEmptyPersonData = {
id: 'ce7f0a37-88d7-4cd8-8b41-6721c57195b5',
firstName: '',
lastName: '',
phone: null,
email: null,
city: null,
displayName: null,
avatarUrl: null,
createdAt: null,
jobTitle: null,
linkedinUrl: null,
xUrl: null,
_activityCount: null,
company: null,
__typename: 'Person',
};

185
front/src/testing/mock-data/view-fields.ts Normal file
View File

@ -0,0 +1,185 @@
import { mockedViewsData } from './views';
export const mockedViewFieldsData = [
// Companies
{
id: '79035310-e955-4986-a4a4-73f9d9949c6a',
fieldId: 'name',
viewId: mockedViewsData[0].id,
position: 0,
isVisible: true,
size: 180,
},
{
id: '2a96bbc8-d86d-439a-8e50-4b07ebd27750',
fieldId: 'domainName',
viewId: mockedViewsData[0].id,
position: 1,
isVisible: true,
size: 100,
},
{
id: '0c1b4c7b-6a3d-4fb0-bf2b-5d7c8fb844ed',
fieldId: 'accountOwner',
viewId: mockedViewsData[0].id,
position: 2,
isVisible: true,
size: 150,
},
{
id: 'cc7f9560-32b5-4b82-8fd9-b05fe77c8cf7',
fieldId: 'createdAt',
viewId: mockedViewsData[0].id,
position: 3,
isVisible: true,
size: 150,
},
{
id: '3de4d078-3396-4480-be2d-6f3b1a228b0d',
fieldId: 'employees',
viewId: mockedViewsData[0].id,
position: 4,
isVisible: true,
size: 150,
},
{
id: '4650c8fb-0f1e-4342-88dc-adedae1445f9',
fieldId: 'linkedin',
viewId: mockedViewsData[0].id,
position: 5,
isVisible: true,
size: 170,
},
{
id: '727430bf-6ff8-4c85-9828-cbe72ac0fc27',
fieldId: 'address',
viewId: mockedViewsData[0].id,
position: 6,
isVisible: true,
size: 170,
},
// People
{
id: '28894146-4fde-4a16-a9ca-1a31b5b788b4',
fieldId: 'displayName',
viewId: mockedViewsData[1].id,
position: 0,
isVisible: true,
size: 210,
},
{
id: 'e1e24864-8601-4cd8-8a63-09c1285f2e39',
fieldId: 'email',
viewId: mockedViewsData[1].id,
position: 1,
isVisible: true,
size: 150,
},
{
id: '5a1df716-7211-445a-9f16-9783a00998a7',
fieldId: 'company',
viewId: mockedViewsData[1].id,
position: 2,
isVisible: true,
size: 150,
},
{
id: 'a6e1197a-7e84-4d92-ace2-367c0bc46c49',
fieldId: 'phone',
viewId: mockedViewsData[1].id,
position: 3,
isVisible: true,
size: 150,
},
{
id: 'c9343097-d14b-4559-a5fa-626c1527d39f',
fieldId: 'createdAt',
viewId: mockedViewsData[1].id,
position: 4,
isVisible: true,
size: 150,
},
{
id: 'a873e5f0-fed6-47e9-a712-6854eab3ec77',
fieldId: 'city',
viewId: mockedViewsData[1].id,
position: 5,
isVisible: true,
size: 150,
},
{
id: '66f134b8-5329-422f-b88e-83e6bb707eb5',
fieldId: 'jobTitle',
viewId: mockedViewsData[1].id,
position: 6,
isVisible: true,
size: 150,
},
{
id: '648faa24-cabb-482a-8578-ba3f09906017',
fieldId: 'linkedin',
viewId: mockedViewsData[1].id,
position: 7,
isVisible: true,
size: 150,
},
{
id: '3a9e7f0d-a4ce-4ad5-aac7-3a24eb1a412d',
fieldId: 'x',
viewId: mockedViewsData[1].id,
position: 8,
isVisible: true,
size: 150,
},
// Opportunities
{
id: '35a42e2d-83dd-4b57-ada6-f90616da706d',
fieldId: 'amount',
viewId: mockedViewsData[2].id,
position: 0,
isVisible: true,
size: 180,
},
{
id: 'e5a731bb-82b9-4abe-ad22-1ddea94722f9',
fieldId: 'probability',
viewId: mockedViewsData[2].id,
position: 1,
isVisible: true,
size: 150,
},
{
id: '3159acd8-463f-458d-bf9a-af8ac6f57dc0',
fieldId: 'closeDate',
viewId: mockedViewsData[2].id,
position: 2,
isVisible: true,
size: 100,
},
{
id: 'afc0819d-b694-4e3c-a2e6-25261aa3ed2c',
fieldId: 'company',
viewId: mockedViewsData[2].id,
position: 3,
isVisible: true,
size: 150,
},
{
id: 'ec0507bb-aedc-4695-ba96-d81bdeb9db83',
fieldId: 'createdAt',
viewId: mockedViewsData[2].id,
position: 4,
isVisible: true,
size: 150,
},
{
id: '3f1585f6-44f6-45c5-b840-bc05af5d0008',
fieldId: 'pointOfContact',
viewId: mockedViewsData[2].id,
position: 5,
isVisible: true,
size: 150,
},
];

20
front/src/testing/mock-data/views.ts Normal file
View File

@ -0,0 +1,20 @@
export const mockedViewsData = [
{
id: '37a8a866-eb17-4e76-9382-03143a2f6a80',
name: 'All companies',
objectId: 'company',
type: 'table',
},
{
id: '6095799e-b48f-4e00-b071-10818083593a',
name: 'All people',
objectId: 'person',
type: 'table',
},
{
id: 'e26f66b7-f890-4a5c-b4d2-ec09987b5308',
name: 'All opportunities',
objectId: 'company',
type: 'kanban',
},
];