Skip to content

Commit ac75805

Browse files
GrabowskiMGrabowskiM
authored
IBX-10694: Add tests for Checkbox components (#50)
1 parent 3f42bca commit ac75805

File tree

3 files changed

+102
-17
lines changed

3 files changed

+102
-17
lines changed

‎packages/components/src/components/Checkbox/CheckboxField/CheckboxField.test.stories.tsx‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,34 +22,54 @@ export default meta;
2222

2323
type Story = StoryObj<typeof CheckboxFieldStateful>;
2424

25-
const NUMBER_OF_CLICKS_FOCUS = 2;
26-
2725
export const Default: Story = {
2826
name: 'Default',
2927
play: async ({ canvasElement, step, args }) => {
3028
const canvas = within(canvasElement);
31-
const input = canvas.getByRole('checkbox');
29+
const input = canvas.getByRole<HTMLInputElement>('checkbox');
30+
const label = canvas.getByText('Checkbox Label');
31+
const checkInputHandlers = async (nthCalled: number, currentValue: boolean) => {
32+
await expect(args.onChange).toHaveBeenCalledTimes(nthCalled);
33+
await expect(args.onChange).toHaveBeenLastCalledWith(currentValue, expect.anything());
34+
await expect(args.onInput).toHaveBeenCalledTimes(nthCalled);
35+
await expect(args.onInput).toHaveBeenLastCalledWith(currentValue, expect.anything());
36+
await expect(input.checked).toBe(currentValue);
37+
};
3238

33-
await step('Checkbox handles focus event', async () => {
39+
await step('Click checkbox', async () => {
3440
await expect(args.onFocus).not.toHaveBeenCalled();
3541

3642
await userEvent.click(input);
3743

3844
await expect(args.onFocus).toHaveBeenCalledOnce();
45+
await checkInputHandlers(1, true); // eslint-disable-line no-magic-numbers
46+
});
3947

48+
await step('Click checkbox again', async () => {
4049
await userEvent.click(input);
4150

4251
await expect(args.onFocus).toHaveBeenCalledOnce();
43-
await expect(args.onChange).toHaveBeenCalledTimes(NUMBER_OF_CLICKS_FOCUS);
44-
await expect(args.onInput).toHaveBeenCalledTimes(NUMBER_OF_CLICKS_FOCUS);
52+
await checkInputHandlers(2, false); // eslint-disable-line no-magic-numbers
4553
});
4654

47-
await step('Checkbox handles blur event', async () => {
55+
await step('Click outside checkbox', async () => {
4856
await expect(args.onBlur).not.toHaveBeenCalled();
4957

5058
await userEvent.click(canvasElement);
5159

5260
await expect(args.onBlur).toHaveBeenCalledOnce();
5361
});
62+
63+
await step('Click checkbox label', async () => {
64+
await userEvent.click(label);
65+
66+
await checkInputHandlers(3, true); // eslint-disable-line no-magic-numbers
67+
});
68+
69+
await step('Click checkbox label again', async () => {
70+
await userEvent.click(label);
71+
72+
await checkInputHandlers(4, false); // eslint-disable-line no-magic-numbers
73+
});
5474
},
5575
};

‎packages/components/src/components/Checkbox/CheckboxInput/CheckboxInput.test.stories.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,29 +20,35 @@ export default meta;
2020

2121
type Story = StoryObj<typeof CheckboxInputStateful>;
2222

23-
const NUMBER_OF_CLICKS_FOCUS = 2;
24-
2523
export const Default: Story = {
2624
name: 'Default',
2725
play: async ({ canvasElement, step, args }) => {
2826
const canvas = within(canvasElement);
29-
const input = canvas.getByRole('checkbox');
30-
31-
await step('Checkbox handles focus event', async () => {
27+
const input = canvas.getByRole<HTMLInputElement>('checkbox');
28+
const checkInputHandlers = async (nthCalled: number, currentValue: boolean) => {
29+
await expect(args.onFocus).toHaveBeenCalledOnce();
30+
await expect(args.onChange).toHaveBeenCalledTimes(nthCalled);
31+
await expect(args.onChange).toHaveBeenLastCalledWith(currentValue, expect.anything());
32+
await expect(args.onInput).toHaveBeenCalledTimes(nthCalled);
33+
await expect(args.onInput).toHaveBeenLastCalledWith(currentValue, expect.anything());
34+
await expect(input.checked).toBe(currentValue);
35+
};
36+
37+
await step('Click checkbox', async () => {
3238
await expect(args.onFocus).not.toHaveBeenCalled();
3339

3440
await userEvent.click(input);
3541

36-
await expect(args.onFocus).toHaveBeenCalledOnce();
42+
await checkInputHandlers(1, true); // eslint-disable-line no-magic-numbers
43+
});
3744

45+
await step('Click checkbox again', async () => {
3846
await userEvent.click(input);
3947

40-
await expect(args.onFocus).toHaveBeenCalledOnce();
41-
await expect(args.onChange).toHaveBeenCalledTimes(NUMBER_OF_CLICKS_FOCUS);
42-
await expect(args.onInput).toHaveBeenCalledTimes(NUMBER_OF_CLICKS_FOCUS);
48+
await checkInputHandlers(2, false); // eslint-disable-line no-magic-numbers
4349
});
4450

45-
await step('Checkbox handles blur event', async () => {
51+
await step('Click outside checkbox', async () => {
4652
await expect(args.onBlur).not.toHaveBeenCalled();
4753

4854
await userEvent.click(canvasElement);

‎packages/components/src/components/Checkbox/CheckboxesListField/CheckboxesListField.test.stories.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { expect, fn, userEvent, within } from 'storybook/test';
3+
4+
import { CheckboxesListFieldAction, CheckboxesListFieldStateful } from '.';
5+
6+
const meta: Meta<typeof CheckboxesListFieldStateful> = {
7+
component: CheckboxesListFieldStateful,
8+
tags: ['!dev'],
9+
args: {
10+
label: 'Choice Inputs List Label',
11+
helperText: 'This is a helper text',
12+
value: [],
13+
items: [
14+
{ id: 'item1', label: 'Item 1', value: 'item1' },
15+
{ id: 'item2', label: 'Item 2', value: 'item2' },
16+
{ id: 'item3', label: 'Item 3', value: 'item3' },
17+
],
18+
onChange: fn(),
19+
},
20+
};
21+
22+
export default meta;
23+
24+
type Story = StoryObj<typeof CheckboxesListFieldStateful>;
25+
26+
export const Default: Story = {
27+
name: 'Default',
28+
play: async ({ canvasElement, step, args }) => {
29+
const canvas = within(canvasElement);
30+
const input2 = canvas.getByRole<HTMLInputElement>('checkbox', { name: 'Item 2' });
31+
const input3 = canvas.getByRole<HTMLInputElement>('checkbox', { name: 'Item 3' });
32+
33+
await step('Click last item', async () => {
34+
await userEvent.click(input3);
35+
36+
await expect(args.onChange).toHaveBeenCalledOnce();
37+
await expect(args.onChange).toHaveBeenLastCalledWith(['item3'], 'item3', CheckboxesListFieldAction.Check);
38+
await expect(input3.checked).toBe(true);
39+
});
40+
41+
await step('Click second item', async () => {
42+
await userEvent.click(input2);
43+
44+
await expect(args.onChange).toHaveBeenCalledTimes(2); // eslint-disable-line no-magic-numbers
45+
await expect(args.onChange).toHaveBeenLastCalledWith(['item3', 'item2'], 'item2', CheckboxesListFieldAction.Check);
46+
await expect(input2.checked).toBe(true);
47+
await expect(input3.checked).toBe(true);
48+
});
49+
50+
await step('Click last item to uncheck', async () => {
51+
await userEvent.click(input3);
52+
53+
await expect(args.onChange).toHaveBeenCalledTimes(3); // eslint-disable-line no-magic-numbers
54+
await expect(args.onChange).toHaveBeenLastCalledWith(['item2'], 'item3', CheckboxesListFieldAction.Uncheck);
55+
await expect(input2.checked).toBe(true);
56+
await expect(input3.checked).toBe(false);
57+
});
58+
},
59+
};

0 commit comments

Comments
 (0)