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

package/es/Drilldown/__new-tests__/Drilldown.test.js

@@ -0,0 +1,818 @@
+var _Drilldown, _Drilldown2, _Drilldown3, _Drilldown4, _Drilldown5, _Drilldown6, _Drilldown7, _Drilldown8, _Drilldown9, _Drilldown$Page, _button, _Drilldown$Page2, _button2, _Drilldown$Page3, _Drilldown$Page4, _button3, _Drilldown$Page5, _button4, _Drilldown$Page6, _Drilldown$Page7, _button5, _Drilldown$Page8, _button6, _Drilldown$Page9, _Drilldown10, _button7, _Drilldown$Page10, _Drilldown11, _button8, _Drilldown$Page11, _button9, _Drilldown$Page12, _button10, _Drilldown$Page13, _Drilldown12, _button11, _Drilldown$Page14, _Drilldown13, _button12, _Drilldown$Page15, _button13, _Drilldown$Page16, _button14, _Drilldown$Page17, _button15, _Drilldown$Page18, _button16, _Drilldown$Page19, _button17, _Drilldown$Page20, _button18, _Drilldown$Page21, _button19, _Drilldown$Page22, _Drilldown14, _Drilldown15;
+/*
+ * 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.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+// eslint-disable-next-line no-restricted-imports
+import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { IconCheckSolid } from '@instructure/ui-icons';
+import { Drilldown } from '../index';
+import DrilldownExamples from '../__examples__/Drilldown.examples';
+const data = Array(5).fill(0).map((_v, ind) => ({
+  label: `option ${ind}`,
+  id: `opt_${ind}`
+}));
+describe('<Drilldown />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  describe('rootPageId prop', () => {
+    it('should set the initial page and render it', async () => {
+      render(_Drilldown || (_Drilldown = /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page1"
+      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option-01")), /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page1"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option11"
+      }, "Option-11")))));
+      const drilldown = screen.getByRole('menu');
+      const options = screen.getAllByRole('menuitem');
+      const rootlessOption = screen.queryByText('Option-01');
+      expect(drilldown).toBeInTheDocument();
+      expect(rootlessOption).not.toBeInTheDocument();
+      expect(options.length).toBe(1);
+      expect(options[0]).toHaveTextContent('Option-11');
+      expect(options[0]).toHaveAttribute('id', 'option11');
+    });
+  });
+  describe('children prop', () => {
+    it('should not allow non-DrilldownPage children', async () => {
+      render(_Drilldown2 || (_Drilldown2 = /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0"
+      }, /*#__PURE__*/React.createElement("div", {
+        id: "testDiv"
+      }, "DIV-child"))));
+      const drilldown = screen.queryByRole('menu');
+      const options = screen.queryAllByRole('menuitem');
+      const notAllowedChild = screen.queryByText('DIV-child');
+      expect(drilldown).not.toBeInTheDocument();
+      expect(options.length).toBe(0);
+      expect(notAllowedChild).not.toBeInTheDocument();
+    });
+  });
+  describe('id prop', () => {
+    it('should put id attr on the drilldown', async () => {
+      render(_Drilldown3 || (_Drilldown3 = /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        id: "testId"
+      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const drilldown = screen.getByRole('menu');
+      expect(drilldown).toBeInTheDocument();
+      expect(drilldown).toHaveAttribute('id', 'testId');
+    });
+  });
+  describe('label prop', () => {
+    it('should be added as aria-label', async () => {
+      render(_Drilldown4 || (_Drilldown4 = /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        label: "testLabel"
+      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const drilldown = screen.getByRole('menu');
+      expect(drilldown).toBeInTheDocument();
+      expect(drilldown).toHaveAttribute('aria-label', 'testLabel');
+    });
+  });
+  describe('disabled prop', () => {
+    it('should disable all options', async () => {
+      render(_Drilldown5 || (_Drilldown5 = /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        disabled: true
+      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0",
+        renderActionLabel: "Action"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option02"
+      }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option03"
+      }, "Option")))));
+      const options = screen.getAllByRole('menuitem');
+      expect(options.length).toBe(4); // header action + 3 options
+
+      options.forEach(option => {
+        expect(option).toHaveAttribute('aria-disabled', 'true');
+      });
+    });
+  });
+  describe('as prop', () => {
+    it('should be "ul" by default', async () => {
+      const _render = render(_Drilldown6 || (_Drilldown6 = /*#__PURE__*/React.createElement(Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "option01"
+        }, "Option"))))),
+        container = _render.container;
+      const drilldownList = container.querySelector('[class$="-options__list"]');
+      expect(drilldownList === null || drilldownList === void 0 ? void 0 : drilldownList.tagName).toBe('UL');
+    });
+    it('should render as passed element', async () => {
+      const _render2 = render(_Drilldown7 || (_Drilldown7 = /*#__PURE__*/React.createElement(Drilldown, {
+          rootPageId: "page0",
+          as: "ol"
+        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "option01"
+        }, "Option"))))),
+        container = _render2.container;
+      const drilldownList = container.querySelector('[class$="-options__list"]');
+      expect(drilldownList === null || drilldownList === void 0 ? void 0 : drilldownList.tagName).toBe('OL');
+    });
+  });
+  describe('role prop', () => {
+    it('should be "menu" by default', async () => {
+      const _render3 = render(_Drilldown8 || (_Drilldown8 = /*#__PURE__*/React.createElement(Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "option01"
+        }, "Option"))))),
+        container = _render3.container;
+      const drilldown = container.querySelector('div[id^="Drilldown_"]');
+      expect(drilldown).toHaveAttribute('role', 'menu');
+    });
+    it('should apply passed role', async () => {
+      const _render4 = render(_Drilldown9 || (_Drilldown9 = /*#__PURE__*/React.createElement(Drilldown, {
+          rootPageId: "page0",
+          role: "list"
+        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "option01"
+        }, "Option"))))),
+        container = _render4.container;
+      const drilldown = container.querySelector('div[id^="Drilldown_"]');
+      expect(drilldown).toHaveAttribute('role', 'list');
+    });
+  });
+  describe('elementRef prop (and ref static prop)', () => {
+    it('should give back the drilldown element when there is no trigger', async () => {
+      const elementRef = vi.fn();
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        elementRef: elementRef
+      }, _Drilldown$Page || (_Drilldown$Page = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const drilldown = screen.getByRole('menu');
+      expect(drilldown).toBeInTheDocument();
+      expect(elementRef).toHaveBeenCalledWith(drilldown);
+    });
+    it('should give back the Popover root when drilldown has trigger and is closed', async () => {
+      const elementRef = vi.fn();
+      const _render5 = render( /*#__PURE__*/React.createElement(Drilldown, {
+          rootPageId: "page0",
+          elementRef: elementRef,
+          trigger: _button || (_button = /*#__PURE__*/React.createElement("button", null, "Toggle"))
+        }, _Drilldown$Page2 || (_Drilldown$Page2 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "option01"
+        }, "Option"))))),
+        container = _render5.container;
+      const trigger = screen.getByText('Toggle');
+      const positionId = trigger.getAttribute('data-position-target');
+      const drilldownRoot = container.querySelector(`span[data-position="${positionId}"]`);
+      expect(drilldownRoot).toBeInTheDocument();
+      expect(elementRef).toHaveBeenCalledWith(drilldownRoot);
+    });
+    it('should give back the the Popover root when drilldown has trigger and is open', async () => {
+      const elementRef = vi.fn();
+      const _render6 = render( /*#__PURE__*/React.createElement(Drilldown, {
+          rootPageId: "page0",
+          elementRef: elementRef,
+          trigger: _button2 || (_button2 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+          defaultShow: true
+        }, _Drilldown$Page3 || (_Drilldown$Page3 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "option01"
+        }, "Option"))))),
+        container = _render6.container;
+      const trigger = screen.getByText('Toggle');
+      const positionId = trigger.getAttribute('data-position-target');
+      const drilldownRoot = container.querySelector(`span[data-position="${positionId}"]`);
+      expect(drilldownRoot).toBeInTheDocument();
+      expect(elementRef).toHaveBeenCalledWith(drilldownRoot);
+    });
+  });
+  describe('drilldownRef prop', () => {
+    it('should give back the drilldown element when there is no trigger', async () => {
+      const drilldownRef = vi.fn();
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        drilldownRef: drilldownRef
+      }, _Drilldown$Page4 || (_Drilldown$Page4 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const drilldown = screen.getByRole('menu');
+      expect(drilldownRef).toHaveBeenCalledWith(drilldown);
+    });
+    it("shouldn't be called when drilldown has trigger and is closed", async () => {
+      const drilldownRef = vi.fn();
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        drilldownRef: drilldownRef,
+        trigger: _button3 || (_button3 = /*#__PURE__*/React.createElement("button", null, "Toggle"))
+      }, _Drilldown$Page5 || (_Drilldown$Page5 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      expect(drilldownRef).not.toHaveBeenCalled();
+    });
+    it('should give back the drilldown element when drilldown has trigger and is open', async () => {
+      const drilldownRef = vi.fn();
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        drilldownRef: drilldownRef,
+        trigger: _button4 || (_button4 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        defaultShow: true
+      }, _Drilldown$Page6 || (_Drilldown$Page6 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const drilldown = screen.getByRole('menu');
+      expect(drilldownRef).toHaveBeenCalledWith(drilldown);
+    });
+  });
+  describe('popoverRef prop', () => {
+    it('should not be called when there is no trigger', async () => {
+      const popoverRef = vi.fn();
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        popoverRef: popoverRef
+      }, _Drilldown$Page7 || (_Drilldown$Page7 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      expect(popoverRef).not.toHaveBeenCalled();
+    });
+    it('should give back the Popover component when drilldown has trigger and is closed', async () => {
+      const popoverRef = vi.fn();
+      const _render7 = render( /*#__PURE__*/React.createElement(Drilldown, {
+          rootPageId: "page0",
+          popoverRef: popoverRef,
+          trigger: _button5 || (_button5 = /*#__PURE__*/React.createElement("button", null, "Toggle"))
+        }, _Drilldown$Page8 || (_Drilldown$Page8 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "option01"
+        }, "Option"))))),
+        container = _render7.container;
+      const trigger = screen.getByText('Toggle');
+      const positionId = trigger.getAttribute('data-position-target');
+      const popoverRoot = container.querySelector(`span[data-position="${positionId}"]`);
+      expect(popoverRoot).toBeInTheDocument();
+      expect(popoverRef).toHaveBeenCalled();
+
+      // Popover component's public ref prop
+      expect(popoverRef.mock.calls[0][0].ref).toBe(popoverRoot);
+    });
+    it('should give back the Popover component when drilldown has trigger and is open', async () => {
+      const popoverRef = vi.fn();
+      const _render8 = render( /*#__PURE__*/React.createElement(Drilldown, {
+          rootPageId: "page0",
+          popoverRef: popoverRef,
+          trigger: _button6 || (_button6 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+          defaultShow: true
+        }, _Drilldown$Page9 || (_Drilldown$Page9 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "option01"
+        }, "Option"))))),
+        container = _render8.container;
+      const trigger = screen.getByText('Toggle');
+      const positionId = trigger.getAttribute('data-position-target');
+      const popoverRoot = container.querySelector(`span[data-position="${positionId}"]`);
+      expect(popoverRoot).toBeInTheDocument();
+      expect(popoverRef).toHaveBeenCalled();
+
+      // Popover component's public ref prop
+      expect(popoverRef.mock.calls[0][0].ref).toBe(popoverRoot);
+    });
+  });
+  describe('onSelect prop', () => {
+    it('should fire when option is selected', async () => {
+      const onSelect = vi.fn();
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        onSelect: onSelect
+      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, data.map(option => /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: option.id,
+        value: option.id,
+        key: option.id,
+        "data-testid": option.id
+      }, option.label)))));
+      const option_1 = screen.getByTestId('opt_1');
+      await userEvent.click(option_1);
+      await waitFor(() => {
+        expect(onSelect).toHaveBeenCalled();
+        const args = onSelect.mock.calls[0][1];
+        const event = onSelect.mock.calls[0][0];
+        expect(args.value).toBe('opt_1');
+        expect(args.isSelected).toBe(true);
+        expect(args.selectedOption.props).toHaveProperty('id', 'opt_1');
+        expect(args.selectedOption.props).toHaveProperty('role', 'menuitem');
+        expect(args.selectedOption.props).toHaveProperty('value', 'opt_1');
+        expect(args.drilldown.props).toHaveProperty('role', 'menu');
+        expect(args.drilldown.hide).toBeInstanceOf(Function);
+        expect(event.target).toBe(option_1);
+      });
+    });
+    it('should not fire when drilldown is disabled', async () => {
+      const onSelect = vi.fn();
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        onSelect: onSelect,
+        disabled: true
+      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, data.map(option => /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: option.id,
+        key: option.id,
+        "data-testid": option.id
+      }, option.label)))));
+      const option_1 = screen.getByTestId('opt_1');
+      await userEvent.click(option_1);
+      await waitFor(() => {
+        expect(onSelect).not.toHaveBeenCalled();
+      });
+    });
+  });
+  describe('with a trigger', () => {
+    it('should not show content by default', async () => {
+      render(_Drilldown10 || (_Drilldown10 = /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        trigger: /*#__PURE__*/React.createElement("button", null, "click me")
+      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option0"
+      }, "Option 0")))));
+      const option_0 = screen.queryByText('Option 0');
+      expect(option_0).not.toBeInTheDocument();
+    });
+    it('should render into a mountNode', async () => {
+      const container = document.createElement('div');
+      container.setAttribute('data-testid', 'container');
+      document.body.appendChild(container);
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        mountNode: container,
+        trigger: _button7 || (_button7 = /*#__PURE__*/React.createElement("button", null, "Options"))
+      }, _Drilldown$Page10 || (_Drilldown$Page10 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option0"
+      }, "Option 0")))));
+      const optionsContainer = screen.getByTestId('container');
+      const trigger = screen.getByRole('button');
+      expect(optionsContainer).not.toHaveTextContent('Option 0');
+      await userEvent.click(trigger);
+      await waitFor(() => {
+        const updatedOptionsContainer = screen.getByTestId('container');
+        expect(updatedOptionsContainer).toHaveTextContent('Option 0');
+      });
+    });
+    it('should have an aria-haspopup attribute', async () => {
+      render(_Drilldown11 || (_Drilldown11 = /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        trigger: /*#__PURE__*/React.createElement("button", null, "Options")
+      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option0"
+      }, "Option 0")))));
+      const trigger = screen.getByRole('button');
+      expect(trigger).toHaveAttribute('aria-haspopup');
+    });
+    it('should call onToggle when Drilldown is opened', async () => {
+      const onToggle = vi.fn();
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        trigger: _button8 || (_button8 = /*#__PURE__*/React.createElement("button", null, "Options")),
+        onToggle: onToggle,
+        "data-testid": "drilldown"
+      }, _Drilldown$Page11 || (_Drilldown$Page11 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option0"
+      }, "Option 0")))));
+      const trigger = screen.getByRole('button');
+      await userEvent.click(trigger);
+      await waitFor(() => {
+        expect(onToggle).toHaveBeenCalled();
+        const args = onToggle.mock.calls[0][1];
+        expect(args).toHaveProperty('shown', true);
+        expect(args).toHaveProperty('pageHistory', ['page0']);
+        expect(args.goToPage).toBeInstanceOf(Function);
+        expect(args.goToPreviousPage).toBeInstanceOf(Function);
+        expect(args.drilldown.props).toHaveProperty('role', 'menu');
+        expect(args.drilldown.props).toHaveProperty('data-testid', 'drilldown');
+      });
+    });
+    it('should call onToggle when Drilldown is closed', async () => {
+      const onToggle = vi.fn();
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        trigger: _button9 || (_button9 = /*#__PURE__*/React.createElement("button", null, "Options")),
+        onToggle: onToggle,
+        defaultShow: true
+      }, _Drilldown$Page12 || (_Drilldown$Page12 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option0"
+      }, "Option 0")))));
+      const trigger = screen.getByRole('button');
+      await userEvent.click(trigger);
+      await waitFor(() => {
+        expect(onToggle).toHaveBeenCalled();
+        const args = onToggle.mock.calls[0][1];
+        expect(args).toHaveProperty('shown', false);
+        expect(args).toHaveProperty('pageHistory', ['page0']);
+        expect(args).toHaveProperty('drilldown');
+        expect(args.goToPage).toBeInstanceOf(Function);
+        expect(args.goToPreviousPage).toBeInstanceOf(Function);
+      });
+    });
+  });
+  describe('placement prop', () => {
+    it('should be passed to Popover', async () => {
+      let popoverRef = null;
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        trigger: _button10 || (_button10 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        defaultShow: true,
+        popoverRef: e => {
+          popoverRef = e;
+        },
+        placement: 'top start'
+      }, _Drilldown$Page13 || (_Drilldown$Page13 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const popoverProps = popoverRef.props;
+      expect(popoverProps.placement).toBe('top start');
+    });
+  });
+  describe('defaultShow prop', () => {
+    it('should display Popover on render', async () => {
+      render(_Drilldown12 || (_Drilldown12 = /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        trigger: /*#__PURE__*/React.createElement("button", null, "Toggle"),
+        defaultShow: true
+      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const popoverContent = screen.getByText('Option');
+      expect(popoverContent).toBeVisible();
+    });
+  });
+  describe('show prop', () => {
+    it('should display popover', async () => {
+      const onToggle = vi.fn();
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        trigger: _button11 || (_button11 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        show: true,
+        onToggle: onToggle
+      }, _Drilldown$Page14 || (_Drilldown$Page14 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const popoverContent = screen.getByText('Option');
+      expect(popoverContent).toBeVisible();
+    });
+    it('should give error if onToggle is not provided (controllable)', async () => {
+      render(_Drilldown13 || (_Drilldown13 = /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        trigger: /*#__PURE__*/React.createElement("button", null, "Toggle"),
+        show: true
+      }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const popoverContent = screen.getByText('Option');
+      expect(popoverContent).toBeVisible();
+      expect(popoverContent).toBeVisible();
+      expect(consoleErrorMock).toHaveBeenCalled();
+    });
+  });
+  describe('onFocus prop', () => {
+    it('should be passed to Popover', async () => {
+      let popoverRef = null;
+      const onFocus = vi.fn();
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        trigger: _button12 || (_button12 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        popoverRef: e => {
+          popoverRef = e;
+        },
+        onFocus: onFocus
+      }, _Drilldown$Page15 || (_Drilldown$Page15 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const popoverProps = popoverRef.props;
+      expect(popoverProps.onFocus).toEqual(onFocus);
+    });
+  });
+  describe('onMouseOver prop', () => {
+    it('should be passed to Popover', async () => {
+      let popoverRef = null;
+      const onMouseOver = vi.fn();
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        trigger: _button13 || (_button13 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        popoverRef: e => {
+          popoverRef = e;
+        },
+        onMouseOver: onMouseOver
+      }, _Drilldown$Page16 || (_Drilldown$Page16 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const popoverProps = popoverRef.props;
+      expect(popoverProps.onMouseOver).toEqual(onMouseOver);
+    });
+  });
+  describe('shouldContainFocus prop', () => {
+    it('should be passed to Popover', async () => {
+      let popoverRef = null;
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        trigger: _button14 || (_button14 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        popoverRef: e => {
+          popoverRef = e;
+        },
+        shouldContainFocus: true
+      }, _Drilldown$Page17 || (_Drilldown$Page17 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const popoverProps = popoverRef.props;
+      expect(popoverProps.shouldContainFocus).toEqual(true);
+    });
+  });
+  describe('shouldReturnFocus prop', () => {
+    it('should be passed to Popover', async () => {
+      let popoverRef = null;
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        trigger: _button15 || (_button15 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        popoverRef: e => {
+          popoverRef = e;
+        },
+        shouldReturnFocus: false
+      }, _Drilldown$Page18 || (_Drilldown$Page18 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const popoverProps = popoverRef.props;
+      expect(popoverProps.shouldReturnFocus).toEqual(false);
+    });
+  });
+  describe('withArrow prop', () => {
+    it('should be passed to Popover', async () => {
+      let popoverRef = null;
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        trigger: _button16 || (_button16 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        popoverRef: e => {
+          popoverRef = e;
+        },
+        withArrow: false
+      }, _Drilldown$Page19 || (_Drilldown$Page19 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const popoverProps = popoverRef.props;
+      expect(popoverProps.withArrow).toEqual(false);
+    });
+  });
+  describe('offsetX prop', () => {
+    it('should be passed to Popover', async () => {
+      let popoverRef = null;
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        trigger: _button17 || (_button17 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        popoverRef: e => {
+          popoverRef = e;
+        },
+        offsetX: '2rem'
+      }, _Drilldown$Page20 || (_Drilldown$Page20 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const popoverProps = popoverRef.props;
+      expect(popoverProps.offsetX).toEqual('2rem');
+    });
+  });
+  describe('offsetY prop', () => {
+    it('should be passed to Popover', async () => {
+      let popoverRef = null;
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        trigger: _button18 || (_button18 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        popoverRef: e => {
+          popoverRef = e;
+        },
+        offsetY: '2rem'
+      }, _Drilldown$Page21 || (_Drilldown$Page21 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const popoverProps = popoverRef.props;
+      expect(popoverProps.offsetY).toEqual('2rem');
+    });
+  });
+  describe('positionContainerDisplay prop', () => {
+    it('should be passed to Popover', async () => {
+      let popoverRef = null;
+      render( /*#__PURE__*/React.createElement(Drilldown, {
+        rootPageId: "page0",
+        trigger: _button19 || (_button19 = /*#__PURE__*/React.createElement("button", null, "Toggle")),
+        popoverRef: e => {
+          popoverRef = e;
+        },
+        positionContainerDisplay: "block"
+      }, _Drilldown$Page22 || (_Drilldown$Page22 = /*#__PURE__*/React.createElement(Drilldown.Page, {
+        id: "page0"
+      }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "option01"
+      }, "Option")))));
+      const popoverProps = popoverRef.props;
+      expect(popoverProps.positionContainerDisplay).toEqual('block');
+    });
+  });
+  describe('for a11y', () => {
+    it('should be accessible', async () => {
+      const _render9 = render(_Drilldown14 || (_Drilldown14 = /*#__PURE__*/React.createElement(Drilldown, {
+          rootPageId: "page0"
+        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+          id: "page0",
+          renderTitle: "Page Title",
+          renderActionLabel: "Action Label"
+        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "item01"
+        }, "Item1"), /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "item02",
+          subPageId: "page1"
+        }, "Item2"), /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "item03",
+          description: "This is a description"
+        }, "Item3"), /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "item04",
+          renderLabelInfo: "After"
+        }, "Item4"), /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "item05",
+          disabled: true
+        }, "Item5"), /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "item06",
+          href: "/"
+        }, "Item6"), /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "item07",
+          renderBeforeLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
+        }, "Item7"), /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "item08",
+          renderAfterLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
+        }, "Item8"), /*#__PURE__*/React.createElement(Drilldown.Separator, {
+          id: "sep1"
+        }), /*#__PURE__*/React.createElement(Drilldown.Group, {
+          id: "group1",
+          renderGroupTitle: "Multi-select group",
+          selectableType: "multiple"
+        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "groupItem11"
+        }, "GroupItem"), /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "groupItem12"
+        }, "GroupItem"), /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "groupItem13"
+        }, "GroupItem")), /*#__PURE__*/React.createElement(Drilldown.Group, {
+          id: "group2",
+          renderGroupTitle: "Single-select group",
+          selectableType: "single"
+        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "groupItem21"
+        }, "GroupItem"), /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "groupItem22"
+        }, "GroupItem"), /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "groupItem23"
+        }, "GroupItem"))), /*#__PURE__*/React.createElement(Drilldown.Page, {
+          id: "page1"
+        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "item11"
+        }, "Item1"))))),
+        container = _render9.container;
+
+      // axe-check is more strict now, and expects "list" role to have "listitem" children, but we use "role='none'" children. After discussing it with the A11y team, we agreed to ignore this error because the screen readers can read the component perfectly.
+      // TODO: try to remove this ignore if axe-check is updated and isn't this strict anymore
+      // https://dequeuniversity.com/rules/axe/4.6/aria-required-children?application=axeAPI
+      const axeCheck = await runAxeCheck(container, {
+        ignores: ['aria-required-children']
+      });
+      expect(axeCheck).toBe(true);
+    });
+    it('should meet a11y standarts when drilldown is open', async () => {
+      const _render10 = render(_Drilldown15 || (_Drilldown15 = /*#__PURE__*/React.createElement(Drilldown, {
+          defaultShow: true,
+          rootPageId: "page0"
+        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+          id: "page0"
+        }, /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "option0"
+        }, "Option 0"))))),
+        container = _render10.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = generateA11yTests(Drilldown, DrilldownExamples);
+    it.each(generatedComponents)('should be accessible with example: $description', async ({
+      content
+    }) => {
+      const _render11 = render(content),
+        container = _render11.container;
+      const axeCheck = await runAxeCheck(container, {
+        // axe-check is more strict now, and expects "list" role to have "listitem" children, but we use "role='none'" children. After discussing it with the A11y team, we agreed to ignore this error because the screen readers can read the component perfectly.
+        // TODO: try to remove this ignore if axe-check is updated and isn't this strict anymore
+        // https://dequeuniversity.com/rules/axe/4.6/aria-required-children?application=axeAPI
+        ignores: ['aria-required-children']
+      });
+      expect(axeCheck).toBe(true);
+    });
+  });
+});