From c9446252d5840455d6623c5eb1de5f1dc18ad2ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Wed, 24 Sep 2025 14:17:03 +0200 Subject: [PATCH] IBX-10695: Add tests for RadioButton components --- .../RadioButtonField.test.stories.tsx | 48 +++++++++++++++- .../RadioButtonInput.test.stories.tsx | 8 ++- .../RadioButtonsListField.test.stories.tsx | 56 +++++++++++++++++++ 3 files changed, 106 insertions(+), 6 deletions(-) create mode 100644 packages/components/src/components/RadioButton/RadioButtonsListField/RadioButtonsListField.test.stories.tsx diff --git a/packages/components/src/components/RadioButton/RadioButtonField/RadioButtonField.test.stories.tsx b/packages/components/src/components/RadioButton/RadioButtonField/RadioButtonField.test.stories.tsx index 81ee4b0..c20cbd7 100644 --- a/packages/components/src/components/RadioButton/RadioButtonField/RadioButtonField.test.stories.tsx +++ b/packages/components/src/components/RadioButton/RadioButtonField/RadioButtonField.test.stories.tsx @@ -25,23 +25,33 @@ export const Default: Story = { name: 'Default', play: async ({ canvasElement, step, args }) => { const canvas = within(canvasElement); - const input = canvas.getByRole('radio'); + const input = canvas.getByRole('radio'); - await step('Radio Button handles focus event', async () => { + await step('Click radio button', async () => { await expect(args.onFocus).not.toHaveBeenCalled(); await userEvent.click(input); await expect(args.onFocus).toHaveBeenCalledOnce(); + await expect(args.onChange).toHaveBeenCalledOnce(); + await expect(args.onChange).toHaveBeenLastCalledWith(true, expect.anything()); + await expect(args.onInput).toHaveBeenCalledOnce(); + await expect(args.onInput).toHaveBeenLastCalledWith(true, expect.anything()); + await expect(input.checked).toBe(true); + }); + await step('Click radio button again', async () => { await userEvent.click(input); await expect(args.onFocus).toHaveBeenCalledOnce(); await expect(args.onChange).toHaveBeenCalledOnce(); + await expect(args.onChange).toHaveBeenLastCalledWith(true, expect.anything()); await expect(args.onInput).toHaveBeenCalledOnce(); + await expect(args.onInput).toHaveBeenLastCalledWith(true, expect.anything()); + await expect(input.checked).toBe(true); }); - await step('Radio Button handles blur event', async () => { + await step('Click outside checkbox', async () => { await expect(args.onBlur).not.toHaveBeenCalled(); await userEvent.click(canvasElement); @@ -50,3 +60,35 @@ export const Default: Story = { }); }, }; + +export const UsingLabel: Story = { + name: 'Using Label', + play: async ({ canvasElement, step, args }) => { + const canvas = within(canvasElement); + const input = canvas.getByRole('radio'); + const label = canvas.getByText('Radio Button Label'); + + await step('Click radio button label', async () => { + await expect(args.onFocus).not.toHaveBeenCalled(); + + await userEvent.click(label); + + await expect(args.onFocus).toHaveBeenCalledOnce(); + await expect(args.onChange).toHaveBeenCalledOnce(); + await expect(args.onChange).toHaveBeenLastCalledWith(true, expect.anything()); + await expect(args.onInput).toHaveBeenCalledOnce(); + await expect(args.onInput).toHaveBeenLastCalledWith(true, expect.anything()); + await expect(input.checked).toBe(true); + }); + + await step('Click radio button label again', async () => { + await userEvent.click(label); + + await expect(args.onChange).toHaveBeenCalledOnce(); + await expect(args.onChange).toHaveBeenLastCalledWith(true, expect.anything()); + await expect(args.onInput).toHaveBeenCalledOnce(); + await expect(args.onInput).toHaveBeenLastCalledWith(true, expect.anything()); + await expect(input.checked).toBe(true); + }); + }, +}; diff --git a/packages/components/src/components/RadioButton/RadioButtonInput/RadioButtonInput.test.stories.tsx b/packages/components/src/components/RadioButton/RadioButtonInput/RadioButtonInput.test.stories.tsx index 748c7fe..6e763e8 100644 --- a/packages/components/src/components/RadioButton/RadioButtonInput/RadioButtonInput.test.stories.tsx +++ b/packages/components/src/components/RadioButton/RadioButtonInput/RadioButtonInput.test.stories.tsx @@ -23,9 +23,9 @@ export const Default: Story = { name: 'Default', play: async ({ canvasElement, step, args }) => { const canvas = within(canvasElement); - const input = canvas.getByRole('radio'); + const input = canvas.getByRole('radio'); - await step('Radio Button handles focus event', async () => { + await step('Click radio button', async () => { await expect(args.onFocus).not.toHaveBeenCalled(); await userEvent.click(input); @@ -36,10 +36,12 @@ export const Default: Story = { await expect(args.onFocus).toHaveBeenCalledOnce(); await expect(args.onChange).toHaveBeenCalledOnce(); + await expect(args.onChange).toHaveBeenCalledWith(true, expect.anything()); await expect(args.onInput).toHaveBeenCalledOnce(); + await expect(args.onInput).toHaveBeenCalledWith(true, expect.anything()); }); - await step('Radio Button handles blur event', async () => { + await step('Click outside radio button', async () => { await expect(args.onBlur).not.toHaveBeenCalled(); await userEvent.click(canvasElement); diff --git a/packages/components/src/components/RadioButton/RadioButtonsListField/RadioButtonsListField.test.stories.tsx b/packages/components/src/components/RadioButton/RadioButtonsListField/RadioButtonsListField.test.stories.tsx new file mode 100644 index 0000000..e1954ff --- /dev/null +++ b/packages/components/src/components/RadioButton/RadioButtonsListField/RadioButtonsListField.test.stories.tsx @@ -0,0 +1,56 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { expect, fn, userEvent, within } from 'storybook/test'; + +import { RadioButtonsListFieldStateful } from '.'; + +const meta: Meta = { + component: RadioButtonsListFieldStateful, + tags: ['!dev'], + args: { + label: 'Choice Inputs List Label', + helperText: 'This is a helper text', + value: 'item1', + items: [ + { id: 'item1', label: 'Item 1', value: 'item1' }, + { id: 'item2', label: 'Item 2', value: 'item2' }, + { id: 'item3', label: 'Item 3', value: 'item3' }, + ], + onChange: fn(), + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + name: 'Default', + play: async ({ canvasElement, step, args }) => { + const canvas = within(canvasElement); + const input2 = canvas.getByRole('radio', { name: 'Item 2' }); + const input3 = canvas.getByRole('radio', { name: 'Item 3' }); + + await step('Click last item', async () => { + await userEvent.click(input3); + + await expect(args.onChange).toHaveBeenCalledOnce(); + await expect(args.onChange).toHaveBeenLastCalledWith('item3'); + await expect(input3.checked).toBe(true); + }); + + await step('Click second item', async () => { + await userEvent.click(input2); + + await expect(args.onChange).toHaveBeenCalledTimes(2); // eslint-disable-line no-magic-numbers + await expect(args.onChange).toHaveBeenLastCalledWith('item2'); + await expect(input2.checked).toBe(true); + await expect(input3.checked).toBe(false); + }); + + await step('Click second item once more', async () => { + await userEvent.click(input2); + + await expect(args.onChange).toHaveBeenCalledTimes(2); // eslint-disable-line no-magic-numbers + }); + }, +};