feat(components): add accordion tests

interlay · Oct 4, 2023 · f01f6aa · f01f6aa
1 parent 53ada46
commit f01f6aa
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 7 deletions.
diff --git a/packages/components/src/Accordion/Accordion.stories.tsx b/packages/components/src/Accordion/Accordion.stories.tsx
@@ -12,7 +12,7 @@ export default {
     layout: 'centered'
   },
   render: (args) => (
-    <Accordion {...args}>
+    <Accordion {...args} className='dhj'>
       <AccordionItem key='1' hasChildItems={false} title='Item 1'>
         <P>This is item 1 section</P>
       </AccordionItem>

diff --git a/packages/components/src/Accordion/Accordion.tsx b/packages/components/src/Accordion/Accordion.tsx
@@ -18,12 +18,15 @@ type NativeAttrs<T> = Omit<HTMLAttributes<unknown>, (keyof InheritAttrs<T> & Pro
 type AccordionProps<T = any> = Props & InheritAttrs<T> & NativeAttrs<T>;
 
 const Accordion = <T extends Record<string, unknown>>(
-  { size = 'base', ...props }: AccordionProps<T>,
+  { size = 'base', defaultExpandedKeys, disabledKeys, expandedKeys, onExpandedChange, ...props }: AccordionProps<T>,
   ref: Ref<HTMLDivElement>
 ): JSX.Element => {
-  const state = useTreeState(props);
+  const ariaProps = { defaultExpandedKeys, disabledKeys, expandedKeys, onExpandedChange, ...props };
+
+  const state = useTreeState(ariaProps);
+
   const accordionRef = useDOMRef<HTMLDivElement>(ref);
-  const { accordionProps } = useAccordion(props, state, accordionRef);
+  const { accordionProps } = useAccordion(ariaProps, state, accordionRef);
 
   return (
     <div {...mergeProps(props, accordionProps)} ref={accordionRef}>

diff --git a/packages/components/src/Accordion/__tests__/Accordion.test.tsx b/packages/components/src/Accordion/__tests__/Accordion.test.tsx
@@ -1,6 +1,7 @@
-import { render } from '@testing-library/react';
-import * as React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { testA11y } from '@interlay/test-utils';
+import { Key, createRef, useState } from 'react';
+import userEvent from '@testing-library/user-event';
 
 import { Accordion, AccordionItem } from '..';
 
@@ -16,7 +17,7 @@ describe('Accordion', () => {
   });
 
   it('ref should be forwarded', () => {
-    const ref = React.createRef<HTMLDivElement>();
+    const ref = createRef<HTMLDivElement>();
 
     render(
       <Accordion ref={ref}>
@@ -33,4 +34,83 @@ describe('Accordion', () => {
       </Accordion>
     );
   });
+
+  it('should have default expanded key', async () => {
+    render(
+      <Accordion defaultExpandedKeys={['1']}>
+        <AccordionItem key='1' hasChildItems={false} title='Item 1'>
+          Content 1
+        </AccordionItem>
+        <AccordionItem key='2' hasChildItems={false} title='Item 2'>
+          Content 2
+        </AccordionItem>
+      </Accordion>
+    );
+
+    expect(screen.getByRole('button', { name: /item 1/i })).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('should have disable key', async () => {
+    render(
+      <Accordion disabledKeys={['1']}>
+        <AccordionItem key='1' hasChildItems={false} title='Item 1'>
+          Content 1
+        </AccordionItem>
+        <AccordionItem key='2' hasChildItems={false} title='Item 2'>
+          Content 2
+        </AccordionItem>
+      </Accordion>
+    );
+
+    expect(screen.getByRole('button', { name: /item 1/i })).toBeDisabled();
+  });
+
+  it('should be able to control expanded keys', async () => {
+    const Component = () => {
+      const [state, setState] = useState<Set<Key>>(new Set(['1']));
+
+      return (
+        <Accordion expandedKeys={state} onExpandedChange={setState}>
+          <AccordionItem key='1' hasChildItems={false} title='Item 1'>
+            Content 1
+          </AccordionItem>
+          <AccordionItem key='2' hasChildItems={false} title='Item 2'>
+            Content 2
+          </AccordionItem>
+        </Accordion>
+      );
+    };
+
+    render(<Component />);
+
+    expect(screen.getByRole('button', { name: /item 1/i })).toHaveAttribute('aria-expanded', 'true');
+
+    userEvent.click(screen.getByRole('button', { name: /item 2/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /item 2/i })).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+
+  it('should emit onExpandedChange', async () => {
+    const onExpandedChange = jest.fn();
+
+    render(
+      <Accordion onExpandedChange={onExpandedChange}>
+        <AccordionItem key='1' hasChildItems={false} title='Item 1'>
+          Content 1
+        </AccordionItem>
+        <AccordionItem key='2' hasChildItems={false} title='Item 2'>
+          Content 2
+        </AccordionItem>
+      </Accordion>
+    );
+
+    userEvent.click(screen.getByRole('button', { name: /item 1/i }));
+
+    await waitFor(() => {
+      expect(onExpandedChange).toHaveBeenCalledTimes(1);
+      expect(onExpandedChange).toHaveBeenCalledWith(new Set(['1']));
+    });
+  });
 });