From d2fc5a7d73b6d15d9d4bbb181e5f8a307f938dab Mon Sep 17 00:00:00 2001 From: -l Date: Thu, 12 Dec 2024 20:29:32 +0100 Subject: [PATCH 1/3] add example --- .../date-picker/stories/DatePicker.stories.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/dnb-eufemia/src/components/date-picker/stories/DatePicker.stories.tsx b/packages/dnb-eufemia/src/components/date-picker/stories/DatePicker.stories.tsx index fadcc453a71..5b14da98202 100644 --- a/packages/dnb-eufemia/src/components/date-picker/stories/DatePicker.stories.tsx +++ b/packages/dnb-eufemia/src/components/date-picker/stories/DatePicker.stories.tsx @@ -548,3 +548,13 @@ export const GlobalStatusExample = () => { ) } + +export const CorrectInvalidDateExample = () => { + return ( + + ) +} From fb54ba99023950afffd23305b6b7568416b56f1b Mon Sep 17 00:00:00 2001 From: -l Date: Thu, 12 Dec 2024 22:31:09 +0100 Subject: [PATCH 2/3] fix(DatePicker): throw error when date is invalid --- .../date-picker/__tests__/DatePicker.test.tsx | 26 +++++++++++++++++++ .../components/date-picker/hooks/useDates.ts | 6 ++--- .../stories/DatePicker.stories.tsx | 1 + 3 files changed, 30 insertions(+), 3 deletions(-) diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx b/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx index 65baae0bbc7..ac57c66de4a 100644 --- a/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx +++ b/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx @@ -1413,6 +1413,7 @@ describe('DatePicker component', () => { expect(onChange.mock.calls[4][0].date).toBe('2019-01-03') expect(onChange.mock.calls[4][0].is_valid).toBe(true) }) + it('has to auto-correct invalid min/max dates', async () => { const onChange = jest.fn() @@ -1455,6 +1456,31 @@ describe('DatePicker component', () => { ) }) + it('has to auto-correct invalid date based on min date', async () => { + render( + + ) + + const dayElem = document.querySelectorAll( + 'input.dnb-date-picker__input--day' + )[0] as HTMLInputElement + const monthElem = document.querySelectorAll( + 'input.dnb-date-picker__input--month' + )[0] as HTMLInputElement + const yearElem = document.querySelectorAll( + 'input.dnb-date-picker__input--year' + )[0] as HTMLInputElement + + expect(dayElem.value).toBe('12') + expect(monthElem.value).toBe('12') + expect(yearElem.value).toBe('2024') + }) + it('has valid on_type and onChange event calls', () => { const onType = jest.fn() const onChange = jest.fn() diff --git a/packages/dnb-eufemia/src/components/date-picker/hooks/useDates.ts b/packages/dnb-eufemia/src/components/date-picker/hooks/useDates.ts index ee2433cfcd7..a30d14f9db5 100644 --- a/packages/dnb-eufemia/src/components/date-picker/hooks/useDates.ts +++ b/packages/dnb-eufemia/src/components/date-picker/hooks/useDates.ts @@ -231,9 +231,6 @@ function mapDates( dateFormat, }) - const hasValidStartDate = isValid(startDate) - const hasValidEndDate = isValid(endDate) - const correctedDates = shouldCorrectDate ? correctDates({ startDate, endDate, minDate, maxDate, isRange }) : {} @@ -249,6 +246,9 @@ function mapDates( ...correctedDates, } + const hasValidStartDate = isValid(dates.startDate) + const hasValidEndDate = isValid(dates.endDate) + return { ...dates, __startDay: hasValidStartDate diff --git a/packages/dnb-eufemia/src/components/date-picker/stories/DatePicker.stories.tsx b/packages/dnb-eufemia/src/components/date-picker/stories/DatePicker.stories.tsx index 5b14da98202..b065fd88fdc 100644 --- a/packages/dnb-eufemia/src/components/date-picker/stories/DatePicker.stories.tsx +++ b/packages/dnb-eufemia/src/components/date-picker/stories/DatePicker.stories.tsx @@ -552,6 +552,7 @@ export const GlobalStatusExample = () => { export const CorrectInvalidDateExample = () => { return ( Date: Fri, 13 Dec 2024 12:28:39 +0100 Subject: [PATCH 3/3] Simplify the code used for testing the date picker --- .../date-picker/__tests__/DatePicker.test.tsx | 102 +++++++----------- 1 file changed, 39 insertions(+), 63 deletions(-) diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx b/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx index ac57c66de4a..2115ad36085 100644 --- a/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx +++ b/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx @@ -1278,15 +1278,9 @@ describe('DatePicker component', () => { it('has a working month correction', () => { render() - const dayElem = document.querySelectorAll( - 'input.dnb-date-picker__input--day' - )[0] - const monthElem = document.querySelectorAll( - 'input.dnb-date-picker__input--month' - )[0] - const yearElem = document.querySelectorAll( - 'input.dnb-date-picker__input--year' - )[0] + const [dayElem, monthElem, yearElem] = Array.from( + document.querySelectorAll('input.dnb-date-picker__input') + ) // change the date const day = '01' @@ -1304,9 +1298,9 @@ describe('DatePicker component', () => { }) // then check the new input value - expect((dayElem as HTMLInputElement).value).toBe(day) - expect((monthElem as HTMLInputElement).value).toBe(month) - expect((yearElem as HTMLInputElement).value).toBe(year) + expect(dayElem).toHaveValue(day) + expect(monthElem).toHaveValue(month) + expect(yearElem).toHaveValue(year) }) it('has a working min and max date limitation', () => { @@ -1331,7 +1325,7 @@ describe('DatePicker component', () => { )[1] // by default we have the start day - expect((startElem as HTMLInputElement).value).toBe('02') + expect(startElem).toHaveValue('02') // change to invalid date fireEvent.change(startElem, { @@ -1431,7 +1425,7 @@ describe('DatePicker component', () => { )[0] // by default we have the corrected start day - expect((elem as HTMLInputElement).value).toBe('02') + expect(elem).toHaveValue('02') // change the date to something invalid await userEvent.type(elem, '01') @@ -1466,19 +1460,13 @@ describe('DatePicker component', () => { /> ) - const dayElem = document.querySelectorAll( - 'input.dnb-date-picker__input--day' - )[0] as HTMLInputElement - const monthElem = document.querySelectorAll( - 'input.dnb-date-picker__input--month' - )[0] as HTMLInputElement - const yearElem = document.querySelectorAll( - 'input.dnb-date-picker__input--year' - )[0] as HTMLInputElement + const [dayElem, monthElem, yearElem] = Array.from( + document.querySelectorAll('input.dnb-date-picker__input') + ) - expect(dayElem.value).toBe('12') - expect(monthElem.value).toBe('12') - expect(yearElem.value).toBe('2024') + expect(dayElem).toHaveValue('12') + expect(monthElem).toHaveValue('12') + expect(yearElem).toHaveValue('2024') }) it('has valid on_type and onChange event calls', () => { @@ -1525,14 +1513,14 @@ describe('DatePicker component', () => { type, }) => { // by default we have the start day - expect(dayElem.value).toBe('dd') + expect(dayElem).toHaveValue('dd') expect(onType).toHaveBeenCalledTimes(typeIndex) // change the day fireEvent.change(dayElem, { target: { value: '03' }, }) - expect(dayElem.value).toBe('03') + expect(dayElem).toHaveValue('03') expect(onType).toHaveBeenCalledTimes(typeIndex + 1) expect(onType.mock.calls[typeIndex][0][`${type}_date`]).toBe( 'yyyy-mm-03' @@ -1544,7 +1532,7 @@ describe('DatePicker component', () => { fireEvent.change(monthElem, { target: { value: '01' }, }) - expect(monthElem.value).toBe('01') + expect(monthElem).toHaveValue('01') expect(onType).toHaveBeenCalledTimes(typeIndex + 1) expect( onType.mock.calls[typeIndex][0][`is_valid_${type}_date`] @@ -1558,7 +1546,7 @@ describe('DatePicker component', () => { fireEvent.change(yearElem, { target: { value: '202' }, }) - expect(yearElem.value).toBe('202å') + expect(yearElem).toHaveValue('202å') expect(onType).toHaveBeenCalledTimes(typeIndex + 2) expect(onChange).toHaveBeenCalledTimes(changeIndex) @@ -1566,7 +1554,7 @@ describe('DatePicker component', () => { fireEvent.change(yearElem, { target: { value: '2020' }, }) - expect(yearElem.value).toBe('2020') + expect(yearElem).toHaveValue('2020') expect(onType).toHaveBeenCalledTimes(typeIndex + 3) expect(onChange).toHaveBeenCalledTimes(changeIndex + 1) } @@ -1733,7 +1721,7 @@ describe('DatePicker component', () => { function changeState() { const elem = document.querySelectorAll('input.dnb-input__input')[0] - expect((elem as HTMLInputElement).value).toBe('01') + expect(elem).toHaveValue('01') // 1. change the date with event fireEvent.change(elem, { @@ -1832,7 +1820,7 @@ describe('DatePicker component', () => { )[1] // by default we have the start day - expect((elem as HTMLInputElement).value).toBe('15') + expect(elem).toHaveValue('15') // listen to changes let changedStartDate = null @@ -1857,7 +1845,7 @@ describe('DatePicker component', () => { }) // then check the new input value - expect((elem as HTMLInputElement).value).toBe(value) + expect(elem).toHaveValue(value) // and the event fired value expect(changedStartDate).toBe(`2019-02-${value}`) @@ -1874,7 +1862,7 @@ describe('DatePicker component', () => { }} /> ) - expect((elem as HTMLInputElement).value).toBe('17') + expect(elem).toHaveValue('17') // reset the value fireEvent.change(elem, { @@ -2070,15 +2058,9 @@ describe('DatePicker component', () => { /> ) - const dayElem = document.querySelectorAll( - 'input.dnb-date-picker__input--day' - )[0] as HTMLInputElement - const monthElem = document.querySelectorAll( - 'input.dnb-date-picker__input--month' - )[0] - const yearElem = document.querySelectorAll( - 'input.dnb-date-picker__input--year' - )[0] + const [dayElem, monthElem, yearElem] = Array.from( + document.querySelectorAll('input.dnb-date-picker__input') + ) as Array // set the cursor to the end of the input dayElem.setSelectionRange(2, 2) @@ -2095,10 +2077,10 @@ describe('DatePicker component', () => { ) // also test the key up to change the value on the month input - expect((monthElem as HTMLInputElement).value).toBe('01') + expect(monthElem).toHaveValue('01') fireEvent.keyDown(monthElem, { key: 'Up', keyCode: 38 }) - expect((monthElem as HTMLInputElement).value).toBe('02') + expect(monthElem).toHaveValue('02') // and simulate a left keydown fireEvent.keyDown(monthElem, { key: 'Left', keyCode: 37 }) @@ -2112,18 +2094,18 @@ describe('DatePicker component', () => { ) // also test the key up to change the value on the day input - expect((dayElem as HTMLInputElement).value).toBe('01') + expect(dayElem).toHaveValue('01') fireEvent.keyDown(dayElem, { key: 'Up', keyCode: 38 }) - expect((dayElem as HTMLInputElement).value).toBe('02') + expect(dayElem).toHaveValue('02') // also test the key up to change the value on the year input - expect((yearElem as HTMLInputElement).value).toBe('2019') + expect(yearElem).toHaveValue('2019') fireEvent.keyDown(yearElem, { key: 'Up', keyCode: 38 }) - expect((yearElem as HTMLInputElement).value).toBe('2020') + expect(yearElem).toHaveValue('2020') fireEvent.keyDown(yearElem, { key: 'Down', keyCode: 40 }) - expect((yearElem as HTMLInputElement).value).toBe('2019') + expect(yearElem).toHaveValue('2019') }) it('should display correct start and end month on opening the date picker', async () => { @@ -2230,15 +2212,9 @@ describe('DatePicker component', () => { ) - const dayElem = document.querySelectorAll( - 'input.dnb-date-picker__input--day' - )[0] as HTMLInputElement - const monthElem = document.querySelectorAll( - 'input.dnb-date-picker__input--month' - )[0] as HTMLInputElement - const yearElem = document.querySelectorAll( - 'input.dnb-date-picker__input--year' - )[0] as HTMLInputElement + const [dayElem, monthElem, yearElem] = Array.from( + document.querySelectorAll('input.dnb-date-picker__input') + ) const separator1 = document.querySelectorAll( '.dnb-date-picker--separator' @@ -2247,9 +2223,9 @@ describe('DatePicker component', () => { '.dnb-date-picker--separator' )[0] - expect(dayElem.value).toBe('dd') - expect(monthElem.value).toBe('mm') - expect(yearElem.value).toBe('yyyy') + expect(dayElem).toHaveValue('dd') + expect(monthElem).toHaveValue('mm') + expect(yearElem).toHaveValue('yyyy') expect(separator1.textContent).toBe('/') expect(separator2.textContent).toBe('/') })