chore(dependencies): update dependencies and unit tests (#1253)

* update dependencies * fix useSelect tests * fix combobox and multiple selection tests * fix coverage * further version bumps
downshift-js · Mar 24, 2021 · 4571990 · 4571990
1 parent 493bbb2
commit 4571990
Show file tree

Hide file tree

Showing 18 changed files with 300 additions and 142 deletions.
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,30 +1,30 @@
 {
   "downshift.cjs.js": {
-    "bundled": 148721,
-    "minified": 68507,
-    "gzipped": 14453
+    "bundled": 149451,
+    "minified": 68556,
+    "gzipped": 14398
   },
   "downshift.umd.min.js": {
-    "bundled": 156563,
-    "minified": 51795,
-    "gzipped": 14102
+    "bundled": 156339,
+    "minified": 52343,
+    "gzipped": 14138
   },
   "downshift.umd.js": {
-    "bundled": 201175,
-    "minified": 70094,
-    "gzipped": 18317
+    "bundled": 202102,
+    "minified": 70464,
+    "gzipped": 18354
   },
   "downshift.esm.js": {
-    "bundled": 145342,
-    "minified": 65553,
-    "gzipped": 14304,
+    "bundled": 144747,
+    "minified": 64534,
+    "gzipped": 14156,
     "treeshaked": {
       "rollup": {
-        "code": 2274,
-        "import_statements": 317
+        "code": 2275,
+        "import_statements": 318
       },
       "webpack": {
-        "code": 4625
+        "code": 4626
       }
     }
   }

diff --git a/package.json b/package.json
@@ -66,47 +66,47 @@
     "react": ">=16.12.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.12.5",
+    "@babel/runtime": "^7.13.10",
     "compute-scroll-into-view": "^1.0.17",
     "prop-types": "^15.7.2",
-    "react-is": "^17.0.1"
+    "react-is": "^17.0.2"
   },
   "devDependencies": {
-    "@babel/helpers": "^7.12.5",
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@testing-library/cypress": "^7.0.3",
-    "@testing-library/dom": "^7.29.2",
-    "@testing-library/jest-dom": "^5.11.8",
+    "@babel/helpers": "^7.13.10",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@testing-library/cypress": "^7.0.4",
+    "@testing-library/dom": "^7.30.0",
+    "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/preact": "^2.0.1",
-    "@testing-library/react": "^11.2.3",
-    "@testing-library/react-hooks": "^4.0.0",
-    "@testing-library/user-event": "^12.6.0",
-    "@types/jest": "^26.0.20",
-    "@types/react": "^17.0.0",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/react-hooks": "^5.1.0",
+    "@testing-library/user-event": "^13.0.10",
+    "@types/jest": "^26.0.21",
+    "@types/react": "^17.0.3",
     "babel-plugin-macros": "^3.0.1",
     "babel-plugin-no-side-effect-class-properties": "0.0.7",
     "babel-preset-react-native": "^4.0.1",
     "buble": "^0.20.0",
     "cpy-cli": "^3.1.1",
     "cross-env": "^7.0.3",
-    "cypress": "^6.2.1",
+    "cypress": "^6.8.0",
     "docz": "^2.3.1",
     "docz-theme-default": "^1.2.0",
     "eslint-plugin-cypress": "^2.11.2",
-    "eslint-plugin-react": "7.22.0",
-    "flow-bin": "^0.142.0",
+    "eslint-plugin-react": "7.23.1",
+    "flow-bin": "^0.147.0",
     "flow-coverage-report": "^0.8.0",
-    "kcd-scripts": "^7.5.3",
+    "kcd-scripts": "^8.1.1",
     "npm-run-all": "^4.1.5",
-    "preact": "^10.5.9",
+    "preact": "^10.5.13",
     "react": "^16.13.1",
-    "react-dom": "^17.0.1",
-    "react-native": "^0.63.4",
-    "react-test-renderer": "^17.0.1",
+    "react-dom": "^17.0.2",
+    "react-native": "^0.64.0",
+    "react-test-renderer": "^17.0.2",
     "rollup-plugin-babel": "^4.4.0",
     "serve": "^11.3.2",
-    "start-server-and-test": "^1.11.7",
-    "typescript": "^4.1.3"
+    "start-server-and-test": "^1.12.1",
+    "typescript": "^4.2.3"
   },
   "eslintConfig": {
     "extends": "./node_modules/kcd-scripts/eslint.js",

diff --git a/src/__tests__/utils.get-a11y-status-message.js b/src/__tests__/utils.get-a11y-status-message.js
@@ -50,6 +50,14 @@ const tests = [
     output:
       '1 result is available, use up and down arrow keys to navigate. Press Enter key to select.',
   },
+  {
+    input: {
+      isOpen: true,
+      resultCount: 5,
+      previousResultCount: 5,
+    },
+    output: '',
+  },
 ]
 
 tests.forEach(({input, output}) => {

diff --git a/src/hooks/testUtils.js b/src/hooks/testUtils.js
@@ -38,9 +38,7 @@ const defaultIds = {
   inputId: 'downshift-test-id-input',
 }
 
-const waitForDebouncedA11yStatusUpdate = () => {
-  act(() => jest.advanceTimersByTime(200))
-}
+const waitForDebouncedA11yStatusUpdate = () => act(() => jest.advanceTimersByTime(200))
 
 const MemoizedItem = React.memo(function Item({
   index,

diff --git a/src/hooks/useCombobox/__tests__/getComboboxProps.test.js b/src/hooks/useCombobox/__tests__/getComboboxProps.test.js
@@ -2,7 +2,8 @@ import {act, renderHook} from '@testing-library/react-hooks'
 import {noop} from '../../../utils'
 import {renderUseCombobox} from '../testUtils'
 import {defaultIds, items} from '../../testUtils'
-import useCombobox from '..'
+import useCombobox from '..'// eslint-disable-next-line import/default
+import utils from '../../utils'
 
 describe('getComboboxProps', () => {
   describe('hook props', () => {
@@ -72,6 +73,14 @@ describe('getComboboxProps', () => {
   })
 
   describe('non production errors', () => {
+    beforeEach(() => {
+      const {useGetterPropsCalledChecker} = jest.requireActual('../../utils')
+      jest
+        .spyOn(utils, 'useGetterPropsCalledChecker')
+        .mockImplementation(useGetterPropsCalledChecker)
+      jest.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
     test('will be displayed if getComboboxProps is not called', () => {
       renderHook(() => {
         const {getInputProps, getMenuProps} = useCombobox({items})

diff --git a/src/hooks/useCombobox/__tests__/getInputProps.test.js b/src/hooks/useCombobox/__tests__/getInputProps.test.js
@@ -7,6 +7,8 @@ import * as stateChangeTypes from '../stateChangeTypes'
 import {noop} from '../../../utils'
 import {renderUseCombobox, renderCombobox} from '../testUtils'
 import {items, defaultIds} from '../../testUtils'
+// eslint-disable-next-line import/default
+import utils from '../../utils'
 import useCombobox from '..'
 
 describe('getInputProps', () => {
@@ -668,7 +670,7 @@ describe('getInputProps', () => {
       })
 
       test('end it prevents the default event and calls dispatch only when menu is open', () => {
-        const {input, rerender, renderSpy} = renderCombobox()
+        const {input, rerender, renderSpy} = renderCombobox({isOpen: false})
         const keyDownEvent = createEvent.keyDown(input, {key: 'End'})
 
         renderSpy.mockClear()
@@ -700,7 +702,7 @@ describe('getInputProps', () => {
       })
 
       test('home it prevents the default event calls dispatch only when menu is open', () => {
-        const {input, rerender, renderSpy} = renderCombobox()
+        const {input, rerender, renderSpy} = renderCombobox({isOpen: false})
         const keyDownEvent = createEvent.keyDown(input, {key: 'Home'})
 
         renderSpy.mockClear()
@@ -746,14 +748,17 @@ describe('getInputProps', () => {
       })
 
       test('escape it prevents the rerender when menu closed, no selectedItem and no inputValue', () => {
-        const {keyDownOnInput, rerender, renderSpy} = renderCombobox()
+        const {keyDownOnInput, rerender, renderSpy} = renderCombobox({
+          isOpen: false,
+          inputValue: '',
+        })
 
         renderSpy.mockClear()
         keyDownOnInput('Escape')
 
         expect(renderSpy).toHaveBeenCalledTimes(0) // no re-render
 
-        rerender({isOpen: true})
+        rerender({isOpen: true, inputValue: ''})
         renderSpy.mockClear() // reset rerender and initial render
         keyDownOnInput('Escape')
 
@@ -843,7 +848,10 @@ describe('getInputProps', () => {
       })
 
       test('enter with closed menu, no item highlighted or composing event, it will not rerender or prevent event default', () => {
-        const {input, renderSpy, rerender} = renderCombobox()
+        const {input, renderSpy, rerender} = renderCombobox({
+          isOpen: false,
+          highlightedIndex: -1,
+        })
         let keyDownEvent = createEvent.keyDown(input, {key: 'Enter'})
 
         renderSpy.mockClear()
@@ -854,6 +862,7 @@ describe('getInputProps', () => {
 
         rerender({
           isOpen: true,
+          highlightedIndex: -1,
         })
         renderSpy.mockClear()
         fireEvent(input, keyDownEvent)
@@ -900,7 +909,7 @@ describe('getInputProps', () => {
       })
 
       test('tab it prevents the rerender and does not call dispatch when menu is closed', () => {
-        const {rerender, renderSpy} = renderCombobox()
+        const {rerender, renderSpy} = renderCombobox({isOpen: false})
 
         renderSpy.mockClear()
         userEvent.tab()
@@ -1073,6 +1082,14 @@ describe('getInputProps', () => {
   })
 
   describe('non production errors', () => {
+    beforeEach(() => {
+      const {useGetterPropsCalledChecker} = jest.requireActual('../../utils')
+      jest
+        .spyOn(utils, 'useGetterPropsCalledChecker')
+        .mockImplementation(useGetterPropsCalledChecker)
+      jest.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
     test('will be displayed if getInputProps is not called', () => {
       renderHook(() => {
         const {getMenuProps, getComboboxProps} = useCombobox({items})

diff --git a/src/hooks/useCombobox/__tests__/getMenuProps.test.js b/src/hooks/useCombobox/__tests__/getMenuProps.test.js
@@ -2,6 +2,8 @@ import {act, renderHook} from '@testing-library/react-hooks'
 import {noop} from '../../../utils'
 import {renderCombobox, renderUseCombobox} from '../testUtils'
 import {defaultIds, items} from '../../testUtils'
+// eslint-disable-next-line import/default
+import utils from '../../utils'
 import useCombobox from '..'
 
 describe('getMenuProps', () => {
@@ -117,6 +119,14 @@ describe('getMenuProps', () => {
   })
 
   describe('non production errors', () => {
+    beforeEach(() => {
+      const {useGetterPropsCalledChecker} = jest.requireActual('../../utils')
+      jest
+        .spyOn(utils, 'useGetterPropsCalledChecker')
+        .mockImplementation(useGetterPropsCalledChecker)
+      jest.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
     test('will be displayed if getMenuProps is not called', () => {
       renderHook(() => {
         const {getInputProps, getComboboxProps} = useCombobox({items})

diff --git a/src/hooks/useCombobox/__tests__/memo.test.js b/src/hooks/useCombobox/__tests__/memo.test.js
@@ -13,7 +13,11 @@ test('functions are memoized', () => {
 test('will skip disabled items after component rerenders and items are memoized', () => {
   function renderItem(props) {
     return (
-      <MemoizedItem disabled={props.index === items.length - 2} {...props} />
+      <MemoizedItem
+        key={props.index}
+        disabled={props.index === items.length - 2}
+        {...props}
+      />
     )
   }
 
@@ -23,7 +27,7 @@ test('will skip disabled items after component rerenders and items are memoized'
     renderItem,
   })
 
-  rerender({renderItem})
+  rerender({renderItem, isOpen: true})
   keyDownOnInput('ArrowUp')
 
   expect(input).toHaveAttribute(