fix(datepicker): fire onChange callback when typed date is invalid (#336

)

* test: move setup function to new file

* fix(datepicker): fire onChange callback when typed date is invalid

* test(datepicker): fix test for usecase "onChange is fired when invalid date is typed"

package.json

@@ -52,6 +52,7 @@
     "@storybook/react": "5.3.19",
     "@testing-library/jest-dom": "5.11.2",
     "@testing-library/react": "10.4.8",
+    "@testing-library/user-event": "12.1.0",
     "@types/jest": "26.0.9",
     "@types/storybook__react": "5.2.1",
     "autoprefixer": "9.8.6",
@@ -80,15 +81,17 @@
     "semantic-ui-react": ">=0.75.0"
   },
   "resolutions": {
-    "handlebars" : "4.5.0"
+    "handlebars": "4.5.0"
   },
   "jest": {
     "globals": {
       "ts-jest": {
         "tsConfig": "tsconfig.test.json"
       }
     },
-    "setupFilesAfterEnv": ["./jest.setup.ts"],
+    "setupFilesAfterEnv": [
+      "./jest.setup.ts"
+    ],
     "transform": {
       ".+\\.css$": "jest-transform-css",
       ".(js|ts)x?": "ts-jest"

src/__tests__/_utils.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { SemanticDatepickerProps } from '../types';
+import DatePicker from '../';
+
+export const setup = (props: Partial<SemanticDatepickerProps> = {}) => {
+  const options = render(<DatePicker onChange={jest.fn()} {...props} />);
+  const getQuery = props.inline ? options.queryByTestId : options.getByTestId;
+  const getIcon = () => options.getByTestId('datepicker-icon');
+
+  return {
+    ...options,
+    getIcon,
+    openDatePicker: () => fireEvent.click(getIcon()),
+    rerender: (newProps?: Partial<SemanticDatepickerProps>) =>
+      options.rerender(
+        <DatePicker onChange={jest.fn()} {...props} {...newProps} />
+      ),
+    datePickerInput: getQuery('datepicker-input')
+      ?.firstChild as HTMLInputElement,
+  };
+};

src/__tests__/datepicker.test.tsx

@@ -1,28 +1,10 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import { SemanticDatepickerProps } from '../types';
+import { fireEvent } from '@testing-library/react';
 import localeEn from '../locales/en-US.json';
 import localePt from '../locales/pt-BR.json';
 import { getShortDate } from '../utils';
-import DatePicker from '../';
-
-const setup = (props: Partial<SemanticDatepickerProps> = {}) => {
-  const options = render(<DatePicker onChange={jest.fn()} {...props} />);
-  const getQuery = props.inline ? options.queryByTestId : options.getByTestId;
-  const getIcon = () => options.getByTestId('datepicker-icon');
-
-  return {
-    ...options,
-    getIcon,
-    openDatePicker: () => fireEvent.click(getIcon()),
-    rerender: (newProps?: Partial<SemanticDatepickerProps>) =>
-      options.rerender(
-        <DatePicker onChange={jest.fn()} {...props} {...newProps} />
-      ),
-    datePickerInput: getQuery('datepicker-input')
-      ?.firstChild as HTMLInputElement,
-  };
-};
+import { setup } from './_utils';
+
 const onBlur = jest.fn();
 let spy: jest.SpyInstance;
 

src/__tests__/usecases.test.tsx

@@ -0,0 +1,23 @@
+import { fireEvent, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { setup } from './_utils';
+
+it('onChange is fired when invalid date is typed', () => {
+  const onBlur = jest.fn();
+  const onChange = jest.fn();
+  const { datePickerInput, openDatePicker } = setup({ onBlur, onChange });
+
+  openDatePicker();
+  fireEvent.click(screen.getByText('Today'));
+
+  expect(onChange).toHaveBeenCalledTimes(1);
+  expect(onBlur).toHaveBeenCalledTimes(1);
+
+  userEvent.type(datePickerInput, '{backspace}');
+  userEvent.type(datePickerInput, '{backspace}');
+  fireEvent.keyDown(datePickerInput, { keyCode: 13 });
+
+  expect(datePickerInput.value).toBe('');
+  expect(onBlur).toHaveBeenCalledTimes(2);
+  expect(onChange).toHaveBeenCalledTimes(2);
+});

src/index.tsx

@@ -342,7 +342,7 @@ class SemanticDatepicker extends React.Component<
   };
 
   handleBlur = (event?: React.SyntheticEvent) => {
-    const { format, onBlur } = this.props;
+    const { format, onBlur, onChange } = this.props;
     const { typedValue } = this.state;
 
     onBlur(event);
@@ -369,7 +369,9 @@ class SemanticDatepicker extends React.Component<
       }
     }
 
-    this.setState({ typedValue: null });
+    this.setState({ typedValue: null }, () => {
+      onChange(event, { ...this.props, value: null });
+    });
   };
 
   handleChange = (event: React.SyntheticEvent, { value }) => {

yarn.lock

@@ -1904,6 +1904,13 @@
     "@babel/runtime" "^7.10.3"
     "@testing-library/dom" "^7.17.1"
 
+"@testing-library/user-event@12.1.0":
+  version "12.1.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-12.1.0.tgz#a2597419466a93e338c91baa7bb22d4da0309d1d"
+  integrity sha512-aH/XuNFpPD6dA+fh754EGqKeAzpH66HpLJYkv9vOAih2yGmTM8JiZ8uisQDGWRPkc6sxE2zCqDwLR4ZskhRCxw==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+
 "@types/babel__core@^7.1.0":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.3.tgz#e441ea7df63cd080dfcd02ab199e6d16a735fc30"