Skip to content

Commit 3f42bca

Browse files
GrabowskiMGrabowskiM
authored
IBX-10695: Add tests for RadioButton components (#51)
1 parent 9baa831 commit 3f42bca

File tree

3 files changed

+106
-6
lines changed

3 files changed

+106
-6
lines changed

‎packages/components/src/components/RadioButton/RadioButtonField/RadioButtonField.test.stories.tsx‎

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,23 +25,33 @@ export const Default: Story = {
2525
name: 'Default',
2626
play: async ({ canvasElement, step, args }) => {
2727
const canvas = within(canvasElement);
28-
const input = canvas.getByRole('radio');
28+
const input = canvas.getByRole<HTMLInputElement>('radio');
2929

30-
await step('Radio Button handles focus event', async () => {
30+
await step('Click radio button', async () => {
3131
await expect(args.onFocus).not.toHaveBeenCalled();
3232

3333
await userEvent.click(input);
3434

3535
await expect(args.onFocus).toHaveBeenCalledOnce();
36+
await expect(args.onChange).toHaveBeenCalledOnce();
37+
await expect(args.onChange).toHaveBeenLastCalledWith(true, expect.anything());
38+
await expect(args.onInput).toHaveBeenCalledOnce();
39+
await expect(args.onInput).toHaveBeenLastCalledWith(true, expect.anything());
40+
await expect(input.checked).toBe(true);
41+
});
3642

43+
await step('Click radio button again', async () => {
3744
await userEvent.click(input);
3845

3946
await expect(args.onFocus).toHaveBeenCalledOnce();
4047
await expect(args.onChange).toHaveBeenCalledOnce();
48+
await expect(args.onChange).toHaveBeenLastCalledWith(true, expect.anything());
4149
await expect(args.onInput).toHaveBeenCalledOnce();
50+
await expect(args.onInput).toHaveBeenLastCalledWith(true, expect.anything());
51+
await expect(input.checked).toBe(true);
4252
});
4353

44-
await step('Radio Button handles blur event', async () => {
54+
await step('Click outside checkbox', async () => {
4555
await expect(args.onBlur).not.toHaveBeenCalled();
4656

4757
await userEvent.click(canvasElement);
@@ -50,3 +60,35 @@ export const Default: Story = {
5060
});
5161
},
5262
};
63+
64+
export const UsingLabel: Story = {
65+
name: 'Using Label',
66+
play: async ({ canvasElement, step, args }) => {
67+
const canvas = within(canvasElement);
68+
const input = canvas.getByRole<HTMLInputElement>('radio');
69+
const label = canvas.getByText('Radio Button Label');
70+
71+
await step('Click radio button label', async () => {
72+
await expect(args.onFocus).not.toHaveBeenCalled();
73+
74+
await userEvent.click(label);
75+
76+
await expect(args.onFocus).toHaveBeenCalledOnce();
77+
await expect(args.onChange).toHaveBeenCalledOnce();
78+
await expect(args.onChange).toHaveBeenLastCalledWith(true, expect.anything());
79+
await expect(args.onInput).toHaveBeenCalledOnce();
80+
await expect(args.onInput).toHaveBeenLastCalledWith(true, expect.anything());
81+
await expect(input.checked).toBe(true);
82+
});
83+
84+
await step('Click radio button label again', async () => {
85+
await userEvent.click(label);
86+
87+
await expect(args.onChange).toHaveBeenCalledOnce();
88+
await expect(args.onChange).toHaveBeenLastCalledWith(true, expect.anything());
89+
await expect(args.onInput).toHaveBeenCalledOnce();
90+
await expect(args.onInput).toHaveBeenLastCalledWith(true, expect.anything());
91+
await expect(input.checked).toBe(true);
92+
});
93+
},
94+
};

‎packages/components/src/components/RadioButton/RadioButtonInput/RadioButtonInput.test.stories.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ export const Default: Story = {
2323
name: 'Default',
2424
play: async ({ canvasElement, step, args }) => {
2525
const canvas = within(canvasElement);
26-
const input = canvas.getByRole('radio');
26+
const input = canvas.getByRole<HTMLInputElement>('radio');
2727

28-
await step('Radio Button handles focus event', async () => {
28+
await step('Click radio button', async () => {
2929
await expect(args.onFocus).not.toHaveBeenCalled();
3030

3131
await userEvent.click(input);
@@ -36,10 +36,12 @@ export const Default: Story = {
3636

3737
await expect(args.onFocus).toHaveBeenCalledOnce();
3838
await expect(args.onChange).toHaveBeenCalledOnce();
39+
await expect(args.onChange).toHaveBeenCalledWith(true, expect.anything());
3940
await expect(args.onInput).toHaveBeenCalledOnce();
41+
await expect(args.onInput).toHaveBeenCalledWith(true, expect.anything());
4042
});
4143

42-
await step('Radio Button handles blur event', async () => {
44+
await step('Click outside radio button', async () => {
4345
await expect(args.onBlur).not.toHaveBeenCalled();
4446

4547
await userEvent.click(canvasElement);

‎packages/components/src/components/RadioButton/RadioButtonsListField/RadioButtonsListField.test.stories.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { expect, fn, userEvent, within } from 'storybook/test';
3+
4+
import { RadioButtonsListFieldStateful } from '.';
5+
6+
const meta: Meta<typeof RadioButtonsListFieldStateful> = {
7+
component: RadioButtonsListFieldStateful,
8+
tags: ['!dev'],
9+
args: {
10+
label: 'Choice Inputs List Label',
11+
helperText: 'This is a helper text',
12+
value: 'item1',
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 RadioButtonsListFieldStateful>;
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>('radio', { name: 'Item 2' });
31+
const input3 = canvas.getByRole<HTMLInputElement>('radio', { 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');
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('item2');
46+
await expect(input2.checked).toBe(true);
47+
await expect(input3.checked).toBe(false);
48+
});
49+
50+
await step('Click second item once more', async () => {
51+
await userEvent.click(input2);
52+
53+
await expect(args.onChange).toHaveBeenCalledTimes(2); // eslint-disable-line no-magic-numbers
54+
});
55+
},
56+
};

0 commit comments

Comments
 (0)