Modal tests

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<script>
+    // https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/176#issuecomment-683150213
+    window.$RefreshReg$ = () => {};
+    window.$RefreshSig$ = () => () => {};
+</script>

client/modules/IDE/components/Modal.stories.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Modal from './Modal';
+
+export default {
+  title: 'IDE/Modal',
+  component: Modal,
+  argTypes: {
+    onClose: { action: 'onClose' }
+  }
+};
+
+export const ModalDefault = {
+  args: {
+    title: 'Example Modal Title',
+    children: <p>Example modal body</p>
+  }
+};

client/modules/IDE/components/Modal.unit.test.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { fireEvent, render, screen } from '../../../test-utils';
+import Modal from './Modal';
+
+describe('Modal', () => {
+  it('can render title', () => {
+    render(
+      <Modal title="Foo" closeAriaLabel="Foo" onClose={jest.fn()}>
+        Bar
+      </Modal>
+    );
+
+    expect(screen.getByRole('heading', { name: 'Foo' })).toBeVisible();
+  });
+
+  it('can render child content', () => {
+    render(
+      <Modal title="Foo" closeAriaLabel="Foo" onClose={jest.fn()}>
+        Bar
+      </Modal>
+    );
+
+    expect(screen.getByText('Bar')).toBeVisible();
+  });
+
+  it('can call onClose when close button clicked', () => {
+    const handleClose = jest.fn();
+    render(
+      <Modal title="Foo" closeAriaLabel="Foo" onClose={handleClose}>
+        Bar
+      </Modal>
+    );
+
+    const buttonEl = screen.getByRole('button');
+    fireEvent.click(buttonEl);
+
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('can call onClose when click event occurs in a parent node', () => {
+    const handleClose = jest.fn();
+    render(
+      <div>
+        <h1>Parent</h1>
+        <Modal title="Foo" closeAriaLabel="Foo" onClose={handleClose}>
+          Bar
+        </Modal>
+      </div>
+    );
+
+    const headingEl = screen.getByRole('heading', { name: 'Parent' });
+    fireEvent.click(headingEl);
+
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('can ignore click event for closing when it occurs inside component', () => {
+    const handleClose = jest.fn();
+    render(
+      <Modal title="Foo" closeAriaLabel="Foo" onClose={handleClose}>
+        Bar
+      </Modal>
+    );
+
+    const headingEl = screen.getByRole('heading', { name: 'Foo' });
+    fireEvent.click(headingEl);
+
+    expect(handleClose).not.toHaveBeenCalled();
+  });
+});