@khanacademy/wonder-blocks-modal 2.1.41 → 2.1.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "2.1.41",
+  "version": "2.1.45",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -15,23 +15,24 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.23",
-    "@khanacademy/wonder-blocks-color": "^1.1.17",
-    "@khanacademy/wonder-blocks-core": "^3.1.3",
-    "@khanacademy/wonder-blocks-icon": "^1.2.20",
-    "@khanacademy/wonder-blocks-icon-button": "^3.3.12",
-    "@khanacademy/wonder-blocks-layout": "^1.4.2",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.2",
-    "@khanacademy/wonder-blocks-toolbar": "^2.1.24",
-    "@khanacademy/wonder-blocks-typography": "^1.1.24"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.27",
+    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@khanacademy/wonder-blocks-core": "^4.0.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.24",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.1",
+    "@khanacademy/wonder-blocks-layout": "^1.4.6",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+    "@khanacademy/wonder-blocks-toolbar": "^2.1.28",
+    "@khanacademy/wonder-blocks-typography": "^1.1.28"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1"
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.0.4"
+    "wb-dev-build-settings": "^0.2.0"
   },
-  "gitHead": "0a09d6f092c205141387071394b2b0373c0f4294"
+  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
 }

package/src/components/__tests__/modal-backdrop.test.js

@@ -5,7 +5,10 @@ import {mount} from "enzyme";
 import ModalBackdrop from "../modal-backdrop.js";
 import OnePaneDialog from "../one-pane-dialog.js";
 
-const sleep = (duration: number = 0) =>
+import {unmountAll} from "../../../../../utils/testing/enzyme-shim.js";
+import {getElementAttachedToDocument} from "../../../../../utils/testing/get-element-attached-to-document.js";
+
+const wait = (duration: number = 0) =>
     new Promise((resolve, reject) => setTimeout(resolve, duration));
 
 const exampleModal = (
@@ -31,6 +34,17 @@ const exampleModalWithButtons = (
 );
 
 describe("ModalBackdrop", () => {
+    beforeEach(() => {
+        jest.useRealTimers();
+    });
+
+    afterEach(() => {
+        unmountAll();
+        if (document.body) {
+            document.body.innerHTML = "";
+        }
+    });
+
     test("Clicking the backdrop triggers `onCloseModal`", () => {
         const onCloseModal = jest.fn();
 
@@ -80,6 +94,9 @@ describe("ModalBackdrop", () => {
 
     test("If initialFocusId is set and element is found, we focus that element inside the modal", async () => {
         // Arrange
+        // We need the elements in the DOM document, it seems, for this test
+        // to work. Changing to testing-library will likely fix this.
+        const attachElement = getElementAttachedToDocument("container");
         const initialFocusId = "initial-focus";
 
         const wrapper = mount(
@@ -98,10 +115,11 @@ describe("ModalBackdrop", () => {
                     footer={<div data-modal-footer />}
                 />
             </ModalBackdrop>,
+            {attachTo: attachElement},
         );
 
         // Act
-        await sleep(); // wait for styles to be applied
+        await wait(); // wait for styles to be applied
         const initialFocusElement = wrapper.find(`#${initialFocusId}`);
 
         // Assert
@@ -113,6 +131,9 @@ describe("ModalBackdrop", () => {
 
     test("If initialFocusId is set but element is NOT found, we focus on the first focusable element instead", async () => {
         // Arrange
+        // We need the elements in the DOM document, it seems, for this test
+        // to work. Changing to testing-library will likely fix this.
+        const attachElement = getElementAttachedToDocument("container");
         const initialFocusId = "initial-focus";
         const firstFocusableElement = "[data-first-button]";
 
@@ -123,10 +144,11 @@ describe("ModalBackdrop", () => {
             >
                 {exampleModalWithButtons}
             </ModalBackdrop>,
+            {attachTo: attachElement},
         );
 
         // Act
-        await sleep(); // wait for styles to be applied
+        await wait(); // wait for styles to be applied
         const initialFocusElement = wrapper.find(`#${initialFocusId}`);
 
         // Assert
@@ -140,14 +162,18 @@ describe("ModalBackdrop", () => {
 
     test("If no initialFocusId is set, we focus the first button in the modal", async () => {
         // Arrange
+        // We need the elements in the DOM document, it seems, for this test
+        // to work. Changing to testing-library will likely fix this.
+        const attachElement = getElementAttachedToDocument("container");
         const wrapper = mount(
             <ModalBackdrop onCloseModal={() => {}}>
                 {exampleModalWithButtons}
             </ModalBackdrop>,
+            {attachTo: attachElement},
         );
 
         // Act
-        await sleep(); // wait for styles to be applied
+        await wait(); // wait for styles to be applied
         const focusableElement = wrapper
             .find("[data-first-button]")
             .getDOMNode();
@@ -158,14 +184,18 @@ describe("ModalBackdrop", () => {
 
     test("If there are no focusable elements, we focus the Dialog instead", async () => {
         // Arrange
+        // We need the elements in the DOM document, it seems, for this test
+        // to work. Changing to testing-library will likely fix this.
+        const attachElement = getElementAttachedToDocument("container");
         const wrapper = mount(
             <ModalBackdrop onCloseModal={() => {}}>
                 {exampleModal}
             </ModalBackdrop>,
+            {attachTo: attachElement},
         );
 
         // Act
-        await sleep(); // wait for styles to be applied
+        await wait(); // wait for styles to be applied
         const focusableElement = wrapper
             .find('div[role="dialog"]')
             .getDOMNode();
@@ -173,50 +203,4 @@ describe("ModalBackdrop", () => {
         // Assert
         expect(document.activeElement).toBe(focusableElement);
     });
-
-    // TODO(mdr): I haven't figured out how to actually simulate tab keystrokes
-    //     or focus events in a way that JSDOM will recognize, so triggering the
-    //     global focus handler isn't feasible. I had to do manual testing
-    //     instead :( Here's what I had, though!
-    test.skip("Tabbing inside the modal wraps around", () => {
-        const wrapper = mount(
-            <div>
-                <button data-button-id="A" />
-                <ModalBackdrop onCloseModal={() => {}}>
-                    {exampleModalWithButtons}
-                </ModalBackdrop>
-                <button data-button-id="Z" />
-            </div>,
-        );
-
-        const buttonA = wrapper.find('[data-button-id="A"]').getDOMNode();
-        const button1 = wrapper.find('[data-button-id="1"]').getDOMNode();
-        const button2 = wrapper.find('[data-button-id="2"]').getDOMNode();
-        const button3 = wrapper.find('[data-button-id="3"]').getDOMNode();
-        const buttonZ = wrapper.find('[data-button-id="Z"]').getDOMNode();
-
-        // First, go forward. Confirm that, when we get to button Z, we wrap
-        // back to button 1. (I wish we could just simulate tab keypresses!
-        // Instead, we depend on the implementation detail that _which_ node you
-        // exit from determines where you'll end up.)
-        button1.focus();
-        expect(document.activeElement).toBe(button1);
-        button2.focus();
-        expect(document.activeElement).toBe(button2);
-        button3.focus();
-        expect(document.activeElement).toBe(button3);
-        buttonZ.focus();
-        expect(document.activeElement).toBe(button1);
-
-        // Then, go backward. Confirm that, when we get to button A, we wrap
-        // back to button 3.
-        button3.focus();
-        expect(document.activeElement).toBe(button3);
-        button2.focus();
-        expect(document.activeElement).toBe(button2);
-        button1.focus();
-        expect(document.activeElement).toBe(button1);
-        buttonA.focus();
-        expect(document.activeElement).toBe(button3);
-    });
 });

package/src/components/__tests__/modal-launcher.test.js

@@ -5,7 +5,10 @@ import {mount, shallow} from "enzyme";
 import ModalLauncher from "../modal-launcher.js";
 import OnePaneDialog from "../one-pane-dialog.js";
 
-const sleep = (duration: number = 0) =>
+import {unmountAll} from "../../../../../utils/testing/enzyme-shim.js";
+import {getElementAttachedToDocument} from "../../../../../utils/testing/get-element-attached-to-document.js";
+
+const wait = (duration: number = 0) =>
     new Promise((resolve, reject) => setTimeout(resolve, duration));
 
 const exampleModal = (
@@ -16,19 +19,41 @@ const exampleModal = (
 );
 
 describe("ModalLauncher", () => {
+    beforeEach(() => {
+        jest.useRealTimers();
+    });
+
+    afterEach(() => {
+        unmountAll();
+        if (document.body) {
+            document.body.innerHTML = "";
+        }
+    });
+
     window.scrollTo = jest.fn();
 
-    test("Children can launch the modal", () => {
+    test("Children can launch the modal", async () => {
+        // Arrange
+        // We need the elements in the DOM document, it seems, for this test
+        // to work. Changing to testing-library will likely fix this.
+        const containerDiv = getElementAttachedToDocument("container");
         const wrapper = mount(
             <ModalLauncher modal={exampleModal}>
                 {({openModal}) => <button onClick={openModal} />}
             </ModalLauncher>,
+            {attachTo: containerDiv},
         );
+
+        // Act
         wrapper.find("button").simulate("click");
+        await wait();
+
         const portal = global.document.querySelector(
             "[data-modal-launcher-portal]",
         );
-        expect(portal instanceof HTMLDivElement).toBe(true);
+
+        // Assert
+        expect(portal).toBeInstanceOf(HTMLDivElement);
     });
 
     test("Modal can be manually opened and closed", () => {
@@ -62,7 +87,7 @@ describe("ModalLauncher", () => {
         //     this function receives a `closeModal` argument that works.
         const modalFn = ({closeModal}: {|closeModal: () => void|}) => {
             expect(opened).toBe(true);
-            setImmediate(closeModal);
+            setTimeout(closeModal, 0);
             return exampleModal;
         };
 
@@ -110,6 +135,7 @@ describe("ModalLauncher", () => {
 
         // Simulate an Escape keypress.
         const event: KeyboardEvent = (document.createEvent("Event"): any);
+        // $FlowIgnore[cannot-write]
         event.key = "Escape";
         event.initEvent("keyup", true, true);
         document.dispatchEvent(event);
@@ -254,7 +280,7 @@ describe("ModalLauncher", () => {
         wrapper.find("button").simulate("click");
 
         // wait for styles to be applied
-        await sleep();
+        await wait();
 
         // Assert
         expect(document.activeElement).not.toBe(lastButton);
@@ -262,6 +288,9 @@ describe("ModalLauncher", () => {
 
     test("if modal is closed, return focus to the last element focused outside the modal", async () => {
         // Arrange
+        // We need the elements in the DOM document, it seems, for this test
+        // to work. Changing to testing-library will likely fix this.
+        const containerDiv = getElementAttachedToDocument("container");
         let savedCloseModal = () => {
             throw new Error(`closeModal wasn't saved`);
         };
@@ -277,6 +306,7 @@ describe("ModalLauncher", () => {
                     <button onClick={openModal} data-last-focused-button />
                 )}
             </ModalLauncher>,
+            {attachTo: containerDiv},
         );
 
         const lastButton = wrapper
@@ -289,7 +319,7 @@ describe("ModalLauncher", () => {
         wrapper.find("button").simulate("click");
 
         // wait for styles to be applied
-        await sleep();
+        await wait();
 
         // Act
         savedCloseModal(); // close the modal

package/src/components/modal-backdrop.js

@@ -7,6 +7,8 @@ import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {ModalLauncherPortalAttributeName} from "../util/constants.js";
 
+import {findFocusableNodes} from "../util/find-focusable-nodes.js";
+
 import type {ModalElement} from "../util/types.js";
 
 type Props = {|
@@ -24,13 +26,6 @@ type Props = {|
     testId?: string,
 |};
 
-/**
- * List of elements that can be focused
- * @see https://www.w3.org/TR/html5/editing.html#can-be-focused
- */
-const FOCUSABLE_ELEMENTS =
-    'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
-
 /**
  * A private component used by ModalLauncher. This is the fixed-position
  * container element that gets mounted outside the DOM. It overlays the modal
@@ -82,7 +77,7 @@ export default class ModalBackdrop extends React.Component<Props> {
      */
     _getFirstFocusableElement(node: HTMLElement): HTMLElement | null {
         // get a collection of elements that can be focused
-        const focusableElements = node.querySelectorAll(FOCUSABLE_ELEMENTS);
+        const focusableElements = findFocusableNodes(node);
 
         if (!focusableElements) {
             return null;

package/src/components/one-pane-dialog.stories.js

@@ -38,7 +38,7 @@ const customViewports = {
 };
 
 export default {
-    title: "OnePaneDialog",
+    title: "Floating/Modal/OnePaneDialog",
     parameters: {
         viewport: {
             viewports: customViewports,
@@ -191,14 +191,12 @@ export const withOpener: StoryComponentType = () => {
     );
 };
 
-withOpener.story = {
-    parameters: {
-        viewport: {
-            defaultViewport: null,
-        },
-        chromatic: {
-            // Don't take screenshots of this story since it would only show a button.
-            disable: true,
-        },
+withOpener.parameters = {
+    viewport: {
+        defaultViewport: null,
+    },
+    chromatic: {
+        // Don't take screenshots of this story since it would only show a button.
+        disableSnapshot: true,
     },
 };

package/src/util/find-focusable-nodes.js

@@ -0,0 +1,14 @@
+// @flow
+
+/**
+ * List of elements that can be focused
+ * @see https://www.w3.org/TR/html5/editing.html#can-be-focused
+ */
+const FOCUSABLE_ELEMENTS =
+    'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
+
+export function findFocusableNodes(
+    root: HTMLElement | Document,
+): Array<HTMLElement> {
+    return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
+}

package/src/util/maybe-get-portal-mounted-modal-host-element.test.js

@@ -108,9 +108,8 @@ describe("maybeGetPortalMountedModalHostElement", () => {
                 if (node) {
                     // Act
                     const candidateElement = ReactDOM.findDOMNode(node);
-                    const result = maybeGetPortalMountedModalHostElement(
-                        candidateElement,
-                    );
+                    const result =
+                        maybeGetPortalMountedModalHostElement(candidateElement);
 
                     // Assert
                     expect(result).toBeTruthy();

package/src/__tests__/index.test.js

@@ -1,23 +0,0 @@
-// @flow
-describe("@khanacademy/wonder-blocks-modal", () => {
-    test("package exports default", async () => {
-        // Arrange
-        const importedModule = import("../index.js");
-
-        // Act
-        const result = await importedModule;
-
-        // Assert
-        expect(Object.keys(result).sort()).toEqual(
-            [
-                "ModalDialog",
-                "ModalFooter",
-                "ModalHeader",
-                "ModalPanel",
-                "ModalLauncher",
-                "OnePaneDialog",
-                "maybeGetPortalMountedModalHostElement",
-            ].sort(),
-        );
-    });
-});