fix: fix Pages Storybook tests (#2305)
* fix: fix Companies pages tests * fix: fix People pages tests * fix: fix Opportunities page tests
This commit is contained in:
Thaïs
@ -8,6 +8,7 @@ import {
|
||||
PageDecoratorArgs,
|
||||
} from '~/testing/decorators/PageDecorator';
|
||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
||||
import { mockedCompaniesData } from '~/testing/mock-data/companies';
|
||||
import { sleep } from '~/testing/sleep';
|
||||
|
||||
import { Companies } from '../Companies';
|
||||
@ -27,26 +28,35 @@ const meta: Meta<PageDecoratorArgs> = {
|
||||
export default meta;
|
||||
|
||||
export const AddNewCompany: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await sleep(2000);
|
||||
await step('Wait for rows to appear', async () => {
|
||||
await canvas.findByText(
|
||||
mockedCompaniesData[0].name,
|
||||
{},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
});
|
||||
|
||||
const rowsBeforeAdd = canvas.getAllByRole('row');
|
||||
|
||||
const addButton = canvas.getByRole('button', { name: 'Add' });
|
||||
await step('Click on add button', async () => {
|
||||
const addButton = canvas.getByRole('button', { name: 'Add' });
|
||||
|
||||
userEvent.click(addButton);
|
||||
await userEvent.click(addButton);
|
||||
});
|
||||
|
||||
await sleep(1000);
|
||||
|
||||
const rowsAfterAdd = canvas.getAllByRole('row');
|
||||
await step('Check an empty row has been added', async () => {
|
||||
const rowsAfterAdd = canvas.getAllByRole('row');
|
||||
|
||||
const firstRow = rowsAfterAdd[1];
|
||||
const cells = within(firstRow).getAllByRole('cell');
|
||||
const firstRow = rowsAfterAdd[1];
|
||||
const cells = within(firstRow).getAllByRole('cell');
|
||||
|
||||
expect(cells[1].textContent).toBe('');
|
||||
|
||||
expect(rowsAfterAdd).toHaveLength(rowsBeforeAdd.length + 1);
|
||||
expect(cells[1].textContent).toBe('');
|
||||
expect(rowsAfterAdd).toHaveLength(rowsBeforeAdd.length + 1);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { expect } from '@storybook/jest';
|
||||
import { Meta } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import assert from 'assert';
|
||||
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import {
|
||||
@ -9,6 +8,7 @@ import {
|
||||
PageDecoratorArgs,
|
||||
} from '~/testing/decorators/PageDecorator';
|
||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
||||
import { mockedCompaniesData } from '~/testing/mock-data/companies';
|
||||
import { sleep } from '~/testing/sleep';
|
||||
|
||||
import { Companies } from '../Companies';
|
||||
@ -28,81 +28,92 @@ const meta: Meta<PageDecoratorArgs> = {
|
||||
export default meta;
|
||||
|
||||
export const FilterByName: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const filterButton = await canvas.findByText('Filter');
|
||||
await userEvent.click(filterButton);
|
||||
|
||||
const nameFilterButton = await canvas.findByTestId('select-filter-0');
|
||||
|
||||
assert(nameFilterButton);
|
||||
|
||||
await userEvent.click(nameFilterButton);
|
||||
|
||||
const nameInput = canvas.getByPlaceholderText('Name');
|
||||
await userEvent.type(nameInput, 'Air', {
|
||||
delay: 200,
|
||||
await step('Wait for rows to appear', async () => {
|
||||
await canvas.findByText(
|
||||
mockedCompaniesData[0].name,
|
||||
{},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
});
|
||||
|
||||
await sleep(200);
|
||||
|
||||
expect(await canvas.findByText('Airbnb')).toBeInTheDocument();
|
||||
expect(await canvas.findByText('Aircall')).toBeInTheDocument();
|
||||
expect(await canvas.queryAllByText('Qonto')).toStrictEqual([]);
|
||||
|
||||
const nameFilter = canvas.getAllByText('Name').find((item) => {
|
||||
return item.parentElement?.textContent?.includes('Name: Air');
|
||||
await step('Click on filter button', async () => {
|
||||
const filterButton = canvas.getByText('Filter');
|
||||
await userEvent.click(filterButton);
|
||||
});
|
||||
expect(nameFilter).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const FilterByAccountOwner: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await step('Select name filter', async () => {
|
||||
const nameFilterButton = canvas.getByTestId('select-filter-0');
|
||||
await userEvent.click(nameFilterButton);
|
||||
|
||||
const filterButton = await canvas.findByText('Filter');
|
||||
await userEvent.click(filterButton);
|
||||
const nameInput = canvas.getByPlaceholderText('Name');
|
||||
await userEvent.type(nameInput, 'Air', { delay: 200 });
|
||||
|
||||
const accountOwnerFilterButton = await canvas.findByTestId(
|
||||
'select-filter-5',
|
||||
);
|
||||
|
||||
assert(accountOwnerFilterButton);
|
||||
|
||||
await userEvent.click(accountOwnerFilterButton);
|
||||
|
||||
const accountOwnerNameInput = await canvas.findByPlaceholderText(
|
||||
'Account owner',
|
||||
);
|
||||
await userEvent.type(accountOwnerNameInput, 'Char', {
|
||||
delay: 200,
|
||||
const nameFilter = canvas.getAllByText(
|
||||
(_, element) => !!element?.textContent?.includes('Name: Air'),
|
||||
);
|
||||
expect(nameFilter).not.toHaveLength(0);
|
||||
});
|
||||
|
||||
await sleep(1000);
|
||||
|
||||
const charlesChip = (await canvas.findAllByTestId('menu-item')).find(
|
||||
(item) => {
|
||||
return item.textContent?.includes('Charles Test');
|
||||
},
|
||||
);
|
||||
|
||||
assert(charlesChip);
|
||||
|
||||
await userEvent.click(charlesChip);
|
||||
|
||||
// TODO: fix msw where clauses
|
||||
// expect(await canvas.findByText('Airbnb')).toBeInTheDocument();
|
||||
// await expect(canvas.queryAllByText('Qonto')).toStrictEqual([]);
|
||||
|
||||
const accountOwnerFilter = canvas
|
||||
.getAllByText('Account owner')
|
||||
.find((item) => {
|
||||
return item.parentElement?.textContent?.includes(
|
||||
'Account owner: Charles Test',
|
||||
);
|
||||
});
|
||||
expect(accountOwnerFilter).toBeInTheDocument();
|
||||
await step('Check filtered rows', async () => {
|
||||
expect(canvas.getByText('Airbnb')).toBeVisible();
|
||||
expect(canvas.getByText('Aircall')).toBeVisible();
|
||||
expect(canvas.queryByText('Qonto')).toBeNull();
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export const FilterByAccountOwner: Story = {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await step('Wait for rows to appear', async () => {
|
||||
await canvas.findByText(
|
||||
mockedCompaniesData[0].name,
|
||||
{},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
});
|
||||
|
||||
await step('Click on filter button', async () => {
|
||||
const filterButton = canvas.getByText('Filter');
|
||||
await userEvent.click(filterButton);
|
||||
});
|
||||
|
||||
await step('Select account owner filter', async () => {
|
||||
const accountOwnerFilterButton = canvas.getByTestId('select-filter-5');
|
||||
await userEvent.click(accountOwnerFilterButton);
|
||||
|
||||
const accountOwnerNameInput =
|
||||
canvas.getByPlaceholderText('Account owner');
|
||||
await userEvent.type(accountOwnerNameInput, 'Char', { delay: 200 });
|
||||
|
||||
const charlesChip = await canvas.findByRole(
|
||||
'listitem',
|
||||
{
|
||||
name: (_, element) =>
|
||||
!!element?.textContent?.includes('Charles Test'),
|
||||
},
|
||||
{ timeout: 1000 },
|
||||
);
|
||||
await userEvent.click(charlesChip);
|
||||
|
||||
const accountOwnerFilter = canvas.getAllByText(
|
||||
(_, element) =>
|
||||
!!element?.textContent?.includes('Account owner: Charles Test'),
|
||||
);
|
||||
expect(accountOwnerFilter).not.toHaveLength(0);
|
||||
});
|
||||
|
||||
await sleep(1000);
|
||||
|
||||
await step('Check filtered rows', async () => {
|
||||
expect(canvas.getByText('Airbnb')).toBeVisible();
|
||||
expect(canvas.queryByText('Qonto')).toBeNull();
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
@ -8,6 +8,8 @@ import {
|
||||
PageDecoratorArgs,
|
||||
} from '~/testing/decorators/PageDecorator';
|
||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
||||
import { mockedCompaniesData } from '~/testing/mock-data/companies';
|
||||
import { sleep } from '~/testing/sleep';
|
||||
|
||||
import { Companies } from '../Companies';
|
||||
|
||||
@ -25,24 +27,50 @@ const meta: Meta<PageDecoratorArgs> = {
|
||||
|
||||
export default meta;
|
||||
|
||||
const sortedCompanyNames = mockedCompaniesData
|
||||
.map(({ name }) => name)
|
||||
.toSorted();
|
||||
|
||||
export const SortByName: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const sortButton = await canvas.findByText('Sort');
|
||||
await userEvent.click(sortButton);
|
||||
await step('Wait for rows to appear', async () => {
|
||||
await canvas.findByText(
|
||||
mockedCompaniesData[0].name,
|
||||
{},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
});
|
||||
|
||||
const nameSortButton = await canvas.findByTestId('select-sort-0');
|
||||
await step('Click on sort button', async () => {
|
||||
const sortButton = canvas.getByRole('button', { name: 'Sort' });
|
||||
await userEvent.click(sortButton);
|
||||
});
|
||||
|
||||
await userEvent.click(nameSortButton);
|
||||
await step('Select sort by name', async () => {
|
||||
const nameSortButton = canvas.getByTestId('select-sort-0');
|
||||
await userEvent.click(nameSortButton);
|
||||
|
||||
expect(await canvas.getByTestId('remove-icon-name')).toBeInTheDocument();
|
||||
await canvas.findByTestId('remove-icon-name', {}, { timeout: 3000 });
|
||||
});
|
||||
|
||||
expect(await canvas.findByText('Airbnb')).toBeInTheDocument();
|
||||
await sleep(1000);
|
||||
|
||||
const resetButton = canvas.getByText('Reset');
|
||||
await userEvent.click(resetButton);
|
||||
await step('Check rows are sorted by name', async () => {
|
||||
const nameCells = canvas.getAllByText(
|
||||
(_, element) =>
|
||||
sortedCompanyNames.some((name) =>
|
||||
element?.textContent?.includes(name),
|
||||
),
|
||||
{ selector: '[data-testid="editable-cell-display-mode"]' },
|
||||
);
|
||||
|
||||
await expect(canvas.queryAllByTestId('remove-icon-name')).toStrictEqual([]);
|
||||
expect(nameCells).toHaveLength(sortedCompanyNames.length);
|
||||
|
||||
sortedCompanyNames.forEach((name, index) =>
|
||||
expect(nameCells[index]).toHaveTextContent(name),
|
||||
);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
@ -10,6 +10,7 @@ import { GET_ACTIVITY } from '@/activities/graphql/queries/getActivity';
|
||||
import { UPDATE_ONE_COMPANY } from '@/companies/graphql/mutations/updateOneCompany';
|
||||
import { GET_COMPANY } from '@/companies/graphql/queries/getCompany';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { ObjectFilterDropdownScope } from '@/ui/object/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
|
||||
import {
|
||||
PageDecorator,
|
||||
PageDecoratorArgs,
|
||||
@ -176,6 +177,13 @@ export const NoteTab: Story = {
|
||||
};
|
||||
|
||||
export const TaskTab: Story = {
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<ObjectFilterDropdownScope filterScopeId="tasks-filter-scope">
|
||||
<Story />
|
||||
</ObjectFilterDropdownScope>
|
||||
),
|
||||
],
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const taskTab = await canvas.findByTestId('tab-tasks');
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { within } from '@storybook/testing-library';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import {
|
||||
@ -24,12 +24,7 @@ export default meta;
|
||||
|
||||
export type Story = StoryObj<typeof Opportunities>;
|
||||
|
||||
export const Default: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await canvas.findByText('All opportunities');
|
||||
},
|
||||
};
|
||||
export const Default: Story = {};
|
||||
|
||||
export const AddCompanyFromHeader: Story = {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
@ -38,53 +33,35 @@ export const AddCompanyFromHeader: Story = {
|
||||
await step('Click on the add company button', async () => {
|
||||
const button = await canvas.findByTestId('add-company-progress-button');
|
||||
|
||||
await button.click();
|
||||
await userEvent.click(button);
|
||||
|
||||
await canvas.findByText('Algolia');
|
||||
await canvas.findByRole(
|
||||
'listitem',
|
||||
{ name: (_, element) => !!element?.textContent?.includes('Algolia') },
|
||||
{ timeout: 1000 },
|
||||
);
|
||||
});
|
||||
|
||||
await step('Change pipeline stage', async () => {
|
||||
const dropdownMenu = within(
|
||||
await canvas.findByTestId('company-progress-dropdown-menu'),
|
||||
const pipelineStageDropdownHeader = await canvas.findByRole(
|
||||
'listitem',
|
||||
{ name: (_, element) => !!element?.textContent?.includes('New') },
|
||||
{ timeout: 1000 },
|
||||
);
|
||||
|
||||
const pipelineStageDropdownHeader = await canvas.findByTestId(
|
||||
'selected-pipeline-stage',
|
||||
);
|
||||
|
||||
const pipelineStageDropdownUnfoldButton = await within(
|
||||
const pipelineStageDropdownUnfoldButton = within(
|
||||
pipelineStageDropdownHeader,
|
||||
).findByTestId('dropdown-menu-header-end-icon');
|
||||
).getByRole('button');
|
||||
|
||||
await pipelineStageDropdownUnfoldButton.click();
|
||||
await userEvent.click(pipelineStageDropdownUnfoldButton);
|
||||
|
||||
const menuItem1 = await canvas.findByTestId('select-pipeline-stage-1');
|
||||
|
||||
await menuItem1.click();
|
||||
|
||||
await dropdownMenu.findByText('Screening');
|
||||
});
|
||||
|
||||
await step('Change pipeline stage', async () => {
|
||||
const dropdownMenu = within(
|
||||
await canvas.findByTestId('company-progress-dropdown-menu'),
|
||||
const menuItem1 = await canvas.findByRole(
|
||||
'listitem',
|
||||
{ name: (_, element) => !!element?.textContent?.includes('Screening') },
|
||||
{ timeout: 1000 },
|
||||
);
|
||||
|
||||
const pipelineStageDropdownHeader = await canvas.findByTestId(
|
||||
'selected-pipeline-stage',
|
||||
);
|
||||
|
||||
const pipelineStageDropdownUnfoldButton = await within(
|
||||
pipelineStageDropdownHeader,
|
||||
).findByTestId('dropdown-menu-header-end-icon');
|
||||
|
||||
await pipelineStageDropdownUnfoldButton.click();
|
||||
|
||||
const menuItem1 = await canvas.findByTestId('select-pipeline-stage-1');
|
||||
|
||||
await menuItem1.click();
|
||||
|
||||
await dropdownMenu.findByText('Screening');
|
||||
await userEvent.click(menuItem1);
|
||||
});
|
||||
|
||||
// TODO: mock add company mutation and add step for company creation
|
||||
|
||||
@ -8,6 +8,7 @@ import {
|
||||
PageDecoratorArgs,
|
||||
} from '~/testing/decorators/PageDecorator';
|
||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
||||
import { mockedPeopleData } from '~/testing/mock-data/people';
|
||||
import { sleep } from '~/testing/sleep';
|
||||
|
||||
import { People } from '../People';
|
||||
@ -27,26 +28,35 @@ const meta: Meta<PageDecoratorArgs> = {
|
||||
export default meta;
|
||||
|
||||
export const AddNewPerson: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await sleep(2000);
|
||||
await step('Wait for rows to appear', async () => {
|
||||
await canvas.findByText(
|
||||
mockedPeopleData[0].displayName,
|
||||
{},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
});
|
||||
|
||||
const rowsBeforeAdd = canvas.getAllByRole('row');
|
||||
|
||||
const addButton = canvas.getByRole('button', { name: 'Add' });
|
||||
await step('Click on add button', async () => {
|
||||
const addButton = canvas.getByRole('button', { name: 'Add' });
|
||||
|
||||
userEvent.click(addButton);
|
||||
await userEvent.click(addButton);
|
||||
});
|
||||
|
||||
await sleep(1000);
|
||||
|
||||
const rowsAfterAdd = canvas.getAllByRole('row');
|
||||
await step('Check an empty row has been added', async () => {
|
||||
const rowsAfterAdd = canvas.getAllByRole('row');
|
||||
|
||||
const firstRow = rowsAfterAdd[1];
|
||||
const cells = within(firstRow).getAllByRole('cell');
|
||||
const firstRow = rowsAfterAdd[1];
|
||||
const cells = within(firstRow).getAllByRole('cell');
|
||||
|
||||
expect(cells[1].textContent).toBe('');
|
||||
|
||||
expect(rowsAfterAdd).toHaveLength(rowsBeforeAdd.length + 1);
|
||||
expect(cells[1].textContent).toBe('');
|
||||
expect(rowsAfterAdd).toHaveLength(rowsBeforeAdd.length + 1);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { expect } from '@storybook/jest';
|
||||
import { Meta } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import assert from 'assert';
|
||||
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import {
|
||||
@ -9,6 +8,7 @@ import {
|
||||
PageDecoratorArgs,
|
||||
} from '~/testing/decorators/PageDecorator';
|
||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
||||
import { mockedPeopleData } from '~/testing/mock-data/people';
|
||||
import { sleep } from '~/testing/sleep';
|
||||
|
||||
import { People } from '../People';
|
||||
@ -28,75 +28,86 @@ const meta: Meta<PageDecoratorArgs> = {
|
||||
export default meta;
|
||||
|
||||
export const Email: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const filterButton = await canvas.findByText('Filter');
|
||||
await userEvent.click(filterButton);
|
||||
|
||||
const emailFilterButton = await canvas.findByTestId('select-filter-2');
|
||||
|
||||
assert(emailFilterButton);
|
||||
|
||||
await userEvent.click(emailFilterButton);
|
||||
|
||||
const emailInput = canvas.getByPlaceholderText('Email');
|
||||
|
||||
await userEvent.type(emailInput, 'al', {
|
||||
delay: 200,
|
||||
await step('Wait for rows to appear', async () => {
|
||||
await canvas.findByText(
|
||||
mockedPeopleData[0].displayName,
|
||||
{},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
});
|
||||
|
||||
await sleep(100);
|
||||
|
||||
expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
|
||||
await expect(canvas.queryAllByText('John Doe')).toStrictEqual([]);
|
||||
|
||||
const emailFilter = canvas.getAllByText('Email').find((item) => {
|
||||
return item.parentElement?.textContent?.includes('Email: al');
|
||||
await step('Click on filter button', async () => {
|
||||
const filterButton = canvas.getByText('Filter');
|
||||
await userEvent.click(filterButton);
|
||||
});
|
||||
|
||||
await step('Select email filter', async () => {
|
||||
const emailFilterButton = canvas.getByTestId('select-filter-2');
|
||||
await userEvent.click(emailFilterButton);
|
||||
|
||||
const emailInput = canvas.getByPlaceholderText('Email');
|
||||
await userEvent.type(emailInput, 'al', { delay: 200 });
|
||||
|
||||
const emailFilter = canvas.getAllByText(
|
||||
(_, element) => !!element?.textContent?.includes('Email: al'),
|
||||
);
|
||||
expect(emailFilter).not.toHaveLength(0);
|
||||
});
|
||||
|
||||
await sleep(1000);
|
||||
|
||||
await step('Check filtered rows', async () => {
|
||||
expect(canvas.getByText('Alexandre Prot')).toBeVisible();
|
||||
expect(canvas.queryByText('John Doe')).toBeNull();
|
||||
});
|
||||
expect(emailFilter).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const CompanyName: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const filterButton = await canvas.findByText('Filter');
|
||||
await userEvent.click(filterButton);
|
||||
|
||||
const companyFilterButton = await canvas.findByTestId('select-filter-3');
|
||||
|
||||
assert(companyFilterButton);
|
||||
|
||||
await userEvent.click(companyFilterButton);
|
||||
|
||||
const companyNameInput = canvas.getByPlaceholderText('Company');
|
||||
await userEvent.type(companyNameInput, 'Qon', {
|
||||
delay: 200,
|
||||
await step('Wait for rows to appear', async () => {
|
||||
await canvas.findByText(
|
||||
mockedPeopleData[0].displayName,
|
||||
{},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
});
|
||||
|
||||
await sleep(500);
|
||||
|
||||
const qontoChip = (await canvas.findAllByTestId('menu-item')).find(
|
||||
(item) => {
|
||||
return item.textContent?.includes('Qonto');
|
||||
},
|
||||
);
|
||||
|
||||
expect(qontoChip).toBeInTheDocument();
|
||||
|
||||
assert(qontoChip);
|
||||
|
||||
await userEvent.click(qontoChip);
|
||||
|
||||
// TODO: fix msw where clauses
|
||||
// expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
|
||||
// await expect(canvas.queryAllByText('John Doe')).toStrictEqual([]);
|
||||
|
||||
const companyFilter = canvas.getAllByText('Company').find((item) => {
|
||||
return item.parentElement?.textContent?.includes('Company: Qonto');
|
||||
await step('Click on filter button', async () => {
|
||||
const filterButton = canvas.getByText('Filter');
|
||||
await userEvent.click(filterButton);
|
||||
});
|
||||
|
||||
await step('Select company filter', async () => {
|
||||
const companyFilterButton = canvas.getByTestId('select-filter-3');
|
||||
await userEvent.click(companyFilterButton);
|
||||
|
||||
const companyNameInput = canvas.getByPlaceholderText('Company');
|
||||
await userEvent.type(companyNameInput, 'Qon', { delay: 200 });
|
||||
|
||||
const qontoChip = await canvas.findByRole(
|
||||
'listitem',
|
||||
{ name: (_, element) => !!element?.textContent?.includes('Qonto') },
|
||||
{ timeout: 1000 },
|
||||
);
|
||||
await userEvent.click(qontoChip);
|
||||
|
||||
const companyFilter = canvas.getAllByText(
|
||||
(_, element) => !!element?.textContent?.includes('Company: Qonto'),
|
||||
);
|
||||
expect(companyFilter).not.toHaveLength(0);
|
||||
});
|
||||
|
||||
await sleep(1000);
|
||||
|
||||
await step('Check filtered rows', async () => {
|
||||
expect(canvas.getByText('Alexandre Prot')).toBeVisible();
|
||||
expect(canvas.queryByText('John Doe')).toBeNull();
|
||||
});
|
||||
expect(companyFilter).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
import { getOperationName } from '@apollo/client/utilities';
|
||||
import { isString } from '@sniptt/guards';
|
||||
import { expect } from '@storybook/jest';
|
||||
import { Meta } from '@storybook/react';
|
||||
import { userEvent, within } from '@storybook/testing-library';
|
||||
import { graphql } from 'msw';
|
||||
import assert from 'assert';
|
||||
|
||||
import { UPDATE_ONE_PERSON } from '@/people/graphql/mutations/updateOnePerson';
|
||||
import { SEARCH_COMPANY_QUERY } from '@/search/graphql/queries/searchCompanyQuery';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { Company } from '~/generated/graphql';
|
||||
import {
|
||||
PageDecorator,
|
||||
PageDecoratorArgs,
|
||||
} from '~/testing/decorators/PageDecorator';
|
||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
||||
import { fetchOneFromData } from '~/testing/mock-data';
|
||||
import { mockedCompaniesData } from '~/testing/mock-data/companies';
|
||||
import { mockedPeopleData } from '~/testing/mock-data/people';
|
||||
import { sleep } from '~/testing/sleep';
|
||||
|
||||
@ -41,29 +34,23 @@ export const InteractWithManyRows: Story = {
|
||||
|
||||
const firstRowEmailCell = await canvas.findByText(
|
||||
mockedPeopleData[0].email,
|
||||
{},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
assert(firstRowEmailCell.parentElement);
|
||||
|
||||
const secondRowEmailCell = await canvas.findByText(
|
||||
mockedPeopleData[1].email,
|
||||
);
|
||||
const secondRowEmailCell = canvas.getByText(mockedPeopleData[1].email);
|
||||
assert(secondRowEmailCell.parentElement);
|
||||
|
||||
expect(
|
||||
canvas.queryByTestId('editable-cell-edit-mode-container'),
|
||||
).toBeNull();
|
||||
|
||||
if (!firstRowEmailCell.parentElement) {
|
||||
throw new Error('No parent node');
|
||||
}
|
||||
|
||||
await userEvent.click(firstRowEmailCell.parentElement);
|
||||
|
||||
expect(
|
||||
canvas.queryByTestId('editable-cell-edit-mode-container'),
|
||||
).toBeInTheDocument();
|
||||
|
||||
if (!secondRowEmailCell.parentElement) {
|
||||
throw new Error('No parent node');
|
||||
}
|
||||
canvas.getByTestId('editable-cell-edit-mode-container'),
|
||||
).toBeVisible();
|
||||
|
||||
await userEvent.click(secondRowEmailCell.parentElement);
|
||||
|
||||
@ -75,220 +62,138 @@ export const InteractWithManyRows: Story = {
|
||||
|
||||
await userEvent.click(secondRowEmailCell.parentElement);
|
||||
|
||||
await sleep(25);
|
||||
|
||||
expect(
|
||||
canvas.queryByTestId('editable-cell-edit-mode-container'),
|
||||
).toBeInTheDocument();
|
||||
canvas.getByTestId('editable-cell-edit-mode-container'),
|
||||
).toBeVisible();
|
||||
},
|
||||
};
|
||||
|
||||
export const CheckCheckboxes: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await canvas.findByText(mockedPeopleData[0].email);
|
||||
await step('Wait for rows to appear', async () => {
|
||||
await canvas.findByText(
|
||||
mockedPeopleData[0].displayName,
|
||||
{},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
});
|
||||
|
||||
const inputCheckboxContainers = await canvas.findAllByTestId(
|
||||
'input-checkbox',
|
||||
);
|
||||
const [, firstRowCheckbox, secondRowCheckbox] =
|
||||
canvas.getAllByRole<HTMLInputElement>('checkbox');
|
||||
|
||||
const inputCheckboxes = await canvas.findAllByTestId('input-checkbox');
|
||||
await step('Select first row', async () => {
|
||||
assert(firstRowCheckbox.parentElement);
|
||||
|
||||
const secondCheckboxContainer = inputCheckboxContainers[1];
|
||||
const secondCheckbox = inputCheckboxes[1] as HTMLInputElement;
|
||||
await userEvent.click(firstRowCheckbox.parentElement);
|
||||
await sleep(25);
|
||||
|
||||
expect(secondCheckboxContainer).toBeDefined();
|
||||
expect(firstRowCheckbox).toBeChecked();
|
||||
});
|
||||
|
||||
await userEvent.click(secondCheckboxContainer);
|
||||
await step('Select second row', async () => {
|
||||
await userEvent.click(secondRowCheckbox);
|
||||
await sleep(25);
|
||||
|
||||
expect(secondCheckbox.checked).toBe(true);
|
||||
expect(secondRowCheckbox).toBeChecked();
|
||||
});
|
||||
|
||||
await userEvent.click(secondCheckbox);
|
||||
await step('Unselect second row', async () => {
|
||||
assert(secondRowCheckbox.parentElement);
|
||||
|
||||
expect(secondCheckbox.checked).toBe(false);
|
||||
await userEvent.click(secondRowCheckbox.parentElement);
|
||||
await sleep(25);
|
||||
|
||||
expect(secondRowCheckbox).not.toBeChecked();
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
const editRelationMocks = (
|
||||
initiallySelectedCompanyName: string,
|
||||
searchCompanyNames: Array<string>,
|
||||
updateSelectedCompany: Pick<Company, 'name' | 'domainName'>,
|
||||
) => [
|
||||
...graphqlMocks.filter((graphqlMock) => {
|
||||
if (
|
||||
isString(graphqlMock.info.operationName) &&
|
||||
[
|
||||
getOperationName(UPDATE_ONE_PERSON),
|
||||
getOperationName(SEARCH_COMPANY_QUERY),
|
||||
].includes(graphqlMock.info.operationName)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}),
|
||||
...[
|
||||
graphql.mutation(
|
||||
getOperationName(UPDATE_ONE_PERSON) ?? '',
|
||||
(req, res, ctx) => {
|
||||
return res(
|
||||
ctx.data({
|
||||
updateOnePerson: {
|
||||
...fetchOneFromData(mockedPeopleData, req.variables.where.id),
|
||||
...{
|
||||
company: {
|
||||
id: req.variables.where.id,
|
||||
name: updateSelectedCompany.name,
|
||||
domainName: updateSelectedCompany.domainName,
|
||||
__typename: 'Company',
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
);
|
||||
},
|
||||
),
|
||||
graphql.query(
|
||||
getOperationName(SEARCH_COMPANY_QUERY) ?? '',
|
||||
(req, res, ctx) => {
|
||||
if (!req.variables.where?.AND) {
|
||||
// Selected company case
|
||||
const searchResults = mockedCompaniesData.filter((company) =>
|
||||
[initiallySelectedCompanyName].includes(company.name),
|
||||
);
|
||||
return res(
|
||||
ctx.data({
|
||||
searchResults: searchResults,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
req.variables.where?.AND?.some(
|
||||
(where: { id?: { in: Array<string> } }) => where.id?.in,
|
||||
)
|
||||
) {
|
||||
// Selected company case
|
||||
const searchResults = mockedCompaniesData.filter((company) =>
|
||||
[initiallySelectedCompanyName].includes(company.name),
|
||||
);
|
||||
return res(
|
||||
ctx.data({
|
||||
searchResults: searchResults,
|
||||
}),
|
||||
);
|
||||
} else {
|
||||
// Search case
|
||||
|
||||
const searchResults = mockedCompaniesData.filter((company) =>
|
||||
searchCompanyNames.includes(company.name),
|
||||
);
|
||||
return res(
|
||||
ctx.data({
|
||||
searchResults: searchResults,
|
||||
}),
|
||||
);
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
];
|
||||
|
||||
export const EditRelation: Story = {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await step('Click on second row company cell', async () => {
|
||||
const secondRowCompanyCell = await canvas.findByText(
|
||||
await step('Click on third row company cell', async () => {
|
||||
const thirdRowCompanyCell = await canvas.findByText(
|
||||
mockedPeopleData[2].company.name,
|
||||
{},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
|
||||
await userEvent.click(
|
||||
secondRowCompanyCell.parentNode?.parentNode?.parentNode
|
||||
?.parentElement as HTMLElement,
|
||||
);
|
||||
await userEvent.click(thirdRowCompanyCell);
|
||||
});
|
||||
|
||||
await step('Type "Air" in relation picker', async () => {
|
||||
const relationInput = await canvas.findByPlaceholderText('Search');
|
||||
const relationSearchInput = canvas.getByPlaceholderText('Search');
|
||||
|
||||
await userEvent.type(relationInput, 'Air', {
|
||||
delay: 200,
|
||||
});
|
||||
await userEvent.type(relationSearchInput, 'Air', { delay: 200 });
|
||||
});
|
||||
|
||||
await step('Select "Airbnb"', async () => {
|
||||
const airbnbChip = await canvas.findByText('Airbnb', {
|
||||
selector: 'div',
|
||||
const airbnbChip = await canvas.findByRole('listitem', {
|
||||
name: (_, element) => !!element?.textContent?.includes('Airbnb'),
|
||||
});
|
||||
|
||||
await userEvent.click(airbnbChip);
|
||||
});
|
||||
|
||||
await step('Check if Airbnb is in second row company cell', async () => {
|
||||
await canvas.findByText('Airbnb');
|
||||
await step('Check if Airbnb is in the table', async () => {
|
||||
expect(
|
||||
await canvas.findByText('Airbnb', {}, { timeout: 3000 }),
|
||||
).toBeVisible();
|
||||
});
|
||||
},
|
||||
parameters: {
|
||||
msw: editRelationMocks('Qonto', ['Airbnb', 'Aircall'], {
|
||||
name: 'Airbnb',
|
||||
domainName: 'airbnb.com',
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
export const SelectRelationWithKeys: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
let firstRowCompanyCell = await canvas.findByText(
|
||||
mockedPeopleData[0].company.name,
|
||||
);
|
||||
await sleep(25);
|
||||
await step('Click on first row company cell', async () => {
|
||||
const firstRowCompanyCell = await canvas.findByText(
|
||||
mockedPeopleData[0].company.name,
|
||||
{},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
|
||||
await userEvent.click(
|
||||
firstRowCompanyCell.parentNode?.parentNode?.parentNode
|
||||
?.parentElement as HTMLElement,
|
||||
);
|
||||
firstRowCompanyCell = await canvas.findByText(
|
||||
mockedPeopleData[0].company.name,
|
||||
);
|
||||
await sleep(25);
|
||||
await userEvent.click(firstRowCompanyCell);
|
||||
|
||||
const relationInput = await canvas.findByPlaceholderText('Search');
|
||||
|
||||
await userEvent.type(relationInput, 'Air', {
|
||||
delay: 200,
|
||||
await userEvent.click(firstRowCompanyCell);
|
||||
});
|
||||
|
||||
await userEvent.type(relationInput, '{arrowdown}');
|
||||
const relationSearchInput = canvas.getByPlaceholderText('Search');
|
||||
|
||||
await sleep(50);
|
||||
await step('Type "Air" in relation picker', async () => {
|
||||
await userEvent.type(relationSearchInput, 'Air', { delay: 200 });
|
||||
});
|
||||
|
||||
await userEvent.type(relationInput, '{arrowup}');
|
||||
await step('Select "Aircall"', async () => {
|
||||
await userEvent.keyboard('{arrowdown}');
|
||||
|
||||
await sleep(50);
|
||||
await sleep(50);
|
||||
|
||||
await userEvent.type(relationInput, '{arrowdown}');
|
||||
await userEvent.keyboard('{arrowup}');
|
||||
|
||||
await sleep(50);
|
||||
await sleep(50);
|
||||
|
||||
await userEvent.type(relationInput, '{arrowdown}');
|
||||
await userEvent.keyboard('{arrowdown}');
|
||||
|
||||
await sleep(50);
|
||||
await sleep(50);
|
||||
|
||||
await userEvent.type(relationInput, '{enter}');
|
||||
await userEvent.keyboard('{arrowdown}');
|
||||
|
||||
await sleep(200);
|
||||
await sleep(50);
|
||||
|
||||
const allAirbns = await canvas.findAllByText('Aircall');
|
||||
expect(allAirbns.length).toBe(1);
|
||||
},
|
||||
parameters: {
|
||||
msw: editRelationMocks('Qonto', ['Airbnb', 'Aircall'], {
|
||||
name: 'Aircall',
|
||||
domainName: 'aircall.io',
|
||||
}),
|
||||
await userEvent.keyboard('{arrowdown}');
|
||||
|
||||
await sleep(50);
|
||||
|
||||
await userEvent.keyboard('{enter}');
|
||||
});
|
||||
|
||||
await step('Check if Aircall is in the table', async () => {
|
||||
expect(
|
||||
await canvas.findByText('Aircall', {}, { timeout: 3000 }),
|
||||
).toBeVisible();
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
@ -8,6 +8,7 @@ import {
|
||||
PageDecoratorArgs,
|
||||
} from '~/testing/decorators/PageDecorator';
|
||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
||||
import { mockedPeopleData } from '~/testing/mock-data/people';
|
||||
import { sleep } from '~/testing/sleep';
|
||||
|
||||
import { People } from '../People';
|
||||
@ -26,41 +27,98 @@ const meta: Meta<PageDecoratorArgs> = {
|
||||
|
||||
export default meta;
|
||||
|
||||
const peopleEmails = mockedPeopleData.map(({ email }) => email);
|
||||
const sortedPeopleEmails = peopleEmails.toSorted();
|
||||
|
||||
export const Email: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const sortButton = await canvas.findByText('Sort');
|
||||
await userEvent.click(sortButton);
|
||||
await step('Wait for rows to appear', async () => {
|
||||
await canvas.findByText(
|
||||
mockedPeopleData[0].displayName,
|
||||
{},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
});
|
||||
|
||||
const emailSortButton = await canvas.findByTestId('select-sort-2');
|
||||
await userEvent.click(emailSortButton);
|
||||
await step('Click on sort button', async () => {
|
||||
const sortButton = canvas.getByRole('button', { name: 'Sort' });
|
||||
await userEvent.click(sortButton);
|
||||
});
|
||||
|
||||
expect(await canvas.getByTestId('remove-icon-email')).toBeInTheDocument();
|
||||
await step('Select sort by email', async () => {
|
||||
const emailSortButton = canvas.getByTestId('select-sort-2');
|
||||
await userEvent.click(emailSortButton);
|
||||
|
||||
expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
|
||||
await canvas.findByTestId('remove-icon-email', {}, { timeout: 3000 });
|
||||
});
|
||||
|
||||
await sleep(1000);
|
||||
|
||||
await step('Check rows are sorted by email', async () => {
|
||||
const emailCells = canvas.getAllByText(
|
||||
(_, element) =>
|
||||
sortedPeopleEmails.some((email) =>
|
||||
element?.textContent?.includes(email),
|
||||
),
|
||||
{ selector: '[data-testid="editable-cell-display-mode"]' },
|
||||
);
|
||||
|
||||
expect(emailCells).toHaveLength(sortedPeopleEmails.length);
|
||||
|
||||
sortedPeopleEmails.forEach((email, index) =>
|
||||
expect(emailCells[index]).toHaveTextContent(email),
|
||||
);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export const Reset: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
const sortButton = await canvas.findByText('Sort');
|
||||
await userEvent.click(sortButton);
|
||||
await step('Wait for rows to appear', async () => {
|
||||
await canvas.findByText(
|
||||
mockedPeopleData[0].displayName,
|
||||
{},
|
||||
{ timeout: 3000 },
|
||||
);
|
||||
});
|
||||
|
||||
const emailSortButton = await canvas.findByTestId('select-sort-2');
|
||||
await userEvent.click(emailSortButton);
|
||||
await step('Click on sort button', async () => {
|
||||
const sortButton = canvas.getByRole('button', { name: 'Sort' });
|
||||
await userEvent.click(sortButton);
|
||||
});
|
||||
|
||||
expect(await canvas.getByTestId('remove-icon-email')).toBeInTheDocument();
|
||||
await step('Select sort by email', async () => {
|
||||
const emailSortButton = canvas.getByTestId('select-sort-2');
|
||||
await userEvent.click(emailSortButton);
|
||||
|
||||
const resetButton = canvas.getByText('Reset');
|
||||
await userEvent.click(resetButton);
|
||||
expect(
|
||||
await canvas.findByTestId('remove-icon-email'),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
await sleep(1000);
|
||||
await step('Click on reset button', async () => {
|
||||
const resetButton = canvas.getByRole('button', { name: 'Reset' });
|
||||
await userEvent.click(resetButton);
|
||||
|
||||
await expect(canvas.queryAllByTestId('remove-icon-email')).toStrictEqual(
|
||||
[],
|
||||
);
|
||||
expect(canvas.queryByTestId('remove-icon-email')).toBeNull();
|
||||
});
|
||||
|
||||
await step('Check rows are in initial order', async () => {
|
||||
const emailCells = canvas.getAllByText(
|
||||
(_, element) =>
|
||||
peopleEmails.some((email) => element?.textContent?.includes(email)),
|
||||
{ selector: '[data-testid="editable-cell-display-mode"]' },
|
||||
);
|
||||
|
||||
expect(emailCells).toHaveLength(peopleEmails.length);
|
||||
|
||||
peopleEmails.forEach((email, index) =>
|
||||
expect(emailCells[index]).toHaveTextContent(email),
|
||||
);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user