@instructure/ui-time-select 10.2.2-snapshot-14 → 10.2.2-snapshot-16

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.2.2-snapshot-14](https://github.com/instructure/instructure-ui/compare/v10.2.1...v10.2.2-snapshot-14) (2024-09-13)
+## [10.2.2-snapshot-16](https://github.com/instructure/instructure-ui/compare/v10.2.1...v10.2.2-snapshot-16) (2024-09-13)
 
 **Note:** Version bump only for package @instructure/ui-time-select
 

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

@@ -0,0 +1,265 @@
+var _TimeSelect, _TimeSelect2, _TimeSelect3, _TimeSelect4, _TimeSelect5, _TimeSelect6;
+/*
+ * 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 { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import moment from 'moment-timezone';
+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 { ApplyLocale } from '@instructure/ui-i18n';
+import { TimeSelect } from '../index';
+import TimeSelectExamples from '../__examples__/TimeSelect.examples';
+describe('<TimeSelect />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should fire onFocus when input gains focus', async () => {
+    const onFocus = vi.fn();
+    render( /*#__PURE__*/React.createElement(TimeSelect, {
+      renderLabel: "Choose a time",
+      onFocus: onFocus
+    }));
+    const input = screen.getByRole('combobox');
+    input.focus();
+    await waitFor(() => {
+      expect(onFocus).toHaveBeenCalled();
+    });
+  });
+  it('should render a default value', async () => {
+    const defaultValue = moment.tz('1986-05-17T18:00:00.000Z', moment.ISO_8601, 'en', 'US/Eastern');
+    const onChange = vi.fn();
+    render( /*#__PURE__*/React.createElement(TimeSelect, {
+      renderLabel: "Choose a time",
+      onChange: onChange,
+      timezone: "US/Eastern",
+      defaultValue: defaultValue.toISOString()
+    }));
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveValue('2:00 PM');
+  });
+  it('should display value when both defaultValue and value are set', async () => {
+    const value = moment.tz('1986-05-17T18:00:00.000Z', moment.ISO_8601, 'en', 'US/Eastern');
+    const defaultValue = moment.tz('1986-05-25T19:00:00.000Z', moment.ISO_8601, 'en', 'US/Eastern');
+    render( /*#__PURE__*/React.createElement(TimeSelect, {
+      renderLabel: "Choose a time",
+      timezone: "US/Eastern",
+      value: value.toISOString(),
+      defaultValue: defaultValue.toISOString()
+    }));
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveValue(value.format('LT'));
+  });
+  it('should default to the first option if defaultToFirstOption is true', async () => {
+    render(_TimeSelect || (_TimeSelect = /*#__PURE__*/React.createElement(TimeSelect, {
+      renderLabel: "Choose a time",
+      defaultToFirstOption: true
+    })));
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveValue('12:00 AM');
+  });
+  it('should use the specified timezone', async () => {
+    const value = moment.tz('2024-01-11T13:00:00.000Z', moment.ISO_8601, 'fr', 'UTC');
+    render( /*#__PURE__*/React.createElement(TimeSelect, {
+      renderLabel: "Choose a time",
+      locale: "fr",
+      timezone: "Africa/Nairobi" // UTC + 3
+      ,
+      value: value.toISOString()
+    }));
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveValue('16:00');
+  });
+  it('should use the specified locale', async () => {
+    const value = moment.tz('2024-01-11T13:00:00.000Z', moment.ISO_8601, 'fr',
+    // 24-hour clock
+    'UTC');
+    render( /*#__PURE__*/React.createElement(TimeSelect, {
+      renderLabel: "Choose a time",
+      locale: "en" // 12-hour clock
+      ,
+      timezone: "UTC",
+      value: value.toISOString()
+    }));
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveValue('1:00 PM');
+  });
+  it('should handle winter and summer time based on timezone', async () => {
+    const valueSummer = moment.tz('2024-07-11T13:00:00.000Z', moment.ISO_8601, 'en', 'UTC' // no time offset
+    );
+    const valueWinter = moment.tz('2024-01-11T13:00:00.000Z', moment.ISO_8601, 'en', 'UTC' // no time offset
+    );
+    const _render = render( /*#__PURE__*/React.createElement(TimeSelect, {
+        renderLabel: "Choose a time",
+        locale: "en",
+        timezone: "Europe/London" // summer time offset
+        ,
+        value: valueSummer.toISOString()
+      })),
+      rerender = _render.rerender;
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveValue('2:00 PM');
+    rerender( /*#__PURE__*/React.createElement(TimeSelect, {
+      renderLabel: "Choose a time",
+      locale: "en",
+      timezone: "Europe/London" // summer time offset
+      ,
+      value: valueWinter.toISOString()
+    }));
+    const inputUpdated = screen.getByRole('combobox');
+    expect(inputUpdated).toHaveValue('1:00 PM');
+  });
+  it('should read locale and timezone from context', async () => {
+    const value = moment.tz('2017-05-01T17:30Z', moment.ISO_8601, 'en',
+    // 12-hour clock format
+    'UTC' // no time offset
+    );
+    render( /*#__PURE__*/React.createElement(ApplyLocale, {
+      locale: "fr" // 24-hour clock format
+      ,
+      timezone: "Africa/Nairobi" // UTC + 3
+    }, /*#__PURE__*/React.createElement(TimeSelect, {
+      renderLabel: "Choose a time",
+      step: 15,
+      value: value.toISOString()
+    })));
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveValue('20:30');
+  });
+  it('adding event listeners does not break functionality', async () => {
+    const onChange = vi.fn();
+    const onKeyDown = vi.fn();
+    const handleInputChange = vi.fn();
+    render( /*#__PURE__*/React.createElement(TimeSelect, {
+      renderLabel: "Choose a time",
+      allowNonStepInput: true,
+      locale: "en_AU",
+      timezone: "US/Eastern",
+      onChange: onChange,
+      onInputChange: handleInputChange,
+      onKeyDown: onKeyDown
+    }));
+    const input = screen.getByRole('combobox');
+    await userEvent.type(input, '7:45 PM');
+    fireEvent.blur(input); // sends onChange event
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalled();
+      expect(onKeyDown).toHaveBeenCalled();
+      expect(handleInputChange).toHaveBeenCalled();
+      expect(input).toHaveValue('7:45 PM');
+    });
+  });
+  describe('input', () => {
+    it('should render with a custom id if given', async () => {
+      render(_TimeSelect2 || (_TimeSelect2 = /*#__PURE__*/React.createElement(TimeSelect, {
+        renderLabel: "Choose a time",
+        id: "timeSelect"
+      })));
+      const input = screen.getByRole('combobox');
+      expect(input).toHaveAttribute('id', 'timeSelect');
+    });
+    it('should render readonly when interaction="readonly"', async () => {
+      render(_TimeSelect3 || (_TimeSelect3 = /*#__PURE__*/React.createElement(TimeSelect, {
+        renderLabel: "Choose a time",
+        interaction: "readonly"
+      })));
+      const input = screen.getByRole('combobox');
+      expect(input).toHaveAttribute('readonly');
+      expect(input).not.toHaveAttribute('disabled');
+    });
+    it('should render disabled when interaction="disabled"', async () => {
+      render(_TimeSelect4 || (_TimeSelect4 = /*#__PURE__*/React.createElement(TimeSelect, {
+        renderLabel: "Choose a time",
+        interaction: "disabled"
+      })));
+      const input = screen.getByRole('combobox');
+      expect(input).toHaveAttribute('disabled');
+      expect(input).not.toHaveAttribute('readonly');
+    });
+    it('should render required when isRequired is true', async () => {
+      render(_TimeSelect5 || (_TimeSelect5 = /*#__PURE__*/React.createElement(TimeSelect, {
+        renderLabel: "Choose a time",
+        isRequired: true
+      })));
+      const input = screen.getByRole('combobox');
+      expect(input).toHaveAttribute('required');
+    });
+    it('should allow custom props to pass through', async () => {
+      render(_TimeSelect6 || (_TimeSelect6 = /*#__PURE__*/React.createElement(TimeSelect, {
+        renderLabel: "Choose a time",
+        "data-custom-attr": "true"
+      })));
+      const input = screen.getByRole('combobox');
+      expect(input).toHaveAttribute('data-custom-attr', 'true');
+    });
+    it('should provide a ref to the input element', async () => {
+      const inputRef = vi.fn();
+      render( /*#__PURE__*/React.createElement(TimeSelect, {
+        renderLabel: "Choose a time",
+        inputRef: inputRef
+      }));
+      const input = screen.getByRole('combobox');
+      expect(inputRef).toHaveBeenCalledWith(input);
+    });
+  });
+  describe('list', () => {
+    it('should provide a ref to the list element', async () => {
+      const listRef = vi.fn();
+      render( /*#__PURE__*/React.createElement(TimeSelect, {
+        renderLabel: "Choose a time",
+        listRef: listRef
+      }));
+      const input = screen.getByRole('combobox');
+      await userEvent.click(input);
+      await waitFor(() => {
+        const listbox = screen.getByRole('listbox');
+        expect(listRef).toHaveBeenCalledWith(listbox);
+      });
+    });
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = generateA11yTests(TimeSelect, TimeSelectExamples);
+    it.each(generatedComponents)('should be accessible with example: $description', async ({
+      content
+    }) => {
+      const _render2 = render(content),
+        container = _render2.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
+  });
+});

package/lib/TimeSelect/__new-tests__/TimeSelect.test.js

@@ -0,0 +1,267 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+require("@testing-library/jest-dom");
+var _generateA11yTests = require("@instructure/ui-scripts/lib/test/generateA11yTests");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _ApplyLocale = require("@instructure/ui-i18n/lib/ApplyLocale");
+var _index = require("../index");
+var _TimeSelect7 = _interopRequireDefault(require("../__examples__/TimeSelect.examples"));
+var _TimeSelect, _TimeSelect2, _TimeSelect3, _TimeSelect4, _TimeSelect5, _TimeSelect6;
+/*
+ * 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.
+ */
+// eslint-disable-next-line no-restricted-imports
+describe('<TimeSelect />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should fire onFocus when input gains focus', async () => {
+    const onFocus = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+      renderLabel: "Choose a time",
+      onFocus: onFocus
+    }));
+    const input = _react2.screen.getByRole('combobox');
+    input.focus();
+    await (0, _react2.waitFor)(() => {
+      expect(onFocus).toHaveBeenCalled();
+    });
+  });
+  it('should render a default value', async () => {
+    const defaultValue = _momentTimezone.default.tz('1986-05-17T18:00:00.000Z', _momentTimezone.default.ISO_8601, 'en', 'US/Eastern');
+    const onChange = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+      renderLabel: "Choose a time",
+      onChange: onChange,
+      timezone: "US/Eastern",
+      defaultValue: defaultValue.toISOString()
+    }));
+    const input = _react2.screen.getByRole('combobox');
+    expect(input).toHaveValue('2:00 PM');
+  });
+  it('should display value when both defaultValue and value are set', async () => {
+    const value = _momentTimezone.default.tz('1986-05-17T18:00:00.000Z', _momentTimezone.default.ISO_8601, 'en', 'US/Eastern');
+    const defaultValue = _momentTimezone.default.tz('1986-05-25T19:00:00.000Z', _momentTimezone.default.ISO_8601, 'en', 'US/Eastern');
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+      renderLabel: "Choose a time",
+      timezone: "US/Eastern",
+      value: value.toISOString(),
+      defaultValue: defaultValue.toISOString()
+    }));
+    const input = _react2.screen.getByRole('combobox');
+    expect(input).toHaveValue(value.format('LT'));
+  });
+  it('should default to the first option if defaultToFirstOption is true', async () => {
+    (0, _react2.render)(_TimeSelect || (_TimeSelect = /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+      renderLabel: "Choose a time",
+      defaultToFirstOption: true
+    })));
+    const input = _react2.screen.getByRole('combobox');
+    expect(input).toHaveValue('12:00 AM');
+  });
+  it('should use the specified timezone', async () => {
+    const value = _momentTimezone.default.tz('2024-01-11T13:00:00.000Z', _momentTimezone.default.ISO_8601, 'fr', 'UTC');
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+      renderLabel: "Choose a time",
+      locale: "fr",
+      timezone: "Africa/Nairobi" // UTC + 3
+      ,
+      value: value.toISOString()
+    }));
+    const input = _react2.screen.getByRole('combobox');
+    expect(input).toHaveValue('16:00');
+  });
+  it('should use the specified locale', async () => {
+    const value = _momentTimezone.default.tz('2024-01-11T13:00:00.000Z', _momentTimezone.default.ISO_8601, 'fr',
+    // 24-hour clock
+    'UTC');
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+      renderLabel: "Choose a time",
+      locale: "en" // 12-hour clock
+      ,
+      timezone: "UTC",
+      value: value.toISOString()
+    }));
+    const input = _react2.screen.getByRole('combobox');
+    expect(input).toHaveValue('1:00 PM');
+  });
+  it('should handle winter and summer time based on timezone', async () => {
+    const valueSummer = _momentTimezone.default.tz('2024-07-11T13:00:00.000Z', _momentTimezone.default.ISO_8601, 'en', 'UTC' // no time offset
+    );
+    const valueWinter = _momentTimezone.default.tz('2024-01-11T13:00:00.000Z', _momentTimezone.default.ISO_8601, 'en', 'UTC' // no time offset
+    );
+    const _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+        renderLabel: "Choose a time",
+        locale: "en",
+        timezone: "Europe/London" // summer time offset
+        ,
+        value: valueSummer.toISOString()
+      })),
+      rerender = _render.rerender;
+    const input = _react2.screen.getByRole('combobox');
+    expect(input).toHaveValue('2:00 PM');
+    rerender( /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+      renderLabel: "Choose a time",
+      locale: "en",
+      timezone: "Europe/London" // summer time offset
+      ,
+      value: valueWinter.toISOString()
+    }));
+    const inputUpdated = _react2.screen.getByRole('combobox');
+    expect(inputUpdated).toHaveValue('1:00 PM');
+  });
+  it('should read locale and timezone from context', async () => {
+    const value = _momentTimezone.default.tz('2017-05-01T17:30Z', _momentTimezone.default.ISO_8601, 'en',
+    // 12-hour clock format
+    'UTC' // no time offset
+    );
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ApplyLocale.ApplyLocale, {
+      locale: "fr" // 24-hour clock format
+      ,
+      timezone: "Africa/Nairobi" // UTC + 3
+    }, /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+      renderLabel: "Choose a time",
+      step: 15,
+      value: value.toISOString()
+    })));
+    const input = _react2.screen.getByRole('combobox');
+    expect(input).toHaveValue('20:30');
+  });
+  it('adding event listeners does not break functionality', async () => {
+    const onChange = _vitest.vi.fn();
+    const onKeyDown = _vitest.vi.fn();
+    const handleInputChange = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+      renderLabel: "Choose a time",
+      allowNonStepInput: true,
+      locale: "en_AU",
+      timezone: "US/Eastern",
+      onChange: onChange,
+      onInputChange: handleInputChange,
+      onKeyDown: onKeyDown
+    }));
+    const input = _react2.screen.getByRole('combobox');
+    await _userEvent.default.type(input, '7:45 PM');
+    _react2.fireEvent.blur(input); // sends onChange event
+
+    await (0, _react2.waitFor)(() => {
+      expect(onChange).toHaveBeenCalled();
+      expect(onKeyDown).toHaveBeenCalled();
+      expect(handleInputChange).toHaveBeenCalled();
+      expect(input).toHaveValue('7:45 PM');
+    });
+  });
+  describe('input', () => {
+    it('should render with a custom id if given', async () => {
+      (0, _react2.render)(_TimeSelect2 || (_TimeSelect2 = /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+        renderLabel: "Choose a time",
+        id: "timeSelect"
+      })));
+      const input = _react2.screen.getByRole('combobox');
+      expect(input).toHaveAttribute('id', 'timeSelect');
+    });
+    it('should render readonly when interaction="readonly"', async () => {
+      (0, _react2.render)(_TimeSelect3 || (_TimeSelect3 = /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+        renderLabel: "Choose a time",
+        interaction: "readonly"
+      })));
+      const input = _react2.screen.getByRole('combobox');
+      expect(input).toHaveAttribute('readonly');
+      expect(input).not.toHaveAttribute('disabled');
+    });
+    it('should render disabled when interaction="disabled"', async () => {
+      (0, _react2.render)(_TimeSelect4 || (_TimeSelect4 = /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+        renderLabel: "Choose a time",
+        interaction: "disabled"
+      })));
+      const input = _react2.screen.getByRole('combobox');
+      expect(input).toHaveAttribute('disabled');
+      expect(input).not.toHaveAttribute('readonly');
+    });
+    it('should render required when isRequired is true', async () => {
+      (0, _react2.render)(_TimeSelect5 || (_TimeSelect5 = /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+        renderLabel: "Choose a time",
+        isRequired: true
+      })));
+      const input = _react2.screen.getByRole('combobox');
+      expect(input).toHaveAttribute('required');
+    });
+    it('should allow custom props to pass through', async () => {
+      (0, _react2.render)(_TimeSelect6 || (_TimeSelect6 = /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+        renderLabel: "Choose a time",
+        "data-custom-attr": "true"
+      })));
+      const input = _react2.screen.getByRole('combobox');
+      expect(input).toHaveAttribute('data-custom-attr', 'true');
+    });
+    it('should provide a ref to the input element', async () => {
+      const inputRef = _vitest.vi.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+        renderLabel: "Choose a time",
+        inputRef: inputRef
+      }));
+      const input = _react2.screen.getByRole('combobox');
+      expect(inputRef).toHaveBeenCalledWith(input);
+    });
+  });
+  describe('list', () => {
+    it('should provide a ref to the list element', async () => {
+      const listRef = _vitest.vi.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+        renderLabel: "Choose a time",
+        listRef: listRef
+      }));
+      const input = _react2.screen.getByRole('combobox');
+      await _userEvent.default.click(input);
+      await (0, _react2.waitFor)(() => {
+        const listbox = _react2.screen.getByRole('listbox');
+        expect(listRef).toHaveBeenCalledWith(listbox);
+      });
+    });
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = (0, _generateA11yTests.generateA11yTests)(_index.TimeSelect, _TimeSelect7.default);
+    it.each(generatedComponents)('should be accessible with example: $description', async ({
+      content
+    }) => {
+      const _render2 = (0, _react2.render)(content),
+        container = _render2.container;
+      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+      expect(axeCheck).toBe(true);
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-time-select",
-  "version": "10.2.2-snapshot-14",
+  "version": "10.2.2-snapshot-16",
   "description": "A component for selecting time values.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,22 +24,26 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/shared-types": "10.2.2-snapshot-14",
-    "@instructure/ui-form-field": "10.2.2-snapshot-14",
-    "@instructure/ui-i18n": "10.2.2-snapshot-14",
-    "@instructure/ui-position": "10.2.2-snapshot-14",
-    "@instructure/ui-prop-types": "10.2.2-snapshot-14",
-    "@instructure/ui-react-utils": "10.2.2-snapshot-14",
-    "@instructure/ui-select": "10.2.2-snapshot-14",
-    "@instructure/ui-test-locator": "10.2.2-snapshot-14",
-    "@instructure/ui-testable": "10.2.2-snapshot-14",
-    "@instructure/ui-utils": "10.2.2-snapshot-14",
+    "@instructure/shared-types": "10.2.2-snapshot-16",
+    "@instructure/ui-form-field": "10.2.2-snapshot-16",
+    "@instructure/ui-i18n": "10.2.2-snapshot-16",
+    "@instructure/ui-position": "10.2.2-snapshot-16",
+    "@instructure/ui-prop-types": "10.2.2-snapshot-16",
+    "@instructure/ui-react-utils": "10.2.2-snapshot-16",
+    "@instructure/ui-select": "10.2.2-snapshot-16",
+    "@instructure/ui-testable": "10.2.2-snapshot-16",
+    "@instructure/ui-utils": "10.2.2-snapshot-16",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.2.2-snapshot-14",
-    "@instructure/ui-test-utils": "10.2.2-snapshot-14",
-    "moment-timezone": "^0.5.45"
+    "@instructure/ui-axe-check": "10.2.2-snapshot-16",
+    "@instructure/ui-babel-preset": "10.2.2-snapshot-16",
+    "@instructure/ui-test-utils": "10.2.2-snapshot-16",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "moment-timezone": "^0.5.45",
+    "vitest": "^2.0.2"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"