From f6dcf14d74c37a8514756082f3395aed3abd224e Mon Sep 17 00:00:00 2001 From: Youssef ELAMMARI Date: Tue, 5 Mar 2024 14:40:29 +0100 Subject: [PATCH 1/2] test(date): add test cases including a test of fix for onChange with null value when date input is cleared --- .../Input/date/src/__tests__/Date.spec.tsx | 86 +++++++++++++++++++ .../date/src/__tests__/DateInput.spec.tsx | 26 ++++++ .../__snapshots__/Date.spec.tsx.snap | 56 ++++++++++++ .../__snapshots__/DateInput.spec.tsx.snap | 38 ++++++++ 4 files changed, 206 insertions(+) create mode 100644 packages/Form/Input/date/src/__tests__/Date.spec.tsx create mode 100644 packages/Form/Input/date/src/__tests__/DateInput.spec.tsx create mode 100644 packages/Form/Input/date/src/__tests__/__snapshots__/Date.spec.tsx.snap create mode 100644 packages/Form/Input/date/src/__tests__/__snapshots__/DateInput.spec.tsx.snap diff --git a/packages/Form/Input/date/src/__tests__/Date.spec.tsx b/packages/Form/Input/date/src/__tests__/Date.spec.tsx new file mode 100644 index 000000000..7159d64e2 --- /dev/null +++ b/packages/Form/Input/date/src/__tests__/Date.spec.tsx @@ -0,0 +1,86 @@ +import { render } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import React from 'react'; +import CustomDate from '../Date'; + +describe('Date component', () => { + it('renders with initial value', () => { + const initialValue = new Date('2024-03-04'); + const { asFragment, getByDisplayValue } = render( + + ); + + getByDisplayValue('2024-03-04'); + + expect(asFragment()).toMatchSnapshot(); + }); + + it('calls onChange handler when input value changes', () => { + const onChangeMock = jest.fn(); + const initialValue = new Date('2024-03-04'); + const { getByLabelText, asFragment } = render( + <> + {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} + + + + ); + const inputElement = getByLabelText('Date:') as HTMLInputElement; + + userEvent.type(inputElement, '2024-03-05'); + + expect(onChangeMock).toHaveBeenCalledWith({ + value: new Date('2024-03-05'), + name: 'date', + id: 'date', + }); + + expect(inputElement.value).toBe('2024-03-05'); + + expect(asFragment()).toMatchSnapshot(); + }); + + it('calls onChange handler when input value changes although target value is null', () => { + const initialValue = new Date('2024-03-04'); + const onChangeMock = jest.fn(); + const { getByLabelText, asFragment } = render( + <> + {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} + + + + ); + const inputElement = getByLabelText('Date:') as HTMLInputElement; + + userEvent.clear(inputElement); + + expect(inputElement.value).toBe(''); + + expect(onChangeMock).toHaveBeenCalledWith({ + value: null, + name: 'date', + id: 'date', + }); + + expect(asFragment()).toMatchSnapshot(); + }); + + it('applies class modifier', () => { + const { container, asFragment } = render( + + ); + container.querySelector('.af-form__input-date--required'); + + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/packages/Form/Input/date/src/__tests__/DateInput.spec.tsx b/packages/Form/Input/date/src/__tests__/DateInput.spec.tsx new file mode 100644 index 000000000..97287cd89 --- /dev/null +++ b/packages/Form/Input/date/src/__tests__/DateInput.spec.tsx @@ -0,0 +1,26 @@ +import { render } from '@testing-library/react'; +import React from 'react'; +import DateInput from '../DateInput'; + +describe('', () => { + it('renders DateInput correctly', () => { + const { asFragment, getByLabelText } = render( + {}} + /> + ); + + expect(asFragment()).toMatchSnapshot(); + + const inputElement = getByLabelText('Date début'); + expect(inputElement).toHaveAttribute('type', 'date'); + expect(inputElement).toHaveValue('2024-03-04'); + expect(inputElement).toHaveClass('af-form__input-date'); + + expect(inputElement.id).toBe('iddateinput'); + }); +}); diff --git a/packages/Form/Input/date/src/__tests__/__snapshots__/Date.spec.tsx.snap b/packages/Form/Input/date/src/__tests__/__snapshots__/Date.spec.tsx.snap new file mode 100644 index 000000000..a866fa9b9 --- /dev/null +++ b/packages/Form/Input/date/src/__tests__/__snapshots__/Date.spec.tsx.snap @@ -0,0 +1,56 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Date component applies class modifier 1`] = ` + + + +`; + +exports[`Date component calls onChange handler when input value changes 1`] = ` + + + + +`; + +exports[`Date component calls onChange handler when input value changes although target value is null 1`] = ` + + + + +`; + +exports[`Date component renders with initial value 1`] = ` + + + +`; diff --git a/packages/Form/Input/date/src/__tests__/__snapshots__/DateInput.spec.tsx.snap b/packages/Form/Input/date/src/__tests__/__snapshots__/DateInput.spec.tsx.snap new file mode 100644 index 000000000..b51814f35 --- /dev/null +++ b/packages/Form/Input/date/src/__tests__/__snapshots__/DateInput.spec.tsx.snap @@ -0,0 +1,38 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders DateInput correctly 1`] = ` + +
+
+ +
+
+
+ +
+ +
+
+ +`; From ff6f85ed09fbb0c2c4b1615fc8d9e79c1f9afdc3 Mon Sep 17 00:00:00 2001 From: Youssef ELAMMARI Date: Tue, 5 Mar 2024 14:41:40 +0100 Subject: [PATCH 2/2] fix(date): update onChange to handle null value when date input is cleared --- packages/Form/Input/date/src/Date.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/Form/Input/date/src/Date.tsx b/packages/Form/Input/date/src/Date.tsx index 8cb7dffcc..06be0ee4c 100644 --- a/packages/Form/Input/date/src/Date.tsx +++ b/packages/Form/Input/date/src/Date.tsx @@ -1,6 +1,6 @@ -import React, { ChangeEvent, ComponentPropsWithRef, forwardRef } from 'react'; import { getComponentClassName } from '@axa-fr/react-toolkit-core'; import { withInput } from '@axa-fr/react-toolkit-form-core'; +import React, { ChangeEvent, ComponentPropsWithRef, forwardRef } from 'react'; type Props = Omit, 'value'> & { /** A modifier for specified className */ @@ -47,7 +47,6 @@ const handlers = { (e: ChangeEvent) => { const newValue = e.currentTarget.valueAsDate; onChange && - newValue && onChange({ value: newValue, name,