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

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

@@ -0,0 +1,575 @@
+"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, _Drilldown$Option, _Drilldown2, _Drilldown$Option2, _Drilldown3, _Drilldown4, _Drilldown5, _Drilldown6, _Drilldown7, _Drilldown8, _Drilldown9, _Drilldown10, _Drilldown11, _Drilldown12, _Drilldown13, _Drilldown14, _Drilldown15, _Drilldown16, _Drilldown$Option3, _Drilldown$Option4, _Drilldown$Option5, _Drilldown$Option6, _Drilldown$Option7, _Drilldown$Option8, _Drilldown$Option9, _Drilldown$Option10, _Drilldown$Option11, _Drilldown$Option12, _Drilldown$Option13, _Drilldown$Option14, _Drilldown$Option15, _Drilldown$Option16, _Drilldown$Option17;
+/*
+ * 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.Group />', () => {
+  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('should not allow de-selecting an option when selectableType = "single"', async () => {
+    const options = ['one', 'two', 'three'];
+    const Example = ({
+      opts
+    }) => {
+      return /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+        rootPageId: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+        id: "group0",
+        selectableType: "single"
+      }, opts.map(opt => {
+        return /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          key: opt,
+          value: opt,
+          name: opt,
+          id: opt,
+          defaultSelected: opt === 'three',
+          "data-testid": opt
+        }, opt);
+      }))));
+    };
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Example, {
+      opts: options
+    }));
+    const selectedOption = _react2.screen.getByTestId('three');
+    expect(selectedOption).toHaveAttribute('aria-checked', 'true');
+    await _userEvent.default.click(selectedOption);
+    await (0, _react2.waitFor)(() => {
+      const updatedSelectedOption = _react2.screen.getByTestId('three');
+      expect(updatedSelectedOption).toHaveAttribute('aria-checked', 'true');
+    });
+  });
+  it("shouldn't render non-DrilldownGroup 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(_index.Drilldown.Group, {
+      id: "group0"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "testDiv"
+    }, "Div"))))));
+    const nonGroupChild = _react2.screen.queryByTestId('testDiv');
+    const childText = _react2.screen.queryByText('Div');
+    expect(nonGroupChild).not.toBeInTheDocument();
+    expect(childText).not.toBeInTheDocument();
+  });
+  it('elementRef should return ref to the group', async () => {
+    const elementRef = _vitest.vi.fn();
+    const _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+        rootPageId: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+        id: "group0",
+        elementRef: elementRef
+      }, _Drilldown$Option || (_Drilldown$Option = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "groupOption01"
+      }, "Option")))))),
+      container = _render.container;
+    const group = container.querySelector('#group0');
+    expect(elementRef).toHaveBeenCalledWith(group);
+  });
+  describe('renderGroupTitle', () => {
+    it('should display', 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.Group, {
+        id: "group0",
+        renderGroupTitle: "Group Title"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "groupOption01"
+      }, "Option"))))));
+      const title = _react2.screen.getByText('Group Title');
+      expect(title).toBeInTheDocument();
+    });
+    it('should display, if function is provided', async () => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+        rootPageId: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+        id: "group0",
+        renderGroupTitle: () => 'Group Title'
+      }, _Drilldown$Option2 || (_Drilldown$Option2 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "groupOption01"
+      }, "Option"))))));
+      const title = _react2.screen.getByText('Group Title');
+      expect(title).toBeInTheDocument();
+    });
+  });
+  describe('separators', () => {
+    it("shouldn't display, when group is first and/or last item", async () => {
+      const _render2 = (0, _react2.render)(_Drilldown3 || (_Drilldown3 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+          id: "group0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption01"
+        }, "Option")))))),
+        container = _render2.container;
+      const separators = container.querySelectorAll('[class$="-separator"]');
+      expect(separators.length).toBe(0);
+    });
+    it('should display by default, if group is between other items', async () => {
+      const _render3 = (0, _react2.render)(_Drilldown4 || (_Drilldown4 = /*#__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"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+          id: "group0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption01"
+        }, "Option")), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "option2"
+        }, "Option"))))),
+        container = _render3.container;
+      const separators = container.querySelectorAll('[class$="-separator"]');
+      expect(separators.length).toBe(2);
+    });
+    it("shouldn't display extra separator between groups", async () => {
+      const _render4 = (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"
+        }, "Option"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+          id: "group0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption01"
+        }, "Option")), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+          id: "group1"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption11"
+        }, "Option")), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "option2"
+        }, "Option"))))),
+        container = _render4.container;
+      const separators = container.querySelectorAll('[class$="-separator"]');
+      expect(separators.length).toBe(3);
+    });
+  });
+  describe('disabled prop', () => {
+    it('should disable all items in the group', async () => {
+      const _render5 = (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"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+          id: "group0",
+          disabled: true
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption01"
+        }, "Option"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption02"
+        }, "Option")), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "option2"
+        }, "Option"))))),
+        container = _render5.container;
+      const disabledOption_1 = container.querySelector('#groupOption01');
+      const disabledOption_2 = container.querySelector('#groupOption02');
+      const option_1 = container.querySelector('#option1');
+      const option_2 = container.querySelector('#option2');
+      expect(disabledOption_1).toHaveAttribute('aria-disabled', 'true');
+      expect(disabledOption_2).toHaveAttribute('aria-disabled', 'true');
+      expect(option_1).not.toHaveAttribute('aria-disabled');
+      expect(option_2).not.toHaveAttribute('aria-disabled');
+    });
+  });
+  describe('role prop', () => {
+    it('should be "group" by default', async () => {
+      const _render6 = (0, _react2.render)(_Drilldown7 || (_Drilldown7 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+          id: "group0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption01"
+        }, "Option"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption02"
+        }, "Option")))))),
+        container = _render6.container;
+      const group = container.querySelector('#group0');
+      expect(group).toHaveAttribute('role', 'group');
+    });
+    it('should render the group with passed role', async () => {
+      const _render7 = (0, _react2.render)(_Drilldown8 || (_Drilldown8 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+          id: "group0",
+          role: "menu"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption01"
+        }, "Option"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption02"
+        }, "Option")))))),
+        container = _render7.container;
+      const group = container.querySelector('#group0');
+      expect(group).toHaveAttribute('role', 'menu');
+    });
+  });
+  describe('as prop', () => {
+    it('should inherit Drilldown\'s "ul" by default', async () => {
+      const _render8 = (0, _react2.render)(_Drilldown9 || (_Drilldown9 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+          id: "group0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption01"
+        }, "Option"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption02"
+        }, "Option")))))),
+        container = _render8.container;
+      const drilldownContainer = container.querySelector('[id^=Selectable_][id$=-list]');
+      const group = container.querySelector('#group0');
+      expect(drilldownContainer.tagName).toBe('UL');
+      expect(group.tagName).toBe('UL');
+    });
+    it('should inherit Drilldown\'s "as" prop', async () => {
+      const _render9 = (0, _react2.render)(_Drilldown10 || (_Drilldown10 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0",
+          as: "ol"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+          id: "group0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption01"
+        }, "Option"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption02"
+        }, "Option")))))),
+        container = _render9.container;
+      const drilldownContainer = container.querySelector('[id^=Selectable_][id$=-list]');
+      const group = container.querySelector('#group0');
+      expect(drilldownContainer.tagName).toBe('OL');
+      expect(group.tagName).toBe('OL');
+    });
+    it('should render the group as other element', async () => {
+      const _render10 = (0, _react2.render)(_Drilldown11 || (_Drilldown11 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+          id: "group0",
+          as: "ol"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption01"
+        }, "Option"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption02"
+        }, "Option")))))),
+        container = _render10.container;
+      const drilldownContainer = container.querySelector('[id^=Selectable_][id$=-list]');
+      const group = container.querySelector('#group0');
+      expect(drilldownContainer.tagName).toBe('UL');
+      expect(group.tagName).toBe('OL');
+    });
+  });
+  describe('selectableType', () => {
+    it('if not set, should render role="menuitem" options without icon by default', async () => {
+      const _render11 = (0, _react2.render)(_Drilldown12 || (_Drilldown12 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+          id: "group0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption01"
+        }, "Option")))))),
+        container = _render11.container;
+      const icon = container.querySelector('svg[name="IconCheck"]');
+      const groupOption = container.querySelector('#groupOption01');
+      expect(icon).not.toBeInTheDocument();
+      expect(groupOption).toHaveAttribute('role', 'menuitem');
+    });
+    it('value "single" should render role="menuitemradio" options with icon', async () => {
+      const _render12 = (0, _react2.render)(_Drilldown13 || (_Drilldown13 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+          id: "group0",
+          selectableType: "single"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption01"
+        }, "Option")))))),
+        container = _render12.container;
+      const icon = container.querySelector('svg[name="IconCheck"]');
+      const groupOption = container.querySelector('#groupOption01');
+      expect(icon).toBeInTheDocument();
+      expect(groupOption).toHaveAttribute('role', 'menuitemradio');
+    });
+    it('value "multiple" should render role="menuitemcheckbox" options with icon', async () => {
+      const _render13 = (0, _react2.render)(_Drilldown14 || (_Drilldown14 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+          id: "group0",
+          selectableType: "multiple"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption01"
+        }, "Option")))))),
+        container = _render13.container;
+      const icon = container.querySelector('svg[name="IconCheck"]');
+      const groupOption = container.querySelector('#groupOption01');
+      expect(icon).toBeInTheDocument();
+      expect(groupOption).toHaveAttribute('role', 'menuitemcheckbox');
+    });
+  });
+  describe('defaultSelected', () => {
+    describe('if not provided', () => {
+      it('all group options has to be unselected', async () => {
+        (0, _react2.render)(_Drilldown15 || (_Drilldown15 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+          id: "group0",
+          selectableType: "multiple"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption01",
+          value: 1
+        }, "Option"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption02",
+          value: 2
+        }, "Option"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption03",
+          value: 3
+        }, "Option"))))));
+        const options = _react2.screen.getAllByRole('menuitemcheckbox');
+        expect(options.length).toBe(3);
+        options.forEach(option => {
+          expect(option).toHaveAttribute('aria-checked', 'false');
+        });
+      });
+      it('all checkboxes should not be visible', async () => {
+        const _render14 = (0, _react2.render)(_Drilldown16 || (_Drilldown16 = /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+            rootPageId: "page0"
+          }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+            id: "page0"
+          }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+            id: "group0",
+            selectableType: "multiple"
+          }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+            id: "groupOption01",
+            value: 1
+          }, "Option"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+            id: "groupOption02",
+            value: 2
+          }, "Option"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+            id: "groupOption03",
+            value: 3
+          }, "Option")))))),
+          container = _render14.container;
+        const icons = container.querySelectorAll('svg[name="IconCheck"]');
+        expect(icons.length).toBe(3);
+        icons.forEach(icon => {
+          expect(icon).not.toBeVisible();
+        });
+      });
+    });
+    describe('if provided', () => {
+      it('all selected checkboxes should be visible', async () => {
+        const selectedValues = ['item1', 'item3'];
+        const _render15 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+            rootPageId: "page0"
+          }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+            id: "page0"
+          }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+            id: "group0",
+            selectableType: "multiple",
+            defaultSelected: selectedValues
+          }, _Drilldown$Option3 || (_Drilldown$Option3 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+            id: "groupOption01",
+            value: "item1"
+          }, "Option")), _Drilldown$Option4 || (_Drilldown$Option4 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+            id: "groupOption02",
+            value: "item2"
+          }, "Option")), _Drilldown$Option5 || (_Drilldown$Option5 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+            id: "groupOption03",
+            value: "item3"
+          }, "Option")))))),
+          container = _render15.container;
+        const options = _react2.screen.getAllByRole('menuitemcheckbox');
+        const icons = container.querySelectorAll('svg');
+        expect(options[0]).toHaveAttribute('aria-checked', 'true');
+        expect(options[1]).toHaveAttribute('aria-checked', 'false');
+        expect(options[2]).toHaveAttribute('aria-checked', 'true');
+        expect(icons[0]).toBeVisible();
+        expect(icons[1]).not.toBeVisible();
+        expect(icons[2]).toBeVisible();
+      });
+      it("should be overridden by the Option's own defaultSelected", async () => {
+        const selectedValues = ['item1', 'item3'];
+        (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+          id: "group0",
+          selectableType: "multiple",
+          defaultSelected: selectedValues
+        }, _Drilldown$Option6 || (_Drilldown$Option6 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption01",
+          value: "item1"
+        }, "Option")), _Drilldown$Option7 || (_Drilldown$Option7 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption02",
+          value: "item2",
+          defaultSelected: true
+        }, "Option")), _Drilldown$Option8 || (_Drilldown$Option8 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+          id: "groupOption03",
+          value: "item3",
+          defaultSelected: false
+        }, "Option"))))));
+        const options = _react2.screen.getAllByRole('menuitemcheckbox');
+        expect(options[0]).toHaveAttribute('aria-checked', 'true'); // from the group,
+        expect(options[1]).toHaveAttribute('aria-checked', 'true'); // from own prop,
+        expect(options[2]).toHaveAttribute('aria-checked', 'false'); // override group's
+      });
+      describe('for "single" selectableType', () => {
+        it('the selected option should be checked', async () => {
+          const selectedValues = ['item2'];
+          (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+            rootPageId: "page0"
+          }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+            id: "page0"
+          }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+            id: "group0",
+            selectableType: "single",
+            defaultSelected: selectedValues
+          }, _Drilldown$Option9 || (_Drilldown$Option9 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+            id: "groupOption01",
+            value: "item1"
+          }, "Option")), _Drilldown$Option10 || (_Drilldown$Option10 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+            id: "groupOption02",
+            value: "item2"
+          }, "Option")), _Drilldown$Option11 || (_Drilldown$Option11 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+            id: "groupOption03",
+            value: "item3"
+          }, "Option"))))));
+          const options = _react2.screen.getAllByRole('menuitemradio');
+          expect(options[0]).toHaveAttribute('aria-checked', 'false');
+          expect(options[1]).toHaveAttribute('aria-checked', 'true');
+          expect(options[2]).toHaveAttribute('aria-checked', 'false');
+        });
+        it("should throw error if multiple items are selected, and shouldn't select any item", async () => {
+          const selectedValues = ['item1', 'item3'];
+          (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+            rootPageId: "page0"
+          }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+            id: "page0"
+          }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+            id: "group0",
+            selectableType: "single",
+            defaultSelected: selectedValues
+          }, _Drilldown$Option12 || (_Drilldown$Option12 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+            id: "groupOption01",
+            value: "item1"
+          }, "Option")), _Drilldown$Option13 || (_Drilldown$Option13 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+            id: "groupOption02",
+            value: "item2"
+          }, "Option")), _Drilldown$Option14 || (_Drilldown$Option14 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+            id: "groupOption03",
+            value: "item3"
+          }, "Option"))))));
+          const options = _react2.screen.getAllByRole('menuitemradio');
+          expect(options[0]).toHaveAttribute('aria-checked', 'false');
+          expect(options[1]).toHaveAttribute('aria-checked', 'false');
+          expect(options[2]).toHaveAttribute('aria-checked', 'false');
+          expect(consoleErrorMock).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+  describe('selection', () => {
+    it('should fire "onSelect" callback', async () => {
+      const onSelect = _vitest.vi.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Drilldown, {
+        rootPageId: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+        id: "group0",
+        selectableType: "multiple",
+        onSelect: onSelect
+      }, _Drilldown$Option15 || (_Drilldown$Option15 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "groupOption01",
+        value: "item1"
+      }, "Option 1")), _Drilldown$Option16 || (_Drilldown$Option16 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "groupOption02",
+        value: "item2"
+      }, "Option 2")), _Drilldown$Option17 || (_Drilldown$Option17 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+        id: "groupOption03",
+        value: "item3"
+      }, "Option 3"))))));
+      const option2 = _react2.screen.getByText('Option 2');
+      await _userEvent.default.click(option2);
+      await (0, _react2.waitFor)(() => {
+        expect(onSelect).toHaveBeenCalledTimes(1);
+        const args = onSelect.mock.calls[0][1];
+        const event = onSelect.mock.calls[0][0];
+        expect(args).toHaveProperty('value', ['item2']);
+        expect(args).toHaveProperty('isSelected', true);
+        expect(args.selectedOption).toBeInstanceOf(Object);
+        expect(args.selectedOption.props).toHaveProperty('id', 'groupOption02');
+        expect(args.selectedOption.props).toHaveProperty('value', 'item2');
+        expect(args.drilldown).toBeInstanceOf(Object);
+        expect(args.drilldown.props).toHaveProperty('role', 'menu');
+        expect(args.drilldown.hide).toBeInstanceOf(Function);
+        expect(event.target).toBe(option2);
+      });
+    });
+  });
+});