@instructure/ui-drilldown 10.19.2-snapshot-2 → 10.19.2-snapshot-4

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

@@ -1,710 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = require("@testing-library/react");
-var _vitest = require("vitest");
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-require("@testing-library/jest-dom");
-var _IconCheckSolid3 = require("@instructure/ui-icons/lib/IconCheckSolid.js");
-var _index = require("../../index");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _Drilldown, _Drilldown$Option, _Drilldown2, _Drilldown3, _Drilldown4, _Drilldown5, _Drilldown6, _Drilldown7, _Drilldown8, _Drilldown9, _Drilldown10, _Drilldown11, _Drilldown12, _Drilldown13, _Drilldown14, _Drilldown15, _Drilldown16, _IconCheckSolid, _Drilldown17, _Drilldown18, _IconCheckSolid2, _Drilldown19, _Drilldown20, _Drilldown21;
-/*
- * 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.Option />', () => {
-  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 allow setting "selected" property on Options', async () => {
-    (0, _react.render)(_Drilldown || (_Drilldown = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-      rootPageId: "page0",
-      children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-        id: "page0",
-        children: (0, _jsxRuntime.jsxs)(_index.Drilldown.Group, {
-          id: "group0",
-          children: [(0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "groupOption01",
-            children: "Option - 1"
-          }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            selected: true,
-            id: "groupOption02",
-            children: "Option - 2"
-          }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "groupOption03",
-            children: "Option - 3"
-          }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "groupOption04",
-            children: "Option - 4"
-          })]
-        })
-      })
-    })));
-    const selectedOption = _react.screen.getByLabelText('Option - 2');
-    expect(selectedOption).toBeInTheDocument();
-    expect(selectedOption).toHaveAttribute('id', 'groupOption02');
-    expect(selectedOption).toHaveAttribute('aria-checked', 'true');
-  });
-  describe('id prop', () => {
-    it('should throw warning the id is not provided', async () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: _Drilldown$Option || (_Drilldown$Option = (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            children: "Option1"
-          }))
-        })
-      }));
-      const expectedErrorMessage = "Warning: Drilldown.Option without id won't be rendered. It is needed to internally track the options.";
-      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-    });
-    it('should throw warning the id is duplicated', async () => {
-      (0, _react.render)(_Drilldown2 || (_Drilldown2 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsxs)(_index.Drilldown.Page, {
-          id: "page0",
-          children: [(0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            children: "Option1"
-          }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            children: "Option2"
-          })]
-        })
-      })));
-      const expectedErrorMessage = 'Warning: Duplicate id: "option1"! Make sure all options have unique ids, otherwise they won\'t be rendered.';
-      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-    });
-    it('should not render the options with duplicated id', async () => {
-      (0, _react.render)(_Drilldown3 || (_Drilldown3 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsxs)(_index.Drilldown.Page, {
-          id: "page0",
-          children: [(0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            children: "Option1"
-          }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            children: "Option2"
-          }), (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            children: "Option3"
-          })]
-        })
-      })));
-      const menuitems = _react.screen.queryAllByRole('menuitem');
-      const option = _react.screen.queryByText('Option2');
-      expect(menuitems.length).toBe(0);
-      expect(option).not.toBeInTheDocument();
-    });
-  });
-  describe('children function prop', () => {
-    it('should throw warning if it returns nothing', async () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            children: () => null
-          })
-        })
-      }));
-      const expectedErrorMessage = 'Warning: There are no "children" prop provided for option with id: "option1", so it won\'t be rendered.';
-      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-    });
-    it('should provide props as parameters', async () => {
-      const childrenFunction = _vitest.vi.fn(() => 'Option');
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            children: childrenFunction
-          })
-        })
-      }));
-      expect(childrenFunction).toHaveBeenCalledWith({
-        id: 'option1',
-        variant: 'default',
-        isSelected: false
-      });
-    });
-  });
-  describe('elementRef prop', () => {
-    it('should give back to ref for the option wrapper (Options.Item)', async () => {
-      const elementRef = _vitest.vi.fn();
-      const _render = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-          rootPageId: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-            id: "page0",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "option1",
-              elementRef: elementRef,
-              children: "Option"
-            })
-          })
-        })),
-        container = _render.container;
-      const option = container.querySelector('li');
-      expect(elementRef).toHaveBeenCalledWith(option);
-    });
-  });
-  describe('subPageId prop', () => {
-    it('should display arrow icon', async () => {
-      const _render2 = (0, _react.render)(_Drilldown4 || (_Drilldown4 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-          rootPageId: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-            id: "page0",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "option1",
-              subPageId: "page1",
-              children: "Option"
-            })
-          })
-        }))),
-        container = _render2.container;
-      const icon = container.querySelector('svg');
-      expect(icon).toBeInTheDocument();
-      expect(icon).toHaveAttribute('name', 'IconArrowOpenEnd');
-    });
-    it('should indicate subpage fo SR', async () => {
-      (0, _react.render)(_Drilldown5 || (_Drilldown5 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            subPageId: "page1",
-            children: "Option"
-          })
-        })
-      })));
-      const option = _react.screen.getByLabelText('Option');
-      expect(option).toHaveAttribute('role', 'button');
-      expect(option).toHaveAttribute('aria-haspopup', 'true');
-    });
-  });
-  describe('disabled prop', () => {
-    it('should mark option as disabled for SR', async () => {
-      (0, _react.render)(_Drilldown6 || (_Drilldown6 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            disabled: true,
-            children: "Option"
-          })
-        })
-      })));
-      const option = _react.screen.getByLabelText('Option');
-      expect(option).toHaveAttribute('aria-disabled', 'true');
-    });
-  });
-  describe('href prop', () => {
-    it('should display option as link', async () => {
-      (0, _react.render)(_Drilldown7 || (_Drilldown7 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            href: "/helloWorld",
-            children: "Option"
-          })
-        })
-      })));
-      const option = _react.screen.getByLabelText('Option');
-      expect(option.tagName).toBe('A');
-      expect(option).toHaveAttribute('href', '/helloWorld');
-    });
-    it('should throw warning if subPageId is provided too', async () => {
-      (0, _react.render)(_Drilldown8 || (_Drilldown8 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            href: "/helloWorld",
-            subPageId: "page1",
-            children: "Option"
-          })
-        })
-      })));
-      const option = _react.screen.getByLabelText('Option');
-      const expectedErrorMessage = 'Warning: Drilldown.Option with id "option1" has subPageId, so it will ignore the "href" property.';
-      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-      expect(option.tagName).not.toBe('A');
-      expect(option).not.toHaveAttribute('href');
-    });
-    it('should throw warning if option is in selectable group', async () => {
-      (0, _react.render)(_Drilldown9 || (_Drilldown9 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Group, {
-            id: "group0",
-            selectableType: "multiple",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "groupOption01",
-              href: "/helloWorld",
-              children: "Option"
-            })
-          })
-        })
-      })));
-      const option = _react.screen.getByLabelText('Option');
-      const expectedErrorMessage = 'Warning: Drilldown.Option with id "groupOption01" is in a selectable group, so it will ignore the "href" property.';
-      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-      expect(option.tagName).not.toBe('A');
-      expect(option).not.toHaveAttribute('href');
-    });
-  });
-  describe('as prop', () => {
-    it('should render option as `li` by default', async () => {
-      (0, _react.render)(_Drilldown10 || (_Drilldown10 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            children: "Option"
-          })
-        })
-      })));
-      const option = _react.screen.getByLabelText('Option');
-      const wrapper = option.parentElement;
-      expect(option).toHaveAttribute('id', 'option1');
-      expect(wrapper === null || wrapper === void 0 ? void 0 : wrapper.tagName).toBe('LI');
-    });
-    it('should force option to be `li` while the parent is "ul" or "ol"', async () => {
-      (0, _react.render)(_Drilldown11 || (_Drilldown11 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        as: "ol",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            as: "div",
-            children: "Option"
-          })
-        })
-      })));
-      const option = _react.screen.getByLabelText('Option');
-      const wrapper = option.parentElement;
-      expect(option).toHaveAttribute('id', 'option1');
-      expect(wrapper === null || wrapper === void 0 ? void 0 : wrapper.tagName).toBe('LI');
-    });
-    it('should render option as specified html element, when the parent in non-list element', async () => {
-      (0, _react.render)(_Drilldown12 || (_Drilldown12 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        as: "div",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            as: "div",
-            children: "Option"
-          })
-        })
-      })));
-      const option = _react.screen.getByLabelText('Option');
-      const wrapper = option.parentElement;
-      expect(option).toHaveAttribute('id', 'option1');
-      expect(wrapper === null || wrapper === void 0 ? void 0 : wrapper.tagName).toBe('DIV');
-    });
-  });
-  describe('role prop', () => {
-    it('should be "menuitem" by default', async () => {
-      (0, _react.render)(_Drilldown13 || (_Drilldown13 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            children: "Option"
-          })
-        })
-      })));
-      const option = _react.screen.getByLabelText('Option');
-      expect(option).toHaveAttribute('role', 'menuitem');
-    });
-    it('should be applied on prop', async () => {
-      (0, _react.render)(_Drilldown14 || (_Drilldown14 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            role: "presentation",
-            children: "Option"
-          })
-        })
-      })));
-      const option = _react.screen.getByLabelText('Option');
-      expect(option).toHaveAttribute('role', 'presentation');
-    });
-  });
-  describe('renderLabelInfo prop', () => {
-    it('should display tag next to the label', async () => {
-      const _render3 = (0, _react.render)(_Drilldown15 || (_Drilldown15 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-          rootPageId: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-            id: "page0",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "option1",
-              renderLabelInfo: "Info",
-              children: "Option"
-            })
-          })
-        }))),
-        container = _render3.container;
-      const tag = container.querySelector('[class$="optionLabelInfo"]');
-      expect(tag).toBeInTheDocument();
-      expect(tag).toHaveTextContent('Info');
-    });
-    it('as function should have option props as params', async () => {
-      const infoFunction = _vitest.vi.fn(() => 'Info');
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            renderLabelInfo: infoFunction,
-            children: "Option"
-          })
-        })
-      }));
-      expect(infoFunction).toHaveBeenCalledWith({
-        variant: 'default',
-        vAlign: 'start',
-        as: 'li',
-        role: 'menuitem',
-        isSelected: false
-      });
-    });
-  });
-  describe('renderBeforeLabel prop', () => {
-    it('should display icon before the label', async () => {
-      const _render4 = (0, _react.render)(_Drilldown16 || (_Drilldown16 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-          rootPageId: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-            id: "page0",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "option1",
-              renderBeforeLabel: (0, _jsxRuntime.jsx)(_IconCheckSolid3.IconCheckSolid, {}),
-              children: "Option"
-            })
-          })
-        }))),
-        container = _render4.container;
-      const icon = container.querySelector('svg');
-      expect(icon).toBeInTheDocument();
-      expect(icon).toHaveAttribute('name', 'IconCheck');
-    });
-    it('as function should have option props as params', async () => {
-      const beforeLabelFunction = _vitest.vi.fn(() => _IconCheckSolid || (_IconCheckSolid = (0, _jsxRuntime.jsx)(_IconCheckSolid3.IconCheckSolid, {})));
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            renderBeforeLabel: beforeLabelFunction,
-            children: "Option"
-          })
-        })
-      }));
-      expect(beforeLabelFunction).toHaveBeenCalledWith(expect.objectContaining({
-        variant: 'default',
-        vAlign: 'start',
-        as: 'li',
-        role: 'menuitem',
-        isSelected: false
-      }), expect.any(Object));
-    });
-    it('should throw warning if it is in selectable group', async () => {
-      (0, _react.render)(_Drilldown17 || (_Drilldown17 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Group, {
-            id: "group1",
-            selectableType: "multiple",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "groupOption1",
-              renderBeforeLabel: "Before",
-              children: "Option"
-            })
-          })
-        })
-      })));
-      const expectedErrorMessage = 'Warning: The prop "renderBeforeLabel" is reserved on item with id: "groupOption1". When this option is a selectable member of a Drilldown.Group, selection indicator will render before the label.';
-      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-    });
-  });
-  describe('renderAfterLabel prop', () => {
-    it('should display icon before the label', async () => {
-      const _render5 = (0, _react.render)(_Drilldown18 || (_Drilldown18 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-          rootPageId: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-            id: "page0",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "option1",
-              renderAfterLabel: (0, _jsxRuntime.jsx)(_IconCheckSolid3.IconCheckSolid, {}),
-              children: "Option"
-            })
-          })
-        }))),
-        container = _render5.container;
-      const icon = container.querySelector('svg');
-      expect(icon).toBeInTheDocument();
-      expect(icon).toHaveAttribute('name', 'IconCheck');
-    });
-    it('as function should have option props as params', async () => {
-      const beforeLabelFunction = _vitest.vi.fn(() => _IconCheckSolid2 || (_IconCheckSolid2 = (0, _jsxRuntime.jsx)(_IconCheckSolid3.IconCheckSolid, {})));
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            renderAfterLabel: beforeLabelFunction,
-            children: "Option"
-          })
-        })
-      }));
-      expect(beforeLabelFunction).toHaveBeenCalledWith(expect.objectContaining({
-        variant: 'default',
-        vAlign: 'start',
-        as: 'li',
-        role: 'menuitem',
-        isSelected: false
-      }), expect.any(Object));
-    });
-    it('should throw warning if it has subPageId', async () => {
-      (0, _react.render)(_Drilldown19 || (_Drilldown19 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            subPageId: "page1",
-            renderAfterLabel: "after",
-            children: "Option"
-          })
-        })
-      })));
-      const expectedErrorMessage = 'Warning: The prop "renderAfterLabel" is reserved on item with id: "option1". When it has "subPageId" provided, a navigation arrow will render after the label.';
-      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-    });
-  });
-  describe('description prop', () => {
-    it('should display description under the option', async () => {
-      (0, _react.render)(_Drilldown20 || (_Drilldown20 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            description: "This is a description.",
-            children: "Option"
-          })
-        })
-      })));
-      const description = _react.screen.getByText('This is a description.');
-      expect(description).toBeInTheDocument();
-    });
-    it('as a function should display description under the option', async () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            description: () => 'This is a description.',
-            children: "Option"
-          })
-        })
-      }));
-      const description = _react.screen.getByText('This is a description.');
-      expect(description).toBeInTheDocument();
-    });
-  });
-  describe('descriptionRole prop', () => {
-    it('should set the role of description', async () => {
-      (0, _react.render)(_Drilldown21 || (_Drilldown21 = (0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            description: "This is a description.",
-            descriptionRole: "button",
-            children: "Option"
-          })
-        })
-      })));
-      const description = _react.screen.getByText('This is a description.');
-      expect(description).toHaveAttribute('role', 'button');
-    });
-  });
-  describe('onOptionClick callback', () => {
-    it('should fire on click with correct params', async () => {
-      const onOptionClick = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option1",
-            onOptionClick: onOptionClick,
-            children: "Option"
-          })
-        })
-      }));
-      const option = _react.screen.getByText('Option');
-      await _userEvent.default.click(option);
-      await (0, _react.waitFor)(() => {
-        expect(onOptionClick).toHaveBeenCalledTimes(1);
-        const args = onOptionClick.mock.calls[0][1];
-        expect(args).toHaveProperty('optionId', 'option1');
-        expect(args).toHaveProperty('pageHistory', ['page0']);
-        expect(args.drilldown).toBeInstanceOf(Object);
-        expect(args.drilldown.props).toHaveProperty('role', 'menu');
-        expect(args.goToPage).toBeInstanceOf(Function);
-        expect(args.goToPreviousPage).toBeInstanceOf(Function);
-      });
-    });
-    it('should provide goToPreviousPage method that throws a warning, if there is no previous page', async () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-        rootPageId: "page0",
-        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-          id: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-            id: "option01",
-            onOptionClick: (_e, {
-              goToPreviousPage
-            }) => {
-              goToPreviousPage();
-            },
-            children: "Option"
-          })
-        })
-      }));
-      const option = _react.screen.getByText('Option');
-      await _userEvent.default.click(option);
-      await (0, _react.waitFor)(() => {
-        const expectedErrorMessage = 'Warning: There is no previous page to go to. The current page history is: [page0].';
-        expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-      });
-    });
-    describe('provide goToPage method', () => {
-      it("should throws warning if page doesn't exist", async () => {
-        (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-          rootPageId: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-            id: "page0",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "option01",
-              onOptionClick: (_e, {
-                goToPage
-              }) => {
-                goToPage('page1');
-              },
-              children: "Option"
-            })
-          })
-        }));
-        const option = _react.screen.getByText('Option');
-        await _userEvent.default.click(option);
-        await (0, _react.waitFor)(() => {
-          const expectedErrorMessage = 'Warning: Cannot go to page because page with id: "page1" doesn\'t exist.';
-          expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-        });
-      });
-      it('should throws warning if if no page id is provided', async () => {
-        (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-          rootPageId: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-            id: "page0",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "option01",
-              onOptionClick: (_e, {
-                goToPage
-              }) => {
-                // @ts-expect-error we want this to fail
-                goToPage();
-              },
-              children: "Option"
-            })
-          })
-        }));
-        const option = _react.screen.getByText('Option');
-        await _userEvent.default.click(option);
-        await (0, _react.waitFor)(() => {
-          const expectedErrorMessage = 'Warning: Cannot go to page because there was no page id provided.';
-          expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-        });
-      });
-      it('should throws warning if parameter is not string', async () => {
-        (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
-          rootPageId: "page0",
-          children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
-            id: "page0",
-            children: (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
-              id: "option01",
-              onOptionClick: (_e, {
-                goToPage
-              }) => {
-                // @ts-expect-error we want this to fail
-                goToPage({
-                  page: 'page1'
-                });
-              },
-              children: "Option"
-            })
-          })
-        }));
-        const option = _react.screen.getByText('Option');
-        await _userEvent.default.click(option);
-        await (0, _react.waitFor)(() => {
-          const expectedErrorMessage = 'Warning: Cannot go to page because parameter newPageId has to be string (valid page id). Current newPageId is "object".';
-          expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-        });
-      });
-    });
-  });
-});