IBX-10693: Add tests for AltRadio components (#49)

Author: GrabowskiM

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);

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<typeof AltRadiosListFieldStateful> = {
+    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<typeof AltRadiosListFieldStateful>;
+
+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
+        });
+    },
+};