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

Re-write test with storybook testing library (#150)

Browse Source 
* Re-write test with storybook testing library

* Update CI
This commit is contained in:
Charles Bochet
2023-05-29 11:02:38 +02:00
committed by GitHub
parent 8f88605f32
commit f935a6b723
65 changed files with 8085 additions and 5164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
front/src/pages/auth/__stories__/Callback.stories.tsx
View File

@ -1,19 +0,0 @@
import { MemoryRouter } from 'react-router-dom';
import Callback from '../Callback';
import { ThemeProvider } from '@emotion/react';
import { lightTheme } from '../../../layout/styles/themes';
const component = {
title: 'Callback',
component: Callback,
};
export default component;
export const CallbackDefault = () => (
<ThemeProvider theme={lightTheme}>
<MemoryRouter>
<Callback />
</MemoryRouter>
</ThemeProvider>
);

19
front/src/pages/auth/__stories__/Login.stories.tsx
View File

@ -1,19 +0,0 @@
import { MemoryRouter } from 'react-router-dom';
import Login from '../Login';
import { ThemeProvider } from '@emotion/react';
import { lightTheme } from '../../../layout/styles/themes';
const component = {
title: 'Login',
component: Login,
};
export default component;
export const LoginDefault = () => (
<ThemeProvider theme={lightTheme}>
<MemoryRouter>
<Login />
</MemoryRouter>
</ThemeProvider>
);

10
front/src/pages/auth/__tests__/Callback.test.tsx
View File

@ -1,10 +0,0 @@
import { render } from '@testing-library/react';
import { CallbackDefault } from '../__stories__/Callback.stories';
import { act } from 'react-dom/test-utils';
it('Checks the Callback page render', async () => {
await act(async () => {
render(<CallbackDefault />);
});
});

15
front/src/pages/auth/__tests__/Login.test.tsx
View File

@ -1,15 +0,0 @@
import { render } from '@testing-library/react';
import { LoginDefault } from '../__stories__/Login.stories';
const assignMock = jest.fn();
delete window.location;
window.location = { assign: assignMock };
afterEach(() => {
assignMock.mockClear();
});
it('Checks the Login page render', () => {
render(<LoginDefault />);
});

75
front/src/pages/companies/__stories__/Companies.stories.tsx
View File

@ -1,75 +0,0 @@
import { MemoryRouter } from 'react-router-dom';
import Companies from '../Companies';
import { ThemeProvider } from '@emotion/react';
import { lightTheme } from '../../../layout/styles/themes';
import { GET_COMPANIES } from '../../../services/api/companies';
import { mockCompaniesData } from '../__tests__/__data__/mock-data';
import { MockedProvider } from '@apollo/client/testing';
import { QueryMode } from '../../../generated/graphql';
const component = {
title: 'Companies',
component: Companies,
};
export default component;
const mocks = [
{
request: {
query: GET_COMPANIES,
variables: {
orderBy: [{ createdAt: 'desc' }],
where: {},
},
},
result: {
data: {
companies: mockCompaniesData,
},
},
},
{
request: {
query: GET_COMPANIES,
variables: {
orderBy: [{ createdAt: 'desc' }],
where: {},
},
},
result: {
data: {
companies: mockCompaniesData,
},
},
},
{
request: {
query: GET_COMPANIES,
variables: {
orderBy: [{ createdAt: 'desc' }],
where: {
domainName: { contains: '%aircal%', mode: QueryMode.Insensitive },
},
},
},
result: {
data: {
companies: mockCompaniesData.filter(
(company) =>
company.domain_name && company.domain_name.includes('aircal'),
),
},
},
},
];
export const CompaniesDefault = () => (
<MockedProvider mocks={mocks}>
<ThemeProvider theme={lightTheme}>
<MemoryRouter>
<Companies />
</MemoryRouter>
</ThemeProvider>
</MockedProvider>
);

169
front/src/pages/companies/__tests__/Companies.test.tsx
View File

@ -1,169 +0,0 @@
import { fireEvent, render, waitFor } from '@testing-library/react';
import { CompaniesDefault } from '../__stories__/Companies.stories';
import { act } from 'react-dom/test-utils';
import {
GraphqlMutationCompany,
GraphqlQueryCompany,
} from '../../../interfaces/entities/company.interface';
jest.mock('../../../apollo', () => {
const companyInterface = jest.requireActual(
'../../../interfaces/entities/company.interface',
);
return {
apiClient: {
mutate: (arg: {
mutation: unknown;
variables: GraphqlMutationCompany;
}) => {
const gqlCompany = arg.variables as unknown as GraphqlQueryCompany;
return {
data: { updateOneCompany: companyInterface.mapToCompany(gqlCompany) },
};
},
},
};
});
it('Checks company name edit is updating data', async () => {
const { getByText, getByDisplayValue } = render(<CompaniesDefault />);
await waitFor(() => {
expect(getByText('Airbnb')).toBeDefined();
});
act(() => {
fireEvent.click(getByText('Airbnb'));
});
await waitFor(() => {
expect(getByDisplayValue('Airbnb')).toBeInTheDocument();
});
act(() => {
const nameInput = getByDisplayValue('Airbnb');
if (!nameInput) {
throw new Error('nameInput is null');
}
fireEvent.change(nameInput, { target: { value: 'Airbnbb' } });
fireEvent.click(getByText('All Companies')); // Click outside
});
await waitFor(() => {
expect(getByText('Airbnbb')).toBeDefined();
});
});
it('Checks company url edit is updating data', async () => {
const { getByText, getByDisplayValue } = render(<CompaniesDefault />);
await waitFor(() => {
expect(getByText('airbnb.com')).toBeDefined();
});
act(() => {
fireEvent.click(getByText('airbnb.com'));
});
await waitFor(() => {
expect(getByDisplayValue('airbnb.com')).toBeInTheDocument();
});
act(() => {
const urlInput = getByDisplayValue('airbnb.com');
if (!urlInput) {
throw new Error('urlInput is null');
}
fireEvent.change(urlInput, { target: { value: 'airbnb.co' } });
fireEvent.click(getByText('All Companies')); // Click outside
});
await waitFor(() => {
expect(getByText('airbnb.co')).toBeInTheDocument();
});
});
it.only('Checks company address edit is updating data', async () => {
const { getByText, getByDisplayValue } = render(<CompaniesDefault />);
await waitFor(() => {
expect(getByText('17 rue de clignancourt')).toBeDefined();
});
act(() => {
fireEvent.click(getByText('17 rue de clignancourt'));
});
await waitFor(() => {
expect(getByDisplayValue('17 rue de clignancourt')).toBeInTheDocument();
});
act(() => {
const addressInput = getByDisplayValue('17 rue de clignancourt');
if (!addressInput) {
throw new Error('addressInput is null');
}
fireEvent.change(addressInput, {
target: { value: '21 rue de clignancourt' },
});
fireEvent.click(getByText('All Companies')); // Click outside
});
await waitFor(() => {
expect(getByText('21 rue de clignancourt')).toBeInTheDocument();
});
});
it('Checks insert data is appending a new line', async () => {
const { getByText, getByTestId, container } = render(<CompaniesDefault />);
await waitFor(() => {
expect(getByText('Airbnb')).toBeDefined();
});
const tableRows = container.querySelectorAll<HTMLElement>('table tbody tr');
expect(tableRows.length).toBe(6);
act(() => {
fireEvent.click(getByTestId('add-button'));
});
await waitFor(() => {
const tableRows = container.querySelectorAll<HTMLElement>('table tbody tr');
expect(tableRows.length).toBe(7);
});
});
it('Checks filters are working', async () => {
const { getByText, queryByText, getByPlaceholderText } = render(
<CompaniesDefault />,
);
await waitFor(() => {
expect(getByText('Airbnb')).toBeDefined();
});
const filterDropdown = getByText('Filter');
fireEvent.click(filterDropdown);
await waitFor(() => {
expect(getByText('Url')).toBeDefined();
});
const urlFilter = getByText('Url');
fireEvent.click(urlFilter);
const filterSearch = getByPlaceholderText('Url');
fireEvent.change(filterSearch, { target: { value: 'aircal' } });
await waitFor(() => {
expect(getByText('aircall.io')).toBeDefined();
const airbnbResult = queryByText('Airbnb');
expect(airbnbResult).not.toBeInTheDocument();
});
});

64
front/src/pages/companies/__tests__/__data__/mock-data.ts
View File

@ -1,64 +0,0 @@
import { GraphqlQueryCompany } from '../../../../interfaces/entities/company.interface';
export const mockCompaniesData: Array<GraphqlQueryCompany> = [
{
id: '89bb825c-171e-4bcc-9cf7-43448d6fb278',
domain_name: 'airbnb.com',
name: 'Airbnb',
created_at: '2023-04-26T10:08:54.724515+00:00',
address: '17 rue de clignancourt',
employees: 12,
account_owner: null,
__typename: 'companies',
},
{
id: 'b396e6b9-dc5c-4643-bcff-61b6cf7523ae',
domain_name: 'aircall.io',
name: 'Aircall',
created_at: '2023-04-26T10:12:42.33625+00:00',
address: '',
employees: 1,
account_owner: null,
__typename: 'companies',
},
{
id: 'a674fa6c-1455-4c57-afaf-dd5dc086361d',
domain_name: 'algolia.com',
name: 'Algolia',
created_at: '2023-04-26T10:10:32.530184+00:00',
address: '',
employees: 1,
account_owner: null,
__typename: 'companies',
},
{
id: 'b1cfd51b-a831-455f-ba07-4e30671e1dc3',
domain_name: 'apple.com',
name: 'Apple',
created_at: '2023-03-21T06:30:25.39474+00:00',
address: '',
employees: 10,
account_owner: null,
__typename: 'companies',
},
{
id: '5c21e19e-e049-4393-8c09-3e3f8fb09ecb',
domain_name: 'bereal.com',
name: 'BeReal',
created_at: '2023-04-26T10:13:29.712485+00:00',
address: '10 rue de la Paix',
employees: 1,
account_owner: null,
__typename: 'companies',
},
{
id: '9d162de6-cfbf-4156-a790-e39854dcd4eb',
domain_name: 'claap.com',
name: 'Claap',
created_at: '2023-04-26T10:09:25.656555+00:00',
address: '',
employees: 1,
account_owner: null,
__typename: 'companies',
},
];

19
front/src/pages/opportunities/__stories__/Opportunities.stories.tsx
View File

@ -1,19 +0,0 @@
import { MemoryRouter } from 'react-router-dom';
import Opportunities from '../Opportunities';
import { ThemeProvider } from '@emotion/react';
import { lightTheme } from '../../../layout/styles/themes';
const component = {
title: 'Opportunities',
component: Opportunities,
};
export default component;
export const OpportunitiesDefault = () => (
<ThemeProvider theme={lightTheme}>
<MemoryRouter>
<Opportunities />
</MemoryRouter>
</ThemeProvider>
);

10
front/src/pages/opportunities/__tests__/Opportunities.test.tsx
View File

@ -1,10 +0,0 @@
import { render } from '@testing-library/react';
import { OpportunitiesDefault } from '../__stories__/Opportunities.stories';
it('Checks the Companies page render', () => {
const { getByTestId } = render(<OpportunitiesDefault />);
const title = getByTestId('top-bar-title');
expect(title).toHaveTextContent('Opportunities');
});

11
front/src/pages/people/__stories__/People.mdx Normal file
View File

@ -0,0 +1,11 @@
{ /* People.mdx */ }
import { Canvas, Meta } from '@storybook/blocks';
import * as People from './People.stories';
<Meta of={People} />
# People View
<Canvas of={People.Default} />

170
front/src/pages/people/__stories__/People.stories.tsx
View File

@ -1,73 +1,113 @@
import { MemoryRouter } from 'react-router-dom';
import People from '../People';
import { expect } from '@storybook/jest';
import type { Meta, StoryObj } from '@storybook/react';
import { RecoilRoot } from 'recoil';
import { ThemeProvider } from '@emotion/react';
import { lightTheme } from '../../../layout/styles/themes';
import { MockedProvider } from '@apollo/client/testing';
import { mockPeopleData } from '../__tests__/__data__/mock-data';
import { GET_PEOPLE } from '../../../services/api/people';
import { SEARCH_PEOPLE_QUERY } from '../../../services/api/search/search';
import {
GraphqlMutationPerson,
GraphqlQueryPerson,
} from '../../../interfaces/entities/person.interface';
import { MemoryRouter } from 'react-router-dom';
import { graphql } from 'msw';
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
import { userEvent, within } from '@storybook/testing-library';
const component = {
title: 'People',
import People from '../People';
import { lightTheme } from '../../../layout/styles/themes';
import { FullHeightStorybookLayout } from '../../../testing/FullHeightStorybookLayout';
import { filterAndSortData } from '../../../testing/mock-data';
import { GraphqlQueryPerson } from '../../../interfaces/entities/person.interface';
import { mockedPeopleData } from '../../../testing/mock-data/people';
import { GraphqlQueryCompany } from '../../../interfaces/entities/company.interface';
import { mockCompaniesData } from '../../../testing/mock-data/companies';
const meta: Meta<typeof People> = {
title: 'Pages/People',
component: People,
};
export default component;
const mockedClient = new ApolloClient({
uri: process.env.REACT_APP_API_URL,
cache: new InMemoryCache(),
defaultOptions: {
watchQuery: {
fetchPolicy: 'no-cache',
errorPolicy: 'all',
},
query: {
fetchPolicy: 'no-cache',
errorPolicy: 'all',
},
},
});
const mocks = [
{
request: {
query: GET_PEOPLE,
variables: {
orderBy: [{ createdAt: 'desc' }],
where: {},
},
},
result: {
data: {
people: mockPeopleData,
},
},
},
{
request: {
query: GET_PEOPLE,
variables: {
orderBy: [{ createdAt: 'desc' }],
where: {},
},
},
result: {
data: {
people: mockPeopleData,
},
},
},
{
request: {
query: SEARCH_PEOPLE_QUERY, // TODO this should not be called for empty filters
variables: {
where: undefined,
},
},
result: {
data: {
people: [],
},
},
},
export default meta;
type Story = StoryObj<typeof People>;
const render = () => (
<RecoilRoot>
<ApolloProvider client={mockedClient}>
<ThemeProvider theme={lightTheme}>
<MemoryRouter>
<FullHeightStorybookLayout>
<People />
</FullHeightStorybookLayout>
</MemoryRouter>
</ThemeProvider>
</ApolloProvider>
</RecoilRoot>
);
const defaultMocks = [
graphql.query('GetPeople', (req, res, ctx) => {
const returnedMockedData = filterAndSortData<GraphqlQueryPerson>(
mockedPeopleData,
req.variables.where,
req.variables.orderBy,
req.variables.limit,
);
return res(
ctx.data({
people: returnedMockedData,
}),
);
}),
graphql.query('SearchQuery', (req, res, ctx) => {
const returnedMockedData = filterAndSortData<GraphqlQueryCompany>(
mockCompaniesData,
req.variables.where,
req.variables.orderBy,
req.variables.limit,
);
return res(
ctx.data({
searchResults: returnedMockedData,
}),
);
}),
];
export const PeopleDefault = () => (
<MockedProvider mocks={mocks}>
<ThemeProvider theme={lightTheme}>
<MemoryRouter>
<People />
</MemoryRouter>
</ThemeProvider>
</MockedProvider>
);
export const Default: Story = {
render,
parameters: {
msw: defaultMocks,
},
};
export const FilterByEmail: Story = {
render,
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const filterButton = canvas.getByText('Filter');
await userEvent.click(filterButton);
const emailFilterButton = canvas.getByText('Email', { selector: 'li' });
await userEvent.click(emailFilterButton);
const emailInput = canvas.getByPlaceholderText('Email');
await userEvent.type(emailInput, 'al', {
delay: 200,
});
await expect(canvas.queryAllByText('John')).toStrictEqual([]);
},
parameters: {
msw: defaultMocks,
},
};

109
front/src/pages/people/__tests__/People.test.tsx
View File

@ -1,109 +0,0 @@
import { fireEvent, render, waitFor } from '@testing-library/react';
import { PeopleDefault } from '../__stories__/People.stories';
import { act } from 'react-dom/test-utils';
import {
GraphqlMutationPerson,
GraphqlQueryPerson,
} from '../../../interfaces/entities/person.interface';
jest.mock('../../../apollo', () => {
const personInterface = jest.requireActual(
'../../../interfaces/entities/person.interface',
);
return {
apiClient: {
mutate: (arg: {
mutation: unknown;
variables: GraphqlMutationPerson;
}) => {
const gqlPerson = arg.variables as unknown as GraphqlQueryPerson;
return {
data: { updateOnePerson: personInterface.mapToPerson(gqlPerson) },
};
},
},
};
});
it('Checks people full name edit is updating data', async () => {
const { getByText, getByDisplayValue } = render(<PeopleDefault />);
await waitFor(() => {
expect(getByText('John Doe')).toBeDefined();
});
act(() => {
fireEvent.click(getByText('John Doe'));
});
await waitFor(() => {
expect(getByDisplayValue('John')).toBeInTheDocument();
});
act(() => {
const nameInput = getByDisplayValue('John');
if (!nameInput) {
throw new Error('firstNameInput is null');
}
fireEvent.change(nameInput, { target: { value: 'Jo' } });
expect(nameInput).toHaveValue('Jo');
fireEvent.click(getByText('All People')); // Click outside
});
await waitFor(() => {
expect(getByText('John Doe')).toBeInTheDocument();
});
});
it('Checks people email edit is updating data', async () => {
const { getByText, getByDisplayValue } = render(<PeopleDefault />);
await waitFor(() => {
expect(getByText('john@linkedin.com')).toBeDefined();
});
act(() => {
fireEvent.click(getByText('john@linkedin.com'));
});
await waitFor(() => {
expect(getByDisplayValue('john@linkedin.com')).toBeInTheDocument();
});
act(() => {
const emailInput = getByDisplayValue('john@linkedin.com');
if (!emailInput) {
throw new Error('emailInput is null');
}
fireEvent.change(emailInput, { target: { value: 'john@linkedin.c' } });
fireEvent.click(getByText('All People')); // Click outside
});
await waitFor(() => {
expect(getByText('john@linkedin.c')).toBeInTheDocument();
});
});
it('Checks insert data is appending a new line', async () => {
const { getByText, getByTestId, container } = render(<PeopleDefault />);
await waitFor(() => {
expect(getByText('John Doe')).toBeDefined();
});
const tableRows = container.querySelectorAll<HTMLElement>('table tbody tr');
expect(tableRows.length).toBe(4);
act(() => {
fireEvent.click(getByTestId('add-button'));
});
await waitFor(() => {
const tableRows = container.querySelectorAll<HTMLElement>('table tbody tr');
expect(tableRows.length).toBe(5);
});
});

73
front/src/pages/people/__tests__/__data__/mock-data.ts
View File

@ -1,73 +0,0 @@
import { GraphqlQueryPerson } from '../../../../interfaces/entities/person.interface';
export const mockPeopleData: Array<GraphqlQueryPerson> = [
{
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
__typename: 'Person',
firstname: 'Alexandre',
lastname: 'Prot',
email: 'alexandre@qonto.com',
company: {
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6c',
name: 'Qonto',
domain_name: 'qonto.com',
__typename: 'Company',
},
phone: '06 12 34 56 78',
created_at: '2023-04-20T13:20:09.158312+00:00',
city: 'Paris',
},
{
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6d',
__typename: 'Person',
firstname: 'John',
lastname: 'Doe',
email: 'john@linkedin.com',
company: {
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6e',
name: 'LinkedIn',
domain_name: 'linkedin.com',
__typename: 'Company',
},
phone: '06 12 34 56 78',
created_at: '2023-04-20T13:20:09.158312+00:00',
city: 'Paris',
},
{
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6f',
__typename: 'Person',
firstname: 'Jane',
lastname: 'Doe',
email: 'jane@sequoiacap.com',
company: {
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6g',
name: 'Sequoia',
domain_name: 'sequoiacap.com',
__typename: 'Company',
},
phone: '06 12 34 56 78',
created_at: '2023-04-20T13:20:09.158312+00:00',
city: 'Paris',
},
{
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6h',
__typename: 'Person',
firstname: 'Janice',
lastname: 'Dane',
email: 'janice@facebook.com',
company: {
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6i',
name: 'Facebook',
domain_name: 'facebook.com',
__typename: 'Company',
},
phone: '06 12 34 56 78',
created_at: '2023-04-20T13:20:09.158312+00:00',
city: 'Paris',
},
];