chore(components): add tests for overlays

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>

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}>

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']));
+    });
+  });
 });

packages/components/src/Dialog/__tests__/Dialog.test.tsx

@@ -1,6 +1,7 @@
-import { render } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { createRef } from 'react';
 import { testA11y } from '@interlay/test-utils';
+import userEvent from '@testing-library/user-event';
 
 import { Dialog, DialogBody, DialogDivider, DialogFooter, DialogHeader } from '..';
 
@@ -43,4 +44,38 @@ describe('Dialog', () => {
       </Dialog>
     );
   });
+
+  it('should dialog sections', async () => {
+    render(
+      <Dialog>
+        <DialogHeader>title</DialogHeader>
+        <DialogDivider />
+        <DialogBody>body</DialogBody>
+        <DialogFooter>footer</DialogFooter>
+      </Dialog>
+    );
+
+    expect(screen.getByRole('heading', { level: 3, name: /title/i })).toBeInTheDocument();
+    expect(screen.getByText(/body/i)).toBeInTheDocument();
+    expect(screen.getByText(/footer/i)).toBeInTheDocument();
+  });
+
+  it('should emit onClose using close btn', async () => {
+    const handleClose = jest.fn();
+
+    render(
+      <Dialog onClose={handleClose}>
+        <DialogHeader>title</DialogHeader>
+        <DialogDivider />
+        <DialogBody>body</DialogBody>
+        <DialogFooter>footer</DialogFooter>
+      </Dialog>
+    );
+
+    userEvent.click(screen.getByRole('button', { name: /dismiss/i }));
+
+    await waitFor(() => {
+      expect(handleClose).toHaveBeenCalledTimes(1);
+    });
+  });
 });

packages/components/src/Modal/__tests__/Modal.test.tsx

@@ -1,6 +1,7 @@
-import { render } from '@testing-library/react';
-import { createRef } from 'react';
+import { render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import { createRef, useState } from 'react';
 import { testA11y } from '@interlay/test-utils';
+import userEvent from '@testing-library/user-event';
 
 import { Modal, ModalBody, ModalDivider, ModalFooter, ModalHeader } from '..';
 
@@ -43,4 +44,106 @@ describe('Modal', () => {
       </Modal>
     );
   });
+
+  it('should control open state', async () => {
+    const Component = () => {
+      const [isOpen, setOpen] = useState(false);
+
+      return (
+        <>
+          <button onClick={() => setOpen(true)}>trigger</button>
+          <Modal isOpen={isOpen} onClose={() => setOpen(false)}>
+            <ModalHeader>title</ModalHeader>
+            <ModalDivider />
+            <ModalBody>body</ModalBody>
+            <ModalFooter>footer</ModalFooter>
+          </Modal>
+        </>
+      );
+    };
+
+    render(<Component />);
+
+    userEvent.click(screen.getByRole('button', { name: /trigger/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog', { name: /title/i }));
+    });
+
+    userEvent.click(screen.getByRole('button', { name: /dismiss/i }));
+
+    await waitForElementToBeRemoved(screen.getByRole('dialog', { name: /title/i }));
+  });
+
+  it('should modal sections', async () => {
+    render(
+      <Modal isOpen onClose={jest.fn}>
+        <ModalHeader>title</ModalHeader>
+        <ModalDivider />
+        <ModalBody>body</ModalBody>
+        <ModalFooter>footer</ModalFooter>
+      </Modal>
+    );
+
+    expect(screen.getByRole('heading', { level: 3, name: /title/i })).toBeInTheDocument();
+    expect(screen.getByText(/body/i)).toBeInTheDocument();
+    expect(screen.getByText(/footer/i)).toBeInTheDocument();
+  });
+
+  it('should emit onClose using close btn', async () => {
+    const handleClose = jest.fn();
+
+    render(
+      <Modal isOpen onClose={handleClose}>
+        <ModalHeader>title</ModalHeader>
+        <ModalDivider />
+        <ModalBody>body</ModalBody>
+        <ModalFooter>footer</ModalFooter>
+      </Modal>
+    );
+
+    userEvent.click(screen.getByRole('button', { name: /dismiss/i }));
+
+    await waitFor(() => {
+      expect(handleClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should emit onClose using ESC key', async () => {
+    const handleClose = jest.fn();
+
+    render(
+      <Modal isOpen onClose={handleClose}>
+        <ModalHeader>title</ModalHeader>
+        <ModalDivider />
+        <ModalBody>body</ModalBody>
+        <ModalFooter>footer</ModalFooter>
+      </Modal>
+    );
+
+    userEvent.keyboard('{Escape}');
+
+    await waitFor(() => {
+      expect(handleClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should emit onClose by clicking modal wrapper', async () => {
+    const handleClose = jest.fn();
+
+    render(
+      <Modal isOpen onClose={handleClose}>
+        <ModalHeader>title</ModalHeader>
+        <ModalDivider />
+        <ModalBody>body</ModalBody>
+        <ModalFooter>footer</ModalFooter>
+      </Modal>
+    );
+
+    userEvent.click(screen.getByRole('dialog', { name: /title/i }).parentElement?.parentElement as any);
+
+    await waitFor(() => {
+      expect(handleClose).toHaveBeenCalledTimes(1);
+    });
+  });
 });

packages/components/src/Overlay/OpenTransition.tsx

@@ -21,7 +21,8 @@ type OpenTransitionProps = Props & InheritAttrs;
 const OpenTransition = (props: OpenTransitionProps): any => {
   // Do not apply any transition if in chromatic (based on react-spectrum)
   if (process.env.NODE_ENV === 'test') {
-    return Children.map(props.children, (child) => child && cloneElement(child as any, { isOpen: props.in }));
+    // MEMO: removed  { isOpen: props.in } because of error with prop for component that do not recognize it
+    return Children.map(props.children, (child) => child && cloneElement(child as any));
   }
 
   return (

packages/components/src/Overlay/__tests__/Overlay.test.tsx

@@ -9,7 +9,7 @@ describe('Overlay', () => {
     const ref = createRef<HTMLDivElement>();
 
     const wrapper = render(
-      <Overlay nodeRef={ref}>
+      <Overlay isOpen nodeRef={ref}>
         <div />
       </Overlay>
     );