From ae07539b2f2a0c061f7db595f4b7166a705a42fd Mon Sep 17 00:00:00 2001 From: Cheton Wu <447801+cheton@users.noreply.github.com> Date: Tue, 6 Aug 2024 23:18:42 +0800 Subject: [PATCH] test(react/DatePicker): resolve failing test snapshots (#906) * test(react/DatePicker): resolve failing test snapshots * Create tonic-ui-900b.md --- .changeset/tonic-ui-900b.md | 5 + .../DatePicker/__tests__/DatePicker.test.js | 77 +- .../__snapshots__/DatePicker.test.js.snap | 750 +----------------- 3 files changed, 50 insertions(+), 782 deletions(-) create mode 100644 .changeset/tonic-ui-900b.md diff --git a/.changeset/tonic-ui-900b.md b/.changeset/tonic-ui-900b.md new file mode 100644 index 0000000000..3bf334be2f --- /dev/null +++ b/.changeset/tonic-ui-900b.md @@ -0,0 +1,5 @@ +--- +"@tonic-ui/react": minor +--- + +test(react/DatePicker): resolve failing test snapshots diff --git a/packages/react/src/date-pickers/DatePicker/__tests__/DatePicker.test.js b/packages/react/src/date-pickers/DatePicker/__tests__/DatePicker.test.js index f48381cf64..4793d48365 100644 --- a/packages/react/src/date-pickers/DatePicker/__tests__/DatePicker.test.js +++ b/packages/react/src/date-pickers/DatePicker/__tests__/DatePicker.test.js @@ -1,7 +1,6 @@ import { screen, waitForElementToBeRemoved } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { render } from '@tonic-ui/react/test-utils/render'; -import { transitionDuration } from '@tonic-ui/utils/src'; import { testA11y } from '@tonic-ui/react/test-utils/accessibility'; import { Box, @@ -13,18 +12,21 @@ import { } from '@tonic-ui/react/src'; import { CalendarIcon } from '@tonic-ui/react-icons/src'; import * as dateFns from 'date-fns'; +import * as dateFnsLocale from 'date-fns/locale'; import React, { useCallback } from 'react'; describe('DatePicker', () => { - const TestComponent = (props) => { + const TestComponent = ({ + inputFormat = 'yyyy-MM-dd', + ...rest + }) => { const [colorStyle] = useColorStyle(); - const inputFormat = 'MM/dd/yyyy'; - const onChange = jest.fn(); - const onError = jest.fn(); const inputError = false; - const value = new Date('2024-08-01'); const formatDate = useCallback((date, format) => { - return dateFns.format(date, format); + const options = { + locale: dateFnsLocale['en-US'], + }; + return dateFns.format(date, format, options); }, []); const renderInput = useCallback(({ error, inputProps }) => { return ( @@ -36,9 +38,12 @@ describe('DatePicker', () => { )} - data-testid="date-picker-input" - error={inputError} + data-testid="date-picker-input-control" + inputProps={{ + 'data-testid': 'date-picker-input-element', + }} placeholder={inputFormat} + error={inputError} /> {inputError && ( Invalid date @@ -53,12 +58,9 @@ describe('DatePicker', () => { closeOnSelect={false} firstDayOfWeek={0} formatDate={formatDate} - onChange={onChange} - onError={onError} - value={value} inputFormat={inputFormat} renderInput={renderInput} - {...props} + {...rest} /> ); }; @@ -68,23 +70,43 @@ describe('DatePicker', () => { const renderOptions = { useCSSVariables: true, }; + const defaultValue = new Date('2024-08-01'); + const inputFormat = 'yyyy-MM-dd'; + const mockOnChange = jest.fn(); const { container } = render(( - + ), renderOptions); const datePicker = screen.getByTestId('date-picker'); - const datePickerInput = screen.getByTestId('date-picker-input'); + const datePickerInputControl = screen.getByTestId('date-picker-input-control'); + const datePickerInputElement = screen.getByTestId('date-picker-input-element'); // The date picker and date picker input should be in the document expect(datePicker).toBeInTheDocument(); - expect(datePickerInput).toBeInTheDocument(); + expect(datePickerInputControl).toBeInTheDocument(); + expect(datePickerInputElement).toBeInTheDocument(); // Open the date picker - await user.click(datePickerInput); + await user.click(datePickerInputControl); // The "menu" role should be in the document expect(await screen.findByRole('menu')).toBeInTheDocument(); + // Select a date + const dateItem = screen.getByText('15'); // Assuming 15th is a selectable date + await user.click(dateItem); + + expect(mockOnChange).toHaveBeenCalled(); + expect(datePickerInputElement).toHaveValue('2024-08-15'); + + // The "menu" role should not be in the document + await waitForElementToBeRemoved(() => screen.getByRole('menu')); + expect(container).toMatchSnapshot(); await testA11y(container, { @@ -99,25 +121,4 @@ describe('DatePicker', () => { }, }); }); - - it('should close the date picker when a date is selected and closeOnSelect is true', async () => { - const user = userEvent.setup(); - render(); - - const datePickerInput = screen.getByTestId('date-picker-input'); - - // Open the date picker - await user.click(datePickerInput); - - // Select a date - const dateButton = screen.getByText('15'); // Assuming 15th is a selectable date - await user.click(dateButton); - - const duration = 100; // Shorten the duration to 100ms for testing - // The "menu" role should not be in the document - await waitForElementToBeRemoved(() => screen.getByRole('menu'), { - // The toast should be removed after the duration plus the transition. - timeout: duration + transitionDuration.standard + 100, // see "date-pickers/DatePicker/DatePickerContent.js" - }); - }); }); diff --git a/packages/react/src/date-pickers/DatePicker/__tests__/__snapshots__/DatePicker.test.js.snap b/packages/react/src/date-pickers/DatePicker/__tests__/__snapshots__/DatePicker.test.js.snap index e89a64e970..ad36af86d6 100644 --- a/packages/react/src/date-pickers/DatePicker/__tests__/__snapshots__/DatePicker.test.js.snap +++ b/packages/react/src/date-pickers/DatePicker/__tests__/__snapshots__/DatePicker.test.js.snap @@ -26,10 +26,9 @@ exports[`DatePicker should render correctly 1`] = ` height: var(--tonic-sizes-8x); background-color: var(--tonic-colors-transparent); border: var(--tonic-borders-1); - border-color: var(--tonic-colors-blue-60); + border-color: var(--tonic-colors-gray-60); border-radius: var(--tonic-radii-sm); color: var(--tonic-colors-white-primary); - z-index: 1; } .emotion-4:invalid, @@ -134,401 +133,6 @@ exports[`DatePicker should render correctly 1`] = ` padding-right: calc(.75rem - .0625rem); } -.emotion-12 { - position: absolute; - z-index: var(--tonic-zIndices-dropdown); -} - -.emotion-14 { - height: 0; - opacity: 1; - overflow: hidden; - -webkit-transition: height 133ms linear,opacity 133ms linear; - transition: height 133ms linear,opacity 133ms linear; -} - -.emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -webkit-box-pack: stretch; - -ms-flex-pack: stretch; - -webkit-justify-content: stretch; - justify-content: stretch; - min-width: 328px; - min-height: 308px; - background-color: var(--tonic-colors-gray-90); - border: var(--tonic-borders-1); - border-color: var(--tonic-colors-gray-70); - border-radius: var(--tonic-radii-sm); - box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.48),0 2px 4px 0 rgba(0, 0, 0, 0.16); - padding-left: var(--tonic-space-6x); - padding-right: var(--tonic-space-6x); - padding-top: var(--tonic-space-3x); - padding-bottom: var(--tonic-space-3x); -} - -.emotion-20 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex: none; - -ms-flex: none; - flex: none; - margin-bottom: var(--tonic-space-3x); -} - -.emotion-22 { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - background-color: inherit; - border: var(--tonic-borders-1); - color: var(--tonic-colors-white-primary); - cursor: pointer; - outline: 0; - padding: 0; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - white-space: nowrap; - border-radius: var(--tonic-radii-sm); - padding-left: var(--tonic-space-3x); - padding-right: var(--tonic-space-3x); - -webkit-transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),color 200ms cubic-bezier(0.4, 0, 0.2, 1); - transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),color 200ms cubic-bezier(0.4, 0, 0.2, 1); - min-height: var(--tonic-sizes-8x); - font-size: var(--tonic-fontSizes-sm); - line-height: var(--tonic-lineHeights-sm); - border-color: var(--tonic-colors-transparent); - width: var(--tonic-sizes-8x); - height: var(--tonic-sizes-8x); -} - -.emotion-22:focus-visible { - border-color: var(--tonic-colors-blue-60); - box-shadow: inset 0 0 0 .0625rem #1e5ede,inset 0 0 0 .125rem rgba(0, 0, 0, 1.0); - z-index: 1; -} - -.emotion-22[aria-selected=true], -.emotion-22[data-selected] { - background-color: var(--tonic-colors-gray-70); - border-color: var(--tonic-colors-gray-70); - color: var(--tonic-colors-white-emphasis); - pointer-events: none; -} - -.emotion-22:hover, -.emotion-22[data-hover] { - color: var(--tonic-colors-blue-40); - z-index: 2; -} - -.emotion-22:hover:not(:focus-visible), -.emotion-22[data-hover]:not(:focus-visible) { - border-color: var(--tonic-colors-blue-50); -} - -.emotion-22:active, -.emotion-22[data-active] { - border-color: var(--tonic-colors-blue-50); - background-color: rgba(0, 0, 0, 0.12); - color: var(--tonic-colors-blue-40); -} - -.emotion-22:disabled, -.emotion-22:disabled:focus, -.emotion-22:disabled:hover, -.emotion-22[aria-disabled=true], -.emotion-22[aria-disabled=true]:focus, -.emotion-22[aria-disabled=true]:hover, -.emotion-22[data-disabled] { - border-color: var(--tonic-colors-transparent); - color: var(--tonic-colors-white-emphasis); - cursor: not-allowed; - opacity: 0.28; -} - -.emotion-26 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - font-size: var(--tonic-fontSizes-md); - line-height: var(--tonic-lineHeights-md); -} - -.emotion-26:hover>*, -.emotion-26[data-hover]>* { - opacity: 1; - visibility: visible; -} - -.emotion-28 { - display: block; -} - -.emotion-30 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - margin-left: var(--tonic-space-2x); - opacity: 0; - visibility: hidden; -} - -.emotion-32 { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - background-color: inherit; - border: var(--tonic-borders-1); - color: var(--tonic-colors-white-primary); - cursor: pointer; - outline: 0; - padding: 0; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - white-space: nowrap; - border-radius: var(--tonic-radii-sm); - padding-left: 0; - padding-right: 0; - -webkit-transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),color 200ms cubic-bezier(0.4, 0, 0.2, 1); - transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),color 200ms cubic-bezier(0.4, 0, 0.2, 1); - min-height: auto; - font-size: var(--tonic-fontSizes-sm); - line-height: var(--tonic-lineHeights-sm); - border-color: var(--tonic-colors-transparent); - width: var(--tonic-sizes-4x); - height: var(--tonic-sizes-4x); -} - -.emotion-32:focus-visible { - border-color: var(--tonic-colors-blue-60); - box-shadow: inset 0 0 0 .0625rem #1e5ede,inset 0 0 0 .125rem rgba(0, 0, 0, 1.0); - z-index: 1; -} - -.emotion-32[aria-selected=true], -.emotion-32[data-selected] { - background-color: var(--tonic-colors-gray-70); - border-color: var(--tonic-colors-gray-70); - color: var(--tonic-colors-white-emphasis); - pointer-events: none; -} - -.emotion-32:hover, -.emotion-32[data-hover] { - border-color: var(--tonic-colors-transparent); - color: var(--tonic-colors-blue-40); -} - -.emotion-32:active, -.emotion-32[data-active] { - border-color: var(--tonic-colors-transparent); - color: var(--tonic-colors-blue-40); -} - -.emotion-32:disabled, -.emotion-32:disabled:focus, -.emotion-32:disabled:hover, -.emotion-32[aria-disabled=true], -.emotion-32[aria-disabled=true]:focus, -.emotion-32[aria-disabled=true]:hover, -.emotion-32[data-disabled] { - border-color: var(--tonic-colors-transparent); - color: var(--tonic-colors-white-emphasis); - cursor: not-allowed; - opacity: 0.28; -} - -.emotion-44 { - -webkit-flex: auto; - -ms-flex: auto; - flex: auto; -} - -.emotion-46 { - display: grid; - grid-template-rows: auto; - grid-template-columns: repeat(7, 40px); -} - -.emotion-48 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - height: var(--tonic-sizes-10x); - color: var(--tonic-colors-white-primary); - cursor: default; -} - -.emotion-64 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - height: var(--tonic-sizes-10x); - color: var(--tonic-colors-white-tertiary); - cursor: pointer; -} - -.emotion-64[aria-selected=true], -.emotion-64[data-selected] { - color: var(--tonic-colors-white-primary); - background-color: var(--tonic-colors-blue-60); -} - -.emotion-64[aria-selected=true]:hover, -.emotion-64[data-selected]:hover { - background-color: var(--tonic-colors-blue-50); -} - -.emotion-64:hover, -.emotion-64[data-hover] { - background-color: var(--tonic-colors-gray-80); -} - -.emotion-72 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - height: var(--tonic-sizes-10x); - color: var(--tonic-colors-white-primary); - cursor: pointer; -} - -.emotion-72[aria-selected=true], -.emotion-72[data-selected] { - color: var(--tonic-colors-white-primary); - background-color: var(--tonic-colors-blue-60); -} - -.emotion-72[aria-selected=true]:hover, -.emotion-72[data-selected]:hover { - background-color: var(--tonic-colors-blue-50); -} - -.emotion-72:hover, -.emotion-72[data-hover] { - background-color: var(--tonic-colors-gray-80); -} - -.emotion-74 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - height: var(--tonic-sizes-10x); - color: var(--tonic-colors-blue-40); - cursor: pointer; -} - -.emotion-74[aria-selected=true], -.emotion-74[data-selected] { - color: var(--tonic-colors-white-primary); - background-color: var(--tonic-colors-blue-60); -} - -.emotion-74[aria-selected=true]:hover, -.emotion-74[data-selected]:hover { - background-color: var(--tonic-colors-blue-50); -} - -.emotion-74:hover, -.emotion-74[data-hover] { - background-color: var(--tonic-colors-gray-80); -} -
@@ -564,355 +168,13 @@ exports[`DatePicker should render correctly 1`] = `
- `;