@instructure/ui-drilldown 10.2.0 → 10.2.1-snapshot-1

package/lib/Drilldown/DrilldownPage/__new-tests__/DrilldownPage.test.js

@@ -0,0 +1,301 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+require("@testing-library/jest-dom");
+var _index = require("../../index");
+var _Drilldown, _Drilldown2, _Drilldown$Option, _Drilldown$Option2, _Drilldown3, _Drilldown$Option3, _Drilldown$Option4, _Drilldown$Option5, _Drilldown4, _Drilldown5, _Drilldown$Option6, _Drilldown$Option7, _Drilldown6, _Drilldown7, _Drilldown8, _Drilldown9, _Drilldown10;
+/*
+ * 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.
+ */
+describe('<Drilldown.Page />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it("shouldn't render non-DrilldownPage children", async () => {
+    (0, _react2.render)(_Drilldown || (_Drilldown = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+      rootPageId: "page0"
+    }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+      id: "page0"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      id: "testDiv"
+    }, "Div")))));
+    const nonPageChild = _react2.screen.queryByText('DIV');
+    expect(nonPageChild).not.toBeInTheDocument();
+  });
+  describe('header title', () => {
+    it('should be displayed in the header', async () => {
+      const _render = (0, _react2.render)(_Drilldown2 || (_Drilldown2 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0",
+          renderTitle: "HeaderTitleString"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "option1"
+        }, "Option"))))),
+        container = _render.container;
+      const titleContainer = container.querySelector('[id^="DrilldownHeader-Title-Label_"]');
+      const title = _react2.screen.queryByText('HeaderTitleString');
+      expect(titleContainer).toBeInTheDocument();
+      expect(title).toBeInTheDocument();
+    });
+    it('should be displayed when function is passed', async () => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+        rootPageId: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+        id: "page0",
+        renderTitle: () => 'HeaderTitleFunction'
+      }, _Drilldown$Option || (_Drilldown$Option = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "option1"
+      }, "Option")))));
+      const title = _react2.screen.queryByText('HeaderTitleFunction');
+      expect(title).toBeInTheDocument();
+    });
+    it("shouldn't be displayed when function has no return value", async () => {
+      const _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0",
+          renderTitle: () => null
+        }, _Drilldown$Option2 || (_Drilldown$Option2 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "option1"
+        }, "Option"))))),
+        container = _render2.container;
+      const title = container.querySelector('[id^="DrilldownHeader-Title-Label_"]');
+      const listItem = container.querySelector('li');
+      expect(title).not.toBeInTheDocument();
+      expect(listItem).toBeInTheDocument();
+    });
+  });
+  describe('header action label', () => {
+    it('should be displayed in the header', async () => {
+      (0, _react2.render)(_Drilldown3 || (_Drilldown3 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+        rootPageId: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+        id: "page0",
+        renderActionLabel: "HeaderActionLabelString"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "option1"
+      }, "Option")))));
+      const actionLabel = _react2.screen.queryByText('HeaderActionLabelString');
+      expect(actionLabel).toBeInTheDocument();
+    });
+    it('should be displayed when function is passed', async () => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+        rootPageId: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+        id: "page0",
+        renderActionLabel: () => 'HeaderActionLabelFunction'
+      }, _Drilldown$Option3 || (_Drilldown$Option3 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "option1"
+      }, "Option")))));
+      const actionLabel = _react2.screen.queryByText('HeaderActionLabelFunction');
+      expect(actionLabel).toBeInTheDocument();
+    });
+    it("shouldn't be displayed when function has no return value", async () => {
+      const _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0",
+          renderActionLabel: () => null
+        }, _Drilldown$Option4 || (_Drilldown$Option4 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "option1"
+        }, "Option"))))),
+        container = _render3.container;
+      const listItem = container.querySelector('li');
+      const title = container.querySelector('[id^="DrilldownHeader-Title-Label_"]');
+      expect(listItem).toBeInTheDocument();
+      expect(title).not.toBeInTheDocument();
+    });
+    it('should fire header action callback', async () => {
+      const actionCallback = _vitest.vi.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+        rootPageId: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+        id: "page0",
+        renderActionLabel: "ActionWithCallback",
+        onHeaderActionClicked: actionCallback
+      }, _Drilldown$Option5 || (_Drilldown$Option5 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "option1"
+      }, "Option")))));
+      const actionLabel = _react2.screen.getByText('ActionWithCallback');
+      await _userEvent.default.click(actionLabel);
+      await (0, _react2.waitFor)(() => {
+        expect(actionCallback).toHaveBeenCalled();
+      });
+    });
+  });
+  describe('header back navigation', () => {
+    it('should not be displayed on root page', async () => {
+      (0, _react2.render)(_Drilldown4 || (_Drilldown4 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+        rootPageId: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+        id: "page0",
+        renderBackButtonLabel: "HeaderBackString"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "option1"
+      }, "Option")))));
+      const label = _react2.screen.queryByText('HeaderBackString');
+      expect(label).not.toBeInTheDocument();
+    });
+    it('should be displayed on subpages', async () => {
+      (0, _react2.render)(_Drilldown5 || (_Drilldown5 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+        rootPageId: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "option1",
+        subPageId: "page2"
+      }, "Option")), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+        id: "page2",
+        renderBackButtonLabel: "HeaderBackString"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "option2"
+      }, "Option")))));
+      const option = _react2.screen.getByText('Option');
+      await _userEvent.default.click(option);
+      await (0, _react2.waitFor)(() => {
+        const label = _react2.screen.queryByText('HeaderBackString');
+        expect(label).toBeInTheDocument();
+      });
+    });
+    it('should be displayed when function is passed, and can use former page title', async () => {
+      const pageTitle = 'Page Title';
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+        rootPageId: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+        id: "page0",
+        renderTitle: pageTitle
+      }, _Drilldown$Option6 || (_Drilldown$Option6 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "option1",
+        subPageId: "page2"
+      }, "Option"))), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+        id: "page2",
+        renderBackButtonLabel: prevPageTitle => `Back to ${prevPageTitle}`
+      }, _Drilldown$Option7 || (_Drilldown$Option7 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "option2"
+      }, "Option")))));
+      const option = _react2.screen.getByText('Option');
+      await _userEvent.default.click(option);
+      await (0, _react2.waitFor)(() => {
+        const label = _react2.screen.queryByText(`Back to ${pageTitle}`);
+        expect(label).toBeInTheDocument();
+      });
+    });
+  });
+  describe('header separator', () => {
+    it('should not be displayed, if no item is on the header', async () => {
+      const _render4 = (0, _react2.render)(_Drilldown6 || (_Drilldown6 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "option1"
+        }, "Option"))))),
+        container = _render4.container;
+      const separator = container.querySelector('[id^="DrilldownHeader-Separator_"]');
+      expect(separator).not.toBeInTheDocument();
+    });
+    it('should be displayed, if there are items in the header', async () => {
+      const _render5 = (0, _react2.render)(_Drilldown7 || (_Drilldown7 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0",
+          renderTitle: "Title"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "option1"
+        }, "Option"))))),
+        container = _render5.container;
+      const separator = container.querySelector('[id^="DrilldownHeader-Separator_"]');
+      expect(separator).toBeInTheDocument();
+    });
+    it('should not be displayed, if withoutHeaderSeparator is set', async () => {
+      const _render6 = (0, _react2.render)(_Drilldown8 || (_Drilldown8 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0",
+          renderTitle: "Title",
+          withoutHeaderSeparator: true
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "option1"
+        }, "Option"))))),
+        container = _render6.container;
+      const separator = container.querySelector('[id^="DrilldownHeader-Separator_"]');
+      expect(separator).not.toBeInTheDocument();
+    });
+  });
+  describe('disabled prop', () => {
+    it('should make all options disabled', async () => {
+      (0, _react2.render)(_Drilldown9 || (_Drilldown9 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+        rootPageId: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+        id: "page0",
+        renderActionLabel: "Action Label",
+        disabled: true
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "option1"
+      }, "Option")))));
+      const allOptions = _react2.screen.getAllByRole('menuitem');
+      allOptions.forEach(option => {
+        expect(option).toHaveAttribute('aria-disabled', 'true');
+      });
+    });
+    it("shouldn't make header Back options disabled", async () => {
+      (0, _react2.render)(_Drilldown10 || (_Drilldown10 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+        rootPageId: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "option1",
+        subPageId: "page2"
+      }, "Option1")), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+        id: "page2",
+        disabled: true,
+        renderBackButtonLabel: "HeaderBackString"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "option2"
+      }, "Option2")))));
+      const subPageOption = _react2.screen.getByText('Option1');
+      await _userEvent.default.click(subPageOption);
+      await (0, _react2.waitFor)(() => {
+        const option2 = _react2.screen.getByLabelText('Option2');
+        const backOption = _react2.screen.getByLabelText('HeaderBackString');
+        expect(option2).toHaveAttribute('role', 'menuitem');
+        expect(option2).toHaveAttribute('aria-disabled', 'true');
+        expect(backOption).toHaveAttribute('role', 'menuitem');
+        expect(backOption).not.toHaveAttribute('aria-disabled');
+      });
+    });
+  });
+});

package/lib/Drilldown/DrilldownSeparator/__new-tests__/DrilldownSeparator.test.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _index = require("../../index");
+var _Drilldown, _Drilldown2;
+/*
+ * 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.
+ */
+describe('<Drilldown.Separator />', () => {
+  it('should render', async () => {
+    (0, _react2.render)(_Drilldown || (_Drilldown = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+      rootPageId: "page0"
+    }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+      id: "page0"
+    }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Separator, {
+      id: "sep1",
+      "data-testid": "separator1"
+    })))));
+    const separator = _react2.screen.getByTestId('separator1');
+    expect(separator).toBeVisible();
+    expect(separator.getAttribute('class')).toContain('-separator');
+  });
+  it('should not render children', async () => {
+    (0, _react2.render)(_Drilldown2 || (_Drilldown2 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+      rootPageId: "page0"
+    }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+      id: "page0"
+    }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Separator, {
+      id: "sep1",
+      "data-testid": "separator1"
+    }, "Children")))));
+    const separatorChild = _react2.screen.queryByText('Children');
+    expect(separatorChild).not.toBeInTheDocument();
+  });
+});