chore(components): add tests for overlays

Author: danielsimao

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

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

@@ -4,8 +4,7 @@ import { testA11y } from '@interlay/test-utils';
 
 import { Tooltip } from '..';
 
-// FIXME: isOpen prop throwing error
-describe.skip('Tooltip', () => {
+describe('Tooltip', () => {
   it('should render correctly', () => {
     const wrapper = render(
       <Tooltip isOpen label='tooltip'>