fix(date): update onChange to handle null value when date input is cleared

Author: MartinWeb

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<ComponentPropsWithRef<'input'>, 'value'> & {
   /** A modifier for specified className */
@@ -47,7 +47,6 @@ const handlers = {
     (e: ChangeEvent<HTMLInputElement>) => {
       const newValue = e.currentTarget.valueAsDate;
       onChange &&
-        newValue &&
         onChange({
           value: newValue,
           name,

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(
+      <CustomDate value={initialValue} />
+    );
+
+    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 */}
+        <label htmlFor="date">Date:</label>
+        <CustomDate
+          onChange={onChangeMock}
+          name="date"
+          id="date"
+          value={initialValue}
+        />
+      </>
+    );
+    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 */}
+        <label htmlFor="date">Date:</label>
+        <CustomDate
+          onChange={onChangeMock}
+          name="date"
+          id="date"
+          value={initialValue}
+        />
+      </>
+    );
+    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(
+      <CustomDate classModifier="required" />
+    );
+    container.querySelector('.af-form__input-date--required');
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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('<NumberInput>', () => {
+  it('renders DateInput correctly', () => {
+    const { asFragment, getByLabelText } = render(
+      <DateInput
+        label="Date début"
+        id="iddateinput"
+        name="namedateinput"
+        value={new Date('2024-03-04')}
+        onChange={() => {}}
+      />
+    );
+
+    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');
+  });
+});

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`] = `
+<DocumentFragment>
+  <input
+    class="af-form__input-date af-form__input-date--required"
+    required=""
+    type="date"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Date component calls onChange handler when input value changes 1`] = `
+<DocumentFragment>
+  <label
+    for="date"
+  >
+    Date:
+  </label>
+  <input
+    class="af-form__input-date"
+    id="date"
+    name="date"
+    type="date"
+    value="2024-03-04"
+  />
+</DocumentFragment>
+`;
+
+exports[`Date component calls onChange handler when input value changes although target value is null 1`] = `
+<DocumentFragment>
+  <label
+    for="date"
+  >
+    Date:
+  </label>
+  <input
+    class="af-form__input-date"
+    id="date"
+    name="date"
+    type="date"
+    value="2024-03-04"
+  />
+</DocumentFragment>
+`;
+
+exports[`Date component renders with initial value 1`] = `
+<DocumentFragment>
+  <input
+    class="af-form__input-date"
+    type="date"
+    value="2024-03-04"
+  />
+</DocumentFragment>
+`;

packages/Form/Input/date/src/__tests__/__snapshots__/DateInput.spec.tsx.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NumberInput> renders DateInput correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="row af-form__group"
+  >
+    <div
+      class="col-md-2"
+    >
+      <label
+        class="af-form__group-label"
+        for="iddateinput"
+      >
+        Date début
+      </label>
+    </div>
+    <div
+      class="col-md-10"
+    >
+      <div
+        class="af-form__date"
+      >
+        <input
+          class="af-form__input-date"
+          id="iddateinput"
+          name="namedateinput"
+          type="date"
+          value="2024-03-04"
+        />
+      </div>
+      <small
+        class="af-form__help"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;