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

Lucas/t 353 checkbox should change state when clicking on their whole (#167)

Browse Source 
* Added on click on Checkbox component

* - Added test in story
- Added sleep util
- Fixed click target collision (thanks to test !)

* Use a new CheckboxCell to wrap Checkbox

* Fixed lint

* Refactored CSS after comment

* Fixed tests
This commit is contained in:
Lucas Bordeau
2023-06-01 15:29:53 +02:00
committed by GitHub
parent 14c0119c4b
commit 58bbadcc30
9 changed files with 144 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,7 @@ import People from '../People';
import { Story } from './People.stories';
import { mocks, render } from './shared';
import { mockedPeopleData } from '../../../testing/mock-data/people';
import { sleep } from '../../../testing/sleep';
const meta: Meta<typeof People> = {
title: 'Pages/People',
@ -39,7 +40,7 @@ export const ChangeEmail: Story = {
await userEvent.click(secondRowEmailCell);
await new Promise((resolve) => setTimeout(resolve, 25));
await sleep(25);
expect(
canvas.queryByTestId('editable-cell-edit-mode-container'),
@ -47,7 +48,7 @@ export const ChangeEmail: Story = {
await userEvent.click(secondRowEmailCell);
await new Promise((resolve) => setTimeout(resolve, 25));
await sleep(25);
expect(
canvas.queryByTestId('editable-cell-edit-mode-container'),
@ -57,3 +58,34 @@ export const ChangeEmail: Story = {
msw: mocks,
},
};
export const Checkbox: Story = {
render,
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await sleep(500);
const inputCheckboxContainers = await canvas.findAllByTestId(
'input-checkbox-cell-container',
);
const inputCheckboxes = await canvas.findAllByTestId('input-checkbox');
const secondCheckboxContainer = inputCheckboxContainers[1];
const secondCheckbox = inputCheckboxes[1] as HTMLInputElement;
expect(secondCheckboxContainer).toBeDefined();
await userEvent.click(secondCheckboxContainer);
expect(secondCheckbox.checked).toBe(true);
await userEvent.click(secondCheckbox);
expect(secondCheckbox.checked).toBe(false);
},
parameters: {
msw: mocks,
},
};