diff --git a/packages/react-datetimerange-picker/package.json b/packages/react-datetimerange-picker/package.json index a27f1ae..612b71f 100644 --- a/packages/react-datetimerange-picker/package.json +++ b/packages/react-datetimerange-picker/package.json @@ -55,9 +55,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-datetimerange-picker/src/DateTimeRangePicker.spec.tsx b/packages/react-datetimerange-picker/src/DateTimeRangePicker.spec.tsx index e81748f..b8f5f7b 100644 --- a/packages/react-datetimerange-picker/src/DateTimeRangePicker.spec.tsx +++ b/packages/react-datetimerange-picker/src/DateTimeRangePicker.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 DateTimeRangePicker from './DateTimeRangePicker.js'; @@ -8,19 +9,15 @@ 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('DateTimeRangePicker', () => { - it('passes default name to DateTimeInput components', () => { - const { container } = render(); + it('passes default name to DateTimeInput components', async () => { + const { container } = await render(); const nativeInputs = container.querySelectorAll('input[type="datetime-local"]'); @@ -28,10 +25,10 @@ describe('DateTimeRangePicker', () => { expect(nativeInputs[1]).toHaveAttribute('name', 'datetimerange_to'); }); - it('passes custom name to DateTimeInput components', () => { + it('passes custom name to DateTimeInput components', async () => { const name = 'testName'; - const { container } = render(); + const { container } = await render(); const nativeInputs = container.querySelectorAll('input[type="datetime-local"]'); @@ -39,16 +36,16 @@ describe('DateTimeRangePicker', () => { expect(nativeInputs[1]).toHaveAttribute('name', `${name}_to`); }); - it('passes autoFocus flag to first DateTimeInput component', () => { - const { container } = render(); + it('passes autoFocus flag to first DateTimeInput component', async () => { + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); expect(customInputs[0]).toHaveFocus(); }); - it('passes disabled flag to DateTimeInput components', () => { - const { container } = render(); + it('passes disabled flag to DateTimeInput components', async () => { + const { container } = await render(); const nativeInputs = container.querySelectorAll('input[type="datetime-local"]'); @@ -56,8 +53,8 @@ describe('DateTimeRangePicker', () => { expect(nativeInputs[1]).toBeDisabled(); }); - it('passes format to DateTimeInput components', () => { - const { container } = render(); + it('passes format to DateTimeInput components', async () => { + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); @@ -66,7 +63,7 @@ describe('DateTimeRangePicker', () => { expect(customInputs[1]).toHaveAttribute('name', 'second'); }); - it('passes aria-label props to DateTimeInput components', () => { + it('passes aria-label props to DateTimeInput components', async () => { const ariaLabelProps = { amPmAriaLabel: 'Select AM/PM', calendarAriaLabel: 'Toggle calendar', @@ -80,7 +77,9 @@ describe('DateTimeRangePicker', () => { yearAriaLabel: 'Year', }; - const { container } = render(); + const { container } = await render( + , + ); const calendarButton = container.querySelector( 'button.react-datetimerange-picker__calendar-button', @@ -128,7 +127,7 @@ describe('DateTimeRangePicker', () => { expect(secondToInput).toHaveAttribute('aria-label', ariaLabelProps.secondAriaLabel); }); - it('passes placeholder props to DateTimeInput components', () => { + it('passes placeholder props to DateTimeInput components', async () => { const placeholderProps = { dayPlaceholder: 'dd', hourPlaceholder: 'hh', @@ -138,7 +137,9 @@ describe('DateTimeRangePicker', () => { yearPlaceholder: 'yyyy', }; - const { container } = render(); + const { container } = await render( + , + ); const dateTimeInputs = container.querySelectorAll( '.react-datetimerange-picker__inputGroup', @@ -176,10 +177,10 @@ describe('DateTimeRangePicker', () => { }); describe('passes value to DateTimeInput components', () => { - it('passes single value to DateTimeInput components', () => { + it('passes single value to DateTimeInput components', async () => { const value = new Date(2019, 0, 1); - const { container } = render(); + const { container } = await render(); const nativeInputs = container.querySelectorAll('input[type="datetime-local"]'); @@ -187,11 +188,11 @@ describe('DateTimeRangePicker', () => { expect(nativeInputs[1]).toHaveValue(''); }); - it('passes the first item of an array of values to DateTimeInput components', () => { + it('passes the first item of an array of values to DateTimeInput components', async () => { const value1 = new Date(2019, 0, 1); const value2 = new Date(2019, 6, 1, 12, 30); - const { container } = render(); + const { container } = await render(); const nativeInputs = container.querySelectorAll('input[type="datetime-local"]'); @@ -200,36 +201,36 @@ describe('DateTimeRangePicker', () => { }); }); - 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 isCalendarOpen flag', () => { - const { container } = render(); + it('applies "--open" className to its wrapper when given isCalendarOpen flag', async () => { + const { container } = await render(); const wrapper = container.firstElementChild; expect(wrapper).toHaveClass('react-datetimerange-picker--open'); }); - it('applies "--open" className to its wrapper when given isClockOpen flag', () => { - const { container } = render(); + it('applies "--open" className to its wrapper when given isClockOpen flag', async () => { + const { container } = await render(); const wrapper = container.firstElementChild; expect(wrapper).toHaveClass('react-datetimerange-picker--open'); }); - it('applies calendar className to the calendar when given a string', () => { + it('applies calendar className to the calendar when given a string', async () => { const calendarClassName = 'testClassName'; - const { container } = render( + const { container } = await render( , ); @@ -238,10 +239,10 @@ describe('DateTimeRangePicker', () => { expect(calendar).toHaveClass(calendarClassName); }); - 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( , ); @@ -250,16 +251,16 @@ describe('DateTimeRangePicker', () => { expect(clock).toHaveClass(clockClassName); }); - it('renders DateTimeInput components', () => { - const { container } = render(); + it('renders DateTimeInput components', async () => { + const { container } = await render(); const nativeInputs = container.querySelectorAll('input[type="datetime-local"]'); expect(nativeInputs.length).toBe(2); }); - it('renders range divider with default divider', () => { - const { container } = render(); + it('renders range divider with default divider', async () => { + const { container } = await render(); const rangeDivider = container.querySelector('.react-datetimerange-picker__range-divider'); @@ -267,8 +268,8 @@ describe('DateTimeRangePicker', () => { expect(rangeDivider).toHaveTextContent('–'); }); - it('renders range divider with custom divider', () => { - const { container } = render(); + it('renders range divider with custom divider', async () => { + const { container } = await render(); const rangeDivider = container.querySelector('.react-datetimerange-picker__range-divider'); @@ -277,8 +278,8 @@ describe('DateTimeRangePicker', () => { }); 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-datetimerange-picker__clear-button', @@ -287,8 +288,8 @@ describe('DateTimeRangePicker', () => { 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-datetimerange-picker__clear-button', @@ -299,8 +300,8 @@ describe('DateTimeRangePicker', () => { 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-datetimerange-picker__clear-button', @@ -309,12 +310,12 @@ describe('DateTimeRangePicker', () => { 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-datetimerange-picker__clear-button', @@ -323,12 +324,12 @@ describe('DateTimeRangePicker', () => { 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-datetimerange-picker__clear-button', @@ -339,8 +340,8 @@ describe('DateTimeRangePicker', () => { }); describe('renders calendar button properly', () => { - it('renders calendar button', () => { - const { container } = render(); + it('renders calendar button', async () => { + const { container } = await render(); const calendarButton = container.querySelector( 'button.react-datetimerange-picker__calendar-button', @@ -349,8 +350,8 @@ describe('DateTimeRangePicker', () => { expect(calendarButton).toBeInTheDocument(); }); - it('renders calendar icon by default when calendarIcon is not given', () => { - const { container } = render(); + it('renders calendar icon by default when calendarIcon is not given', async () => { + const { container } = await render(); const calendarButton = container.querySelector( 'button.react-datetimerange-picker__calendar-button', @@ -361,8 +362,8 @@ describe('DateTimeRangePicker', () => { expect(calendarIcon).toBeInTheDocument(); }); - it('renders calendar icon when given calendarIcon as a string', () => { - const { container } = render(); + it('renders calendar icon when given calendarIcon as a string', async () => { + const { container } = await render(); const calendarButton = container.querySelector( 'button.react-datetimerange-picker__calendar-button', @@ -371,12 +372,12 @@ describe('DateTimeRangePicker', () => { expect(calendarButton).toHaveTextContent('📅'); }); - it('renders calendar icon when given calendarIcon as a React element', () => { + it('renders calendar icon when given calendarIcon as a React element', async () => { function CalendarIcon() { return <>📅; } - const { container } = render(} />); + const { container } = await render(} />); const calendarButton = container.querySelector( 'button.react-datetimerange-picker__calendar-button', @@ -385,12 +386,12 @@ describe('DateTimeRangePicker', () => { expect(calendarButton).toHaveTextContent('📅'); }); - it('renders calendar icon when given calendarIcon as a function', () => { + it('renders calendar icon when given calendarIcon as a function', async () => { function CalendarIcon() { return <>📅; } - const { container } = render(); + const { container } = await render(); const calendarButton = container.querySelector( 'button.react-datetimerange-picker__calendar-button', @@ -400,40 +401,40 @@ describe('DateTimeRangePicker', () => { }); }); - it('renders DateTimeInput and Calendar components when given isCalendarOpen flag', () => { - const { container } = render(); + it('renders DateTimeInput and Calendar components when given isCalendarOpen flag', async () => { + const { container } = await render(); const calendar = container.querySelector('.react-calendar'); expect(calendar).toBeInTheDocument(); }); - it('renders Clock component when given isClockOpen flag', () => { - const { container } = render(); + it('renders Clock component when given isClockOpen flag', async () => { + const { container } = await render(); const clock = container.querySelector('.react-clock'); expect(clock).toBeInTheDocument(); }); - it('does not render Calendar component when given disableCalendar & isCalendarOpen flags', () => { - const { container } = render(); + it('does not render Calendar component when given disableCalendar & isCalendarOpen flags', async () => { + const { container } = await render(); const calendar = container.querySelector('.react-calendar'); expect(calendar).toBeFalsy(); }); - it('does not render Clock component when given disableClock & isClockOpen flags', () => { - const { container } = render(); + it('does not render Clock component when given disableClock & isClockOpen flags', async () => { + const { container } = await render(); const clock = container.querySelector('.react-clock'); expect(clock).toBeFalsy(); }); - it('opens Calendar component when given isCalendarOpen flag by changing props', () => { - const { container, rerender } = render(); + it('opens Calendar component when given isCalendarOpen flag by changing props', async () => { + const { container, rerender } = await render(); const calendar = container.querySelector('.react-calendar'); @@ -446,8 +447,8 @@ describe('DateTimeRangePicker', () => { expect(calendar2).toBeInTheDocument(); }); - it('opens Clock component when given isClockOpen flag by changing props', () => { - const { container, rerender } = render(); + it('opens Clock component when given isClockOpen flag by changing props', async () => { + const { container, rerender } = await render(); const clock = container.querySelector('.react-clock'); @@ -460,8 +461,8 @@ describe('DateTimeRangePicker', () => { expect(clock2).toBeInTheDocument(); }); - it('opens Calendar component when clicking on a button', () => { - const { container } = render(); + it('opens Calendar component when clicking on a button', async () => { + const { container } = await render(); const calendar = container.querySelector('.react-calendar'); const button = container.querySelector( @@ -470,85 +471,111 @@ describe('DateTimeRangePicker', () => { expect(calendar).toBeFalsy(); - fireEvent.click(button); + await userEvent.click(button); const calendar2 = container.querySelector('.react-calendar'); expect(calendar2).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 Calendar component when focusing on an input inside properly', () => { - it('opens Calendar component when focusing on an input inside by default', () => { - const { container } = render(); + it('opens Calendar component when focusing on an input inside by default', async () => { + const { container } = await render(); const calendar = container.querySelector('.react-calendar'); const input = container.querySelector('input[name="day"]') as HTMLInputElement; expect(calendar).toBeFalsy(); - fireEvent.focus(input); + act(() => { + triggerFocusEvent(input); + }); const calendar2 = container.querySelector('.react-calendar'); expect(calendar2).toBeInTheDocument(); }); - it('opens Calendar component when focusing on an input inside given openWidgetsOnFocus = true', () => { - const { container } = render(); + it('opens Calendar component when focusing on an input inside given openWidgetsOnFocus = true', async () => { + const { container } = await render(); const calendar = container.querySelector('.react-calendar'); const input = container.querySelector('input[name="day"]') as HTMLInputElement; expect(calendar).toBeFalsy(); - fireEvent.focus(input); + act(() => { + triggerFocusEvent(input); + }); const calendar2 = container.querySelector('.react-calendar'); expect(calendar2).toBeInTheDocument(); }); - it('does not open Calendar component when focusing on an input inside given openWidgetsOnFocus = false', () => { - const { container } = render(); + it('does not open Calendar component when focusing on an input inside given openWidgetsOnFocus = false', async () => { + const { container } = await render(); const calendar = container.querySelector('.react-calendar'); const input = container.querySelector('input[name="day"]') as HTMLInputElement; expect(calendar).toBeFalsy(); - fireEvent.focus(input); + act(() => { + triggerFocusEvent(input); + }); const calendar2 = container.querySelector('.react-calendar'); expect(calendar2).toBeFalsy(); }); - it('does not open Calendar component when focusing on an input inside given shouldOpenWidgets function returning false', () => { + it('does not open Calendar component when focusing on an input inside given shouldOpenWidgets function returning false', async () => { const shouldOpenWidgets = () => false; - const { container } = render(); + const { container } = await render( + , + ); const calendar = container.querySelector('.react-calendar'); const input = container.querySelector('input[name="day"]') as HTMLInputElement; expect(calendar).toBeFalsy(); - fireEvent.focus(input); + act(() => { + triggerFocusEvent(input); + }); const calendar2 = container.querySelector('.react-calendar'); expect(calendar2).toBeFalsy(); }); - it('does not open Calendar component when focusing on a select element', () => { - const { container } = render(); + it('does not open Calendar component when focusing on a select element', async () => { + const { container } = await render(); const calendar = container.querySelector('.react-calendar'); const select = container.querySelector('select[name="month"]') as HTMLSelectElement; expect(calendar).toBeFalsy(); - fireEvent.focus(select); + act(() => { + triggerFocusEvent(select); + }); const calendar2 = container.querySelector('.react-calendar'); @@ -557,77 +584,89 @@ describe('DateTimeRangePicker', () => { }); 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 openWidgetsOnFocus = true', () => { - const { container } = render(); + it('opens Clock component when focusing on an input inside given openWidgetsOnFocus = 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 openWidgetsOnFocus = false', () => { - const { container } = render(); + it('does not open Clock component when focusing on an input inside given openWidgetsOnFocus = 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 component when focusing on an input inside given shouldOpenWidgets function returning false', () => { + it('does not open Clock component when focusing on an input inside given shouldOpenWidgets function returning false', async () => { const shouldOpenWidgets = () => 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); + act(() => { + 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); + act(() => { + triggerFocusEvent(select); + }); const clock2 = container.querySelector('.react-clock'); @@ -636,7 +675,7 @@ describe('DateTimeRangePicker', () => { }); it('closes Calendar component when clicked outside', async () => { - const { container } = render(); + const { container } = await render(); await userEvent.click(document.body); @@ -646,19 +685,23 @@ describe('DateTimeRangePicker', () => { }); it('closes Calendar component when focused outside', async () => { - const { container } = render(); + const { container } = await render(); - fireEvent.focusIn(document.body); + triggerFocusInEvent(document.body); await waitForElementToBeRemovedOrHidden(() => container.querySelector('.react-datetimerange-picker__calendar'), ); }); + function triggerTouchStart(element: HTMLElement) { + element.dispatchEvent(new TouchEvent('touchstart', { bubbles: true, cancelable: true })); + } + it('closes Calendar component when tapped outside', async () => { - const { container } = render(); + const { container } = await render(); - fireEvent.touchStart(document.body); + triggerTouchStart(document.body); await waitForElementToBeRemovedOrHidden(() => container.querySelector('.react-datetimerange-picker__calendar'), @@ -666,7 +709,7 @@ describe('DateTimeRangePicker', () => { }); it('closes Clock component when clicked outside', async () => { - const { container } = render(); + const { container } = await render(); await userEvent.click(document.body); @@ -676,9 +719,9 @@ describe('DateTimeRangePicker', () => { }); 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-datetimerange-picker__clock'), @@ -686,24 +729,38 @@ describe('DateTimeRangePicker', () => { }); 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-datetimerange-picker__clock'), ); }); - it('does not close Calendar component when focused within date inputs', () => { - 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 Calendar component when focused within date inputs', async () => { + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); const monthInput = customInputs[0] as HTMLInputElement; const dayInput = customInputs[1] as HTMLInputElement; - fireEvent.blur(monthInput); - fireEvent.focus(dayInput); + triggerBlurEvent(monthInput); + triggerFocusEvent(dayInput); const calendar = container.querySelector('.react-calendar'); @@ -711,14 +768,14 @@ describe('DateTimeRangePicker', () => { }); it('does not close Clock component when focused within time inputs', async () => { - const { container } = render(); + const { container } = await render(); const customInputs = container.querySelectorAll('input[data-input]'); const hourInput = customInputs[3] as HTMLInputElement; const minuteInput = customInputs[4] as HTMLInputElement; - fireEvent.blur(hourInput); - fireEvent.focus(minuteInput); + triggerBlurEvent(hourInput); + triggerFocusEvent(minuteInput); await waitForElementToBeRemovedOrHidden(() => container.querySelector('.react-datetimerange-picker__calendar'), @@ -730,7 +787,7 @@ describe('DateTimeRangePicker', () => { }); it('closes Clock when Calendar is opened by a click on the calendar icon', async () => { - const { container } = render(); + const { container } = await render(); const clock = container.querySelector('.react-clock'); const button = container.querySelector( @@ -739,19 +796,21 @@ describe('DateTimeRangePicker', () => { expect(clock).toBeInTheDocument(); - fireEvent.click(button); + await userEvent.click(button); await waitForElementToBeRemovedOrHidden(() => container.querySelector('.react-datetimerange-picker__clock'), ); }); - it('opens Calendar component, followed by Clock component, when focusing on inputs inside', () => { - const { container } = render(); + it('opens Calendar component, followed by Clock component, when focusing on inputs inside', async () => { + const { container } = await render(); const dayInput = container.querySelector('input[name="day"]') as HTMLInputElement; - fireEvent.focus(dayInput); + act(() => { + triggerFocusEvent(dayInput); + }); const calendar = container.querySelector('.react-calendar'); @@ -759,7 +818,9 @@ describe('DateTimeRangePicker', () => { const minuteInput = container.querySelector('input[name="minute"]') as HTMLInputElement; - fireEvent.focus(minuteInput); + act(() => { + triggerFocusEvent(minuteInput); + }); const clock = container.querySelector('.react-clock'); @@ -767,18 +828,18 @@ describe('DateTimeRangePicker', () => { }); it('closes Calendar when changing value by default', async () => { - const { container } = render(); + const { container } = await render(); const [firstTile, secondTile] = container.querySelectorAll( '.react-calendar__tile', ) as unknown as [HTMLButtonElement, HTMLButtonElement]; - act(() => { - fireEvent.click(firstTile); + await act(async () => { + await userEvent.click(firstTile); }); - act(() => { - fireEvent.click(secondTile); + await act(async () => { + await userEvent.click(secondTile); }); await waitForElementToBeRemovedOrHidden(() => @@ -787,18 +848,18 @@ describe('DateTimeRangePicker', () => { }); it('closes Calendar when changing value with prop closeWidgets = true', async () => { - const { container } = render(); + const { container } = await render(); const [firstTile, secondTile] = container.querySelectorAll( '.react-calendar__tile', ) as unknown as [HTMLButtonElement, HTMLButtonElement]; - act(() => { - fireEvent.click(firstTile); + await act(async () => { + await userEvent.click(firstTile); }); - act(() => { - fireEvent.click(secondTile); + await act(async () => { + await userEvent.click(secondTile); }); await waitForElementToBeRemovedOrHidden(() => @@ -806,19 +867,19 @@ describe('DateTimeRangePicker', () => { ); }); - it('does not close Calendar when changing value with prop closeWidgets = false', () => { - const { container } = render(); + it('does not close Calendar when changing value with prop closeWidgets = false', async () => { + const { container } = await render(); const [firstTile, secondTile] = container.querySelectorAll( '.react-calendar__tile', ) as unknown as [HTMLButtonElement, HTMLButtonElement]; - act(() => { - fireEvent.click(firstTile); + await act(async () => { + await userEvent.click(firstTile); }); - act(() => { - fireEvent.click(secondTile); + await act(async () => { + await userEvent.click(secondTile); }); const calendar = container.querySelector('.react-calendar'); @@ -826,10 +887,10 @@ describe('DateTimeRangePicker', () => { expect(calendar).toBeInTheDocument(); }); - it('does not close Calendar when changing value with shouldCloseWidgets function returning false', () => { + it('does not close Calendar when changing value with shouldCloseWidgets function returning false', async () => { const shouldCloseWidgets = () => false; - const { container } = render( + const { container } = await render( , ); @@ -837,12 +898,12 @@ describe('DateTimeRangePicker', () => { '.react-calendar__tile', ) as unknown as [HTMLButtonElement, HTMLButtonElement]; - act(() => { - fireEvent.click(firstTile); + await act(async () => { + await userEvent.click(firstTile); }); - act(() => { - fireEvent.click(secondTile); + await act(async () => { + await userEvent.click(secondTile); }); const calendar = container.querySelector('.react-calendar'); @@ -850,13 +911,13 @@ describe('DateTimeRangePicker', () => { expect(calendar).toBeInTheDocument(); }); - it('does not close Calendar when changing value using inputs', () => { - const { container } = render(); + it('does not close Calendar when changing value using inputs', async () => { + const { container } = await render(); const dayInput = container.querySelector('input[name="day"]') as HTMLInputElement; - act(() => { - fireEvent.change(dayInput, { target: { value: '1' } }); + await act(async () => { + await userEvent.fill(dayInput, '1'); }); const calendar = container.querySelector('.react-calendar'); @@ -864,13 +925,13 @@ describe('DateTimeRangePicker', () => { expect(calendar).toBeInTheDocument(); }); - it('does not close Clock when changing value using inputs', () => { - const { container } = render(); + it('does not close Clock when changing value using inputs', 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'); @@ -878,24 +939,24 @@ describe('DateTimeRangePicker', () => { expect(clock).toBeInTheDocument(); }); - it('calls onChange callback when changing value', () => { + it('calls onChange callback when changing value', async () => { const value = new Date(2023, 0, 31, 21, 40, 11); const onChange = vi.fn(); - const { container } = render( + const { container } = await render( , ); const dayInput = container.querySelector('input[name="day"]') as HTMLInputElement; - act(() => { - fireEvent.change(dayInput, { target: { value: '1' } }); + await act(async () => { + await userEvent.fill(dayInput, '1'); }); expect(onChange).toHaveBeenCalledWith([new Date(2023, 0, 1, 21, 40, 11), null]); }); - it('calls onChange callback with merged new date & old time when calling internal onDateChange given Date', () => { + it('calls onChange callback with merged new date & old time when calling internal onDateChange given Date', async () => { const hours = 21; const minutes = 40; const seconds = 11; @@ -906,7 +967,7 @@ describe('DateTimeRangePicker', () => { const nextValueFrom = new Date(2019, 0, 1, hours, minutes, seconds, ms); const valueTo = new Date(2019, 6, 17); - const { container, getByRole } = render( + const { container, getByRole } = await render( , ); @@ -914,36 +975,36 @@ describe('DateTimeRangePicker', () => { const drillUpButton = container.querySelector( '.react-calendar__navigation__label', ) as HTMLButtonElement; - fireEvent.click(drillUpButton); // To year 2018 - fireEvent.click(drillUpButton); // To 2011 – 2020 decade + await userEvent.click(drillUpButton); // To year 2018 + await userEvent.click(drillUpButton); // To 2011 – 2020 decade // Click year 2019 const twentyNineteenButton = getByRole('button', { name: '2019' }); - fireEvent.click(twentyNineteenButton); + await userEvent.click(twentyNineteenButton); // Click January const januaryButton = getByRole('button', { name: 'January 2019' }); - fireEvent.click(januaryButton); + await userEvent.click(januaryButton); // Click 1st const firstButton = getByRole('button', { name: 'January 1, 2019' }); - fireEvent.click(firstButton); + await userEvent.click(firstButton); // Navigate up the calendar - fireEvent.click(drillUpButton); // To year 2019 + await userEvent.click(drillUpButton); // To year 2019 // Click July const julyButton = getByRole('button', { name: 'July 2019' }); - fireEvent.click(julyButton); + await userEvent.click(julyButton); // Click 17th const seventeenthButton = getByRole('button', { name: 'July 17, 2019' }); - fireEvent.click(seventeenthButton); + await userEvent.click(seventeenthButton); expect(onChange).toHaveBeenCalledWith([nextValueFrom, valueTo]); }); - it('calls onChange callback with merged new date & old time when calling internal onDateChange given ISO string', () => { + it('calls onChange callback with merged new date & old time when calling internal onDateChange given ISO string', async () => { const hours = 21; const minutes = 40; const seconds = 11; @@ -954,7 +1015,7 @@ describe('DateTimeRangePicker', () => { const nextValueFrom = new Date(2019, 0, 1, hours, minutes, seconds, ms); const valueTo = new Date(2019, 6, 17); - const { container, getByRole } = render( + const { container, getByRole } = await render( , ); @@ -962,36 +1023,36 @@ describe('DateTimeRangePicker', () => { const drillUpButton = container.querySelector( '.react-calendar__navigation__label', ) as HTMLButtonElement; - fireEvent.click(drillUpButton); // To year 2018 - fireEvent.click(drillUpButton); // To 2011 – 2020 decade + await userEvent.click(drillUpButton); // To year 2018 + await userEvent.click(drillUpButton); // To 2011 – 2020 decade // Click year 2019 const twentyNineteenButton = getByRole('button', { name: '2019' }); - fireEvent.click(twentyNineteenButton); + await userEvent.click(twentyNineteenButton); // Click January const januaryButton = getByRole('button', { name: 'January 2019' }); - fireEvent.click(januaryButton); + await userEvent.click(januaryButton); // Click 1st const firstButton = getByRole('button', { name: 'January 1, 2019' }); - fireEvent.click(firstButton); + await userEvent.click(firstButton); // Navigate up the calendar - fireEvent.click(drillUpButton); // To year 2019 + await userEvent.click(drillUpButton); // To year 2019 // Click July const julyButton = getByRole('button', { name: 'July 2019' }); - fireEvent.click(julyButton); + await userEvent.click(julyButton); // Click 17th const seventeenthButton = getByRole('button', { name: 'July 17, 2019' }); - fireEvent.click(seventeenthButton); + await userEvent.click(seventeenthButton); expect(onChange).toHaveBeenCalledWith([nextValueFrom, valueTo]); }); - it('calls onChange callback with merged new date & old time when calling internal onDateChange given Date', () => { + it('calls onChange callback with merged new date & old time when calling internal onDateChange given Date', async () => { const hours = 21; const minutes = 40; const seconds = 11; @@ -1002,37 +1063,37 @@ describe('DateTimeRangePicker', () => { const valueTo = new Date(2019, 6, 17, hours, minutes, seconds, ms); const nextValueTo = new Date(2019, 0, 1, hours, minutes, seconds, ms); - const { container, getByRole } = render( + const { container, getByRole } = await render( , ); // Click 17th const seventeenthButton = getByRole('button', { name: 'July 17, 2018' }); - fireEvent.click(seventeenthButton); + await userEvent.click(seventeenthButton); // Navigate up the calendar const drillUpButton = container.querySelector( '.react-calendar__navigation__label', ) as HTMLButtonElement; - fireEvent.click(drillUpButton); // To year 2018 - fireEvent.click(drillUpButton); // To 2011 – 2020 decade + await userEvent.click(drillUpButton); // To year 2018 + await userEvent.click(drillUpButton); // To 2011 – 2020 decade // Click year 2019 const twentyNineteenButton = getByRole('button', { name: '2019' }); - fireEvent.click(twentyNineteenButton); + await userEvent.click(twentyNineteenButton); // Click January const januaryButton = getByRole('button', { name: 'January 2019' }); - fireEvent.click(januaryButton); + await userEvent.click(januaryButton); // Click 1st const firstButton = getByRole('button', { name: 'January 1, 2019' }); - fireEvent.click(firstButton); + await userEvent.click(firstButton); expect(onChange).toHaveBeenCalledWith([valueFrom, nextValueTo]); }); - it('calls onChange callback with merged new date & old time when calling internal onDateChange given ISO string', () => { + it('calls onChange callback with merged new date & old time when calling internal onDateChange given ISO string', async () => { const hours = 21; const minutes = 40; const seconds = 11; @@ -1043,57 +1104,57 @@ describe('DateTimeRangePicker', () => { const valueTo = new Date(2019, 6, 17, hours, minutes, seconds, ms); const nextValueTo = new Date(2019, 0, 1, hours, minutes, seconds, ms); - const { container, getByRole } = render( + const { container, getByRole } = await render( , ); // Click 17th const seventeenthButton = getByRole('button', { name: 'July 17, 2018' }); - fireEvent.click(seventeenthButton); + await userEvent.click(seventeenthButton); // Navigate up the calendar const drillUpButton = container.querySelector( '.react-calendar__navigation__label', ) as HTMLButtonElement; - fireEvent.click(drillUpButton); // To year 2018 - fireEvent.click(drillUpButton); // To 2011 – 2020 decade + await userEvent.click(drillUpButton); // To year 2018 + await userEvent.click(drillUpButton); // To 2011 – 2020 decade // Click year 2019 const twentyNineteenButton = getByRole('button', { name: '2019' }); - fireEvent.click(twentyNineteenButton); + await userEvent.click(twentyNineteenButton); // Click January const januaryButton = getByRole('button', { name: 'January 2019' }); - fireEvent.click(januaryButton); + await userEvent.click(januaryButton); // Click 1st const firstButton = getByRole('button', { name: 'January 1, 2019' }); - fireEvent.click(firstButton); + await userEvent.click(firstButton); expect(onChange).toHaveBeenCalledWith([valueFrom, nextValueTo]); }); - 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 = new Date(2023, 0, 31, 21, 40, 11); const onInvalidChange = vi.fn(); - const { container } = render( + const { container } = await render( , ); const dayInput = container.querySelector('input[name="day"]') as HTMLInputElement; - act(() => { - fireEvent.change(dayInput, { target: { value: '32' } }); + await act(async () => { + await userEvent.fill(dayInput, '32'); }); 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 calendar = container.querySelector('.react-calendar'); const button = container.querySelector( @@ -1102,16 +1163,16 @@ describe('DateTimeRangePicker', () => { expect(calendar).toBeFalsy(); - fireEvent.click(button); + await userEvent.click(button); expect(onChange).toHaveBeenCalledWith(null); }); describe('onChangeFrom', () => { - it('calls onChange properly given no initial value', () => { + it('calls onChange properly given no initial value', async () => { const onChange = vi.fn(); - const { container } = render( + const { container } = await render( , ); @@ -1125,39 +1186,29 @@ describe('DateTimeRangePicker', () => { const minuteInput = customInputs[4] as HTMLInputElement; const secondInput = customInputs[5] as HTMLInputElement; - act(() => { - fireEvent.change(monthInput, { target: { value: '2' } }); - }); + await act(async () => { + await userEvent.fill(monthInput, '2'); - act(() => { - fireEvent.change(dayInput, { target: { value: '15' } }); - }); + await userEvent.fill(dayInput, '15'); - act(() => { - fireEvent.change(yearInput, { target: { value: '2018' } }); - }); + await userEvent.fill(yearInput, '2018'); - act(() => { - fireEvent.change(hourInput, { target: { value: '12' } }); - }); + await userEvent.fill(hourInput, '12'); - act(() => { - fireEvent.change(minuteInput, { target: { value: '30' } }); - }); + await userEvent.fill(minuteInput, '30'); - act(() => { - fireEvent.change(secondInput, { target: { value: '45' } }); + await userEvent.fill(secondInput, '45'); }); expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalledWith([nextValueFrom, null]); }); - it('calls onChange properly given single initial value', () => { + it('calls onChange properly given single initial value', async () => { const onChange = vi.fn(); const value = new Date(2018, 0, 1); - const { container } = render( + const { container } = await render( { const minuteInput = customInputs[4] as HTMLInputElement; const secondInput = customInputs[5] as HTMLInputElement; - act(() => { - fireEvent.change(monthInput, { target: { value: '2' } }); - }); + await act(async () => { + await userEvent.fill(monthInput, '2'); - act(() => { - fireEvent.change(dayInput, { target: { value: '15' } }); - }); + await userEvent.fill(dayInput, '15'); - act(() => { - fireEvent.change(yearInput, { target: { value: '2018' } }); - }); + await userEvent.fill(yearInput, '2018'); - act(() => { - fireEvent.change(hourInput, { target: { value: '12' } }); - }); + await userEvent.fill(hourInput, '12'); - act(() => { - fireEvent.change(minuteInput, { target: { value: '30' } }); - }); + await userEvent.fill(minuteInput, '30'); - act(() => { - fireEvent.change(secondInput, { target: { value: '45' } }); + await userEvent.fill(secondInput, '45'); }); expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalledWith([nextValueFrom, null]); }); - it('calls onChange properly given initial value as an array', () => { + it('calls onChange properly given initial value as an array', async () => { const onChange = vi.fn(); const valueFrom = new Date(2018, 0, 1); const valueTo = new Date(2018, 6, 1); const value = [valueFrom, valueTo] as [Date, Date]; - const { container } = render( + const { container } = await render( { const minuteInput = customInputs[4] as HTMLInputElement; const secondInput = customInputs[5] as HTMLInputElement; - act(() => { - fireEvent.change(monthInput, { target: { value: '2' } }); - }); + await act(async () => { + await userEvent.fill(monthInput, '2'); - act(() => { - fireEvent.change(dayInput, { target: { value: '15' } }); - }); + await userEvent.fill(dayInput, '15'); - act(() => { - fireEvent.change(yearInput, { target: { value: '2018' } }); - }); + await userEvent.fill(yearInput, '2018'); - act(() => { - fireEvent.change(hourInput, { target: { value: '12' } }); - }); + await userEvent.fill(hourInput, '12'); - act(() => { - fireEvent.change(minuteInput, { target: { value: '30' } }); - }); + await userEvent.fill(minuteInput, '30'); - act(() => { - fireEvent.change(secondInput, { target: { value: '45' } }); + await userEvent.fill(secondInput, '45'); }); expect(onChange).toHaveBeenCalled(); @@ -1259,10 +1290,10 @@ describe('DateTimeRangePicker', () => { }); describe('onChangeTo', () => { - it('calls onChange properly given no initial value', () => { + it('calls onChange properly given no initial value', async () => { const onChange = vi.fn(); - const { container } = render( + const { container } = await render( , ); @@ -1275,39 +1306,30 @@ describe('DateTimeRangePicker', () => { const hourInput = customInputs[9] as HTMLInputElement; const minuteInput = customInputs[10] as HTMLInputElement; const secondInput = customInputs[11] as HTMLInputElement; - act(() => { - fireEvent.change(dayInput, { target: { value: '15' } }); - }); - act(() => { - fireEvent.change(monthInput, { target: { value: '2' } }); - }); + await act(async () => { + await userEvent.fill(dayInput, '15'); - act(() => { - fireEvent.change(yearInput, { target: { value: '2018' } }); - }); + await userEvent.fill(monthInput, '2'); - act(() => { - fireEvent.change(hourInput, { target: { value: '12' } }); - }); + await userEvent.fill(yearInput, '2018'); - act(() => { - fireEvent.change(minuteInput, { target: { value: '30' } }); - }); + await userEvent.fill(hourInput, '12'); - act(() => { - fireEvent.change(secondInput, { target: { value: '45' } }); + await userEvent.fill(minuteInput, '30'); + + await userEvent.fill(secondInput, '45'); }); expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalledWith([null, nextValueTo]); }); - it('calls onChange properly given single initial value', () => { + it('calls onChange properly given single initial value', async () => { const onChange = vi.fn(); const value = new Date(2018, 0, 1); - const { container } = render( + const { container } = await render( { const minuteInput = customInputs[10] as HTMLInputElement; const secondInput = customInputs[11] as HTMLInputElement; - act(() => { - fireEvent.change(dayInput, { target: { value: '15' } }); - }); + await act(async () => { + await userEvent.fill(dayInput, '15'); - act(() => { - fireEvent.change(monthInput, { target: { value: '2' } }); - }); + await userEvent.fill(monthInput, '2'); - act(() => { - fireEvent.change(yearInput, { target: { value: '2018' } }); - }); + await userEvent.fill(yearInput, '2018'); - act(() => { - fireEvent.change(hourInput, { target: { value: '12' } }); - }); + await userEvent.fill(hourInput, '12'); - act(() => { - fireEvent.change(minuteInput, { target: { value: '30' } }); - }); + await userEvent.fill(minuteInput, '30'); - act(() => { - fireEvent.change(secondInput, { target: { value: '45' } }); + await userEvent.fill(secondInput, '45'); }); expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalledWith([value, nextValueTo]); }); - it('calls onChange properly given initial value as an array', () => { + it('calls onChange properly given initial value as an array', async () => { const onChange = vi.fn(); const valueFrom = new Date(2018, 0, 1); const valueTo = new Date(2018, 6, 1); const value = [valueFrom, valueTo] as [Date, Date]; - const { container } = render( + const { container } = await render( { const minuteInput = customInputs[10] as HTMLInputElement; const secondInput = customInputs[11] as HTMLInputElement; - act(() => { - fireEvent.change(dayInput, { target: { value: '15' } }); - }); + await act(async () => { + await userEvent.fill(dayInput, '15'); - act(() => { - fireEvent.change(monthInput, { target: { value: '2' } }); - }); + await userEvent.fill(monthInput, '2'); - act(() => { - fireEvent.change(yearInput, { target: { value: '2018' } }); - }); + await userEvent.fill(yearInput, '2018'); - act(() => { - fireEvent.change(hourInput, { target: { value: '12' } }); - }); + await userEvent.fill(hourInput, '12'); - act(() => { - fireEvent.change(minuteInput, { target: { value: '30' } }); - }); + await userEvent.fill(minuteInput, '30'); - act(() => { - fireEvent.change(secondInput, { target: { value: '45' } }); + await userEvent.fill(secondInput, '45'); }); expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalledWith([valueFrom, nextValueTo]); }); }); - 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-datetimerange-picker/vitest.config.ts b/packages/react-datetimerange-picker/vitest.config.ts index 9d9dac8..485ff07 100644 --- a/packages/react-datetimerange-picker/vitest.config.ts +++ b/packages/react-datetimerange-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-datetimerange-picker/vitest.setup.ts b/packages/react-datetimerange-picker/vitest.setup.ts deleted file mode 100644 index 97650fd..0000000 --- a/packages/react-datetimerange-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 fbf7b0e..d0926d4 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" @@ -1112,9 +1025,6 @@ __metadata: resolution: "@wojtekmaj/react-datetimerange-picker@workspace:packages/react-datetimerange-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:*" @@ -1180,7 +1090,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: @@ -1189,13 +1099,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" @@ -1203,15 +1106,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" @@ -1292,16 +1186,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" @@ -1398,13 +1282,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" @@ -1424,13 +1301,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" @@ -1447,13 +1317,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" @@ -1802,13 +1665,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" @@ -1868,13 +1724,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" @@ -1988,13 +1837,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" @@ -2022,15 +1864,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" @@ -2106,13 +1939,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" @@ -2361,7 +2187,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 @@ -2435,17 +2261,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" @@ -2582,13 +2397,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" @@ -2627,16 +2435,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" @@ -2925,24 +2723,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"