diff --git a/packages/components/src/components/AltRadio/AltRadioInput/AltRadioInput.test.stories.tsx b/packages/components/src/components/AltRadio/AltRadioInput/AltRadioInput.test.stories.tsx index ab10c40..fe1f81e 100644 --- a/packages/components/src/components/AltRadio/AltRadioInput/AltRadioInput.test.stories.tsx +++ b/packages/components/src/components/AltRadio/AltRadioInput/AltRadioInput.test.stories.tsx @@ -27,17 +27,19 @@ export const Default: Story = { const canvas = within(canvasElement); const input = canvas.getByRole('button'); - await step('AltRadio handles focus event', async () => { + await step('Click tile', 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).toHaveBeenCalledWith(true); await expect(args.onInput).toHaveBeenCalledOnce(); + await expect(args.onInput).toHaveBeenCalledWith(true); }); - await step('AltRadio handles blur event', async () => { + await step('Click outside tile', async () => { await expect(args.onBlur).not.toHaveBeenCalled(); await userEvent.click(canvasElement); diff --git a/packages/components/src/components/AltRadio/AltRadiosListField/AltRadiosListField.test.stories.tsx b/packages/components/src/components/AltRadio/AltRadiosListField/AltRadiosListField.test.stories.tsx new file mode 100644 index 0000000..15dc8ab --- /dev/null +++ b/packages/components/src/components/AltRadio/AltRadiosListField/AltRadiosListField.test.stories.tsx @@ -0,0 +1,56 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { expect, fn, userEvent, within } from 'storybook/test'; + +import { AltRadiosListFieldStateful } from '.'; + +const meta: Meta = { + component: AltRadiosListFieldStateful, + 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.getByText('Item 2'); + const input3 = canvas.getByText('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).toHaveClass('ids-alt-radio__tile--checked'); + }); + + 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).toHaveClass('ids-alt-radio__tile--checked'); + await expect(input3).not.toHaveClass('ids-alt-radio__tile--checked'); + }); + + await step('Click second item once more', async () => { + await userEvent.click(input2); + + await expect(args.onChange).toHaveBeenCalledTimes(2); // eslint-disable-line no-magic-numbers + }); + }, +};