Skip to content

Commit

Permalink
improvement: clearing DateTimeInput
Browse files Browse the repository at this point in the history 
Manually clearing the input doesn't work. Only of you clear the input
and change the date and clear it a second time, the value is actually
cleared.

Added clear button to clear the input as manually clearing the input is
an issue within the react-datetime library that is not updated anymore.
This allows for the DateTimeInput to support undefined in onChange.

Closes #704
  • Loading branch information
@gidomanders
Gido Manders authored and gidomanders committed Jan 16, 2024
1 parent e093ee6 commit daca395
Show file tree
Hide file tree
Showing 46 changed files with 3,804 additions and 4,161 deletions.
4,699 changes: 2,035 additions & 2,664 deletions package-lock.json
View file

Large diffs are not rendered by default.

79 changes: 39 additions & 40 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
"dependencies": {
"bootstrap": "5.3.2",
"react-is": "18.2.0",
"reactstrap": "9.2.0"
"reactstrap": "9.2.1"
},
"peerDependencies": {
"@42.nl/final-form-field-validation": "^1.0.0",
Expand Down Expand Up @@ -153,88 +153,87 @@
"@42.nl/final-form-field-validation": "1.0.3",
"@42.nl/jarb-final-form": "3.1.4",
"@42.nl/react-error-store": "1.1.4",
"@42.nl/spring-connect": "7.0.0",
"@rollup/plugin-typescript": "11.1.5",
"@42.nl/spring-connect": "7.1.2",
"@rollup/plugin-typescript": "11.1.6",
"@storybook/addon-a11y": "6.5.16",
"@storybook/addon-actions": "6.5.16",
"@storybook/addon-docs": "6.5.16",
"@storybook/builder-webpack5": "6.5.16",
"@storybook/manager-webpack5": "6.5.16",
"@storybook/react": "6.5.16",
"@tanstack/react-query": "5.0.0",
"@testing-library/dom": "9.3.3",
"@testing-library/jest-dom": "6.1.4",
"@testing-library/react": "14.0.0",
"@testing-library/user-event": "14.5.1",
"@tanstack/react-query": "5.17.14",
"@testing-library/dom": "9.3.4",
"@testing-library/jest-dom": "6.2.0",
"@testing-library/react": "14.1.2",
"@testing-library/user-event": "14.5.2",
"@tippyjs/react": "4.2.6",
"@types/estree": "1.0.3",
"@types/jest": "29.5.6",
"@types/lodash": "4.14.200",
"@types/overlayscrollbars": "1.12.3",
"@types/react": "18.2.30",
"@types/react-avatar-editor": "13.0.1",
"@types/react-bootstrap-typeahead": "5.1.11",
"@types/react-color": "3.0.9",
"@types/react-dom": "18.2.14",
"@typescript-eslint/eslint-plugin": "6.8.0",
"@typescript-eslint/parser": "6.8.0",
"axios": "1.5.1",
"@types/estree": "1.0.5",
"@types/jest": "29.5.11",
"@types/lodash": "4.14.202",
"@types/overlayscrollbars": "1.12.5",
"@types/react": "18.2.48",
"@types/react-avatar-editor": "13.0.2",
"@types/react-bootstrap-typeahead": "5.1.13",
"@types/react-color": "3.0.11",
"@types/react-dom": "18.2.18",
"@typescript-eslint/eslint-plugin": "5.62.0",
"@typescript-eslint/parser": "5.62.0",
"axios": "1.6.5",
"babel-eslint": "10.1.0",
"babel-loader": "9.1.3",
"better-npm-audit": "3.7.3",
"browserify-zlib": "0.2.0",
"buffer": "6.0.3",
"canvas": "2.11.2",
"classnames": "2.3.2",
"eslint": "8.51.0",
"classnames": "2.5.1",
"eslint": "8.56.0",
"eslint-config-react-app": "7.0.1",
"eslint-plugin-import": "2.28.1",
"eslint-plugin-jest": "27.4.2",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-import": "2.29.1",
"eslint-plugin-jest": "27.6.3",
"eslint-plugin-jsx-a11y": "6.8.0",
"eslint-plugin-react": "7.33.2",
"eslint-plugin-react-hooks": "4.6.0",
"final-form": "4.20.10",
"html-webpack-plugin": "5.5.3",
"html-webpack-plugin": "5.6.0",
"https-browserify": "1.0.0",
"husky": "8.0.3",
"jest": "29.7.0",
"jest-environment-jsdom": "29.7.0",
"jest-watch-typeahead": "2.2.2",
"lint-staged": "15.0.2",
"lint-staged": "15.2.0",
"lodash": "4.17.21",
"moment": "2.29.4",
"np": "8.0.4",
"overlayscrollbars": "2.4.3",
"moment": "2.30.1",
"np": "9.2.0",
"overlayscrollbars": "2.4.6",
"overlayscrollbars-react": "0.5.3",
"pica": "9.0.1",
"query-string": "7.1.3",
"prettier": "3.0.3",
"prettier": "3.2.2",
"react": "18.2.0",
"react-async": "10.0.1",
"react-avatar-editor": "13.0.0",
"react-bootstrap-typeahead": "6.2.3",
"react-avatar-editor": "13.0.2",
"react-bootstrap-typeahead": "6.3.2",
"react-color": "2.19.3",
"react-datetime": "3.2.0",
"react-display-name": "0.2.5",
"react-docgen-typescript-plugin": "1.0.5",
"react-dom": "18.2.0",
"react-final-form": "6.5.9",
"react-quill": "2.0.0",
"react-router-dom": "6.17.0",
"react-router-dom": "6.21.2",
"react-test-renderer": "18.2.0",
"react-text-mask": "5.5.0",
"react-textarea-autosize": "8.5.3",
"rollup": "3.25.1",
"rollup": "4.9.5",
"rollup-plugin-auto-external": "2.0.0",
"rollup-plugin-copy": "3.5.0",
"rollup-plugin-visualizer": "5.9.2",
"sass": "1.69.4",
"rollup-plugin-visualizer": "5.12.0",
"sass": "1.69.7",
"sass-loader": "13.3.2",
"stream-browserify": "^3.0.0",
"stream-http": "3.2.0",
"ts-jest": "29.1.1",
"ts-loader": "9.5.0",
"typescript": "5.2.2",
"ts-loader": "9.5.1",
"typescript": "5.3.3",
"webpack": "5.89.0"
},
"jest": {
Expand Down
2 changes: 1 addition & 1 deletion src/core/Modal/Modal.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ describe('Component: Modal', () => {

fireEvent.click(screen.getByLabelText('Close'));

expect(onCloseSpy).toBeCalledTimes(1);
expect(onCloseSpy).toHaveBeenCalledTimes(1);
});
});
});
4 changes: 2 additions & 2 deletions src/core/OpenCloseModal/OpenCloseModal.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,15 +125,15 @@ describe('Component: OpenCloseModal', () => {

fireEvent.click(screen.getByText('Cancel'));

expect(onCloseSpy).toBeCalledTimes(1);
expect(onCloseSpy).toHaveBeenCalledTimes(1);
});

it('should call onSave when save button clicked', () => {
const { onSaveSpy } = setup({ isOpen: true });

fireEvent.click(screen.getByText('Save'));

expect(onSaveSpy).toBeCalledTimes(1);
expect(onSaveSpy).toHaveBeenCalledTimes(1);
});
});
});
8 changes: 4 additions & 4 deletions src/core/ProgressStepper/ProgressStepper.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ describe('Component: ProgressStepper', () => {

const { container } = render(
<ProgressStepper
steps={[ 'start' ]}
steps={['start']}
// @ts-expect-error Test mock
colorForStep={colorForStepSpy}
titleForStep={titleForStepSpy}
Expand All @@ -20,10 +20,10 @@ describe('Component: ProgressStepper', () => {

expect(container).toMatchSnapshot();

expect(colorForStepSpy).toBeCalledTimes(1);
expect(colorForStepSpy).toHaveBeenCalledTimes(1);
expect(colorForStepSpy).toHaveBeenCalledWith('start', 0);

expect(titleForStepSpy).toBeCalledTimes(1);
expect(titleForStepSpy).toHaveBeenCalledTimes(1);
expect(titleForStepSpy).toHaveBeenCalledWith('start', 0);
});

Expand All @@ -33,7 +33,7 @@ describe('Component: ProgressStepper', () => {

render(
<ProgressStepper
steps={[ 'start', 'end' ]}
steps={['start', 'end']}
colorForStep={() => 'primary'}
titleForStep={(step) => step}
// Only enable the first step.
Expand Down
83 changes: 48 additions & 35 deletions src/core/SearchInput/SearchInput.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,7 @@ describe('Component: SearchInput', () => {
children: withChildren ? () => <h1>Children</h1> : undefined
};

const { container } = render(
<SearchInput {...props} />
);
const { container } = render(<SearchInput {...props} />);

return { container, onChangeSpy };
}
Expand Down Expand Up @@ -96,46 +94,54 @@ describe('Component: SearchInput', () => {

describe('events', () => {
it('should debounce by 500 by default', () => {
// @ts-expect-error Test mock
const debounceSpy = jest.spyOn(lodash, 'debounce').mockImplementation((fn, debounce) => {
expect(debounce).toBe(500);
return fn;
});
const debounceSpy = jest
.spyOn(lodash, 'debounce')
// @ts-expect-error Test mock
.mockImplementation((fn, debounce) => {
expect(debounce).toBe(500);
return fn;
});

const { onChangeSpy } = setup({
showIcon: true,
showLabel: true
});

fireEvent.change(screen.getByLabelText('Search'), { target: { value: 'Maarten' } });
fireEvent.change(screen.getByLabelText('Search'), {
target: { value: 'Maarten' }
});

expect(onChangeSpy).toBeCalledTimes(1);
expect(onChangeSpy).toBeCalledWith('Maarten');
expect(onChangeSpy).toHaveBeenCalledTimes(1);
expect(onChangeSpy).toHaveBeenCalledWith('Maarten');

expect(debounceSpy).toBeCalledTimes(2);
expect(debounceSpy).toHaveBeenCalledTimes(2);
expect(debounceSpy.mock.calls[0][1]).toBe(500);
expect(debounceSpy.mock.calls[0][2]).toBe(undefined);
});

it('should be able to debounce with a custom value', () => {
// @ts-expect-error Test mock
const debounceSpy = jest.spyOn(lodash, 'debounce').mockImplementation((fn, debounce) => {
expect(debounce).toBe(10);
return fn;
});
const debounceSpy = jest
.spyOn(lodash, 'debounce')
// @ts-expect-error Test mock
.mockImplementation((fn, debounce) => {
expect(debounce).toBe(10);
return fn;
});

const { onChangeSpy } = setup({
showIcon: true,
showLabel: true,
debounce: 10
});

fireEvent.change(screen.getByLabelText('Search'), { target: { value: 'Maarten' } });
fireEvent.change(screen.getByLabelText('Search'), {
target: { value: 'Maarten' }
});

expect(onChangeSpy).toBeCalledTimes(1);
expect(onChangeSpy).toBeCalledWith('Maarten');
expect(onChangeSpy).toHaveBeenCalledTimes(1);
expect(onChangeSpy).toHaveBeenCalledWith('Maarten');

expect(debounceSpy).toBeCalledTimes(2);
expect(debounceSpy).toHaveBeenCalledTimes(2);
expect(debounceSpy.mock.calls[0][1]).toBe(10);
});

Expand All @@ -150,13 +156,15 @@ describe('Component: SearchInput', () => {
debounceSettings
});

fireEvent.change(screen.getByLabelText('Search'), { target: { value: 'M' } });
fireEvent.change(screen.getByLabelText('Search'), {
target: { value: 'M' }
});

// Trailing will cause the first character to go through immediately
expect(onChangeSpy).toBeCalledTimes(1);
expect(onChangeSpy).toBeCalledWith('M');
expect(onChangeSpy).toHaveBeenCalledTimes(1);
expect(onChangeSpy).toHaveBeenCalledWith('M');

expect(debounceSpy).toBeCalledTimes(2);
expect(debounceSpy).toHaveBeenCalledTimes(2);
expect(debounceSpy.mock.calls[0][2]).toBe(debounceSettings);
});

Expand Down Expand Up @@ -196,10 +204,10 @@ describe('Component: SearchInput', () => {

expect(await screen.findByDisplayValue('external change')).toBeDefined();

expect(onChangeSpy).toBeCalledTimes(1);
expect(onChangeSpy).toBeCalledWith('external change');
expect(onChangeSpy).toHaveBeenCalledTimes(1);
expect(onChangeSpy).toHaveBeenCalledWith('external change');

expect(cancel).toBeCalledTimes(1);
expect(cancel).toHaveBeenCalledTimes(1);
});

describe('onKeyUp behavior', () => {
Expand All @@ -213,15 +221,17 @@ describe('Component: SearchInput', () => {
showLabel: true
});

fireEvent.change(screen.getByLabelText('Search'), { target: { value: 'Maarten' } });
fireEvent.change(screen.getByLabelText('Search'), {
target: { value: 'Maarten' }
});

expect(onChangeSpy).toBeCalledTimes(1);
expect(onChangeSpy).toBeCalledWith('Maarten');
expect(onChangeSpy).toHaveBeenCalledTimes(1);
expect(onChangeSpy).toHaveBeenCalledWith('Maarten');

fireEvent.keyUp(screen.getByLabelText('Search'), { key: 'Enter' });

expect(onChangeSpy).toBeCalledTimes(2);
expect(onChangeSpy).toBeCalledWith('Maarten');
expect(onChangeSpy).toHaveBeenCalledTimes(2);
expect(onChangeSpy).toHaveBeenCalledWith('Maarten');
});

it('should on letters other than "ENTER" wait for the debounce', () => {
Expand All @@ -230,9 +240,12 @@ describe('Component: SearchInput', () => {
showLabel: true
});

fireEvent.keyUp(screen.getByLabelText('Search'), { key: 'a', currentTarget: { value: 'Maarten' } });
fireEvent.keyUp(screen.getByLabelText('Search'), {
key: 'a',
currentTarget: { value: 'Maarten' }
});

expect(onChangeSpy).toBeCalledTimes(0);
expect(onChangeSpy).toHaveBeenCalledTimes(0);
});
});

Expand Down
Loading

0 comments on commit daca395

Please sign in to comment.