chore: improve AutoComplete tests and stories

packages/fuselage/src/components/AutoComplete/AutoComplete.spec.tsx

@@ -1,18 +1,34 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 import { withResizeObserverMock } from 'testing-utils/mocks/withResizeObserverMock';
 
-import { AutoComplete } from '.';
+import * as stories from './AutoComplete.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
 
 withResizeObserverMock();
 
-it('renders without crashing', () => {
-  render(
-    <AutoComplete
-      filter=''
-      value={[]}
-      renderItem={() => null}
-      onChange={jest.fn()}
-    />
+describe('[AutoComplete Rendering]', () => {
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
   );
 });

packages/fuselage/src/components/AutoComplete/AutoComplete.stories.tsx

@@ -7,11 +7,11 @@ import {
   Stories,
   PRIMARY_STORY,
 } from '@storybook/addon-docs';
-import type { ComponentMeta } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import React, { useState } from 'react';
 
 import { AutoComplete, Box, Chip, Avatar, Option } from '../..';
-import { exampleAvatar } from '../../../.storybook/helpers';
+import { exampleAvatar, DECORATOR_LABEL } from '../../../.storybook/helpers';
 
 export default {
   title: 'Inputs/AutoComplete',
@@ -42,96 +42,69 @@ const options = [
   { value: '4', label: 'test4' },
 ];
 
-export const AutoCompleteDefault = () => {
+const Template: ComponentStory<typeof AutoComplete> = ({
+  value: defaultValue,
+  ...args
+}) => {
   const [filter, setFilter] = useState('');
-  const [value, setValue] = useState<string | string[]>('');
+  const [value, setValue] = useState<string | string[]>(defaultValue || []);
 
-  const handleChangeRooms = (value: string | string[]) => {
-    setValue(value);
-  };
+  const handleChangeRooms = (value: string | string[]) => setValue(value);
 
   return (
     <AutoComplete
+      {...args}
       value={value}
       filter={filter}
       setFilter={setFilter}
       options={options}
       onChange={handleChangeRooms}
+      aria-label={DECORATOR_LABEL}
     />
   );
 };
 
-export const AutoCompleteCustomSelected = () => {
-  const [filter, setFilter] = useState('');
-  const [value, setValue] = useState<string | string[]>('1');
-
-  const handleChangeRooms = (value: string | string[]) => {
-    setValue(value);
-  };
+export const Default = Template.bind({});
 
-  return (
-    <AutoComplete
-      value={value}
-      filter={filter}
-      setFilter={setFilter}
-      options={options}
-      onChange={handleChangeRooms}
-      renderSelected={({ selected: { label } }) => (
-        <Box>
-          <Avatar size='x20' url={exampleAvatar} /> {label}
-        </Box>
-      )}
-    />
-  );
+export const CustomSelected = Template.bind({});
+CustomSelected.args = {
+  value: '1',
+  renderSelected: ({ selected: { label } }) => (
+    <Box>
+      <Avatar size='x20' url={exampleAvatar} aria-hidden /> {label}
+    </Box>
+  ),
 };
 
-export const AutoCompleteMultiple = () => {
-  const [filter, setFilter] = useState('');
-  const [value, setValue] = useState<string | string[]>(['1', '3']);
-
-  const handleChangeRooms = (value: string | string[]) => {
-    setValue(value);
-  };
-
-  return (
-    <AutoComplete
-      multiple
-      value={value}
-      filter={filter}
-      setFilter={setFilter}
-      options={options}
-      onChange={handleChangeRooms}
-    />
-  );
+export const Multiple = Template.bind({});
+Multiple.args = {
+  value: ['1', '3'],
+  multiple: true,
 };
-export const AutoCompleteMultipleCustomSelected = () => {
-  const [filter, setFilter] = useState('');
-  const [value, setValue] = useState<string | string[]>(['1', '3']);
 
-  const handleChangeRooms = (value: string | string[]) => {
-    setValue(value);
-  };
+export const MultipleCustomSelected = Template.bind({});
+MultipleCustomSelected.args = {
+  value: ['1', '3'],
+  multiple: true,
+  renderSelected: ({ selected: { value, label }, onRemove }) => (
+    <Chip key={value} height='x20' value={value} onClick={onRemove} mie={4}>
+      <Box is='span' margin='none' mis={4}>
+        <Avatar size='x20' url={exampleAvatar} aria-hidden />
+        {'  '}
+        {label}
+      </Box>
+    </Chip>
+  ),
+};
 
-  return (
-    <AutoComplete
-      multiple
-      value={value}
-      filter={filter}
-      setFilter={setFilter}
-      options={options}
-      onChange={handleChangeRooms}
-      renderSelected={({ selected: { value, label }, onRemove }) => (
-        <Chip key={value} height='x20' value={value} onClick={onRemove} mie={4}>
-          <Box is='span' margin='none' mis={4}>
-            <Avatar size='x20' url={exampleAvatar} />
-            {'  '}
-            {label}
-          </Box>
-        </Chip>
-      )}
-      renderItem={({ value, label, ...props }) => (
-        <Option {...props} key={value} label={label} />
-      )}
+export const CustomItem = Template.bind({});
+CustomItem.args = {
+  renderItem: ({ value, label, ...props }) => (
+    <Option
+      {...props}
+      key={value}
+      label={label}
+      avatar={<Avatar size='x20' url={exampleAvatar} aria-hidden />}
     />
-  );
+  ),
 };