@instructure/ui-dialog 8.46.2-snapshot-8 → 8.46.2-snapshot-9

package/lib/Dialog/__new-tests__/Dialog.test.js

@@ -0,0 +1,482 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = require("@testing-library/user-event");
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _button, _div, _div2, _DialogExample, _DialogExample2, _DialogExample3, _div3, _div4, _DialogExample4, _DialogExample5, _DialogExample6, _DialogExample7, _DialogExample8;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const TEST_TEXT = 'test-text';
+const TEST_LABEL = 'test-label';
+const renderDialog = props => {
+  const allProps = {
+    open: true,
+    label: TEST_LABEL,
+    ...props
+  };
+  return (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Dialog, allProps, _button || (_button = /*#__PURE__*/_react.default.createElement("button", null, TEST_TEXT))));
+};
+const DialogExample = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const inputRef = (0, _react.useRef)(null);
+  const dialogRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!props.open) {
+      inputRef.current.focus();
+    }
+  }, [props.open]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    focusDialog: () => dialogRef.current.focus(),
+    blurDialog: () => dialogRef.current.blur()
+  }));
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("input", {
+    "data-testid": "input-trigger",
+    type: "text",
+    ref: inputRef
+  }), /*#__PURE__*/_react.default.createElement(_index.Dialog, Object.assign({
+    shouldContainFocus: true,
+    shouldReturnFocus: true,
+    label: TEST_LABEL
+  }, props, {
+    ref: dialogRef
+  }), props.children || _div || (_div = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("input", {
+    type: "text",
+    "data-testid": "input-one"
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    type: "text",
+    "data-testid": "input-two"
+  })))));
+});
+DialogExample.displayName = 'DialogExample';
+const NestedDialogExample = props => {
+  const _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    nestedOpen = _useState2[0],
+    setNestedOpen = _useState2[1];
+  const handleTriggerClick = () => setNestedOpen(true);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index.Dialog, Object.assign({
+    open: true,
+    shouldReturnFocus: true,
+    label: TEST_LABEL
+  }, props), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("input", {
+    onClick: handleTriggerClick,
+    type: "text",
+    "data-testid": "nested-input-one"
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    onClick: handleTriggerClick,
+    type: "text",
+    "data-testid": "nested-input-two"
+  })), /*#__PURE__*/_react.default.createElement(_index.Dialog, {
+    open: nestedOpen,
+    label: TEST_LABEL
+  }, TEST_TEXT))));
+};
+NestedDialogExample.displayName = 'NestedDialogExample';
+describe('<Dialog />', () => {
+  it('should render nothing when closed', () => {
+    const _renderDialog = renderDialog({
+        open: false
+      }),
+      container = _renderDialog.container;
+    expect(container.firstChild).not.toBeInTheDocument();
+  });
+  it('should render children when open', async () => {
+    const _renderDialog2 = renderDialog({
+        open: true
+      }),
+      container = _renderDialog2.container;
+    expect(container.firstChild).toBeInTheDocument();
+    expect(container.firstChild).toHaveTextContent(TEST_TEXT);
+  });
+  it('should apply the a11y attributes', () => {
+    const _renderDialog3 = renderDialog({
+        label: TEST_LABEL
+      }),
+      getByRole = _renderDialog3.getByRole,
+      getByLabelText = _renderDialog3.getByLabelText;
+    const dialog = getByRole('dialog');
+    const label = getByLabelText(TEST_LABEL);
+    expect(dialog).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
+  });
+  it('should apply the role attributes, if explicitly passed', () => {
+    const _renderDialog4 = renderDialog({
+        label: TEST_LABEL,
+        role: 'region'
+      }),
+      getByRole = _renderDialog4.getByRole,
+      getByLabelText = _renderDialog4.getByLabelText;
+    const regionRole = getByRole('region');
+    const label = getByLabelText(TEST_LABEL);
+    expect(regionRole).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
+  });
+  it('should call onDismiss prop when Esc key pressed', async () => {
+    const onDismiss = jest.fn();
+    const _renderDialog5 = renderDialog({
+        onDismiss
+      }),
+      getByRole = _renderDialog5.getByRole;
+    const dialog = getByRole('dialog');
+    await (0, _react2.waitFor)(() => {
+      _react2.fireEvent.keyUp(dialog, {
+        key: 'Escape',
+        code: 'Escape',
+        keyCode: 27,
+        charCode: 27
+      });
+      expect(onDismiss).toHaveBeenCalled();
+    });
+  });
+  it('should call onDismiss prop when the document is clicked', async () => {
+    const onDismiss = jest.fn();
+    renderDialog({
+      onDismiss,
+      shouldCloseOnDocumentClick: true
+    });
+    await (0, _react2.waitFor)(() => {
+      _react2.fireEvent.click(document);
+      expect(onDismiss).toHaveBeenCalled();
+    });
+  });
+  describe('managed focus', () => {
+    it('should provide focus method', async () => {
+      const _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(DialogExample, {
+          open: true,
+          contentElement: () => getByTestId('non-tabbable')
+        }, TEST_TEXT), _div2 || (_div2 = /*#__PURE__*/_react.default.createElement("div", {
+          tabIndex: -1,
+          "data-testid": "non-tabbable"
+        }, TEST_TEXT)))),
+        getByTestId = _render.getByTestId;
+      const nonTabbableContent = getByTestId('non-tabbable');
+      await (0, _react2.waitFor)(() => {
+        _userEvent.userEvent.tab();
+        expect(document.activeElement).toBe(nonTabbableContent);
+      });
+    });
+    it('should warn when trying to focus or blur a closed dialog', () => {
+      const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+      let ref;
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(DialogExample, {
+        open: false,
+        ref: el => ref = el
+      }));
+      ref.focusDialog();
+      expect(consoleError.mock.calls[0][0]).toBe("Warning: [Dialog] Can't focus a Dialog that isn't open.");
+      ref.blurDialog();
+      expect(consoleError.mock.calls[1][0]).toBe("Warning: [Dialog] Can't blur a Dialog that isn't open.");
+      consoleError.mockRestore();
+    });
+    it('should focus the first tabbable element by default', async () => {
+      const _render2 = (0, _react2.render)(_DialogExample || (_DialogExample = /*#__PURE__*/_react.default.createElement(DialogExample, {
+          open: true
+        }))),
+        getByTestId = _render2.getByTestId;
+      const inputOne = getByTestId('input-one');
+      await (0, _react2.waitFor)(() => {
+        expect(document.activeElement).toBe(inputOne);
+      });
+    });
+    it('should focus the first tabbable element when open prop becomes true', async () => {
+      const _render3 = (0, _react2.render)(_DialogExample2 || (_DialogExample2 = /*#__PURE__*/_react.default.createElement(DialogExample, {
+          open: false
+        }))),
+        rerender = _render3.rerender,
+        getByTestId = _render3.getByTestId;
+      const inputTrigger = getByTestId('input-trigger');
+      await (0, _react2.waitFor)(() => {
+        expect(document.activeElement).toBe(inputTrigger);
+      });
+      rerender(_DialogExample3 || (_DialogExample3 = /*#__PURE__*/_react.default.createElement(DialogExample, {
+        open: true
+      })));
+      const inputOne = getByTestId('input-one');
+      await (0, _react2.waitFor)(() => {
+        expect(document.activeElement).toBe(inputOne);
+      });
+    });
+    it('should take a prop for finding default focus', async () => {
+      const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(DialogExample, {
+          open: true,
+          defaultFocusElement: () => getByTestId('input-two')
+        })),
+        getByTestId = _render4.getByTestId;
+      const inputTwo = getByTestId('input-two');
+      await (0, _react2.waitFor)(() => {
+        expect(document.activeElement).toBe(inputTwo);
+      });
+    });
+    it('should still focus the defaultFocusElement when it is focusable but not tabbable', async () => {
+      const _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(DialogExample, {
+          open: true,
+          defaultFocusElement: () => getByTestId('non-tabbable')
+        }, _div3 || (_div3 = /*#__PURE__*/_react.default.createElement("div", {
+          tabIndex: -1,
+          "data-testid": "non-tabbable"
+        }, TEST_TEXT)))),
+        getByTestId = _render5.getByTestId;
+      const nonTabbableContent = getByTestId('non-tabbable');
+      await (0, _react2.waitFor)(() => {
+        expect(document.activeElement).toBe(nonTabbableContent);
+      });
+    });
+    it('should focus the contentElement by default if focusable and no defaultFocusElement is provided', async () => {
+      const _render6 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(DialogExample, {
+          open: true,
+          contentElement: () => getByTestId('non-tabbable')
+        }, TEST_TEXT), _div4 || (_div4 = /*#__PURE__*/_react.default.createElement("div", {
+          tabIndex: -1,
+          "data-testid": "non-tabbable"
+        }, TEST_TEXT)))),
+        getByTestId = _render6.getByTestId;
+      const nonTabbableContent = getByTestId('non-tabbable');
+      await (0, _react2.waitFor)(() => {
+        expect(document.activeElement).toBe(nonTabbableContent);
+      });
+    });
+    it('should focus the document body if there is no defaultFocusElement, tabbable elements, or focusable contentElement', async () => {
+      const _render7 = (0, _react2.render)(_DialogExample4 || (_DialogExample4 = /*#__PURE__*/_react.default.createElement(DialogExample, {
+          open: false
+        }, TEST_TEXT))),
+        rerender = _render7.rerender,
+        getByTestId = _render7.getByTestId;
+      const inputTrigger = getByTestId('input-trigger');
+      inputTrigger.focus();
+      rerender(_DialogExample5 || (_DialogExample5 = /*#__PURE__*/_react.default.createElement(DialogExample, {
+        open: true
+      }, TEST_TEXT)));
+      await (0, _react2.waitFor)(() => {
+        expect(document.activeElement).toBe(document.body);
+      });
+    });
+    it('should return focus', async () => {
+      const _render8 = (0, _react2.render)(_DialogExample6 || (_DialogExample6 = /*#__PURE__*/_react.default.createElement(DialogExample, {
+          open: false
+        }))),
+        rerender = _render8.rerender,
+        getByTestId = _render8.getByTestId;
+      expect(document.activeElement).toBe(getByTestId('input-trigger'));
+      rerender(_DialogExample7 || (_DialogExample7 = /*#__PURE__*/_react.default.createElement(DialogExample, {
+        open: true
+      })));
+      await (0, _react2.waitFor)(() => {
+        expect(document.activeElement).toBe(getByTestId('input-one'));
+      });
+      rerender(_DialogExample8 || (_DialogExample8 = /*#__PURE__*/_react.default.createElement(DialogExample, {
+        open: false
+      })));
+      await (0, _react2.waitFor)(() => {
+        expect(document.activeElement).toBe(getByTestId('input-trigger'));
+      });
+    });
+    describe('when focus leaves the first and last tabbable', () => {
+      it(`should NOT call onBlur when shouldContainFocus=true and tab pressing last tabbable`, async () => {
+        const onBlur = jest.fn();
+        const _render9 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(DialogExample, {
+            open: true,
+            onBlur: onBlur,
+            shouldContainFocus: true,
+            defaultFocusElement: () => getByTestId('input-two')
+          })),
+          getByTestId = _render9.getByTestId;
+        const inputOne = getByTestId('input-one');
+        const inputTwo = getByTestId('input-two');
+        await (0, _react2.waitFor)(() => {
+          expect(document.activeElement).toBe(inputTwo);
+        });
+        await (0, _react2.waitFor)(() => {
+          _userEvent.userEvent.tab();
+          expect(onBlur).not.toHaveBeenCalled();
+          expect(document.activeElement).toBe(inputOne);
+        });
+      });
+      it('should NOT call onBlur when shouldContainFocus=true and Shift+Tab pressing first tabbable', async () => {
+        const onBlur = jest.fn();
+        const _render10 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(DialogExample, {
+            open: true,
+            shouldContainFocus: true,
+            defaultFocusElement: () => getByTestId('input-one'),
+            onBlur: onBlur
+          })),
+          getByTestId = _render10.getByTestId;
+        const inputOne = getByTestId('input-one');
+        const inputTwo = getByTestId('input-two');
+        await (0, _react2.waitFor)(() => {
+          expect(document.activeElement).toBe(inputOne);
+          _react2.fireEvent.keyDown(inputOne, {
+            key: 'Tab',
+            code: 'Tab',
+            keyCode: 9,
+            charCode: 9,
+            shiftKey: true
+          });
+          expect(onBlur).not.toHaveBeenCalled();
+          expect(document.activeElement).toBe(inputTwo);
+        });
+      });
+      it('should call onBlur when shouldContainFocus=false and tab pressing last tabbable', async () => {
+        const onBlur = jest.fn();
+        const _render11 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(DialogExample, {
+            open: true,
+            shouldContainFocus: false,
+            defaultFocusElement: () => getByTestId('input-two'),
+            onBlur: onBlur
+          })),
+          getByTestId = _render11.getByTestId;
+        const inputTwo = getByTestId('input-two');
+        inputTwo.focus();
+        await (0, _react2.waitFor)(() => {
+          expect(document.activeElement).toBe(inputTwo);
+          _react2.fireEvent.keyDown(inputTwo, {
+            key: 'Tab',
+            code: 'Tab',
+            keyCode: 9,
+            charCode: 9
+          });
+          expect(onBlur).toHaveBeenCalled();
+        });
+      });
+      it('should call onBlur when shouldContainFocus=false and pressing Shift+Tab on the first tabbable', async () => {
+        const onBlur = jest.fn();
+        const _render12 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(DialogExample, {
+            open: true,
+            shouldContainFocus: false,
+            defaultFocusElement: () => getByTestId('input-one'),
+            onBlur: onBlur
+          })),
+          getByTestId = _render12.getByTestId;
+        const inputOne = getByTestId('input-one');
+        inputOne.focus();
+        await (0, _react2.waitFor)(() => {
+          expect(document.activeElement).toBe(inputOne);
+          _react2.fireEvent.keyDown(inputOne, {
+            key: 'Tab',
+            code: 'Tab',
+            keyCode: 9,
+            charCode: 9,
+            shiftKey: true
+          });
+          expect(onBlur).toHaveBeenCalled();
+        });
+      });
+      describe('when launching a dialog w/out focusable content from another dialog', () => {
+        it(`should contain focus when last tabbable element triggers dialog w/out focusable content`, async () => {
+          const onBlur = jest.fn();
+          const _render13 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(NestedDialogExample, {
+              onBlur: onBlur,
+              shouldContainFocus: true,
+              defaultFocusElement: () => getByTestId('nested-input-two')
+            })),
+            getByTestId = _render13.getByTestId;
+          const inputOne = getByTestId('nested-input-one');
+          const inputTwo = getByTestId('nested-input-two');
+          await (0, _react2.waitFor)(() => {
+            _userEvent.userEvent.click(inputTwo);
+            expect(document.activeElement).toBe(inputTwo);
+            _react2.fireEvent.keyDown(inputTwo, {
+              key: 'Tab',
+              code: 'Tab',
+              keyCode: 9,
+              charCode: 9
+            });
+            expect(onBlur).not.toHaveBeenCalled();
+            expect(document.activeElement).toBe(inputOne);
+          });
+        });
+        it('should contain focus when first tabbable element triggers dialog w/out focusable content', async () => {
+          const onBlur = jest.fn();
+          const _render14 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(NestedDialogExample, {
+              onBlur: onBlur,
+              shouldContainFocus: true,
+              defaultFocusElement: () => getByTestId('nested-input-one')
+            })),
+            getByTestId = _render14.getByTestId;
+          const inputOne = getByTestId('nested-input-one');
+          const inputTwo = getByTestId('nested-input-two');
+          await (0, _react2.waitFor)(() => {
+            _userEvent.userEvent.click(inputOne);
+            expect(document.activeElement).toBe(inputOne);
+            _react2.fireEvent.keyDown(inputOne, {
+              key: 'Tab',
+              code: 'Tab',
+              keyCode: 9,
+              charCode: 9,
+              shiftKey: true
+            });
+            expect(onBlur).not.toHaveBeenCalled();
+            expect(document.activeElement).toBe(inputTwo);
+          });
+        });
+        it(`should call onBlur when shouldContainFocus=false and last tabbable element triggers dialog w/out focusable content`, async () => {
+          const onBlur = jest.fn();
+          const _render15 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(NestedDialogExample, {
+              onBlur: onBlur,
+              shouldContainFocus: false,
+              defaultFocusElement: () => getByTestId('nested-input-two')
+            })),
+            getByTestId = _render15.getByTestId;
+          const inputTwo = getByTestId('nested-input-two');
+          await (0, _react2.waitFor)(() => {
+            _userEvent.userEvent.click(inputTwo);
+            expect(document.activeElement).toBe(inputTwo);
+            _react2.fireEvent.keyDown(inputTwo, {
+              key: 'Tab',
+              code: 'Tab',
+              keyCode: 9,
+              charCode: 9
+            });
+            expect(onBlur).toHaveBeenCalled();
+          });
+        });
+        it(`should call onBlur when shouldContainFocus=false and first tabbable element triggers dialog w/out focusable content`, async () => {
+          const onBlur = jest.fn();
+          const _render16 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(NestedDialogExample, {
+              onBlur: onBlur,
+              shouldContainFocus: false,
+              defaultFocusElement: () => getByTestId('nested-input-one')
+            })),
+            getByTestId = _render16.getByTestId;
+          const inputOne = getByTestId('nested-input-one');
+          await (0, _react2.waitFor)(() => {
+            _userEvent.userEvent.click(inputOne);
+            expect(document.activeElement).toBe(inputOne);
+            _react2.fireEvent.keyDown(inputOne, {
+              key: 'Tab',
+              code: 'Tab',
+              keyCode: 9,
+              charCode: 9,
+              shiftKey: true
+            });
+            expect(onBlur).toHaveBeenCalled();
+          });
+        });
+      });
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-dialog",
-  "version": "8.46.2-snapshot-8",
+  "version": "8.46.2-snapshot-9",
   "description": "A utility component for managing keyboard accessibility and screen reader behavior",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,18 +24,20 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/shared-types": "8.46.2-snapshot-8",
-    "@instructure/ui-a11y-utils": "8.46.2-snapshot-8",
-    "@instructure/ui-dom-utils": "8.46.2-snapshot-8",
-    "@instructure/ui-react-utils": "8.46.2-snapshot-8",
-    "@instructure/ui-testable": "8.46.2-snapshot-8",
+    "@instructure/shared-types": "8.46.2-snapshot-9",
+    "@instructure/ui-a11y-utils": "8.46.2-snapshot-9",
+    "@instructure/ui-dom-utils": "8.46.2-snapshot-9",
+    "@instructure/ui-react-utils": "8.46.2-snapshot-9",
+    "@instructure/ui-testable": "8.46.2-snapshot-9",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/console": "8.46.2-snapshot-8",
-    "@instructure/ui-babel-preset": "8.46.2-snapshot-8",
-    "@instructure/ui-prop-types": "8.46.2-snapshot-8",
-    "@instructure/ui-test-utils": "8.46.2-snapshot-8"
+    "@instructure/console": "8.46.2-snapshot-9",
+    "@instructure/ui-babel-preset": "8.46.2-snapshot-9",
+    "@instructure/ui-prop-types": "8.46.2-snapshot-9",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"