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

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',
},
];