@instructure/ui-time-select 10.19.2-snapshot-2 → 10.19.2-snapshot-4

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

@@ -1,352 +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"));
-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 _jsxRuntime = require("@emotion/react/jsx-runtime");
-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, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
-      renderLabel: "Choose a time",
-      onFocus: onFocus
-    }));
-    const input = _react.screen.getByRole('combobox');
-    input.focus();
-    await (0, _react.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, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
-      renderLabel: "Choose a time",
-      onChange: onChange,
-      timezone: "US/Eastern",
-      defaultValue: defaultValue.toISOString()
-    }));
-    const input = _react.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, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
-      renderLabel: "Choose a time",
-      timezone: "US/Eastern",
-      value: value.toISOString(),
-      defaultValue: defaultValue.toISOString()
-    }));
-    const input = _react.screen.getByRole('combobox');
-    expect(input).toHaveValue(value.format('LT'));
-  });
-  it('should default to the first option if defaultToFirstOption is true', async () => {
-    (0, _react.render)(_TimeSelect || (_TimeSelect = (0, _jsxRuntime.jsx)(_index.TimeSelect, {
-      renderLabel: "Choose a time",
-      defaultToFirstOption: true
-    })));
-    const input = _react.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, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
-      renderLabel: "Choose a time",
-      locale: "fr",
-      timezone: "Africa/Nairobi" // UTC + 3
-      ,
-      value: value.toISOString()
-    }));
-    const input = _react.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, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
-      renderLabel: "Choose a time",
-      locale: "en" // 12-hour clock
-      ,
-      timezone: "UTC",
-      value: value.toISOString()
-    }));
-    const input = _react.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, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
-        renderLabel: "Choose a time",
-        locale: "en",
-        timezone: "Europe/London" // summer time offset
-        ,
-        value: valueSummer.toISOString()
-      })),
-      rerender = _render.rerender;
-    const input = _react.screen.getByRole('combobox');
-    expect(input).toHaveValue('2:00 PM');
-    rerender((0, _jsxRuntime.jsx)(_index.TimeSelect, {
-      renderLabel: "Choose a time",
-      locale: "en",
-      timezone: "Europe/London" // summer time offset
-      ,
-      value: valueWinter.toISOString()
-    }));
-    const inputUpdated = _react.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, _react.render)((0, _jsxRuntime.jsx)(_ApplyLocale.ApplyLocale, {
-      locale: "fr" // 24-hour clock format
-      ,
-      timezone: "Africa/Nairobi" // UTC + 3
-      ,
-      children: (0, _jsxRuntime.jsx)(_index.TimeSelect, {
-        renderLabel: "Choose a time",
-        step: 15,
-        value: value.toISOString()
-      })
-    }));
-    const input = _react.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, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
-      renderLabel: "Choose a time",
-      allowNonStepInput: true,
-      locale: "en_AU",
-      timezone: "US/Eastern",
-      onChange: onChange,
-      onInputChange: handleInputChange,
-      onKeyDown: onKeyDown
-    }));
-    const input = _react.screen.getByRole('combobox');
-    await _userEvent.default.type(input, '7:45 PM');
-    _react.fireEvent.blur(input); // sends onChange event
-
-    expect(onChange).toHaveBeenCalledWith(expect.anything(), {
-      inputText: '7:45 PM',
-      value: expect.anything()
-    });
-    expect(onKeyDown).toHaveBeenCalled();
-    expect(handleInputChange).toHaveBeenCalled();
-    expect(input).toHaveValue('7:45 PM');
-  });
-  it('allowClearingSelection allows to clear the value', async () => {
-    const defaultValue = _momentTimezone.default.tz('1986-05-17T18:00:00.000Z',
-    // 2:00 PM in US/Eastern
-    _momentTimezone.default.ISO_8601, 'en', 'US/Eastern');
-    const onChange = _vitest.vi.fn();
-    (0, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
-      allowClearingSelection: true,
-      renderLabel: "Choose a time",
-      allowNonStepInput: true,
-      locale: "en_AU",
-      timezone: "US/Eastern",
-      defaultValue: defaultValue.toISOString(),
-      onChange: onChange
-    }));
-    const input = _react.screen.getByRole('combobox');
-    await _userEvent.default.type(input, '{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}');
-    _react.fireEvent.blur(input); // sends onChange event
-
-    expect(onChange).toHaveBeenCalledWith(expect.anything(), {
-      inputText: '',
-      value: ''
-    });
-    expect(input).toHaveValue('');
-  });
-  it('Can change from defaultValue', async () => {
-    const defaultValue = _momentTimezone.default.tz('1986-05-17T18:00:00.000Z',
-    // 2:00 PM in US/Eastern
-    _momentTimezone.default.ISO_8601, 'en', 'US/Eastern');
-    const onChange = _vitest.vi.fn();
-    const onKeyDown = _vitest.vi.fn();
-    const handleInputChange = _vitest.vi.fn();
-    (0, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
-      renderLabel: "Choose a time",
-      allowNonStepInput: true,
-      locale: "en_AU",
-      timezone: "US/Eastern",
-      defaultValue: defaultValue.toISOString(),
-      onChange: onChange,
-      onInputChange: handleInputChange,
-      onKeyDown: onKeyDown
-    }));
-    const input = _react.screen.getByRole('combobox');
-    await _userEvent.default.type(input, '{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}7:45 PM');
-    _react.fireEvent.blur(input); // sends onChange event
-    expect(onChange).toHaveBeenCalledWith(expect.anything(), {
-      inputText: '7:45 PM',
-      value: '1986-05-17T23:45:00.000Z'
-    });
-    expect(onKeyDown).toHaveBeenCalled();
-    expect(handleInputChange).toHaveBeenCalled();
-    expect(input).toHaveValue('7:45 PM');
-  });
-  it('Reverts to a set value if the current one is invalid', async () => {
-    const defaultValue = _momentTimezone.default.tz('1986-05-17T18:00:00.000Z',
-    // 2:00 PM in US/Eastern
-    _momentTimezone.default.ISO_8601, 'en', 'US/Eastern');
-    const onChange = _vitest.vi.fn();
-    const onKeyDown = _vitest.vi.fn();
-    const handleInputChange = _vitest.vi.fn();
-    (0, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
-      renderLabel: "Choose a time",
-      allowNonStepInput: true,
-      locale: "en_AU",
-      timezone: "US/Eastern",
-      defaultValue: defaultValue.toISOString(),
-      onChange: onChange,
-      onInputChange: handleInputChange,
-      onKeyDown: onKeyDown
-    }));
-    const input = _react.screen.getByRole('combobox');
-    await _userEvent.default.type(input, '{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}7:45 PM');
-    _react.fireEvent.blur(input); // sends onChange event
-    await _userEvent.default.type(input, 'asdf');
-    _react.fireEvent.blur(input);
-    expect(onChange).toHaveBeenCalledWith(expect.anything(), {
-      inputText: '7:45 PM',
-      value: '1986-05-17T23:45:00.000Z'
-    });
-    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, _react.render)(_TimeSelect2 || (_TimeSelect2 = (0, _jsxRuntime.jsx)(_index.TimeSelect, {
-        renderLabel: "Choose a time",
-        id: "timeSelect"
-      })));
-      const input = _react.screen.getByRole('combobox');
-      expect(input).toHaveAttribute('id', 'timeSelect');
-    });
-    it('should render readonly when interaction="readonly"', async () => {
-      (0, _react.render)(_TimeSelect3 || (_TimeSelect3 = (0, _jsxRuntime.jsx)(_index.TimeSelect, {
-        renderLabel: "Choose a time",
-        interaction: "readonly"
-      })));
-      const input = _react.screen.getByRole('combobox');
-      expect(input).toHaveAttribute('readonly');
-      expect(input).not.toHaveAttribute('disabled');
-    });
-    it('should render disabled when interaction="disabled"', async () => {
-      (0, _react.render)(_TimeSelect4 || (_TimeSelect4 = (0, _jsxRuntime.jsx)(_index.TimeSelect, {
-        renderLabel: "Choose a time",
-        interaction: "disabled"
-      })));
-      const input = _react.screen.getByRole('combobox');
-      expect(input).toHaveAttribute('disabled');
-      expect(input).not.toHaveAttribute('readonly');
-    });
-    it('should render required when isRequired is true', async () => {
-      (0, _react.render)(_TimeSelect5 || (_TimeSelect5 = (0, _jsxRuntime.jsx)(_index.TimeSelect, {
-        renderLabel: "Choose a time",
-        isRequired: true
-      })));
-      const input = _react.screen.getByRole('combobox');
-      expect(input).toHaveAttribute('required');
-    });
-    it('should allow custom props to pass through', async () => {
-      (0, _react.render)(_TimeSelect6 || (_TimeSelect6 = (0, _jsxRuntime.jsx)(_index.TimeSelect, {
-        renderLabel: "Choose a time",
-        "data-custom-attr": "true"
-      })));
-      const input = _react.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, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
-        renderLabel: "Choose a time",
-        inputRef: inputRef
-      }));
-      const input = _react.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, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
-        renderLabel: "Choose a time",
-        listRef: listRef
-      }));
-      const input = _react.screen.getByRole('combobox');
-      await _userEvent.default.click(input);
-      await (0, _react.waitFor)(() => {
-        const listbox = _react.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, _react.render)(content),
-        container = _render2.container;
-      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
-      expect(axeCheck).toBe(true);
-    });
-  });
-});