diff --git a/packages/react-time-picker/package.json b/packages/react-time-picker/package.json index eec73dff..200647a6 100644 --- a/packages/react-time-picker/package.json +++ b/packages/react-time-picker/package.json @@ -59,9 +59,6 @@ }, "devDependencies": { "@biomejs/biome": "2.2.2", - "@testing-library/dom": "^10.0.0", - "@testing-library/jest-dom": "^6.0.0", - "@testing-library/react": "^16.0.0", "@types/node": "*", "@types/react": "*", "@types/react-dom": "*", diff --git a/packages/react-time-picker/src/TimeInput.spec.tsx b/packages/react-time-picker/src/TimeInput.spec.tsx index 37b30842..f11328d9 100644 --- a/packages/react-time-picker/src/TimeInput.spec.tsx +++ b/packages/react-time-picker/src/TimeInput.spec.tsx @@ -1,6 +1,6 @@ import { describe, expect, it, vi } from 'vitest'; import { userEvent } from 'vitest/browser'; -import { fireEvent, render } from '@testing-library/react'; +import { render } from 'vitest-browser-react'; import TimeInput from './TimeInput.js'; @@ -25,8 +25,8 @@ describe('TimeInput', () => { className: 'react-time-picker__inputGroup', }; - it('renders a native input and custom inputs', () => { - const { container } = render(); + it('renders a native input and custom inputs', async () => { + const { container } = await render(); const nativeInput = container.querySelector('input[type="time"]'); const customInputs = container.querySelectorAll('input[data-input]'); @@ -35,8 +35,8 @@ describe('TimeInput', () => { expect(customInputs).toHaveLength(2); }); - it('does not render second input when maxDetail is "minute" or less', () => { - const { container } = render(); + it('does not render second input when maxDetail is "minute" or less', async () => { + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); const secondInput = container.querySelector('input[name="second"]'); @@ -49,8 +49,8 @@ describe('TimeInput', () => { expect(hourInput).toBeInTheDocument(); }); - it('does not render second and minute inputs when maxDetail is "hour" or less', () => { - const { container } = render(); + it('does not render second and minute inputs when maxDetail is "hour" or less', async () => { + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); const secondInput = container.querySelector('input[name="second"]'); @@ -63,10 +63,12 @@ describe('TimeInput', () => { expect(hourInput).toBeInTheDocument(); }); - it('shows a given time in all inputs correctly (12-hour format)', () => { + it('shows a given time in all inputs correctly (12-hour format)', async () => { const date = '22:17:03'; - const { container } = render(); + const { container } = await render( + , + ); const nativeInput = container.querySelector('input[type="time"]'); const customInputs = container.querySelectorAll('input[data-input]'); @@ -77,10 +79,10 @@ describe('TimeInput', () => { expect(customInputs[2]).toHaveValue(3); }); - itIfFullICU('shows a given time in all inputs correctly (24-hour format)', () => { + itIfFullICU('shows a given time in all inputs correctly (24-hour format)', async () => { const date = '22:17:03'; - const { container } = render( + const { container } = await render( , ); @@ -93,8 +95,10 @@ describe('TimeInput', () => { expect(customInputs[2]).toHaveValue(3); }); - it('shows empty value in all inputs correctly given null', () => { - const { container } = render(); + it('shows empty value in all inputs correctly given null', async () => { + const { container } = await render( + , + ); const nativeInput = container.querySelector('input[type="time"]'); const customInputs = container.querySelectorAll('input[data-input]'); @@ -105,10 +109,10 @@ describe('TimeInput', () => { expect(customInputs[2]).toHaveAttribute('value', ''); }); - it('clears the value correctly', () => { + it('clears the value correctly', async () => { const date = '22:17:03'; - const { container, rerender } = render( + const { container, rerender } = await render( , ); @@ -123,8 +127,8 @@ describe('TimeInput', () => { expect(customInputs[2]).toHaveAttribute('value', ''); }); - it('renders custom inputs in a proper order (12-hour format)', () => { - const { container } = render(); + it('renders custom inputs in a proper order (12-hour format)', async () => { + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); @@ -133,8 +137,10 @@ describe('TimeInput', () => { expect(customInputs[2]).toHaveAttribute('name', 'second'); }); - itIfFullICU('renders custom inputs in a proper order (24-hour format)', () => { - const { container } = render(); + itIfFullICU('renders custom inputs in a proper order (24-hour format)', async () => { + const { container } = await render( + , + ); const customInputs = container.querySelectorAll('input[data-input]'); @@ -150,8 +156,8 @@ describe('TimeInput', () => { it.todo('renders second input with leading zero by default'); describe('renders custom input in a proper order given format', () => { - it('renders "h" properly', () => { - const { container } = render(); + it('renders "h" properly', async () => { + const { container } = await render(); const componentInput = container.querySelector('input[name="hour12"]'); const customInputs = container.querySelectorAll('input[data-input]'); @@ -160,8 +166,8 @@ describe('TimeInput', () => { expect(customInputs).toHaveLength(1); }); - it('renders "hh" properly', () => { - const { container } = render(); + it('renders "hh" properly', async () => { + const { container } = await render(); const componentInput = container.querySelector('input[name="hour12"]'); const customInputs = container.querySelectorAll('input[data-input]'); @@ -170,18 +176,18 @@ describe('TimeInput', () => { expect(customInputs).toHaveLength(1); }); - it('throws error for "hhh"', () => { + it('throws error for "hhh"', async () => { muteConsole(); const renderComponent = () => render(); - expect(renderComponent).toThrow('Unsupported token: hhh'); + await expect(renderComponent).rejects.toThrowError('Unsupported token: hhh'); restoreConsole(); }); - it('renders "H" properly', () => { - const { container } = render(); + it('renders "H" properly', async () => { + const { container } = await render(); const componentInput = container.querySelector('input[name="hour24"]'); const customInputs = container.querySelectorAll('input[data-input]'); @@ -190,8 +196,8 @@ describe('TimeInput', () => { expect(customInputs).toHaveLength(1); }); - it('renders "HH" properly', () => { - const { container } = render(); + it('renders "HH" properly', async () => { + const { container } = await render(); const componentInput = container.querySelector('input[name="hour24"]'); const customInputs = container.querySelectorAll('input[data-input]'); @@ -200,18 +206,18 @@ describe('TimeInput', () => { expect(customInputs).toHaveLength(1); }); - it('throws error for "HHH"', () => { + it('throws error for "HHH"', async () => { muteConsole(); const renderComponent = () => render(); - expect(renderComponent).toThrow('Unsupported token: HHH'); + await expect(renderComponent).rejects.toThrowError('Unsupported token: HHH'); restoreConsole(); }); - it('renders "m" properly', () => { - const { container } = render(); + it('renders "m" properly', async () => { + const { container } = await render(); const componentInput = container.querySelector('input[name="minute"]'); const customInputs = container.querySelectorAll('input[data-input]'); @@ -220,8 +226,8 @@ describe('TimeInput', () => { expect(customInputs).toHaveLength(1); }); - it('renders "mm" properly', () => { - const { container } = render(); + it('renders "mm" properly', async () => { + const { container } = await render(); const componentInput = container.querySelector('input[name="minute"]'); const customInputs = container.querySelectorAll('input[data-input]'); @@ -230,18 +236,18 @@ describe('TimeInput', () => { expect(customInputs).toHaveLength(1); }); - it('throws error for "mmm"', () => { + it('throws error for "mmm"', async () => { muteConsole(); const renderComponent = () => render(); - expect(renderComponent).toThrow('Unsupported token: mmm'); + await expect(renderComponent).rejects.toThrowError('Unsupported token: mmm'); restoreConsole(); }); - it('renders "s" properly', () => { - const { container } = render(); + it('renders "s" properly', async () => { + const { container } = await render(); const componentInput = container.querySelector('input[name="second"]'); const customInputs = container.querySelectorAll('input[data-input]'); @@ -250,8 +256,8 @@ describe('TimeInput', () => { expect(customInputs).toHaveLength(1); }); - it('renders "ss" properly', () => { - const { container } = render(); + it('renders "ss" properly', async () => { + const { container } = await render(); const componentInput = container.querySelector('input[name="second"]'); const customInputs = container.querySelectorAll('input[data-input]'); @@ -260,18 +266,18 @@ describe('TimeInput', () => { expect(customInputs).toHaveLength(1); }); - it('throws error for "sss"', () => { + it('throws error for "sss"', async () => { muteConsole(); const renderComponent = () => render(); - expect(renderComponent).toThrow('Unsupported token: sss'); + await expect(renderComponent).rejects.toThrowError('Unsupported token: sss'); restoreConsole(); }); - it('renders "a" properly', () => { - const { container } = render(); + it('renders "a" properly', async () => { + const { container } = await render(); const componentSelect = container.querySelector('select[name="amPm"]'); const customInputs = container.querySelectorAll('input[data-input]'); @@ -281,8 +287,8 @@ describe('TimeInput', () => { }); }); - it('renders proper input separators', () => { - const { container } = render(); + it('renders proper input separators', async () => { + const { container } = await render(); const separators = container.querySelectorAll('.react-time-picker__inputGroup__divider'); @@ -292,8 +298,8 @@ describe('TimeInput', () => { expect(separators[2]).toHaveTextContent(''); // Non-breaking space }); - it('renders proper amount of separators', () => { - const { container } = render(); + it('renders proper amount of separators', async () => { + const { container } = await render(); const separators = container.querySelectorAll('.react-time-picker__inputGroup__divider'); const customInputs = container.querySelectorAll('input[data-input]'); @@ -303,7 +309,7 @@ describe('TimeInput', () => { }); it('jumps to the next field when right arrow is pressed', async () => { - const { container } = render(); + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); const hourInput = customInputs[0] as HTMLInputElement; @@ -315,7 +321,7 @@ describe('TimeInput', () => { }); it('jumps to the next field when separator key is pressed', async () => { - const { container } = render(); + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); const hourInput = customInputs[0] as HTMLInputElement; @@ -332,7 +338,7 @@ describe('TimeInput', () => { }); it('does not jump to the next field when right arrow is pressed when the last input is focused', async () => { - const { container } = render(); + const { container } = await render(); const select = container.querySelector('select') as HTMLSelectElement; @@ -342,7 +348,7 @@ describe('TimeInput', () => { }); it('jumps to the previous field when left arrow is pressed', async () => { - const { container } = render(); + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); const hourInput = customInputs[0]; @@ -354,7 +360,7 @@ describe('TimeInput', () => { }); it('does not jump to the previous field when left arrow is pressed when the first input is focused', async () => { - const { container } = render(); + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); const hourInput = customInputs[0] as HTMLInputElement; @@ -365,7 +371,7 @@ describe('TimeInput', () => { }); it("jumps to the next field when a value which can't be extended to another valid value is entered", async () => { - const { container } = render(); + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); const hourInput = customInputs[0] as HTMLInputElement; @@ -377,7 +383,7 @@ describe('TimeInput', () => { }); it('jumps to the next field when a value as long as the length of maximum value is entered', async () => { - const { container } = render(); + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); const hourInput = customInputs[0] as HTMLInputElement; @@ -388,6 +394,18 @@ describe('TimeInput', () => { expect(minuteInput).toHaveFocus(); }); + function triggerKeyDown(element: HTMLElement, { key }: { key: string }) { + element.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true })); + } + + function triggerKeyPress(element: HTMLElement, { key }: { key: string }) { + element.dispatchEvent(new KeyboardEvent('keypress', { key, bubbles: true, cancelable: true })); + } + + function triggerKeyUp(element: HTMLElement, { key }: { key: string }) { + element.dispatchEvent(new KeyboardEvent('keyup', { key, bubbles: true, cancelable: true })); + } + it("jumps to the next field when a value which can't be extended to another valid value is entered by typing with multiple keys", async () => { function getActiveElement() { return document.activeElement as HTMLInputElement; @@ -395,18 +413,18 @@ describe('TimeInput', () => { function keyDown(key: string, initial = false) { const element = getActiveElement(); - fireEvent.keyDown(element, { key }); - fireEvent.keyPress(element, { key }); + triggerKeyDown(element, { key }); + triggerKeyPress(element, { key }); element.value = (initial ? '' : element.value) + key; } function keyUp(key: string) { - fireEvent.keyUp(getActiveElement(), { key }); + triggerKeyUp(getActiveElement(), { key }); } const date = '22:17:03'; - const { container } = render(); + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); const hourInput = customInputs[0] as HTMLInputElement; @@ -426,7 +444,7 @@ describe('TimeInput', () => { }); it('does not jump the next field when a value which can be extended to another valid value is entered', async () => { - const { container } = render(); + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); const hourInput = customInputs[0] as HTMLInputElement; @@ -436,68 +454,83 @@ describe('TimeInput', () => { expect(hourInput).toHaveFocus(); }); - it('triggers onChange correctly when changed custom input', () => { + it('triggers onChange correctly when changed custom input', async () => { const onChange = vi.fn(); const date = '22:17:03'; - const { container } = render( + const { container } = await render( , ); const customInputs = container.querySelectorAll('input[data-input]'); const hourInput = customInputs[0] as HTMLInputElement; - fireEvent.change(hourInput, { target: { value: '8' } }); + await userEvent.fill(hourInput, '8'); expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalledWith('20:17:03', false); }); - it('triggers onChange correctly when cleared custom inputs', () => { + it('triggers onChange correctly when cleared custom inputs', async () => { const onChange = vi.fn(); const date = '22:17:03'; - const { container } = render( + const { container } = await render( , ); const customInputs = Array.from(container.querySelectorAll('input[data-input]')); for (const customInput of customInputs) { - fireEvent.change(customInput, { target: { value: '' } }); + await userEvent.clear(customInput); } expect(onChange).toHaveBeenCalledTimes(1); expect(onChange).toHaveBeenCalledWith(null, false); }); - it('triggers onChange correctly when changed native input', () => { + function setNativeValue(element: HTMLInputElement, value: string) { + const prototype = Object.getPrototypeOf(element); + const propertyDescriptor = Object.getOwnPropertyDescriptor(prototype, 'value'); + const prototypeValueSetter = propertyDescriptor?.set; + + if (prototypeValueSetter) { + prototypeValueSetter.call(element, value); + } + } + + function triggerChange(element: HTMLInputElement, value: string) { + setNativeValue(element, value); + element.dispatchEvent(new Event('change', { bubbles: true, cancelable: true })); + } + + it('triggers onChange correctly when changed native input', async () => { const onChange = vi.fn(); const date = '22:17:03'; - const { container } = render( + const { container } = await render( , ); const nativeInput = container.querySelector('input[type="time"]') as HTMLInputElement; - fireEvent.change(nativeInput, { target: { value: '20:17:03' } }); + triggerChange(nativeInput, '20:17:03'); expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalledWith('20:17:03', false); }); - it('triggers onChange correctly when cleared native input', () => { + it('triggers onChange correctly when cleared native input', async () => { const onChange = vi.fn(); const date = '22:17:03'; - const { container } = render( + const { container } = await render( , ); const nativeInput = container.querySelector('input[type="time"]') as HTMLInputElement; - fireEvent.change(nativeInput, { target: { value: '' } }); + triggerChange(nativeInput, ''); expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalledWith(null, false); diff --git a/packages/react-time-picker/src/TimeInput/AmPm.spec.tsx b/packages/react-time-picker/src/TimeInput/AmPm.spec.tsx index d3868f4f..c8c3c10d 100644 --- a/packages/react-time-picker/src/TimeInput/AmPm.spec.tsx +++ b/packages/react-time-picker/src/TimeInput/AmPm.spec.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { render } from '@testing-library/react'; +import { render } from 'vitest-browser-react'; import AmPm from './AmPm.js'; @@ -11,8 +11,8 @@ describe('AmPm', () => { }, } satisfies React.ComponentProps; - it('renders a select', () => { - const { container } = render(); + it('renders a select', async () => { + const { container } = await render(); const select = container.querySelector('select') as HTMLSelectElement; expect(select).toBeInTheDocument(); @@ -21,28 +21,28 @@ describe('AmPm', () => { expect(options).toHaveLength(3); }); - it('applies given aria-label properly', () => { + it('applies given aria-label properly', async () => { const amPmAriaLabel = 'Select AM/PM'; - const { container } = render(); + const { container } = await render(); const select = container.querySelector('select'); expect(select).toHaveAttribute('aria-label', amPmAriaLabel); }); - it('has proper name defined', () => { - const { container } = render(); + it('has proper name defined', async () => { + const { container } = await render(); const select = container.querySelector('select'); expect(select).toHaveAttribute('name', 'amPm'); }); - it('has proper className defined', () => { + it('has proper className defined', async () => { const className = 'react-time-picker'; - const { container } = render(); + const { container } = await render(); const select = container.querySelector('select'); @@ -50,34 +50,34 @@ describe('AmPm', () => { expect(select).toHaveClass('react-time-picker__amPm'); }); - it('displays given value properly', () => { + it('displays given value properly', async () => { const value = 'pm'; - const { container } = render(); + const { container } = await render(); const select = container.querySelector('select'); expect(select).toHaveValue(value); }); - it('does not disable select by default', () => { - const { container } = render(); + it('does not disable select by default', async () => { + const { container } = await render(); const select = container.querySelector('select'); expect(select).not.toBeDisabled(); }); - it('disables input given disabled flag', () => { - const { container } = render(); + it('disables input given disabled flag', async () => { + const { container } = await render(); const select = container.querySelector('select'); expect(select).toBeDisabled(); }); - it('should not disable anything by default', () => { - const { container } = render(); + it('should not disable anything by default', async () => { + const { container } = await render(); const select = container.querySelector('select') as HTMLSelectElement; const optionAm = select.querySelector('option[value="am"]'); @@ -87,8 +87,8 @@ describe('AmPm', () => { expect(optionPm).not.toBeDisabled(); }); - it('should disable "pm" given maxTime before 12:00 pm', () => { - const { container } = render(); + it('should disable "pm" given maxTime before 12:00 pm', async () => { + const { container } = await render(); const select = container.querySelector('select') as HTMLSelectElement; const optionPm = select.querySelector('option[value="pm"]'); @@ -96,8 +96,8 @@ describe('AmPm', () => { expect(optionPm).toBeDisabled(); }); - it('should not disable "pm" given maxTime after or equal to 12:00 pm', () => { - const { container } = render(); + it('should not disable "pm" given maxTime after or equal to 12:00 pm', async () => { + const { container } = await render(); const select = container.querySelector('select') as HTMLSelectElement; const optionPm = select.querySelector('option[value="pm"]'); @@ -105,8 +105,8 @@ describe('AmPm', () => { expect(optionPm).not.toBeDisabled(); }); - it('should disable "am" given minTime after or equal to 12:00 pm', () => { - const { container } = render(); + it('should disable "am" given minTime after or equal to 12:00 pm', async () => { + const { container } = await render(); const select = container.querySelector('select') as HTMLSelectElement; const optionAm = select.querySelector('option[value="am"]'); @@ -114,8 +114,8 @@ describe('AmPm', () => { expect(optionAm).toBeDisabled(); }); - it('should not disable "am" given minTime before 12:00 pm', () => { - const { container } = render(); + it('should not disable "am" given minTime before 12:00 pm', async () => { + const { container } = await render(); const select = container.querySelector('select') as HTMLSelectElement; const optionAm = select.querySelector('option[value="pm"]'); diff --git a/packages/react-time-picker/src/TimeInput/Hour12Input.spec.tsx b/packages/react-time-picker/src/TimeInput/Hour12Input.spec.tsx index c51b4cde..3b5e4f65 100644 --- a/packages/react-time-picker/src/TimeInput/Hour12Input.spec.tsx +++ b/packages/react-time-picker/src/TimeInput/Hour12Input.spec.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { render } from '@testing-library/react'; +import { render } from 'vitest-browser-react'; import { createRef } from 'react'; import Hour12Input from './Hour12Input.js'; @@ -13,36 +13,40 @@ describe('Hour12Input', () => { }, } satisfies React.ComponentProps; - it('renders an input', () => { - const { container } = render(); + it('renders an input', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toBeInTheDocument(); }); - it('applies given aria-label properly', () => { + it('applies given aria-label properly', async () => { const hourAriaLabel = 'Hour'; - const { container } = render(); + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('aria-label', hourAriaLabel); }); - it('applies given placeholder properly', () => { + it('applies given placeholder properly', async () => { const hourPlaceholder = 'hh'; - const { container } = render(); + const { container } = await render( + , + ); const input = container.querySelector('input'); expect(input).toHaveAttribute('placeholder', hourPlaceholder); }); - it('renders "0" given showLeadingZeros if hour is <10', () => { - const { container } = render(); + it('renders "0" given showLeadingZeros if hour is <10', async () => { + const { container } = await render( + , + ); const input = container.querySelector('input'); @@ -50,8 +54,10 @@ describe('Hour12Input', () => { expect(input).toHaveClass(`${defaultProps.className}__input--hasLeadingZero`); }); - it('does not render "0" given showLeadingZeros if hour is >=10', () => { - const { container } = render(); + it('does not render "0" given showLeadingZeros if hour is >=10', async () => { + const { container } = await render( + , + ); const input = container.querySelector('input'); @@ -59,8 +65,8 @@ describe('Hour12Input', () => { expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`); }); - it('does not render "0" if not given showLeadingZeros', () => { - const { container } = render(); + it('does not render "0" if not given showLeadingZeros', async () => { + const { container } = await render(); const input = container.querySelector('input'); @@ -68,18 +74,18 @@ describe('Hour12Input', () => { expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`); }); - it('has proper name defined', () => { - const { container } = render(); + it('has proper name defined', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('name', 'hour12'); }); - it('has proper className defined', () => { + it('has proper className defined', async () => { const className = 'react-time-picker'; - const { container } = render(); + const { container } = await render(); const input = container.querySelector('input'); @@ -87,164 +93,164 @@ describe('Hour12Input', () => { expect(input).toHaveClass('react-time-picker__hour'); }); - it('displays given value properly (am)', () => { + it('displays given value properly (am)', async () => { const value = '11'; - const { container } = render(); + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveValue(Number(value)); }); - it('displays given value properly (pm)', () => { + it('displays given value properly (pm)', async () => { const value = '22'; - const { container } = render(); + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveValue(Number(value) - 12); }); - it('does not disable input by default', () => { - const { container } = render(); + it('does not disable input by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).not.toBeDisabled(); }); - it('disables input given disabled flag', () => { - const { container } = render(); + it('disables input given disabled flag', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toBeDisabled(); }); - it('is not required input by default', () => { - const { container } = render(); + it('is not required input by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).not.toBeRequired(); }); - it('required input given required flag', () => { - const { container } = render(); + it('required input given required flag', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toBeRequired(); }); - it('handles inputRef properly', () => { + it('handles inputRef properly', async () => { const inputRef = createRef(); - render(); + await render(); expect(inputRef.current).toBeInstanceOf(HTMLInputElement); }); - it('has min = "1" by default', () => { - const { container } = render(); + it('has min = "1" by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('min', '1'); }); - it('has min = (hour in minTime) given am minTime when amPm is am', () => { - const { container } = render(); + it('has min = (hour in minTime) given am minTime when amPm is am', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('min', '5'); }); - it('has min = (hour in minTime) given pm minTime when amPm is pm', () => { - const { container } = render(); + it('has min = (hour in minTime) given pm minTime when amPm is pm', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('min', '5'); }); - it('has min = "1" given am minTime when amPm is pm', () => { - const { container } = render(); + it('has min = "1" given am minTime when amPm is pm', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('min', '1'); }); - it('has min = "1" given pm minTime when amPm is am', () => { - const { container } = render(); + it('has min = "1" given pm minTime when amPm is am', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('min', '1'); }); - it('has min = "1" given 12 am minTime when amPm is am', () => { - const { container } = render(); + it('has min = "1" given 12 am minTime when amPm is am', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('min', '1'); }); - it('has min = "1" given 12 pm minTime when amPm is pm', () => { - const { container } = render(); + it('has min = "1" given 12 pm minTime when amPm is pm', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('min', '1'); }); - it('has max = "12" by default', () => { - const { container } = render(); + it('has max = "12" by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('max', '12'); }); - it('has max = (hour in maxTime) given am maxTime when amPm is am', () => { - const { container } = render(); + it('has max = (hour in maxTime) given am maxTime when amPm is am', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('max', '5'); }); - it('has max = (hour in maxTime) given pm maxTime when amPm is pm', () => { - const { container } = render(); + it('has max = (hour in maxTime) given pm maxTime when amPm is pm', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('max', '5'); }); - it('has max = "12" given am maxTime when amPm is pm', () => { - const { container } = render(); + it('has max = "12" given am maxTime when amPm is pm', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('max', '12'); }); - it('has max = "12" given pm maxTime when amPm is am', () => { - const { container } = render(); + it('has max = "12" given pm maxTime when amPm is am', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('max', '12'); }); - it('has max = "12" given 12 pm minTime when amPm is pm', () => { - const { container } = render(); + it('has max = "12" given 12 pm minTime when amPm is pm', async () => { + const { container } = await render(); const input = container.querySelector('input'); diff --git a/packages/react-time-picker/src/TimeInput/Hour24Input.spec.tsx b/packages/react-time-picker/src/TimeInput/Hour24Input.spec.tsx index fed21e15..4c9ceb07 100644 --- a/packages/react-time-picker/src/TimeInput/Hour24Input.spec.tsx +++ b/packages/react-time-picker/src/TimeInput/Hour24Input.spec.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { render } from '@testing-library/react'; +import { render } from 'vitest-browser-react'; import { createRef } from 'react'; import Hour24Input from './Hour24Input.js'; @@ -12,36 +12,40 @@ describe('Hour24Input', () => { }, } satisfies React.ComponentProps; - it('renders an input', () => { - const { container } = render(); + it('renders an input', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toBeInTheDocument(); }); - it('applies given aria-label properly', () => { + it('applies given aria-label properly', async () => { const hourAriaLabel = 'Hour'; - const { container } = render(); + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('aria-label', hourAriaLabel); }); - it('applies given placeholder properly', () => { + it('applies given placeholder properly', async () => { const hourPlaceholder = 'Hour'; - const { container } = render(); + const { container } = await render( + , + ); const input = container.querySelector('input'); expect(input).toHaveAttribute('placeholder', hourPlaceholder); }); - it('renders "0" given showLeadingZeros if hour is <10', () => { - const { container } = render(); + it('renders "0" given showLeadingZeros if hour is <10', async () => { + const { container } = await render( + , + ); const input = container.querySelector('input'); @@ -49,8 +53,10 @@ describe('Hour24Input', () => { expect(input).toHaveClass(`${defaultProps.className}__input--hasLeadingZero`); }); - it('renders "0" given showLeadingZeros if hour is 0', () => { - const { container } = render(); + it('renders "0" given showLeadingZeros if hour is 0', async () => { + const { container } = await render( + , + ); const input = container.querySelector('input'); @@ -58,8 +64,10 @@ describe('Hour24Input', () => { expect(input).toHaveClass(`${defaultProps.className}__input--hasLeadingZero`); }); - it('does not render "0" given showLeadingZeros if hour is <10 with leading zero already', () => { - const { container } = render(); + it('does not render "0" given showLeadingZeros if hour is <10 with leading zero already', async () => { + const { container } = await render( + , + ); const input = container.querySelector('input'); @@ -67,8 +75,10 @@ describe('Hour24Input', () => { expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`); }); - it('does not render "0" given showLeadingZeros if hour is >=10', () => { - const { container } = render(); + it('does not render "0" given showLeadingZeros if hour is >=10', async () => { + const { container } = await render( + , + ); const input = container.querySelector('input'); @@ -76,8 +86,8 @@ describe('Hour24Input', () => { expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`); }); - it('does not render "0" if not given showLeadingZeros', () => { - const { container } = render(); + it('does not render "0" if not given showLeadingZeros', async () => { + const { container } = await render(); const input = container.querySelector('input'); @@ -85,18 +95,18 @@ describe('Hour24Input', () => { expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`); }); - it('has proper name defined', () => { - const { container } = render(); + it('has proper name defined', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('name', 'hour24'); }); - it('has proper className defined', () => { + it('has proper className defined', async () => { const className = 'react-time-picker'; - const { container } = render(); + const { container } = await render(); const input = container.querySelector('input'); @@ -104,82 +114,82 @@ describe('Hour24Input', () => { expect(input).toHaveClass('react-time-picker__hour'); }); - it('displays given value properly', () => { + it('displays given value properly', async () => { const value = '11'; - const { container } = render(); + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveValue(Number(value)); }); - it('does not disable input by default', () => { - const { container } = render(); + it('does not disable input by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).not.toBeDisabled(); }); - it('disables input given disabled flag', () => { - const { container } = render(); + it('disables input given disabled flag', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toBeDisabled(); }); - it('is not required input by default', () => { - const { container } = render(); + it('is not required input by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).not.toBeRequired(); }); - it('required input given required flag', () => { - const { container } = render(); + it('required input given required flag', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toBeRequired(); }); - it('handles inputRef properly', () => { + it('handles inputRef properly', async () => { const inputRef = createRef(); - render(); + await render(); expect(inputRef.current).toBeInstanceOf(HTMLInputElement); }); - it('has min = "0" by default', () => { - const { container } = render(); + it('has min = "0" by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('min', '0'); }); - it('has min = (hour in minTime) given minTime', () => { - const { container } = render(); + it('has min = (hour in minTime) given minTime', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('min', '17'); }); - it('has max = "23" by default', () => { - const { container } = render(); + it('has max = "23" by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('max', '23'); }); - it('has max = (hour in maxTime) given maxTime', () => { - const { container } = render(); + it('has max = (hour in maxTime) given maxTime', async () => { + const { container } = await render(); const input = container.querySelector('input'); diff --git a/packages/react-time-picker/src/TimeInput/MinuteInput.spec.tsx b/packages/react-time-picker/src/TimeInput/MinuteInput.spec.tsx index b86c9797..daac4ba7 100644 --- a/packages/react-time-picker/src/TimeInput/MinuteInput.spec.tsx +++ b/packages/react-time-picker/src/TimeInput/MinuteInput.spec.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { render } from '@testing-library/react'; +import { render } from 'vitest-browser-react'; import { createRef } from 'react'; import MinuteInput from './MinuteInput.js'; @@ -12,36 +12,40 @@ describe('MinuteInput', () => { }, } satisfies React.ComponentProps; - it('renders an input', () => { - const { container } = render(); + it('renders an input', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toBeInTheDocument(); }); - it('applies given aria-label properly', () => { + it('applies given aria-label properly', async () => { const minuteAriaLabel = 'Minute'; - const { container } = render(); + const { container } = await render( + , + ); const input = container.querySelector('input'); expect(input).toHaveAttribute('aria-label', minuteAriaLabel); }); - it('applies given placeholder properly', () => { + it('applies given placeholder properly', async () => { const minutePlaceholder = 'mm'; - const { container } = render(); + const { container } = await render( + , + ); const input = container.querySelector('input'); expect(input).toHaveAttribute('placeholder', minutePlaceholder); }); - it('renders "0" if minute is <10', () => { - const { container } = render(); + it('renders "0" if minute is <10', async () => { + const { container } = await render(); const input = container.querySelector('input'); @@ -49,8 +53,10 @@ describe('MinuteInput', () => { expect(input).toHaveClass(`${defaultProps.className}__input--hasLeadingZero`); }); - it('renders "0" given showLeadingZeros if minute is 0', () => { - const { container } = render(); + it('renders "0" given showLeadingZeros if minute is 0', async () => { + const { container } = await render( + , + ); const input = container.querySelector('input'); @@ -58,8 +64,10 @@ describe('MinuteInput', () => { expect(input).toHaveClass(`${defaultProps.className}__input--hasLeadingZero`); }); - it('does not render "0" given showLeadingZeros if minute is <10 with leading zero already', () => { - const { container } = render(); + it('does not render "0" given showLeadingZeros if minute is <10 with leading zero already', async () => { + const { container } = await render( + , + ); const input = container.querySelector('input'); @@ -67,8 +75,8 @@ describe('MinuteInput', () => { expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`); }); - it('does not render "0" if minute is >=10', () => { - const { container } = render(); + it('does not render "0" if minute is >=10', async () => { + const { container } = await render(); const input = container.querySelector('input'); @@ -76,18 +84,18 @@ describe('MinuteInput', () => { expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`); }); - it('has proper name defined', () => { - const { container } = render(); + it('has proper name defined', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('name', 'minute'); }); - it('has proper className defined', () => { + it('has proper className defined', async () => { const className = 'react-time-picker'; - const { container } = render(); + const { container } = await render(); const input = container.querySelector('input'); @@ -95,98 +103,98 @@ describe('MinuteInput', () => { expect(input).toHaveClass('react-time-picker__minute'); }); - it('displays given value properly', () => { + it('displays given value properly', async () => { const value = '11'; - const { container } = render(); + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveValue(Number(value)); }); - it('does not disable input by default', () => { - const { container } = render(); + it('does not disable input by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).not.toBeDisabled(); }); - it('disables input given disabled flag', () => { - const { container } = render(); + it('disables input given disabled flag', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toBeDisabled(); }); - it('is not required input by default', () => { - const { container } = render(); + it('is not required input by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).not.toBeRequired(); }); - it('required input given required flag', () => { - const { container } = render(); + it('required input given required flag', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toBeRequired(); }); - it('handles inputRef properly', () => { + it('handles inputRef properly', async () => { const inputRef = createRef(); - render(); + await render(); expect(inputRef.current).toBeInstanceOf(HTMLInputElement); }); - it('has min = "0" by default', () => { - const { container } = render(); + it('has min = "0" by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('min', '0'); }); - it('has min = "0" given minTime in a past hour', () => { - const { container } = render(); + it('has min = "0" given minTime in a past hour', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('min', '0'); }); - it('has min = (minute in minTime) given minTime in a current hour', () => { - const { container } = render(); + it('has min = (minute in minTime) given minTime in a current hour', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('min', '40'); }); - it('has max = "59" by default', () => { - const { container } = render(); + it('has max = "59" by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('max', '59'); }); - it('has max = "59" given maxTime in a future hour', () => { - const { container } = render(); + it('has max = "59" given maxTime in a future hour', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('max', '59'); }); - it('has max = (minute in maxHour) given maxTime in a current hour', () => { - const { container } = render(); + it('has max = (minute in maxHour) given maxTime in a current hour', async () => { + const { container } = await render(); const input = container.querySelector('input'); diff --git a/packages/react-time-picker/src/TimeInput/NativeInput.spec.tsx b/packages/react-time-picker/src/TimeInput/NativeInput.spec.tsx index 665cb2cd..550c8998 100644 --- a/packages/react-time-picker/src/TimeInput/NativeInput.spec.tsx +++ b/packages/react-time-picker/src/TimeInput/NativeInput.spec.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { render } from '@testing-library/react'; +import { render } from 'vitest-browser-react'; import NativeInput from './NativeInput.js'; @@ -11,18 +11,18 @@ describe('NativeInput', () => { valueType: 'second', } satisfies React.ComponentProps; - it('renders an input', () => { - const { container } = render(); + it('renders an input', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toBeInTheDocument(); }); - it('applies given aria-label properly', () => { + it('applies given aria-label properly', async () => { const nativeInputAriaLabel = 'Date'; - const { container } = render( + const { container } = await render( , ); @@ -31,10 +31,10 @@ describe('NativeInput', () => { expect(input).toHaveAttribute('aria-label', nativeInputAriaLabel); }); - it('has proper name defined', () => { + it('has proper name defined', async () => { const name = 'testName'; - const { container } = render(); + const { container } = await render(); const input = container.querySelector('input'); @@ -46,52 +46,55 @@ describe('NativeInput', () => { ${'second'} | ${'22:17:41'} ${'minute'} | ${'22:17'} ${'hour'} | ${'22:00'} - `('displays given value properly if valueType is $valueType', ({ valueType, parsedValue }) => { - const value = '22:17:41'; + `( + 'displays given value properly if valueType is $valueType', + async ({ valueType, parsedValue }) => { + const value = '22:17:41'; - const { container } = render( - , - ); + const { container } = await render( + , + ); - const input = container.querySelector('input'); + const input = container.querySelector('input'); - expect(input).toHaveValue(parsedValue); - }); + expect(input).toHaveValue(parsedValue); + }, + ); - it('does not disable input by default', () => { - const { container } = render(); + it('does not disable input by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).not.toBeDisabled(); }); - it('disables input given disabled flag', () => { - const { container } = render(); + it('disables input given disabled flag', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toBeDisabled(); }); - it('is not required input by default', () => { - const { container } = render(); + it('is not required input by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).not.toBeRequired(); }); - it('required input given required flag', () => { - const { container } = render(); + it('required input given required flag', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toBeRequired(); }); - it('has no min by default', () => { - const { container } = render(); + it('has no min by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); @@ -105,8 +108,8 @@ describe('NativeInput', () => { ${'hour'} | ${'22:00'} `( 'has proper min for minTime which is a full hour if valueType is $valueType', - ({ valueType, parsedMin }) => { - const { container } = render( + async ({ valueType, parsedMin }) => { + const { container } = await render( , ); @@ -123,8 +126,8 @@ describe('NativeInput', () => { ${'hour'} | ${'22:00'} `( 'has proper min for minTime which is not a full hour if valueType is $valueType', - ({ valueType, parsedMin }) => { - const { container } = render( + async ({ valueType, parsedMin }) => { + const { container } = await render( , ); @@ -134,8 +137,8 @@ describe('NativeInput', () => { }, ); - it('has no max by default', () => { - const { container } = render(); + it('has no max by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); @@ -149,8 +152,8 @@ describe('NativeInput', () => { ${'hour'} | ${'22:00'} `( 'has proper max for maxTime which is a full hour if valueType is $valueType', - ({ valueType, parsedMax }) => { - const { container } = render( + async ({ valueType, parsedMax }) => { + const { container } = await render( , ); @@ -167,8 +170,8 @@ describe('NativeInput', () => { ${'hour'} | ${'22:00'} `( 'has proper max for maxTime which is not a full hour if valueType is $valueType', - ({ valueType, parsedMax }) => { - const { container } = render( + async ({ valueType, parsedMax }) => { + const { container } = await render( , ); diff --git a/packages/react-time-picker/src/TimeInput/SecondInput.spec.tsx b/packages/react-time-picker/src/TimeInput/SecondInput.spec.tsx index 576cc278..e010271c 100644 --- a/packages/react-time-picker/src/TimeInput/SecondInput.spec.tsx +++ b/packages/react-time-picker/src/TimeInput/SecondInput.spec.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { render } from '@testing-library/react'; +import { render } from 'vitest-browser-react'; import { createRef } from 'react'; import SecondInput from './SecondInput.js'; @@ -12,36 +12,40 @@ describe('SecondInput', () => { }, } satisfies React.ComponentProps; - it('renders an input', () => { - const { container } = render(); + it('renders an input', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toBeInTheDocument(); }); - it('applies given aria-label properly', () => { + it('applies given aria-label properly', async () => { const secondAriaLabel = 'Second'; - const { container } = render(); + const { container } = await render( + , + ); const input = container.querySelector('input'); expect(input).toHaveAttribute('aria-label', secondAriaLabel); }); - it('applies given placeholder properly', () => { + it('applies given placeholder properly', async () => { const secondPlaceholder = 'ss'; - const { container } = render(); + const { container } = await render( + , + ); const input = container.querySelector('input'); expect(input).toHaveAttribute('placeholder', secondPlaceholder); }); - it('renders "0" if second is <10', () => { - const { container } = render(); + it('renders "0" if second is <10', async () => { + const { container } = await render(); const input = container.querySelector('input'); @@ -49,8 +53,10 @@ describe('SecondInput', () => { expect(input).toHaveClass(`${defaultProps.className}__input--hasLeadingZero`); }); - it('renders "0" given showLeadingZeros if second is 0', () => { - const { container } = render(); + it('renders "0" given showLeadingZeros if second is 0', async () => { + const { container } = await render( + , + ); const input = container.querySelector('input'); @@ -58,8 +64,10 @@ describe('SecondInput', () => { expect(input).toHaveClass(`${defaultProps.className}__input--hasLeadingZero`); }); - it('does not render "0" given showLeadingZeros if second is <10 with leading zero already', () => { - const { container } = render(); + it('does not render "0" given showLeadingZeros if second is <10 with leading zero already', async () => { + const { container } = await render( + , + ); const input = container.querySelector('input'); @@ -67,8 +75,8 @@ describe('SecondInput', () => { expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`); }); - it('does not render "0" if second is >=10', () => { - const { container } = render(); + it('does not render "0" if second is >=10', async () => { + const { container } = await render(); const input = container.querySelector('input'); @@ -76,18 +84,18 @@ describe('SecondInput', () => { expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`); }); - it('has proper name defined', () => { - const { container } = render(); + it('has proper name defined', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('name', 'second'); }); - it('has proper className defined', () => { + it('has proper className defined', async () => { const className = 'react-time-picker'; - const { container } = render(); + const { container } = await render(); const input = container.querySelector('input'); @@ -95,66 +103,66 @@ describe('SecondInput', () => { expect(input).toHaveClass('react-time-picker__second'); }); - it('displays given value properly', () => { + it('displays given value properly', async () => { const value = '11'; - const { container } = render(); + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveValue(Number(value)); }); - it('does not disable input by default', () => { - const { container } = render(); + it('does not disable input by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).not.toBeDisabled(); }); - it('disables input given disabled flag', () => { - const { container } = render(); + it('disables input given disabled flag', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toBeDisabled(); }); - it('is not required input by default', () => { - const { container } = render(); + it('is not required input by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).not.toBeRequired(); }); - it('required input given required flag', () => { - const { container } = render(); + it('required input given required flag', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toBeRequired(); }); - it('handles inputRef properly', () => { + it('handles inputRef properly', async () => { const inputRef = createRef(); - render(); + await render(); expect(inputRef.current).toBeInstanceOf(HTMLInputElement); }); - it('has min = "0" by default', () => { - const { container } = render(); + it('has min = "0" by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('min', '0'); }); - it('has min = "0" given minDate in a past minute', () => { - const { container } = render( + it('has min = "0" given minDate in a past minute', async () => { + const { container } = await render( , ); @@ -163,8 +171,8 @@ describe('SecondInput', () => { expect(input).toHaveAttribute('min', '0'); }); - it('has min = (second in minTime) given minTime in a current minute', () => { - const { container } = render( + it('has min = (second in minTime) given minTime in a current minute', async () => { + const { container } = await render( , ); @@ -173,16 +181,16 @@ describe('SecondInput', () => { expect(input).toHaveAttribute('min', '15'); }); - it('has max = "59" by default', () => { - const { container } = render(); + it('has max = "59" by default', async () => { + const { container } = await render(); const input = container.querySelector('input'); expect(input).toHaveAttribute('max', '59'); }); - it('has max = "59" given maxTime in a future minute', () => { - const { container } = render( + it('has max = "59" given maxTime in a future minute', async () => { + const { container } = await render( , ); @@ -191,8 +199,8 @@ describe('SecondInput', () => { expect(input).toHaveAttribute('max', '59'); }); - it('has max = (second in maxHour) given maxTime in a current minute', () => { - const { container } = render( + it('has max = (second in maxHour) given maxTime in a current minute', async () => { + const { container } = await render( , ); diff --git a/packages/react-time-picker/src/TimePicker.spec.tsx b/packages/react-time-picker/src/TimePicker.spec.tsx index 36936554..4053ecb6 100644 --- a/packages/react-time-picker/src/TimePicker.spec.tsx +++ b/packages/react-time-picker/src/TimePicker.spec.tsx @@ -1,6 +1,7 @@ import { describe, expect, it, vi } from 'vitest'; import { userEvent } from 'vitest/browser'; -import { act, fireEvent, render, waitFor, waitForElementToBeRemoved } from '@testing-library/react'; +import { render } from 'vitest-browser-react'; +import { act } from 'react-dom/test-utils'; import TimePicker from './TimePicker.js'; @@ -8,53 +9,49 @@ async function waitForElementToBeRemovedOrHidden(callback: () => HTMLElement | n const element = callback(); if (element) { - try { - await waitFor(() => - expect(element).toHaveAttribute('class', expect.stringContaining('--closed')), - ); - } catch { - await waitForElementToBeRemoved(element); - } + await vi.waitFor(() => + expect(element).toHaveAttribute('class', expect.stringContaining('--closed')), + ); } } describe('TimePicker', () => { - it('passes default name to TimeInput', () => { - const { container } = render(); + it('passes default name to TimeInput', async () => { + const { container } = await render(); const nativeInput = container.querySelector('input[type="time"]'); expect(nativeInput).toHaveAttribute('name', 'time'); }); - it('passes custom name to TimeInput', () => { + it('passes custom name to TimeInput', async () => { const name = 'testName'; - const { container } = render(); + const { container } = await render(); const nativeInput = container.querySelector('input[type="time"]'); expect(nativeInput).toHaveAttribute('name', name); }); - it('passes autoFocus flag to TimeInput', () => { - const { container } = render(); + it('passes autoFocus flag to TimeInput', async () => { + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); expect(customInputs[0]).toHaveFocus(); }); - it('passes disabled flag to TimeInput', () => { - const { container } = render(); + it('passes disabled flag to TimeInput', async () => { + const { container } = await render(); const nativeInput = container.querySelector('input[type="time"]'); expect(nativeInput).toBeDisabled(); }); - it('passes format to TimeInput', () => { - const { container } = render(); + it('passes format to TimeInput', async () => { + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); @@ -62,7 +59,7 @@ describe('TimePicker', () => { expect(customInputs[0]).toHaveAttribute('name', 'second'); }); - it('passes aria-label props to TimeInput', () => { + it('passes aria-label props to TimeInput', async () => { const ariaLabelProps = { amPmAriaLabel: 'Select AM/PM', clearAriaLabel: 'Clear value', @@ -73,7 +70,7 @@ describe('TimePicker', () => { secondAriaLabel: 'Second', }; - const { container } = render(); + const { container } = await render(); const clockButton = container.querySelector('button.react-time-picker__clock-button'); const clearButton = container.querySelector('button.react-time-picker__clear-button'); @@ -96,14 +93,14 @@ describe('TimePicker', () => { expect(secondInput).toHaveAttribute('aria-label', ariaLabelProps.secondAriaLabel); }); - it('passes placeholder props to TimeInput', () => { + it('passes placeholder props to TimeInput', async () => { const placeholderProps = { hourPlaceholder: 'hh', minutePlaceholder: 'mm', secondPlaceholder: 'ss', }; - const { container } = render(); + const { container } = await render(); const hourInput = container.querySelector('input[name="hour12"]'); const minuteInput = container.querySelector('input[name="minute"]'); @@ -115,21 +112,21 @@ describe('TimePicker', () => { }); describe('passes value to TimeInput', () => { - it('passes single value to TimeInput', () => { + it('passes single value to TimeInput', async () => { const value = new Date(2019, 0, 1); - const { container } = render(); + const { container } = await render(); const nativeInput = container.querySelector('input[type="time"]'); expect(nativeInput).toHaveValue('00:00'); }); - it('passes the first item of an array of values to TimeInput', () => { + it('passes the first item of an array of values to TimeInput', async () => { const value1 = new Date(2019, 0, 1); const value2 = new Date(2019, 6, 1); - const { container } = render(); + const { container } = await render(); const nativeInput = container.querySelector('input[type="time"]'); @@ -137,36 +134,38 @@ describe('TimePicker', () => { }); }); - it('applies className to its wrapper when given a string', () => { + it('applies className to its wrapper when given a string', async () => { const className = 'testClassName'; - const { container } = render(); + const { container } = await render(); const wrapper = container.firstElementChild; expect(wrapper).toHaveClass(className); }); - it('applies "--open" className to its wrapper when given isOpen flag', () => { - const { container } = render(); + it('applies "--open" className to its wrapper when given isOpen flag', async () => { + const { container } = await render(); const wrapper = container.firstElementChild; expect(wrapper).toHaveClass('react-time-picker--open'); }); - it('applies clock className to the clock when given a string', () => { + it('applies clock className to the clock when given a string', async () => { const clockClassName = 'testClassName'; - const { container } = render(); + const { container } = await render( + , + ); const clock = container.querySelector('.react-clock'); expect(clock).toHaveClass(clockClassName); }); - it('renders TimeInput component', () => { - const { container } = render(); + it('renders TimeInput component', async () => { + const { container } = await render(); const nativeInput = container.querySelector('input[type="time"]'); @@ -174,16 +173,16 @@ describe('TimePicker', () => { }); describe('renders clear button properly', () => { - it('renders clear button', () => { - const { container } = render(); + it('renders clear button', async () => { + const { container } = await render(); const clearButton = container.querySelector('button.react-time-picker__clear-button'); expect(clearButton).toBeInTheDocument(); }); - it('renders clear icon by default when clearIcon is not given', () => { - const { container } = render(); + it('renders clear icon by default when clearIcon is not given', async () => { + const { container } = await render(); const clearButton = container.querySelector( 'button.react-time-picker__clear-button', @@ -194,32 +193,32 @@ describe('TimePicker', () => { expect(clearIcon).toBeInTheDocument(); }); - it('renders clear icon when given clearIcon as a string', () => { - const { container } = render(); + it('renders clear icon when given clearIcon as a string', async () => { + const { container } = await render(); const clearButton = container.querySelector('button.react-time-picker__clear-button'); expect(clearButton).toHaveTextContent('❌'); }); - it('renders clear icon when given clearIcon as a React element', () => { + it('renders clear icon when given clearIcon as a React element', async () => { function ClearIcon() { return <>❌; } - const { container } = render(} />); + const { container } = await render(} />); const clearButton = container.querySelector('button.react-time-picker__clear-button'); expect(clearButton).toHaveTextContent('❌'); }); - it('renders clear icon when given clearIcon as a function', () => { + it('renders clear icon when given clearIcon as a function', async () => { function ClearIcon() { return <>❌; } - const { container } = render(); + const { container } = await render(); const clearButton = container.querySelector('button.react-time-picker__clear-button'); @@ -228,16 +227,16 @@ describe('TimePicker', () => { }); describe('renders clock button properly', () => { - it('renders clock button', () => { - const { container } = render(); + it('renders clock button', async () => { + const { container } = await render(); const clockButton = container.querySelector('button.react-time-picker__clock-button'); expect(clockButton).toBeInTheDocument(); }); - it('renders clock icon by default when clockIcon is not given', () => { - const { container } = render(); + it('renders clock icon by default when clockIcon is not given', async () => { + const { container } = await render(); const clockButton = container.querySelector( 'button.react-time-picker__clock-button', @@ -248,32 +247,32 @@ describe('TimePicker', () => { expect(clockIcon).toBeInTheDocument(); }); - it('renders clock icon when given clockIcon as a string', () => { - const { container } = render(); + it('renders clock icon when given clockIcon as a string', async () => { + const { container } = await render(); const clockButton = container.querySelector('button.react-time-picker__clock-button'); expect(clockButton).toHaveTextContent('🕒'); }); - it('renders clock icon when given clockIcon as a React element', () => { + it('renders clock icon when given clockIcon as a React element', async () => { function ClockIcon() { return <>🕒; } - const { container } = render(} />); + const { container } = await render(} />); const clockButton = container.querySelector('button.react-time-picker__clock-button'); expect(clockButton).toHaveTextContent('🕒'); }); - it('renders clock icon when given clockIcon as a function', () => { + it('renders clock icon when given clockIcon as a function', async () => { function ClockIcon() { return <>🕒; } - const { container } = render(); + const { container } = await render(); const clockButton = container.querySelector('button.react-time-picker__clock-button'); @@ -281,24 +280,24 @@ describe('TimePicker', () => { }); }); - it('renders Clock component when given isOpen flag', () => { - const { container } = render(); + it('renders Clock component when given isOpen flag', async () => { + const { container } = await render(); const clock = container.querySelector('.react-clock'); expect(clock).toBeInTheDocument(); }); - it('does not render Clock component when given disableClock & isOpen flags', () => { - const { container } = render(); + it('does not render Clock component when given disableClock & isOpen flags', async () => { + const { container } = await render(); const clock = container.querySelector('.react-clock'); expect(clock).toBeFalsy(); }); - it('opens Clock component when given isOpen flag by changing props', () => { - const { container, rerender } = render(); + it('opens Clock component when given isOpen flag by changing props', async () => { + const { container, rerender } = await render(); const clock = container.querySelector('.react-clock'); @@ -311,8 +310,8 @@ describe('TimePicker', () => { expect(clock2).toBeInTheDocument(); }); - it('opens Clock component when clicking on a button', () => { - const { container } = render(); + it('opens Clock component when clicking on a button', async () => { + const { container } = await render(); const clock = container.querySelector('.react-clock'); const button = container.querySelector( @@ -321,85 +320,105 @@ describe('TimePicker', () => { expect(clock).toBeFalsy(); - fireEvent.click(button); + await userEvent.click(button); const clock2 = container.querySelector('.react-clock'); expect(clock2).toBeInTheDocument(); }); + function triggerFocusInEvent(element: HTMLElement) { + element.dispatchEvent( + new FocusEvent('focusin', { bubbles: true, cancelable: false, composed: true }), + ); + } + + function triggerFocusEvent(element: HTMLElement) { + triggerFocusInEvent(element); + + element.dispatchEvent( + new FocusEvent('focus', { bubbles: false, cancelable: false, composed: true }), + ); + } + describe('handles opening Clock component when focusing on an input inside properly', () => { - it('opens Clock component when focusing on an input inside by default', () => { - const { container } = render(); + it('opens Clock component when focusing on an input inside by default', async () => { + const { container } = await render(); const clock = container.querySelector('.react-clock'); const input = container.querySelector('input[name^="hour"]') as HTMLInputElement; expect(clock).toBeFalsy(); - fireEvent.focus(input); + act(() => { + triggerFocusEvent(input); + }); const clock2 = container.querySelector('.react-clock'); expect(clock2).toBeInTheDocument(); }); - it('opens Clock component when focusing on an input inside given openClockOnFocus = true', () => { - const { container } = render(); + it('opens Clock component when focusing on an input inside given openClockOnFocus = true', async () => { + const { container } = await render(); const clock = container.querySelector('.react-clock'); const input = container.querySelector('input[name^="hour"]') as HTMLInputElement; expect(clock).toBeFalsy(); - fireEvent.focus(input); + act(() => { + triggerFocusEvent(input); + }); const clock2 = container.querySelector('.react-clock'); expect(clock2).toBeInTheDocument(); }); - it('does not open Clock component when focusing on an input inside given openClockOnFocus = false', () => { - const { container } = render(); + it('does not open Clock component when focusing on an input inside given openClockOnFocus = false', async () => { + const { container } = await render(); const clock = container.querySelector('.react-clock'); const input = container.querySelector('input[name^="hour"]') as HTMLInputElement; expect(clock).toBeFalsy(); - fireEvent.focus(input); + act(() => { + triggerFocusEvent(input); + }); const clock2 = container.querySelector('.react-clock'); expect(clock2).toBeFalsy(); }); - it('does not open Clock when focusing on an input inside given shouldOpenCalendar function returning false', () => { + it('does not open Clock when focusing on an input inside given shouldOpenCalendar function returning false', async () => { const shouldOpenClock = () => false; - const { container } = render(); + const { container } = await render(); const clock = container.querySelector('.react-clock'); const input = container.querySelector('input[name^="hour"]') as HTMLInputElement; expect(clock).toBeFalsy(); - fireEvent.focus(input); + triggerFocusEvent(input); const clock2 = container.querySelector('.react-clock'); expect(clock2).toBeFalsy(); }); - it('does not open Clock component when focusing on a select element', () => { - const { container } = render(); + it('does not open Clock component when focusing on a select element', async () => { + const { container } = await render(); const clock = container.querySelector('.react-clock'); const select = container.querySelector('select[name="amPm"]') as HTMLSelectElement; expect(clock).toBeFalsy(); - fireEvent.focus(select); + triggerFocusEvent(select); const clock2 = container.querySelector('.react-clock'); @@ -408,7 +427,7 @@ describe('TimePicker', () => { }); it('closes Clock component when clicked outside', async () => { - const { container } = render(); + const { container } = await render(); await userEvent.click(document.body); @@ -420,7 +439,7 @@ describe('TimePicker', () => { it('does not close Clock clicked outside with shouldCloseClock function returning false', async () => { const shouldCloseClock = () => false; - const { container } = render(); + const { container } = await render(); await userEvent.click(document.body); @@ -430,47 +449,65 @@ describe('TimePicker', () => { }); it('closes Clock component when focused outside', async () => { - const { container } = render(); + const { container } = await render(); - fireEvent.focusIn(document.body); + triggerFocusInEvent(document.body); await waitForElementToBeRemovedOrHidden(() => container.querySelector('.react-time-picker__clock'), ); }); + function triggerTouchStart(element: HTMLElement) { + element.dispatchEvent(new TouchEvent('touchstart', { bubbles: true, cancelable: true })); + } + it('closes Clock component when tapped outside', async () => { - const { container } = render(); + const { container } = await render(); - fireEvent.touchStart(document.body); + triggerTouchStart(document.body); await waitForElementToBeRemovedOrHidden(() => container.querySelector('.react-time-picker__clock'), ); }); - it('does not close Clock component when focused inside', () => { - const { container } = render(); + function triggerFocusOutEvent(element: HTMLElement) { + element.dispatchEvent( + new FocusEvent('focusout', { bubbles: true, cancelable: false, composed: true }), + ); + } + + function triggerBlurEvent(element: HTMLElement) { + triggerFocusOutEvent(element); + + element.dispatchEvent( + new FocusEvent('blur', { bubbles: false, cancelable: false, composed: true }), + ); + } + + it('does not close Clock component when focused inside', async () => { + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); const hourInput = customInputs[0] as HTMLInputElement; const minuteInput = customInputs[1] as HTMLInputElement; - fireEvent.blur(hourInput); - fireEvent.focus(minuteInput); + triggerBlurEvent(hourInput); + triggerFocusEvent(minuteInput); const clock = container.querySelector('.react-clock'); expect(clock).toBeInTheDocument(); }); - it('does not close Clock when changing value', () => { - const { container } = render(); + it('does not close Clock when changing value', async () => { + const { container } = await render(); const hourInput = container.querySelector('input[name="hour12"]') as HTMLInputElement; - act(() => { - fireEvent.change(hourInput, { target: { value: '9' } }); + await act(async () => { + await userEvent.fill(hourInput, '9'); }); const clock = container.querySelector('.react-clock'); @@ -478,44 +515,44 @@ describe('TimePicker', () => { expect(clock).toBeInTheDocument(); }); - it('calls onChange callback when changing value', () => { + it('calls onChange callback when changing value', async () => { const value = '22:41:28'; const onChange = vi.fn(); - const { container } = render( + const { container } = await render( , ); const hourInput = container.querySelector('input[name="hour12"]') as HTMLInputElement; - act(() => { - fireEvent.change(hourInput, { target: { value: '9' } }); + await act(async () => { + await userEvent.fill(hourInput, '9'); }); expect(onChange).toHaveBeenCalledWith('21:41:28'); }); - it('calls onInvalidChange callback when changing value to an invalid one', () => { + it('calls onInvalidChange callback when changing value to an invalid one', async () => { const value = '22:41:28'; const onInvalidChange = vi.fn(); - const { container } = render( + const { container } = await render( , ); const hourInput = container.querySelector('input[name="hour12"]') as HTMLInputElement; - act(() => { - fireEvent.change(hourInput, { target: { value: '99' } }); + await act(async () => { + await userEvent.fill(hourInput, '99'); }); expect(onInvalidChange).toHaveBeenCalled(); }); - it('clears the value when clicking on a button', () => { + it('clears the value when clicking on a button', async () => { const onChange = vi.fn(); - const { container } = render(); + const { container } = await render(); const clock = container.querySelector('.react-clock'); const button = container.querySelector( @@ -524,29 +561,30 @@ describe('TimePicker', () => { expect(clock).toBeFalsy(); - fireEvent.click(button); + await userEvent.click(button); expect(onChange).toHaveBeenCalledWith(null); }); - it('calls onClick callback when clicked a page (sample of mouse events family)', () => { + it('calls onClick callback when clicked a page (sample of mouse events family)', async () => { const onClick = vi.fn(); - const { container } = render(); + const { container } = await render(); const wrapper = container.firstElementChild as HTMLDivElement; - fireEvent.click(wrapper); + await userEvent.click(wrapper); expect(onClick).toHaveBeenCalled(); }); - it('calls onTouchStart callback when touched a page (sample of touch events family)', () => { + it('calls onTouchStart callback when touched a page (sample of touch events family)', async () => { const onTouchStart = vi.fn(); - const { container } = render(); + const { container } = await render(); const wrapper = container.firstElementChild as HTMLDivElement; - fireEvent.touchStart(wrapper); + + triggerTouchStart(wrapper); expect(onTouchStart).toHaveBeenCalled(); }); diff --git a/packages/react-time-picker/vitest.config.ts b/packages/react-time-picker/vitest.config.ts index 9d9dac85..485ff07a 100644 --- a/packages/react-time-picker/vitest.config.ts +++ b/packages/react-time-picker/vitest.config.ts @@ -11,7 +11,6 @@ const config: ViteUserConfig = defineConfig({ instances: [{ browser: 'chromium' }], provider: playwright(), }, - setupFiles: 'vitest.setup.ts', watch: false, }, }); diff --git a/packages/react-time-picker/vitest.setup.ts b/packages/react-time-picker/vitest.setup.ts deleted file mode 100644 index 97650fd9..00000000 --- a/packages/react-time-picker/vitest.setup.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { afterEach } from 'vitest'; -import { cleanup } from '@testing-library/react'; -import '@testing-library/jest-dom/vitest'; - -afterEach(() => { - cleanup(); -}); diff --git a/yarn.lock b/yarn.lock index 386c0b61..fc229d92 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5,13 +5,6 @@ __metadata: version: 8 cacheKey: 10c0 -"@adobe/css-tools@npm:^4.3.1": - version: 4.3.2 - resolution: "@adobe/css-tools@npm:4.3.2" - checksum: 10c0/296a03dd29f227c60500d2da8c7f64991fecf1d8b456ce2b4adb8cec7363d9c08b5b03f1463673fc8cbfe54b538745588e7a13c736d2dd14a80c01a20f127f39 - languageName: node - linkType: hard - "@ampproject/remapping@npm:^2.2.0": version: 2.3.0 resolution: "@ampproject/remapping@npm:2.3.0" @@ -22,7 +15,7 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.27.1": +"@babel/code-frame@npm:^7.27.1": version: 7.27.1 resolution: "@babel/code-frame@npm:7.27.1" dependencies: @@ -183,13 +176,6 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.9.2": - version: 7.27.6 - resolution: "@babel/runtime@npm:7.27.6" - checksum: 10c0/89726be83f356f511dcdb74d3ea4d873a5f0cf0017d4530cb53aa27380c01ca102d573eff8b8b77815e624b1f8c24e7f0311834ad4fb632c90a770fda00bd4c8 - languageName: node - linkType: hard - "@babel/template@npm:^7.27.2": version: 7.27.2 resolution: "@babel/template@npm:7.27.2" @@ -781,79 +767,6 @@ __metadata: languageName: node linkType: hard -"@testing-library/dom@npm:^10.0.0": - version: 10.4.1 - resolution: "@testing-library/dom@npm:10.4.1" - dependencies: - "@babel/code-frame": "npm:^7.10.4" - "@babel/runtime": "npm:^7.12.5" - "@types/aria-query": "npm:^5.0.1" - aria-query: "npm:5.3.0" - dom-accessibility-api: "npm:^0.5.9" - lz-string: "npm:^1.5.0" - picocolors: "npm:1.1.1" - pretty-format: "npm:^27.0.2" - checksum: 10c0/19ce048012d395ad0468b0dbcc4d0911f6f9e39464d7a8464a587b29707eed5482000dad728f5acc4ed314d2f4d54f34982999a114d2404f36d048278db815b1 - languageName: node - linkType: hard - -"@testing-library/jest-dom@npm:^6.0.0": - version: 6.1.4 - resolution: "@testing-library/jest-dom@npm:6.1.4" - dependencies: - "@adobe/css-tools": "npm:^4.3.1" - "@babel/runtime": "npm:^7.9.2" - aria-query: "npm:^5.0.0" - chalk: "npm:^3.0.0" - css.escape: "npm:^1.5.1" - dom-accessibility-api: "npm:^0.5.6" - lodash: "npm:^4.17.15" - redent: "npm:^3.0.0" - peerDependencies: - "@jest/globals": ">= 28" - "@types/jest": ">= 28" - jest: ">= 28" - vitest: ">= 0.32" - peerDependenciesMeta: - "@jest/globals": - optional: true - "@types/jest": - optional: true - jest: - optional: true - vitest: - optional: true - checksum: 10c0/2e23f120613fd8ae6d5169bbc94f1a2e4c82b07182057dc94db8ec54ebf32555833442e6c43a187e59715d83704ffb5df49ba88a71f6f32d2683f3d95ba721c7 - languageName: node - linkType: hard - -"@testing-library/react@npm:^16.0.0": - version: 16.0.0 - resolution: "@testing-library/react@npm:16.0.0" - dependencies: - "@babel/runtime": "npm:^7.12.5" - peerDependencies: - "@testing-library/dom": ^10.0.0 - "@types/react": ^18.0.0 - "@types/react-dom": ^18.0.0 - react: ^18.0.0 - react-dom: ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - "@types/react-dom": - optional: true - checksum: 10c0/297f97bf4722dad05f11d9cafd47d387dbdb096fea4b79b876c7466460f0f2e345b55b81b3e37fc81ed8185c528cb53dd8455ca1b6b019b229edf6c796f11c9f - languageName: node - linkType: hard - -"@types/aria-query@npm:^5.0.1": - version: 5.0.1 - resolution: "@types/aria-query@npm:5.0.1" - checksum: 10c0/bc9e40ce37bd3a1654948778c7829bd55aea1bc5f2cd06fcf6cd650b07bb388995799e9aab6e2d93a6cf55dcba3b85c155f7ba93adefcc7c2e152fc6057061b5 - languageName: node - linkType: hard - "@types/babel__core@npm:^7.20.5": version: 7.20.5 resolution: "@types/babel__core@npm:7.20.5" @@ -1137,7 +1050,7 @@ __metadata: languageName: node linkType: hard -"ansi-styles@npm:^4.0.0, ansi-styles@npm:^4.1.0": +"ansi-styles@npm:^4.0.0": version: 4.3.0 resolution: "ansi-styles@npm:4.3.0" dependencies: @@ -1146,13 +1059,6 @@ __metadata: languageName: node linkType: hard -"ansi-styles@npm:^5.0.0": - version: 5.2.0 - resolution: "ansi-styles@npm:5.2.0" - checksum: 10c0/9c4ca80eb3c2fb7b33841c210d2f20807f40865d27008d7c3f707b7f95cab7d67462a565e2388ac3285b71cb3d9bb2173de8da37c57692a362885ec34d6e27df - languageName: node - linkType: hard - "ansi-styles@npm:^6.1.0": version: 6.2.1 resolution: "ansi-styles@npm:6.2.1" @@ -1160,15 +1066,6 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:5.3.0, aria-query@npm:^5.0.0": - version: 5.3.0 - resolution: "aria-query@npm:5.3.0" - dependencies: - dequal: "npm:^2.0.3" - checksum: 10c0/2bff0d4eba5852a9dd578ecf47eaef0e82cc52569b48469b0aac2db5145db0b17b7a58d9e01237706d1e14b7a1b0ac9b78e9c97027ad97679dd8f91b85da1469 - languageName: node - linkType: hard - "arrify@npm:^3.0.0": version: 3.0.0 resolution: "arrify@npm:3.0.0" @@ -1249,16 +1146,6 @@ __metadata: languageName: node linkType: hard -"chalk@npm:^3.0.0": - version: 3.0.0 - resolution: "chalk@npm:3.0.0" - dependencies: - ansi-styles: "npm:^4.1.0" - supports-color: "npm:^7.1.0" - checksum: 10c0/ee650b0a065b3d7a6fda258e75d3a86fc8e4effa55871da730a9e42ccb035bf5fd203525e5a1ef45ec2582ecc4f65b47eb11357c526b84dd29a14fb162c414d2 - languageName: node - linkType: hard - "chownr@npm:^3.0.0": version: 3.0.0 resolution: "chownr@npm:3.0.0" @@ -1355,13 +1242,6 @@ __metadata: languageName: node linkType: hard -"css.escape@npm:^1.5.1": - version: 1.5.1 - resolution: "css.escape@npm:1.5.1" - checksum: 10c0/5e09035e5bf6c2c422b40c6df2eb1529657a17df37fda5d0433d722609527ab98090baf25b13970ca754079a0f3161dd3dfc0e743563ded8cfa0749d861c1525 - languageName: node - linkType: hard - "csstype@npm:^3.0.2": version: 3.1.1 resolution: "csstype@npm:3.1.1" @@ -1381,13 +1261,6 @@ __metadata: languageName: node linkType: hard -"dequal@npm:^2.0.3": - version: 2.0.3 - resolution: "dequal@npm:2.0.3" - checksum: 10c0/f98860cdf58b64991ae10205137c0e97d384c3a4edc7f807603887b7c4b850af1224a33d88012009f150861cbee4fa2d322c4cc04b9313bee312e47f6ecaa888 - languageName: node - linkType: hard - "detect-element-overflow@npm:^2.0.0": version: 2.0.0 resolution: "detect-element-overflow@npm:2.0.0" @@ -1404,13 +1277,6 @@ __metadata: languageName: node linkType: hard -"dom-accessibility-api@npm:^0.5.6, dom-accessibility-api@npm:^0.5.9": - version: 0.5.16 - resolution: "dom-accessibility-api@npm:0.5.16" - checksum: 10c0/b2c2eda4fae568977cdac27a9f0c001edf4f95a6a6191dfa611e3721db2478d1badc01db5bb4fa8a848aeee13e442a6c2a4386d65ec65a1436f24715a2f8d053 - languageName: node - linkType: hard - "eastasianwidth@npm:^0.2.0": version: 0.2.0 resolution: "eastasianwidth@npm:0.2.0" @@ -1759,13 +1625,6 @@ __metadata: languageName: node linkType: hard -"has-flag@npm:^4.0.0": - version: 4.0.0 - resolution: "has-flag@npm:4.0.0" - checksum: 10c0/2e789c61b7888d66993e14e8331449e525ef42aac53c627cc53d1c3334e768bcb6abdc4f5f0de1478a25beec6f0bd62c7549058b7ac53e924040d4f301f02fd1 - languageName: node - linkType: hard - "http-cache-semantics@npm:^4.1.1": version: 4.1.1 resolution: "http-cache-semantics@npm:4.1.1" @@ -1825,13 +1684,6 @@ __metadata: languageName: node linkType: hard -"indent-string@npm:^4.0.0": - version: 4.0.0 - resolution: "indent-string@npm:4.0.0" - checksum: 10c0/1e1904ddb0cb3d6cce7cd09e27a90184908b7a5d5c21b92e232c93579d314f0b83c246ffb035493d0504b1e9147ba2c9b21df0030f48673fba0496ecd698161f - languageName: node - linkType: hard - "indent-string@npm:^5.0.0": version: 5.0.0 resolution: "indent-string@npm:5.0.0" @@ -1945,13 +1797,6 @@ __metadata: languageName: node linkType: hard -"lodash@npm:^4.17.15": - version: 4.17.21 - resolution: "lodash@npm:4.17.21" - checksum: 10c0/d8cbea072bb08655bb4c989da418994b073a608dffa608b09ac04b43a791b12aeae7cd7ad919aa4c925f33b48490b5cfe6c1f71d827956071dae2e7bb3a6b74c - languageName: node - linkType: hard - "loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0": version: 1.4.0 resolution: "loose-envify@npm:1.4.0" @@ -1979,15 +1824,6 @@ __metadata: languageName: node linkType: hard -"lz-string@npm:^1.5.0": - version: 1.5.0 - resolution: "lz-string@npm:1.5.0" - bin: - lz-string: bin/bin.js - checksum: 10c0/36128e4de34791838abe979b19927c26e67201ca5acf00880377af7d765b38d1c60847e01c5ec61b1a260c48029084ab3893a3925fd6e48a04011364b089991b - languageName: node - linkType: hard - "magic-string@npm:^0.30.19": version: 0.30.21 resolution: "magic-string@npm:0.30.21" @@ -2063,13 +1899,6 @@ __metadata: languageName: node linkType: hard -"min-indent@npm:^1.0.0": - version: 1.0.1 - resolution: "min-indent@npm:1.0.1" - checksum: 10c0/7e207bd5c20401b292de291f02913230cb1163abca162044f7db1d951fa245b174dc00869d40dd9a9f32a885ad6a5f3e767ee104cf278f399cb4e92d3f582d5c - languageName: node - linkType: hard - "minimatch@npm:^9.0.1": version: 9.0.3 resolution: "minimatch@npm:9.0.3" @@ -2318,7 +2147,7 @@ __metadata: languageName: node linkType: hard -"picocolors@npm:1.1.1, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1": +"picocolors@npm:^1.1.0, picocolors@npm:^1.1.1": version: 1.1.1 resolution: "picocolors@npm:1.1.1" checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58 @@ -2392,17 +2221,6 @@ __metadata: languageName: node linkType: hard -"pretty-format@npm:^27.0.2": - version: 27.5.1 - resolution: "pretty-format@npm:27.5.1" - dependencies: - ansi-regex: "npm:^5.0.1" - ansi-styles: "npm:^5.0.0" - react-is: "npm:^17.0.1" - checksum: 10c0/0cbda1031aa30c659e10921fa94e0dd3f903ecbbbe7184a729ad66f2b6e7f17891e8c7d7654c458fa4ccb1a411ffb695b4f17bbcd3fe075fabe181027c4040ed - languageName: node - linkType: hard - "proc-log@npm:^5.0.0": version: 5.0.0 resolution: "proc-log@npm:5.0.0" @@ -2474,13 +2292,6 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^17.0.1": - version: 17.0.2 - resolution: "react-is@npm:17.0.2" - checksum: 10c0/2bdb6b93fbb1820b024b496042cce405c57e2f85e777c9aabd55f9b26d145408f9f74f5934676ffdc46f3dcff656d78413a6e43968e7b3f92eea35b3052e9053 - languageName: node - linkType: hard - "react-refresh@npm:^0.17.0": version: 0.17.0 resolution: "react-refresh@npm:0.17.0" @@ -2501,9 +2312,6 @@ __metadata: resolution: "react-time-picker@workspace:packages/react-time-picker" dependencies: "@biomejs/biome": "npm:2.2.2" - "@testing-library/dom": "npm:^10.0.0" - "@testing-library/jest-dom": "npm:^6.0.0" - "@testing-library/react": "npm:^16.0.0" "@types/node": "npm:*" "@types/react": "npm:*" "@types/react-dom": "npm:*" @@ -2541,16 +2349,6 @@ __metadata: languageName: node linkType: hard -"redent@npm:^3.0.0": - version: 3.0.0 - resolution: "redent@npm:3.0.0" - dependencies: - indent-string: "npm:^4.0.0" - strip-indent: "npm:^3.0.0" - checksum: 10c0/d64a6b5c0b50eb3ddce3ab770f866658a2b9998c678f797919ceb1b586bab9259b311407280bd80b804e2a7c7539b19238ae6a2a20c843f1a7fcff21d48c2eae - languageName: node - linkType: hard - "retry@npm:^0.12.0": version: 0.12.0 resolution: "retry@npm:0.12.0" @@ -2839,24 +2637,6 @@ __metadata: languageName: node linkType: hard -"strip-indent@npm:^3.0.0": - version: 3.0.0 - resolution: "strip-indent@npm:3.0.0" - dependencies: - min-indent: "npm:^1.0.0" - checksum: 10c0/ae0deaf41c8d1001c5d4fbe16cb553865c1863da4fae036683b474fa926af9fc121e155cb3fc57a68262b2ae7d5b8420aa752c97a6428c315d00efe2a3875679 - languageName: node - linkType: hard - -"supports-color@npm:^7.1.0": - version: 7.2.0 - resolution: "supports-color@npm:7.2.0" - dependencies: - has-flag: "npm:^4.0.0" - checksum: 10c0/afb4c88521b8b136b5f5f95160c98dee7243dc79d5432db7efc27efb219385bbc7d9427398e43dd6cc730a0f87d5085ce1652af7efbe391327bc0a7d0f7fc124 - languageName: node - linkType: hard - "tar@npm:^7.4.3": version: 7.4.3 resolution: "tar@npm:7.4.3"