@instructure/ui-select 10.19.2-snapshot-3 → 10.19.2-snapshot-4

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

@@ -1,963 +0,0 @@
-var _Select$Option, _Select, _Select2, _Select3, _Select4, _Select5, _Select6, _Select7;
-/*
- * 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 { createRef } 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 Select from '../index';
-import SelectExamples from '../__examples__/Select.examples';
-import * as utils from '@instructure/ui-utils';
-import { IconAddLine, IconCheckSolid, IconDownloadSolid, IconEyeSolid } from '@instructure/ui-icons';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { createElement as _createElement } from "@emotion/react";
-const defaultOptions = ['foo', 'bar', 'baz'];
-const getOptions = (highlighted, selected, disabled) => defaultOptions.map(opt => _jsx(Select.Option, {
-  id: opt,
-  value: opt,
-  isHighlighted: opt === highlighted,
-  isSelected: opt === selected,
-  isDisabled: opt === disabled,
-  children: opt
-}, opt));
-const optionsWithBeforeContent = [{
-  id: 'opt1',
-  label: 'Text',
-  renderBeforeLabel: 'XY'
-}, {
-  id: 'opt2',
-  label: 'Icon',
-  renderBeforeLabel: _jsx(IconCheckSolid, {})
-}, {
-  id: 'opt3',
-  label: 'Colored Icon',
-  renderBeforeLabel: _jsx(IconEyeSolid, {})
-}];
-const groupOptionsWithBeforeContent = {
-  Options1: [{
-    id: 'opt1',
-    label: 'Text1',
-    renderBeforeLabel: 'XY'
-  }, {
-    id: 'opt2',
-    label: 'Icon1',
-    renderBeforeLabel: _jsx(IconCheckSolid, {})
-  }, {
-    id: 'opt3',
-    label: 'Colored Icon1',
-    renderBeforeLabel: _jsx(IconEyeSolid, {})
-  }],
-  Options2: [{
-    id: 'opt4',
-    label: 'Text2',
-    renderBeforeLabel: 'AB'
-  }, {
-    id: 'opt5',
-    label: 'Icon2',
-    renderBeforeLabel: _jsx(IconAddLine, {})
-  }, {
-    id: 'opt6',
-    label: 'Colored Icon2',
-    renderBeforeLabel: _jsx(IconDownloadSolid, {})
-  }]
-};
-const optionsWithAfterContent = [{
-  id: 'opt1',
-  label: 'Text',
-  renderAfterLabel: 'XY'
-}, {
-  id: 'opt2',
-  label: 'Icon',
-  renderAfterLabel: _jsx(IconCheckSolid, {})
-}, {
-  id: 'opt3',
-  label: 'Colored Icon',
-  renderAfterLabel: _jsx(IconEyeSolid, {})
-}];
-const groupOptionsWithAfterContent = {
-  Options1: [{
-    id: 'opt1',
-    label: 'Text1',
-    renderAfterLabel: 'XY'
-  }, {
-    id: 'opt2',
-    label: 'Icon1',
-    renderAfterLabel: _jsx(IconCheckSolid, {})
-  }, {
-    id: 'opt3',
-    label: 'Colored Icon1',
-    renderAfterLabel: _jsx(IconEyeSolid, {})
-  }],
-  Options2: [{
-    id: 'opt4',
-    label: 'Text2',
-    renderAfterLabel: 'AB'
-  }, {
-    id: 'opt5',
-    label: 'Icon2',
-    renderAfterLabel: _jsx(IconAddLine, {})
-  }, {
-    id: 'opt6',
-    label: 'Colored Icon2',
-    renderAfterLabel: _jsx(IconDownloadSolid, {})
-  }]
-};
-const optionsWithBeforeAndAfterContent = [{
-  id: 'opt1',
-  label: 'Text',
-  renderBeforeLabel: 'XY',
-  renderAfterLabel: 'ZZ'
-}, {
-  id: 'opt2',
-  label: 'Icon',
-  renderAfterLabel: _jsx(IconCheckSolid, {}),
-  renderBeforeLabel: _jsx(IconEyeSolid, {})
-}, {
-  id: 'opt3',
-  label: 'Colored Icon',
-  renderBeforeLabel: _jsx(IconEyeSolid, {}),
-  renderAfterLabel: _jsx(IconCheckSolid, {})
-}];
-const getOptionsWithBeforeContent = selected => optionsWithBeforeContent.map(opt => _createElement(Select.Option, {
-  ...opt,
-  key: opt.id,
-  isSelected: opt.id === selected
-}));
-const getGroupOptionsWithBeforeContent = selected => {
-  return Object.keys(groupOptionsWithBeforeContent).map((key, index) => {
-    return _jsx(Select.Group, {
-      renderLabel: key,
-      children: groupOptionsWithBeforeContent[key].map(opt => _jsx(Select.Option, {
-        id: opt.id,
-        value: opt.label,
-        renderBeforeLabel: opt.renderBeforeLabel,
-        isSelected: opt.id === selected
-      }, opt.id))
-    }, index);
-  });
-};
-const getOptionsWithAfterContent = selected => optionsWithAfterContent.map(opt => _jsx(Select.Option, {
-  id: opt.id,
-  value: opt.label,
-  renderAfterLabel: opt.renderAfterLabel,
-  isSelected: opt.id === selected
-}, opt.id));
-const getGroupOptionsWithAfterContent = selected => {
-  return Object.keys(groupOptionsWithAfterContent).map((key, index) => {
-    return _jsx(Select.Group, {
-      renderLabel: key,
-      children: groupOptionsWithAfterContent[key].map(opt => _jsx(Select.Option, {
-        id: opt.id,
-        value: opt.label,
-        renderAfterLabel: opt.renderAfterLabel,
-        isSelected: opt.id === selected
-      }, opt.id))
-    }, index);
-  });
-};
-const getOptionsWithBeforeAndAfterContent = selected => optionsWithBeforeAndAfterContent.map(opt => _jsx(Select.Option, {
-  id: opt.id,
-  value: opt.label,
-  renderBeforeLabel: opt.renderBeforeLabel,
-  renderAfterLabel: opt.renderAfterLabel,
-  isSelected: opt.id === selected
-}, opt.id));
-vi.mock('@instructure/ui-utils', async importOriginal => {
-  const originalModule = await importOriginal();
-  return {
-    __esModule: true,
-    ...originalModule,
-    isSafari: vi.fn(() => true)
-  };
-});
-const mockUtils = utils;
-describe('<Select />', () => {
-  let consoleErrorMock;
-  beforeEach(() => {
-    // Mocking console to prevent test output pollution and expect for messages
-    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
-  });
-  afterEach(() => {
-    consoleErrorMock.mockRestore();
-  });
-  it('should not crash for weird option ids', async () => {
-    const weirdID = 'some_`w@ei:r|!@#$%^&*(()|\\.l/d"id';
-    vi.useFakeTimers();
-    const _render = render(_jsxs(Select, {
-        renderLabel: "Choose an option",
-        scrollToHighlightedOption: true,
-        isShowingOptions: true,
-        children: [_jsx(Select.Option, {
-          id: weirdID,
-          value: "2",
-          isHighlighted: true,
-          children: "op1"
-        }, "1"), _Select$Option || (_Select$Option = _jsx(Select.Option, {
-          id: "sdfsdfsd",
-          value: "2",
-          children: "op2"
-        }, "2"))]
-      })),
-      container = _render.container;
-    vi.advanceTimersToNextFrame();
-    vi.useRealTimers();
-    const input = container.querySelector('input');
-    expect(input).toBeInTheDocument();
-  });
-  it('should have role button in Safari without onInputChange', async () => {
-    const _render2 = render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        children: getOptions()
-      })),
-      container = _render2.container;
-    const input = container.querySelector('input');
-    expect(input).toHaveAttribute('role', 'button');
-  });
-  it('should have role combobox in different browsers than Safari without onInputChange', async () => {
-    mockUtils.isSafari = vi.fn(() => false);
-    const _render3 = render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        children: getOptions()
-      })),
-      container = _render3.container;
-    const input = container.querySelector('input');
-    expect(input).toHaveAttribute('role', 'combobox');
-  });
-  it('should have role combobox with onInputChange', async () => {
-    const _render4 = render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        onInputChange: () => {},
-        children: getOptions()
-      })),
-      container = _render4.container;
-    const input = container.querySelector('input');
-    expect(input).toHaveAttribute('role', 'combobox');
-  });
-  it('should render an input and a list', async () => {
-    const _render5 = render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        isShowingOptions: true,
-        "data-testid": "subidubi",
-        children: getOptions()
-      })),
-      container = _render5.container;
-    const select = container.querySelector('span[class$="-select"]');
-    const label = screen.getByLabelText('Choose an option');
-    const input = container.querySelector('input[id^="Select_"]');
-    const list = screen.getByRole('listbox');
-    const options = screen.getAllByRole('option');
-    const optionsCount = defaultOptions.length;
-    expect(select).toBeInTheDocument();
-    expect(label).toBeInTheDocument();
-    expect(input).toBeInTheDocument();
-    expect(list).toBeInTheDocument();
-    expect(options.length).toBe(optionsCount);
-    expect(options[0]).toHaveTextContent(defaultOptions[0]);
-    expect(options[1]).toHaveTextContent(defaultOptions[1]);
-    expect(options[2]).toHaveTextContent(defaultOptions[2]);
-  });
-  it('should render groups', async () => {
-    render(_Select || (_Select = _jsxs(Select, {
-      renderLabel: "Choose an option",
-      isShowingOptions: true,
-      children: [_jsx(Select.Option, {
-        id: "0",
-        children: "ungrouped option one"
-      }), _jsx(Select.Group, {
-        renderLabel: "Group one",
-        children: _jsx(Select.Option, {
-          id: "1",
-          children: "grouped option one"
-        })
-      }), _jsx(Select.Group, {
-        renderLabel: "Group two",
-        children: _jsx(Select.Option, {
-          id: "2",
-          children: "grouped option two"
-        })
-      }), _jsx(Select.Option, {
-        id: "3",
-        children: "ungrouped option two"
-      })]
-    })));
-    const groups = screen.getAllByRole('group');
-    const groupLabel = screen.getByText('Group one');
-    expect(groupLabel).toHaveAttribute('role', 'presentation');
-    expect(groups[0].getAttribute('aria-labelledby')).toEqual(groupLabel.getAttribute('id'));
-    expect(groups.length).toBe(2);
-  });
-  it('should ignore invalid children', async () => {
-    render(_Select2 || (_Select2 = _jsxs(Select, {
-      renderLabel: "Choose an option",
-      isShowingOptions: true,
-      children: [_jsx(Select.Option, {
-        id: "0",
-        children: "valid"
-      }), _jsx("div", {
-        children: "invalid"
-      })]
-    })));
-    const invalidChild = screen.queryByText('invalid');
-    expect(invalidChild).not.toBeInTheDocument();
-    const expectedErrorMessage = 'Expected one of Group, Option';
-    expect(consoleErrorMock).toHaveBeenCalledWith(expect.any(String), expect.any(String), expect.stringContaining(expectedErrorMessage), expect.any(String));
-  });
-  it('should provide a focus method', async () => {
-    var _ref$current;
-    const ref = /*#__PURE__*/createRef();
-    render(_jsx(Select, {
-      renderLabel: "Choose an option",
-      ref: ref,
-      children: getOptions()
-    }));
-    const input = screen.getByLabelText('Choose an option');
-    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
-    await waitFor(() => {
-      expect(document.activeElement).toBe(input);
-    });
-  });
-  it('should provide a focused getter', async () => {
-    var _ref$current2, _ref$current3;
-    const ref = /*#__PURE__*/createRef();
-    render(_jsx(Select, {
-      renderLabel: "Choose an option",
-      ref: ref,
-      children: getOptions()
-    }));
-    expect((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focused).toBe(false);
-    (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.focus();
-    await waitFor(() => {
-      var _ref$current4;
-      expect((_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.focused).toBe(true);
-    });
-  });
-  describe('input', () => {
-    it('should render with a generated id by default', () => {
-      const _render6 = render(_Select3 || (_Select3 = _jsx(Select, {
-          renderLabel: "Choose an option"
-        }))),
-        container = _render6.container;
-      const input = container.querySelector('input[id^="Select_"]');
-      expect(input).toBeInTheDocument();
-      expect(input).toHaveAttribute('id', expect.stringContaining('Select_'));
-    });
-    it('should render with a custom id if given', () => {
-      const _render7 = render(_Select4 || (_Select4 = _jsx(Select, {
-          renderLabel: "Choose an option",
-          id: "customSelect"
-        }))),
-        container = _render7.container;
-      const input = container.querySelector('input[id^="customSelect"]');
-      expect(input).toBeInTheDocument();
-      expect(input.getAttribute('id')).toEqual('customSelect');
-    });
-    it('should render readonly when interaction="enabled" with no onInputChange', () => {
-      render(_Select5 || (_Select5 = _jsx(Select, {
-        renderLabel: "Choose an option"
-      })));
-      const input = screen.getByLabelText('Choose an option');
-      expect(input).toHaveAttribute('readonly');
-      expect(input).not.toHaveAttribute('disabled');
-    });
-    it('should not render readonly when interaction="enabled" with onInputChange', () => {
-      render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        onInputChange: () => {}
-      }));
-      const input = screen.getByLabelText('Choose an option');
-      expect(input).not.toHaveAttribute('readonly');
-      expect(input).not.toHaveAttribute('disabled');
-    });
-    it('should render readonly when interaction="readonly"', () => {
-      render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        interaction: "readonly",
-        onInputChange: () => {}
-      }));
-      const input = screen.getByLabelText('Choose an option');
-      expect(input).toHaveAttribute('readonly');
-      expect(input).not.toHaveAttribute('disabled');
-    });
-    it('should render disabled when interaction="disabled"', () => {
-      render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        interaction: "disabled",
-        onInputChange: () => {}
-      }));
-      const input = screen.getByLabelText('Choose an option');
-      expect(input).toHaveAttribute('disabled');
-      expect(input).not.toHaveAttribute('readonly');
-    });
-    it('should not render readonly when disabled', () => {
-      render(_Select6 || (_Select6 = _jsx(Select, {
-        renderLabel: "Choose an option",
-        interaction: "disabled"
-      })));
-      const input = screen.getByLabelText('Choose an option');
-      expect(input).toHaveAttribute('disabled');
-      expect(input).not.toHaveAttribute('readonly');
-    });
-    it('should render required when isRequired={true}', () => {
-      render(_Select7 || (_Select7 = _jsx(Select, {
-        renderLabel: "Choose an option",
-        isRequired: true
-      })));
-      const input = screen.getByLabelText('Choose an option *');
-      expect(input).toHaveAttribute('required');
-    });
-    it('should render with inputValue', () => {
-      const val = 'hello world';
-      render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        inputValue: val
-      }));
-      const input = screen.getByLabelText('Choose an option');
-      expect(input).toHaveAttribute('value', val);
-    });
-    it('should set aria-activedescendant based on the highlighted option', () => {
-      render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        isShowingOptions: true,
-        children: getOptions(defaultOptions[1])
-      }));
-      const input = screen.getByLabelText('Choose an option');
-      expect(input).toHaveAttribute('aria-activedescendant', defaultOptions[1]);
-    });
-    it('should not set aria-activedescendant when not showing options', () => {
-      render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        children: getOptions(defaultOptions[1])
-      }));
-      const input = screen.getByLabelText('Choose an option');
-      expect(input).not.toHaveAttribute('aria-activedescendant');
-    });
-    it('should allow assistive text', () => {
-      render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        assistiveText: "hello world",
-        children: getOptions()
-      }));
-      const input = screen.getByLabelText('Choose an option');
-      const assistiveText = screen.getByText('hello world');
-      const assistiveTextId = assistiveText.getAttribute('id');
-      expect(input).toHaveAttribute('aria-describedby', assistiveTextId);
-    });
-    it('should allow custom props to pass through', () => {
-      render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        "data-custom-attr": "true",
-        children: getOptions()
-      }));
-      const input = screen.getByLabelText('Choose an option');
-      expect(input).toHaveAttribute('data-custom-attr', 'true');
-    });
-    it('should allow override of autoComplete prop', () => {
-      const _render8 = render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          children: getOptions()
-        })),
-        rerender = _render8.rerender;
-      const input = screen.getByLabelText('Choose an option');
-      expect(input).toHaveAttribute('autocomplete', 'off');
-      rerender(_jsx(Select, {
-        renderLabel: "Choose an option",
-        autoComplete: "false",
-        children: getOptions()
-      }));
-      expect(input).toHaveAttribute('autocomplete', 'false');
-    });
-    it('should provide a ref to the input element', async () => {
-      const inputRef = vi.fn();
-      render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        inputRef: inputRef,
-        children: getOptions()
-      }));
-      const input = screen.getByLabelText('Choose an option');
-      await waitFor(() => {
-        expect(inputRef).toHaveBeenCalledWith(input);
-      });
-    });
-    it("should not render option's before content in input field when isOptionContentAppliedToInput is set to false", async () => {
-      const _render9 = render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isOptionContentAppliedToInput: false,
-          inputValue: optionsWithBeforeContent[0].label,
-          children: getOptionsWithBeforeContent('opt1')
-        })),
-        container = _render9.container;
-      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
-      expect(beforeContent).not.toHaveTextContent('XY');
-    });
-    it('should render arrow in input field when isOptionContentAppliedToInput is set to false', async () => {
-      const _render10 = render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isOptionContentAppliedToInput: false,
-          inputValue: optionsWithBeforeContent[0].label,
-          children: getOptionsWithBeforeContent('opt1')
-        })),
-        container = _render10.container;
-      const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
-      const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
-      expect(svgElement).toBeInTheDocument();
-    });
-    it("should render option's before content in input field when isOptionContentAppliedToInput is set to true", async () => {
-      const _render11 = render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isOptionContentAppliedToInput: true,
-          inputValue: optionsWithBeforeContent[0].label,
-          children: getOptionsWithBeforeContent('opt1')
-        })),
-        container = _render11.container;
-      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
-      expect(beforeContent).toHaveTextContent('XY');
-    });
-    it('should render arrow icon when isOptionContentAppliedToInput is set to true with before content', async () => {
-      const _render12 = render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isOptionContentAppliedToInput: true,
-          inputValue: optionsWithBeforeContent[0].label,
-          children: getOptionsWithBeforeContent('opt1')
-        })),
-        container = _render12.container;
-      const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
-      const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
-      expect(svgElement).toBeInTheDocument();
-    });
-    it("should render option's after content in input field when isOptionContentAppliedToInput is set to true", async () => {
-      const _render13 = render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isOptionContentAppliedToInput: true,
-          inputValue: optionsWithAfterContent[0].label,
-          children: getOptionsWithAfterContent('opt1')
-        })),
-        container = _render13.container;
-      const beforeContent = container.querySelector('span[class$="-textInput__afterElement"]');
-      expect(beforeContent).toHaveTextContent('XY');
-    });
-    it("should render option's before content in input field when isOptionContentAppliedToInput is set to true but renderBeforeInput is also set", async () => {
-      const _render14 = render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isOptionContentAppliedToInput: true,
-          inputValue: optionsWithBeforeContent[0].label,
-          renderBeforeInput: "ZZ",
-          children: getOptionsWithBeforeContent('opt1')
-        })),
-        container = _render14.container;
-      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
-      expect(beforeContent).toHaveTextContent('XY');
-    });
-    it("should render option's after content in input field when isOptionContentAppliedToInput is set to true but renderAfterInput is also set", async () => {
-      const _render15 = render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isOptionContentAppliedToInput: true,
-          inputValue: optionsWithAfterContent[0].label,
-          renderAfterInput: "ZZ",
-          children: getOptionsWithAfterContent('opt1')
-        })),
-        container = _render15.container;
-      const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
-      expect(afterContent).toHaveTextContent('XY');
-    });
-    it("should not render option's before content in input field when isOptionContentAppliedToInput is set to true but inputValue is not set", async () => {
-      const _render16 = render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isOptionContentAppliedToInput: true,
-          children: getOptionsWithBeforeContent('opt1')
-        })),
-        container = _render16.container;
-      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
-      expect(beforeContent).not.toHaveTextContent('XY');
-    });
-    it("should render option's before content in input field when isOptionContentAppliedToInput is set to true and both optionBeforeContent and optionAfterContent are provided", async () => {
-      const _render17 = render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isOptionContentAppliedToInput: true,
-          inputValue: optionsWithBeforeAndAfterContent[0].label,
-          children: getOptionsWithBeforeAndAfterContent('opt1')
-        })),
-        container = _render17.container;
-      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
-      expect(beforeContent).toHaveTextContent('XY');
-    });
-    it("should render option's after content in input field when isOptionContentAppliedToInput is set to true and both optionBeforeContent and optionAfterContent are provided", async () => {
-      const _render18 = render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isOptionContentAppliedToInput: true,
-          inputValue: optionsWithBeforeAndAfterContent[0].label,
-          children: getOptionsWithBeforeAndAfterContent('opt1')
-        })),
-        container = _render18.container;
-      const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
-      expect(afterContent).toHaveTextContent('ZZ');
-    });
-    it('should render arrow in input field when isOptionContentAppliedToInput is set to true but inputValue is not set', async () => {
-      const _render19 = render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isOptionContentAppliedToInput: true,
-          children: getOptionsWithBeforeContent('opt1')
-        })),
-        container = _render19.container;
-      const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
-      const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
-      expect(svgElement).toBeInTheDocument();
-    });
-    it("should not render option's after content in input field when isOptionContentAppliedToInput is set to true but inputValue is not set", async () => {
-      const _render20 = render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isOptionContentAppliedToInput: true,
-          children: getOptionsWithBeforeContent('opt1')
-        })),
-        container = _render20.container;
-      const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
-      expect(afterContent).not.toHaveTextContent('XY');
-    });
-    it("should render option's before content input field when isOptionContentAppliedToInput is set to true with group options", async () => {
-      const _render21 = render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isOptionContentAppliedToInput: true,
-          inputValue: groupOptionsWithBeforeContent.Options1[0].label,
-          children: getGroupOptionsWithBeforeContent('opt1')
-        })),
-        container = _render21.container;
-      const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
-      expect(beforeContent).toHaveTextContent('XY');
-    });
-    it('should render arrow icon when isOptionContentAppliedToInput is set to true with before content and group options', async () => {
-      const _render22 = render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isOptionContentAppliedToInput: true,
-          inputValue: groupOptionsWithBeforeContent.Options1[0].label,
-          children: getGroupOptionsWithBeforeContent('opt1')
-        })),
-        container = _render22.container;
-      const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
-      const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
-      expect(svgElement).toBeInTheDocument();
-    });
-    it("should render option's after content input field when isOptionContentAppliedToInput is set to true with group options", async () => {
-      const _render23 = render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isOptionContentAppliedToInput: true,
-          inputValue: groupOptionsWithAfterContent.Options2[0].label,
-          children: getGroupOptionsWithAfterContent('opt4')
-        })),
-        container = _render23.container;
-      const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
-      expect(afterContent).toHaveTextContent('AB');
-    });
-  });
-  describe('list', () => {
-    it('should set aria-selected on options with isSelected={true}', () => {
-      render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        isShowingOptions: true,
-        children: getOptions(void 0, defaultOptions[1])
-      }));
-      const options = screen.getAllByRole('option');
-      expect(options[1].getAttribute('aria-selected')).toEqual('true');
-    });
-    it('should set aria-disabled on options when isDisabled={true}', () => {
-      render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        isShowingOptions: true,
-        children: getOptions(void 0, void 0, defaultOptions[2])
-      }));
-      const options = screen.getAllByRole('option');
-      expect(options[0]).not.toHaveAttribute('aria-disabled');
-      expect(options[2]).toHaveAttribute('aria-disabled', 'true');
-    });
-    it('should set list element role to "listbox"', async () => {
-      render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        isShowingOptions: true,
-        children: getOptions()
-      }));
-      const listbox = screen.getByRole('listbox');
-      expect(listbox).toBeInTheDocument();
-      expect(listbox.tagName).toBe('UL');
-    });
-    it('should provide a ref to the list element', async () => {
-      const listRef = vi.fn();
-      render(_jsx(Select, {
-        renderLabel: "Choose an option",
-        isShowingOptions: true,
-        listRef: listRef,
-        children: getOptions()
-      }));
-      const listbox = screen.getByRole('listbox');
-      await waitFor(() => {
-        expect(listRef).toHaveBeenCalledWith(listbox);
-      });
-    });
-  });
-  describe('with callbacks', () => {
-    describe('should fire onRequestShowOptions', () => {
-      it('when root is clicked', async () => {
-        const onRequestShowOptions = vi.fn();
-        const _render24 = render(_jsx(Select, {
-            renderLabel: "Choose an option",
-            onRequestShowOptions: onRequestShowOptions,
-            children: getOptions()
-          })),
-          container = _render24.container,
-          rerender = _render24.rerender;
-        const icon = container.querySelector('svg[name="IconArrowOpenDown"]');
-        const label = screen.getByText('Choose an option');
-        expect(icon).toBeInTheDocument();
-        expect(label).toBeInTheDocument();
-        await userEvent.click(label);
-        await waitFor(() => {
-          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
-        });
-        await userEvent.click(icon);
-        await waitFor(() => {
-          expect(onRequestShowOptions).toHaveBeenCalledTimes(2);
-        });
-        rerender(_jsx(Select, {
-          renderLabel: "Choose an option",
-          onRequestShowOptions: onRequestShowOptions,
-          isShowingOptions: true,
-          children: getOptions()
-        }));
-        await userEvent.click(label);
-        await waitFor(() => {
-          expect(onRequestShowOptions).toHaveBeenCalledTimes(2);
-        });
-      });
-      it('when input is clicked', async () => {
-        const onRequestShowOptions = vi.fn();
-        const _render25 = render(_jsx(Select, {
-            renderLabel: "Choose an option",
-            onRequestShowOptions: onRequestShowOptions,
-            children: getOptions()
-          })),
-          rerender = _render25.rerender;
-        const input = screen.getByLabelText('Choose an option');
-        await userEvent.click(input);
-        await waitFor(() => {
-          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
-        });
-        rerender(_jsx(Select, {
-          renderLabel: "Choose an option",
-          onRequestShowOptions: onRequestShowOptions,
-          isShowingOptions: true,
-          children: getOptions()
-        }));
-        await userEvent.click(input);
-        await waitFor(() => {
-          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
-        });
-      });
-      it('when up/down arrows are pressed', async () => {
-        const onRequestShowOptions = vi.fn();
-        render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          onRequestShowOptions: onRequestShowOptions,
-          children: getOptions()
-        }));
-        const input = screen.getByLabelText('Choose an option');
-        await userEvent.type(input, '{arrowdown}');
-        await waitFor(() => {
-          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
-        });
-        await userEvent.type(input, '{arrowup}');
-        await waitFor(() => {
-          expect(onRequestShowOptions).toHaveBeenCalledTimes(2);
-        });
-      });
-      it('when space is pressed', async () => {
-        const onRequestShowOptions = vi.fn();
-        const _render26 = render(_jsx(Select, {
-            renderLabel: "Choose an option",
-            onRequestShowOptions: onRequestShowOptions,
-            children: getOptions()
-          })),
-          rerender = _render26.rerender;
-        const input = screen.getByLabelText('Choose an option');
-        await userEvent.type(input, '{space}');
-        await waitFor(() => {
-          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
-        });
-        rerender(_jsx(Select, {
-          renderLabel: "Choose an option",
-          onRequestShowOptions: onRequestShowOptions,
-          isShowingOptions: true,
-          children: getOptions()
-        }));
-        await userEvent.type(input, '{space}');
-        await waitFor(() => {
-          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
-        });
-      });
-    });
-    describe('should fire onRequestHideOptions', () => {
-      it('when root is clicked and isShowingOptions is true', async () => {
-        const onRequestHideOptions = vi.fn();
-        const _render27 = render(_jsx(Select, {
-            renderLabel: "Choose an option",
-            isShowingOptions: true,
-            onRequestHideOptions: onRequestHideOptions,
-            children: getOptions()
-          })),
-          container = _render27.container;
-        const icon = container.querySelector('svg[name="IconArrowOpenUp"]');
-        const label = screen.getByText('Choose an option');
-        expect(icon).toBeInTheDocument();
-        expect(label).toBeInTheDocument();
-        await userEvent.click(label);
-        await waitFor(() => {
-          expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
-        });
-        await userEvent.click(icon);
-        await waitFor(() => {
-          expect(onRequestHideOptions).toHaveBeenCalledTimes(2);
-        });
-      });
-      it('when root is clicked and isShowingOptions is false should NOT fire onRequestHideOptions', async () => {
-        const onRequestHideOptions = vi.fn();
-        render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isShowingOptions: false,
-          onRequestHideOptions: onRequestHideOptions,
-          children: getOptions()
-        }));
-        const label = screen.getByText('Choose an option');
-        expect(label).toBeInTheDocument();
-        await userEvent.click(label);
-        await waitFor(() => {
-          expect(onRequestHideOptions).not.toHaveBeenCalled();
-        });
-      });
-      it('when input is clicked', async () => {
-        const onRequestHideOptions = vi.fn();
-        const _render28 = render(_jsx(Select, {
-            renderLabel: "Choose an option",
-            isShowingOptions: true,
-            onRequestHideOptions: onRequestHideOptions,
-            children: getOptions()
-          })),
-          rerender = _render28.rerender;
-        const input = screen.getByLabelText('Choose an option');
-        await userEvent.click(input);
-        await waitFor(() => {
-          expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
-        });
-        rerender(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isShowingOptions: false,
-          onRequestHideOptions: onRequestHideOptions,
-          children: getOptions()
-        }));
-        await userEvent.click(input);
-        await waitFor(() => {
-          expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
-        });
-      });
-      it('when escape is pressed', async () => {
-        const onRequestHideOptions = vi.fn();
-        render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isShowingOptions: true,
-          onRequestHideOptions: onRequestHideOptions,
-          children: getOptions()
-        }));
-        const input = screen.getByLabelText('Choose an option');
-        await userEvent.type(input, '{esc}');
-        await waitFor(() => {
-          expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
-        });
-      });
-    });
-    describe('should fire onRequestHighlightOption', () => {
-      it('when options are hovered', async () => {
-        const onRequestHighlightOption = vi.fn();
-        render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          isShowingOptions: true,
-          onRequestHighlightOption: onRequestHighlightOption,
-          children: getOptions()
-        }));
-        const options = screen.getAllByRole('option');
-        await userEvent.hover(options[0]);
-        await waitFor(() => {
-          expect(onRequestHighlightOption).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({
-            id: defaultOptions[0]
-          }));
-        });
-        await userEvent.hover(options[1]);
-        await waitFor(() => {
-          expect(onRequestHighlightOption).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({
-            id: defaultOptions[1]
-          }));
-        });
-      });
-    });
-    describe('input callbacks', () => {
-      it('should fire onInputChange when input is typed in', async () => {
-        const onInputChange = vi.fn();
-        render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          onInputChange: onInputChange,
-          children: getOptions()
-        }));
-        const input = screen.getByLabelText('Choose an option');
-        await userEvent.type(input, 'h');
-        await waitFor(() => {
-          expect(onInputChange).toHaveBeenCalled();
-        });
-      });
-      it('should fire onFocus when input gains focus', async () => {
-        const onFocus = vi.fn();
-        render(_jsx(Select, {
-          renderLabel: "Choose an option",
-          onFocus: onFocus,
-          children: getOptions()
-        }));
-        const input = screen.getByLabelText('Choose an option');
-        input.focus();
-        await waitFor(() => {
-          expect(onFocus).toHaveBeenCalled();
-        });
-      });
-    });
-  });
-  describe('with generated examples', () => {
-    const generatedComponents = generateA11yTests(Select, SelectExamples);
-    it.each(generatedComponents)('should be accessible with example: $description', async ({
-      content
-    }) => {
-      const _render29 = render(content),
-        container = _render29.container;
-      const axeCheck = await runAxeCheck(container);
-      expect(axeCheck).toBe(true);
-    });
-  });
-});