From fc2c0ffea8c52b1da766fd02eae83c11f67d187e Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Wed, 6 Dec 2023 11:59:06 -0500 Subject: [PATCH 01/31] update workspace root react and react-dom --- package.json | 6 +++--- yarn.lock | 54 ++++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 47 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 6e28e13199c..5e52a4a2582 100755 --- a/package.json +++ b/package.json @@ -134,11 +134,11 @@ "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", "prettier": "2.2.1", - "react": "17.0.1", + "react": "18.2.0", "react-docgen-typescript": "^1.21.0", - "react-dom": "17.0.1", + "react-dom": "18.2.0", "react-snap": "^1.23.0", - "react-test-renderer": "17.0.1", + "react-test-renderer": "^18.2.0", "redux-mock-store": "^1.5.3", "rehype": "^9.0.0", "rehype-urls": "^1.0.0", diff --git a/yarn.lock b/yarn.lock index 0fd6dad5f23..dfebb13836c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17409,6 +17409,14 @@ react-dom@17.0.1: object-assign "^4.1.1" scheduler "^0.20.1" +react-dom@18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" + integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== + dependencies: + loose-envify "^1.1.0" + scheduler "^0.23.0" + react-element-to-jsx-string@^14.3.4: version "14.3.4" resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.4.tgz#709125bc72f06800b68f9f4db485f2c7d31218a8" @@ -17483,6 +17491,11 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react- resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" + integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== + react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" @@ -17599,6 +17612,14 @@ react-shallow-renderer@^16.13.1: object-assign "^4.1.1" react-is "^16.12.0 || ^17.0.0" +react-shallow-renderer@^16.15.0: + version "16.15.0" + resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457" + integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA== + dependencies: + object-assign "^4.1.1" + react-is "^16.12.0 || ^17.0.0 || ^18.0.0" + react-simple-keyboard@^3.4.187: version "3.4.226" resolved "https://registry.yarnpkg.com/react-simple-keyboard/-/react-simple-keyboard-3.4.226.tgz#84a05dadf32c9c8d13855e3ecc73d4e92b15a7d8" @@ -17629,16 +17650,6 @@ react-style-singleton@^2.1.0: invariant "^2.2.4" tslib "^1.0.0" -react-test-renderer@17.0.1: - version "17.0.1" - resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3187e636c3063e6ae498aedf21ecf972721574c7" - integrity sha512-/dRae3mj6aObwkjCcxZPlxDFh73XZLgvwhhyON2haZGUEhiaY5EjfAdw+d/rQmlcFwdTpMXCSGVk374QbCTlrA== - dependencies: - object-assign "^4.1.1" - react-is "^17.0.1" - react-shallow-renderer "^16.13.1" - scheduler "^0.20.1" - react-test-renderer@^17.0.0: version "17.0.2" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c" @@ -17649,6 +17660,15 @@ react-test-renderer@^17.0.0: react-shallow-renderer "^16.13.1" scheduler "^0.20.2" +react-test-renderer@^18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.2.0.tgz#1dd912bd908ff26da5b9fca4fd1c489b9523d37e" + integrity sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA== + dependencies: + react-is "^18.2.0" + react-shallow-renderer "^16.15.0" + scheduler "^0.23.0" + react-transition-group@^4.3.0: version "4.4.2" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" @@ -17672,6 +17692,13 @@ react@17.0.1: loose-envify "^1.1.0" object-assign "^4.1.1" +react@18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" + integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== + dependencies: + loose-envify "^1.1.0" + reactcss@^1.2.0: version "1.2.3" resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd" @@ -18693,6 +18720,13 @@ scheduler@^0.20.1, scheduler@^0.20.2: loose-envify "^1.1.0" object-assign "^4.1.1" +scheduler@^0.23.0: + version "0.23.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe" + integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw== + dependencies: + loose-envify "^1.1.0" + schema-utils@2.7.0: version "2.7.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7" From 2b5c07266cbb7f778ca275c57db2508c0c179fc3 Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Wed, 6 Dec 2023 13:49:15 -0500 Subject: [PATCH 02/31] root render for all react projects --- app/package.json | 6 +- app/src/App/index.tsx | 5 +- app/src/index.tsx | 9 ++- babel.config.js | 5 +- components/package.json | 3 +- labware-designer/src/index.tsx | 27 ++------ labware-library/package.json | 6 +- labware-library/src/components/App/index.tsx | 5 +- package.json | 2 + protocol-designer/package.json | 6 +- protocol-designer/src/index.tsx | 25 +++---- protocol-library-kludge/package.json | 6 +- protocol-library-kludge/src/App.tsx | 5 +- protocol-library-kludge/src/index.tsx | 10 +-- react-api-client/package.json | 2 +- webpack-config/README.md | 1 - webpack-config/lib/base-config.js | 5 +- yarn.lock | 68 +++++--------------- 18 files changed, 59 insertions(+), 137 deletions(-) diff --git a/app/package.json b/app/package.json index e67b872ccfe..cc713e7dc8c 100644 --- a/app/package.json +++ b/app/package.json @@ -21,7 +21,6 @@ "@ebay/nice-modal-react": "1.2.13", "@fontsource/dejavu-sans": "5.0.3", "@fontsource/public-sans": "5.0.3", - "@hot-loader/react-dom": "17.0.1", "@opentrons/api-client": "link:../api-client", "@opentrons/components": "link:../components", "@opentrons/react-api-client": "link:../react-api-client", @@ -43,10 +42,9 @@ "mixpanel-browser": "2.22.1", "netmask": "2.0.2", "path-to-regexp": "3.0.0", - "react": "17.0.1", - "react-dom": "17.0.1", + "react": "18.2.0", + "react-dom": "18.2.0", "react-error-boundary": "^4.0.10", - "react-hot-loader": "4.13.0", "react-i18next": "^11.7.3", "react-intersection-observer": "^8.33.1", "react-redux": "7.2.1", diff --git a/app/src/App/index.tsx b/app/src/App/index.tsx index 752308ca0ff..38aa5df8e98 100644 --- a/app/src/App/index.tsx +++ b/app/src/App/index.tsx @@ -1,6 +1,5 @@ import * as React from 'react' import { useSelector } from 'react-redux' -import { hot } from 'react-hot-loader/root' import { Flex, POSITION_FIXED, DIRECTION_ROW } from '@opentrons/components' @@ -12,7 +11,7 @@ import { TopPortalRoot } from './portal' const stopEvent = (event: React.MouseEvent): void => event.preventDefault() -export const AppComponent = (): JSX.Element | null => { +export const App = (): JSX.Element | null => { const hasConfigLoaded = useSelector(getConfig) != null const isOnDevice = useSelector(getIsOnDevice) @@ -34,5 +33,3 @@ export const AppComponent = (): JSX.Element | null => { ) : null } - -export const App = hot(AppComponent) diff --git a/app/src/index.tsx b/app/src/index.tsx index ca524cd09bc..9b150d14854 100644 --- a/app/src/index.tsx +++ b/app/src/index.tsx @@ -27,7 +27,11 @@ store.dispatch(uiInitialized()) log.info('Rendering app UI') -ReactDom.render( +const container = document.getElementById('root') + +const root = ReactDom.createRoot(container) + +root.render( @@ -36,6 +40,5 @@ ReactDom.render( - , - document.getElementById('root') + ) diff --git a/babel.config.js b/babel.config.js index a927176a44e..6d6efea1848 100644 --- a/babel.config.js +++ b/babel.config.js @@ -8,7 +8,7 @@ module.exports = { plugins: ['babel-plugin-styled-components', 'babel-plugin-unassert'], }, development: { - plugins: ['babel-plugin-styled-components', 'react-hot-loader/babel'], + plugins: ['babel-plugin-styled-components'], }, test: { plugins: [ @@ -53,17 +53,14 @@ module.exports = { }, { test: 'app-shell/**/*', - plugins: [['react-hot-loader/babel', false]], presets: [['@babel/preset-env', { targets: { electron: '6' } }]], }, { test: 'app-shell-odd/**/*', - plugins: [['react-hot-loader/babel', false]], presets: [['@babel/preset-env', { targets: { electron: '6' } }]], }, { test: ['discovery-client/**/*'], - plugins: [['react-hot-loader/babel', false]], presets: [['@babel/preset-env', { targets: { node: '8' } }]], }, // apps that should be polyfilled diff --git a/components/package.json b/components/package.json index 643bd433cd2..c5c029c236f 100644 --- a/components/package.json +++ b/components/package.json @@ -18,7 +18,7 @@ }, "homepage": "https://github.com/Opentrons/opentrons#readme", "peerDependencies": { - "react": "17.0.1", + "react": "18.2.0", "react-router-dom": "5.1.1" }, "dependencies": { @@ -28,7 +28,6 @@ "@react-spring/web": "9.6.1", "@types/classnames": "2.2.5", "@types/lodash": "^4.14.191", - "@types/react": "^17.0.1", "@types/react-router-dom": "^5.1.7", "@types/styled-components": "^5.1.26", "@types/webpack-env": "^1.16.0", diff --git a/labware-designer/src/index.tsx b/labware-designer/src/index.tsx index 319ac53c267..3bc5e4fbb8e 100644 --- a/labware-designer/src/index.tsx +++ b/labware-designer/src/index.tsx @@ -2,34 +2,17 @@ import * as sharedData from '@opentrons/shared-data' import React from 'react' import ReactDOM from 'react-dom' -import { AppContainer } from 'react-hot-loader' import { App } from './App' -// TODO window.sharedData = sharedData console.log('Functions are available under global "sharedData":', sharedData) -const $root = document.getElementById('root') +const container = document.getElementById('root') -if (!$root) { - throw new Error('fatal: #root not found') +if (!container) { + throw new Error('fatal: #root element not found') } -ReactDOM.render( - - - , - $root -) +const root = ReactDOM.createRoot(container) -// Hot Module Replacement API -if (module.hot) { - module.hot.accept('./App', () => { - ReactDOM.render( - - - , - $root - ) - }) -} +root.render(, root) diff --git a/labware-library/package.json b/labware-library/package.json index 911136b228e..2949be7803d 100644 --- a/labware-library/package.json +++ b/labware-library/package.json @@ -28,7 +28,6 @@ "@types/yup": "0.29.11" }, "dependencies": { - "@hot-loader/react-dom": "17.0.1", "@opentrons/components": "link:../components", "ajv": "6.12.3", "classnames": "2.2.5", @@ -40,9 +39,8 @@ "lodash": "4.17.21", "mixpanel-browser": "2.29.1", "query-string": "6.2.0", - "react": "17.0.1", - "react-dom": "17.0.1", - "react-hot-loader": "4.13.0", + "react": "18.2.0", + "react-dom": "18.2.0", "react-router-dom": "5.1.1", "yup": "0.32.9" } diff --git a/labware-library/src/components/App/index.tsx b/labware-library/src/components/App/index.tsx index 0e8936d9854..37d6ea5fde5 100644 --- a/labware-library/src/components/App/index.tsx +++ b/labware-library/src/components/App/index.tsx @@ -1,6 +1,5 @@ // main application wrapper component import * as React from 'react' -import { hot } from 'react-hot-loader/root' import cx from 'classnames' import { DefinitionRoute } from '../../definitions' @@ -49,8 +48,6 @@ export function AppComponent(props: DefinitionRouteRenderProps): JSX.Element { ) } -export function AppWithRoute(): JSX.Element { +export function App(): JSX.Element { return } /> } - -export const App = hot(AppWithRoute) diff --git a/package.json b/package.json index 5e52a4a2582..7d40ee2afba 100755 --- a/package.json +++ b/package.json @@ -62,7 +62,9 @@ "@types/lodash": "^4.14.191", "@types/multer": "^1.4.5", "@types/netmask": "^1.0.30", + "@types/react": "18.2.0", "@types/react-color": "^3.0.6", + "@types/react-dom": "18.2.0", "@types/react-redux": "^7.1.16", "@types/react-test-renderer": "^17.0.1", "@types/redux-mock-store": "^1.0.2", diff --git a/protocol-designer/package.json b/protocol-designer/package.json index c7350d90c40..4f3af8eb322 100755 --- a/protocol-designer/package.json +++ b/protocol-designer/package.json @@ -19,7 +19,6 @@ "homepage": "https://github.com/Opentrons/opentrons", "license": "Apache-2.0", "dependencies": { - "@hot-loader/react-dom": "17.0.1", "@opentrons/components": "link:../components", "@opentrons/step-generation": "link:../step-generation", "@opentrons/shared-data": "link:../shared-data", @@ -37,12 +36,11 @@ "immer": "9.0.6", "lodash": "4.17.21", "query-string": "6.2.0", - "react": "17.0.1", + "react": "18.2.0", "react-color": "2.19.3", "react-dnd": "6.0.0", "react-dnd-mouse-backend": "0.1.2", - "react-dom": "17.0.1", - "react-hot-loader": "4.13.0", + "react-dom": "18.2.0", "react-redux": "7.2.1", "redux": "4.0.5", "redux-actions": "2.2.1", diff --git a/protocol-designer/src/index.tsx b/protocol-designer/src/index.tsx index dbd5f8b49ba..418109ff4b4 100644 --- a/protocol-designer/src/index.tsx +++ b/protocol-designer/src/index.tsx @@ -2,7 +2,6 @@ import React from 'react' import ReactDOM from 'react-dom' import { Provider } from 'react-redux' import { I18nextProvider } from 'react-i18next' -import { AppContainer } from 'react-hot-loader' import { configureStore } from './configureStore' import { App } from './components/App' @@ -17,24 +16,18 @@ initialize(store) // initialize analytics initializeMixpanel(store.getState()) +const container = document.getElementById('root') + +const root = ReactDOM.createRoot(container) + const render = (Component: any): void => { - ReactDOM.render( + root.render( - - - - - - , - document.getElementById('root') + + + + ) } render(App) - -// Hot Module Replacement API -if (module.hot) { - module.hot.accept('./components/App', () => { - render(App) - }) -} diff --git a/protocol-library-kludge/package.json b/protocol-library-kludge/package.json index 06b17a2ac38..db3c38648bd 100644 --- a/protocol-library-kludge/package.json +++ b/protocol-library-kludge/package.json @@ -20,13 +20,11 @@ "homepage": "https://github.com/Opentrons/opentrons", "license": "Apache-2.0", "dependencies": { - "@hot-loader/react-dom": "17.0.1", "@opentrons/components": "link:../components", "@opentrons/shared-data": "link:../shared-data", "classnames": "2.2.5", "lodash": "4.17.21", - "react": "17.0.1", - "react-dom": "17.0.1", - "react-hot-loader": "4.13.0" + "react": "18.2.0", + "react-dom": "18.2.0" } } diff --git a/protocol-library-kludge/src/App.tsx b/protocol-library-kludge/src/App.tsx index 594def36d21..12f1d2dd806 100644 --- a/protocol-library-kludge/src/App.tsx +++ b/protocol-library-kludge/src/App.tsx @@ -1,10 +1,7 @@ import * as React from 'react' -import { hot } from 'react-hot-loader/root' import { URLDeck } from './URLDeck' import './globals.css' -export function AppComponent(): JSX.Element { +export function App(): JSX.Element { return } - -export const App = hot(AppComponent) diff --git a/protocol-library-kludge/src/index.tsx b/protocol-library-kludge/src/index.tsx index ea3075caf8f..af79dea4976 100644 --- a/protocol-library-kludge/src/index.tsx +++ b/protocol-library-kludge/src/index.tsx @@ -2,10 +2,12 @@ import * as React from 'react' import ReactDOM from 'react-dom' import { App } from './App' -const root = document.getElementById('root') +const container = document.getElementById('root') -if (!root) { - throw new Error('Unable to find #root') +if (!container) { + throw new Error('Unable to find #root element') } -ReactDOM.render(, root) +const root = ReactDOM.createRoot(container) + +root.render() diff --git a/react-api-client/package.json b/react-api-client/package.json index 686cf9d9406..8d8fada63d2 100644 --- a/react-api-client/package.json +++ b/react-api-client/package.json @@ -8,7 +8,7 @@ "types": "lib/index.d.ts", "source": "src/index.ts", "peerDependencies": { - "react": "17.0.1" + "react": "18.2.0" }, "dependencies": { "@opentrons/api-client": "link:../api-client", diff --git a/webpack-config/README.md b/webpack-config/README.md index 3e695e041db..89744adea5c 100644 --- a/webpack-config/README.md +++ b/webpack-config/README.md @@ -44,7 +44,6 @@ module.exports = { Our base configuration is designed to be used with [webpack-merge][] and includes: - `target: 'web'` -- `react-hot-loader/patch` in `entry` if `$NODE_ENV` is `development` - `mode` set to `development` or `production` depending on `$NODE_ENV` - `devtool` set to sane development and production values - All loader rules in `rules` enabled (see below) diff --git a/webpack-config/lib/base-config.js b/webpack-config/lib/base-config.js index 0f70f105e5a..6ec85654bd9 100644 --- a/webpack-config/lib/base-config.js +++ b/webpack-config/lib/base-config.js @@ -12,7 +12,7 @@ const { DEV_MODE, ENABLE_ANALYZER, DEFAULT_PORT } = require('./env') module.exports = { target: 'web', - entry: DEV_MODE ? ['react-hot-loader/patch'] : [], + entry: [], output: { filename: DEV_MODE ? 'bundle.js' : 'bundle.[contenthash].js', @@ -44,9 +44,6 @@ module.exports = { ].filter(Boolean), resolve: { - alias: { - 'react-dom': '@hot-loader/react-dom', - }, extensions: ['.wasm', '.mjs', '.js', '.ts', '.tsx', '.json'], }, diff --git a/yarn.lock b/yarn.lock index dfebb13836c..569afac4043 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1686,15 +1686,6 @@ dependencies: "@hapi/hoek" "^9.0.0" -"@hot-loader/react-dom@17.0.1": - version "17.0.1" - resolved "https://registry.yarnpkg.com/@hot-loader/react-dom/-/react-dom-17.0.1.tgz#0c75b4dd068f819435dafb3e8809ca1749695656" - integrity sha512-QttzEibkIFkl/WV1dsLXg73YIweNo9ySbB0/26068RqFGWyv7pKyictWsaQXqSj1y66/BDn3kglCHgroGrv3vA== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - scheduler "^0.20.1" - "@hutson/parse-repository-url@^3.0.0": version "3.0.2" resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340" @@ -2186,7 +2177,6 @@ "@ebay/nice-modal-react" "1.2.13" "@fontsource/dejavu-sans" "5.0.3" "@fontsource/public-sans" "5.0.3" - "@hot-loader/react-dom" "17.0.1" "@opentrons/api-client" "link:api-client" "@opentrons/components" "link:components" "@opentrons/react-api-client" "link:react-api-client" @@ -2208,10 +2198,9 @@ mixpanel-browser "2.22.1" netmask "2.0.2" path-to-regexp "3.0.0" - react "17.0.1" - react-dom "17.0.1" + react "18.2.0" + react-dom "18.2.0" react-error-boundary "^4.0.10" - react-hot-loader "4.13.0" react-i18next "^11.7.3" react-intersection-observer "^8.33.1" react-redux "7.2.1" @@ -2240,7 +2229,6 @@ "@react-spring/web" "9.6.1" "@types/classnames" "2.2.5" "@types/lodash" "^4.14.191" - "@types/react" "^17.0.1" "@types/react-router-dom" "^5.1.7" "@types/styled-components" "^5.1.26" "@types/webpack-env" "^1.16.0" @@ -3889,6 +3877,13 @@ "@types/react" "*" "@types/reactcss" "*" +"@types/react-dom@18.2.0": + version "18.2.0" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.0.tgz#374f28074bb117f56f58c4f3f71753bebb545156" + integrity sha512-8yQrvS6sMpSwIovhPOwfyNf2Wz6v/B62LFSVYQ85+Rq3tLsBIG7rP5geMxaijTUxSkrO6RzN/IRuIAADYQsleA== + dependencies: + "@types/react" "*" + "@types/react-dom@>=16.9.0": version "17.0.7" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.7.tgz#b8ee15ead9e5d6c2c858b44949fdf2ebe5212232" @@ -3946,10 +3941,10 @@ "@types/scheduler" "*" csstype "^3.0.2" -"@types/react@^17.0.1": - version "17.0.30" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.30.tgz#2f8e6f5ab6415c091cc5e571942ee9064b17609e" - integrity sha512-3Dt/A8gd3TCXi2aRe84y7cK1K8G+N9CZRDG8kDGguOKa0kf/ZkSwTmVIDPsm/KbQOVMaDJXwhBtuOXxqwdpWVg== +"@types/react@18.2.0": + version "18.2.0" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.0.tgz#15cda145354accfc09a18d2f2305f9fc099ada21" + integrity sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" @@ -10803,7 +10798,7 @@ global-tunnel-ng@^2.7.1: npm-conf "^1.1.3" tunnel "^0.0.6" -global@^4.3.0, global@^4.4.0: +global@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406" integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w== @@ -17400,15 +17395,6 @@ react-docgen@^5.0.0: node-dir "^0.1.10" strip-indent "^3.0.0" -react-dom@17.0.1: - version "17.0.1" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6" - integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - scheduler "^0.20.1" - react-dom@18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" @@ -17445,20 +17431,6 @@ react-fast-compare@^2.0.1: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== -react-hot-loader@4.13.0: - version "4.13.0" - resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.13.0.tgz#c27e9408581c2a678f5316e69c061b226dc6a202" - integrity sha512-JrLlvUPqh6wIkrK2hZDfOyq/Uh/WeVEr8nc7hkn2/3Ul0sx1Kr5y4kOGNacNRoj7RhwLNcQ3Udf1KJXrqc0ZtA== - dependencies: - fast-levenshtein "^2.0.6" - global "^4.3.0" - hoist-non-react-statics "^3.3.0" - loader-utils "^1.1.0" - prop-types "^15.6.1" - react-lifecycles-compat "^3.0.4" - shallowequal "^1.1.0" - source-map "^0.7.3" - react-i18next@^11.7.3: version "11.11.0" resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.11.0.tgz#2f7c6cb4f81f94d1728a02d60e4bb5216709f942" @@ -17496,7 +17468,7 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react- resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== -react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4: +react-lifecycles-compat@^3.0.2: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== @@ -17684,14 +17656,6 @@ react-viewport-list@6.3.0: resolved "https://registry.yarnpkg.com/react-viewport-list/-/react-viewport-list-6.3.0.tgz#dc73210d590c2a10f49be8902d86bb5e04a4b47e" integrity sha512-IV7/yeqpurCa2FytCnUWyY664kbDxg5EgQQJHQhI6X2zUZXEq8BlQLfDoPRF2MA8YsVihsC7y3iEf2wGt+Lluw== -react@17.0.1: - version "17.0.1" - resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" - integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - react@18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" @@ -18712,7 +18676,7 @@ scheduler@^0.18.0: loose-envify "^1.1.0" object-assign "^4.1.1" -scheduler@^0.20.1, scheduler@^0.20.2: +scheduler@^0.20.2: version "0.20.2" resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== From 01d3055c8d68b13827a7a925b39c02b1414b8f97 Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Wed, 6 Dec 2023 17:32:52 -0500 Subject: [PATCH 03/31] migrate waitFor from render hook --- app/package.json | 8 +- app/src/App/__tests__/hooks.test.tsx | 4 +- .../__tests__/CustomKeyboard.test.tsx | 2 +- .../__tests__/NormalKeyboard.test.tsx | 2 +- .../Numpad/__tests__/Numpad.test.tsx | 2 +- .../__tests__/useToggleGroup.test.tsx | 8 +- .../__tests__/useHistoricRunDetails.test.tsx | 6 +- .../useOffsetCandidatesForAnalysis.test.tsx | 8 +- .../useConfirmCrashRecovery.test.tsx | 4 +- .../__tests__/hooks.test.tsx | 6 +- .../__tests__/useRobotUpdateInfo.test.tsx | 4 +- .../__tests__/useAttachedModules.test.tsx | 4 +- .../useAttachedPipetteCalibrations.test.tsx | 4 +- .../__tests__/useAttachedPipettes.test.tsx | 4 +- ...tachedPipettesFromInstrumentsQuery.test.ts | 4 +- .../__tests__/useCalibrationTaskList.test.tsx | 4 +- .../__tests__/useDeckCalibrationData.test.tsx | 4 +- .../useDeckCalibrationStatus.test.tsx | 4 +- .../hooks/__tests__/useIsFlex.test.tsx | 4 +- .../__tests__/useIsRobotViewable.test.tsx | 4 +- .../__tests__/useLPCDisabledReason.test.tsx | 4 +- .../__tests__/useLPCSuccessToast.test.ts | 2 +- .../useLabwareRenderInfoForRunById.test.tsx | 2 +- .../hooks/__tests__/useLights.test.tsx | 4 +- .../useModuleCalibrationStatus.test.tsx | 4 +- ...seModuleRenderInfoForProtocolById.test.tsx | 2 +- .../usePipetteOffsetCalibration.test.tsx | 4 +- .../usePipetteOffsetCalibrations.test.tsx | 4 +- .../useProtocolAnalysisErrors.test.tsx | 2 +- .../useProtocolDetailsForRun.test.tsx | 2 +- .../__tests__/useProtocolMetadata.test.tsx | 4 +- .../useProtocolRunAnalyticsData.test.tsx | 4 +- .../Devices/hooks/__tests__/useRobot.test.tsx | 4 +- .../__tests__/useRobotAnalyticsData.test.tsx | 4 +- .../useRunCalibrationStatus.test.tsx | 4 +- .../useRunCreatedAtTimestamp.test.tsx | 2 +- .../hooks/__tests__/useRunHasStarted.test.tsx | 2 +- .../useRunPipetteInfoByMount.test.tsx | 2 +- .../useStoredProtocolAnalysis.test.tsx | 4 +- .../__tests__/useSyncRobotClock.test.tsx | 4 +- .../useTipLengthCalibrations.test.tsx | 4 +- .../useTrackCreateProtocolRunEvent.test.tsx | 4 +- .../useTrackProtocolRunEvent.test.tsx | 4 +- .../useUnmatchedModulesForProtocol.test.tsx | 2 +- .../EmergencyStop/__tests__/hooks.test.tsx | 2 +- .../__tests__/useLaunchLPC.test.tsx | 4 +- .../ModuleCard/__tests__/hooks.test.tsx | 30 +- .../__tests__/useHardwareStatusText.test.tsx | 4 +- .../__tests__/hooks.test.tsx | 4 +- .../hooks/__tests__/useCloneRun.test.tsx | 6 +- .../hooks/__tests__/useCurrentRunId.test.tsx | 2 +- .../__tests__/useMostRecentRunId.test.tsx | 2 +- .../ProtocolsLanding/__tests__/hooks.test.tsx | 14 +- .../NetworkSettings/__tests__/hooks.test.tsx | 4 +- .../RunTimeControl/__tests__/hooks.test.tsx | 2 +- .../pages/Labware/__tests__/hooks.test.tsx | 22 +- .../__tests__/useNetworkConnection.test.tsx | 4 +- .../__tests__/LongPressModal.test.tsx | 2 +- .../Protocols/hooks/__tests__/hooks.test.tsx | 4 +- app/src/redux/robot-api/hooks.ts | 1 + .../robot-update/__tests__/hooks.test.ts | 2 +- .../__tests__/useCanDisconnect.test.tsx | 4 +- components/package.json | 4 +- .../src/hooks/__tests__/useDrag.test.ts | 2 +- .../src/hooks/__tests__/useIdle.test.ts | 2 +- .../src/hooks/__tests__/useLongPress.test.ts | 2 +- .../src/hooks/__tests__/useScrolling.test.tsx | 2 +- .../src/hooks/__tests__/useSwipe.test.tsx | 2 +- .../src/interaction-enhancers/useHover.ts | 2 +- components/src/tooltips/useTooltip.ts | 5 +- labware-library/package.json | 4 +- package.json | 10 +- protocol-designer/package.json | 2 +- react-api-client/package.json | 2 +- .../src/api/__tests__/useHost.test.tsx | 10 +- .../useDeleteCalibrationMutation.test.tsx | 19 +- .../src/health/__tests__/useHealth.test.tsx | 12 +- ...eCreateMaintenanceCommandMutation.test.tsx | 6 +- .../useCreateMaintenanceRunMutation.test.tsx | 6 +- .../useDeleteMaintenanceRunMutation.test.tsx | 6 +- .../__tests__/useMaintenanceRunQuery.test.tsx | 6 +- .../usePlayMaintenanceRunMutation.test.tsx | 7 +- .../__tests__/useModulesQuery.test.tsx | 7 +- .../src/modules/useModulesQuery.ts | 4 +- .../__tests__/usePipettesQuery.test.tsx | 8 +- .../usePipettesSettingsQuery.test.tsx | 7 +- .../src/pipettes/usePipetteSettingsQuery.ts | 4 +- .../__tests__/useAllProtocolsQuery.test.tsx | 6 +- .../useCreateProtocolMutation.test.tsx | 6 +- .../__tests__/useDeleteProtocol.test.tsx | 6 +- .../__tests__/useProtocolQuery.test.tsx | 6 +- ...AcknowledgeEstopDisengageMutation.test.tsx | 6 +- .../src/robot/__tests__/useDoorQuery.test.tsx | 7 +- .../robot/__tests__/useEstopQuery.test.tsx | 7 +- .../robot/__tests__/useLightsQuery.test.tsx | 7 +- react-api-client/src/robot/useDoorQuery.ts | 4 +- react-api-client/src/robot/useEstopQuery.ts | 5 +- react-api-client/src/robot/useLightsQuery.ts | 4 +- .../__tests__/useAllCommandsQuery.test.tsx | 6 +- .../runs/__tests__/useAllRunsQuery.test.tsx | 8 +- .../runs/__tests__/useCommandQuery.test.tsx | 6 +- .../useCreateCommandMutation.test.tsx | 6 +- ...seCreateLabwareDefinitionMutation.test.tsx | 6 +- .../useCreateLabwareOffsetsMutation.test.tsx | 6 +- .../useCreateLiveCommandMutation.test.tsx | 6 +- .../__tests__/useCreateRunMutation.test.tsx | 6 +- .../useDismissCurrentRunMutation.test.tsx | 6 +- .../__tests__/usePauseRunMutation.test.tsx | 7 +- .../__tests__/usePlayRunMutation.test.tsx | 7 +- .../__tests__/useRunActionMutations.test.tsx | 6 +- .../src/runs/__tests__/useRunQuery.test.tsx | 6 +- .../__tests__/useStopRunMutation.test.tsx | 6 +- .../useUpdateRobotNameMutation.test.tsx | 6 +- .../__tests__/useAllSessionsQuery.test.tsx | 8 +- .../useCreateSessionMutation.test.tsx | 6 +- .../__tests__/useSessionQuery.test.tsx | 6 +- .../__tests__/useSessionsByTypeQuery.test.tsx | 6 +- ...useAllCurrentSubsystemUpdateQuery.test.tsx | 6 +- .../useCurrentSubsystemUpdateQuery.test.tsx | 6 +- .../useSubsystemUpdateQuery.test.tsx | 6 +- .../useUpdateSubsystemMutation.test.tsx | 6 +- yarn.lock | 538 +++++++++++++----- 122 files changed, 723 insertions(+), 445 deletions(-) diff --git a/app/package.json b/app/package.json index cc713e7dc8c..4bace377645 100644 --- a/app/package.json +++ b/app/package.json @@ -28,7 +28,7 @@ "@thi.ng/paths": "1.6.5", "@types/uuid": "^3.4.7", "classnames": "2.2.5", - "connected-react-router": "6.8.0", + "connected-react-router": "6.9.3", "core-js": "3.2.1", "date-fns": "2.25.0", "events": "3.0.0", @@ -45,10 +45,10 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-error-boundary": "^4.0.10", - "react-i18next": "^11.7.3", + "react-i18next": "13.0.1", "react-intersection-observer": "^8.33.1", - "react-redux": "7.2.1", - "react-router-dom": "5.1.1", + "react-redux": "8.1.2", + "react-router-dom": "5.3.4", "react-select": "5.4.0", "react-simple-keyboard": "^3.4.187", "react-viewport-list": "6.3.0", diff --git a/app/src/App/__tests__/hooks.test.tsx b/app/src/App/__tests__/hooks.test.tsx index 52091f553d8..56181df226b 100644 --- a/app/src/App/__tests__/hooks.test.tsx +++ b/app/src/App/__tests__/hooks.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { createStore } from 'redux' import { I18nextProvider } from 'react-i18next' import { Provider } from 'react-redux' @@ -12,7 +12,7 @@ import type { Store } from 'redux' import type { State } from '../../redux/types' describe('useSoftwareUpdatePoll', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> let store: Store beforeEach(() => { jest.useFakeTimers() diff --git a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx index 245a091b3aa..9abebe0abc7 100644 --- a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { fireEvent } from '@testing-library/react' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { CustomKeyboard } from '..' diff --git a/app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx index 41cac3e2056..4ea95b875e3 100644 --- a/app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { fireEvent } from '@testing-library/react' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { NormalKeyboard } from '..' diff --git a/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx b/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx index c9c19def25c..a54a53268f0 100644 --- a/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { fireEvent } from '@testing-library/react' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { Numpad } from '..' diff --git a/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx b/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx index a0015ae38f5..3577296de5d 100644 --- a/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx +++ b/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { Provider } from 'react-redux' import { createStore } from 'redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { render, fireEvent } from '@testing-library/react' import { act } from 'react-test-renderer' import { useTrackEvent } from '../../../redux/analytics' @@ -29,7 +29,7 @@ describe('useToggleGroup', () => { }) it('should return default selectedValue and toggle buttons', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) @@ -41,7 +41,7 @@ describe('useToggleGroup', () => { expect(result.current[0]).toBe('List View') }) it('should record an analytics event for list view', async () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) @@ -61,7 +61,7 @@ describe('useToggleGroup', () => { }) }) it('should record an analytics event for map view', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx b/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx index 3c396e4d5ef..cea3cf9cd4a 100644 --- a/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx +++ b/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { when } from 'jest-when' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useAllRunsQuery } from '@opentrons/react-api-client' import { useHistoricRunDetails } from '../useHistoricRunDetails' import { mockRunningRun } from '../../../RunTimeControl/__fixtures__' @@ -42,7 +42,7 @@ describe('useHistoricRunDetails', () => { ) it('returns historical run details with newest first', async () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => (
{children}
) const { result, waitFor } = renderHook(useHistoricRunDetails, { wrapper }) @@ -58,7 +58,7 @@ describe('useHistoricRunDetails', () => { links: {}, }) ) - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => (
{children}
) const { result, waitFor } = renderHook( diff --git a/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx b/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx index 9332788415e..d7aa7513ff8 100644 --- a/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx +++ b/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { resetAllWhenMocks, when } from 'jest-when' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import fixture_tiprack_300_ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_300_ul.json' import { getLabwareDisplayName, @@ -111,7 +111,7 @@ describe('useOffsetCandidatesForAnalysis', () => { }) it('returns an empty array if robot ip but no analysis output', async () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => (
{children}
) const { result, waitFor } = renderHook( @@ -123,7 +123,7 @@ describe('useOffsetCandidatesForAnalysis', () => { }) it('returns an empty array if no robot ip', async () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => (
{children}
) const { result, waitFor } = renderHook( @@ -138,7 +138,7 @@ describe('useOffsetCandidatesForAnalysis', () => { expect(result.current).toEqual([]) }) it('returns candidates for each first match with newest first', async () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => (
{children}
) const { result, waitFor } = renderHook( diff --git a/app/src/organisms/CalibrationPanels/__tests__/useConfirmCrashRecovery.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/useConfirmCrashRecovery.test.tsx index 3a14954bf53..28f53157c03 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/useConfirmCrashRecovery.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/useConfirmCrashRecovery.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { act, renderHook } from '@testing-library/react-hooks' +import { WrapperComponent, act, renderHook } from '@testing-library/react' import { I18nextProvider } from 'react-i18next' import { LEFT, renderWithProviders } from '@opentrons/components' @@ -15,7 +15,7 @@ import { import type { CalibrationPanelProps } from '../types' describe('useConfirmCrashRecovery', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: WrapperComponent const mockSendCommands = jest.fn() const mockProps = { cleanUpAndExit: jest.fn(), diff --git a/app/src/organisms/Devices/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx b/app/src/organisms/Devices/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx index 907a67cb5d8..6048263ca89 100644 --- a/app/src/organisms/Devices/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx +++ b/app/src/organisms/Devices/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { Provider } from 'react-redux' import { createStore } from 'redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { HEATERSHAKER_MODULE_V1 } from '@opentrons/shared-data' import { useMostRecentCompletedAnalysis } from '../../../LabwarePositionCheck/useMostRecentCompletedAnalysis' import { useHeaterShakerModuleIdsFromRun } from '../hooks' @@ -63,7 +63,7 @@ describe('useHeaterShakerModuleIdsFromRun', () => { }, ], } as any) - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) const { result } = renderHook( @@ -133,7 +133,7 @@ describe('useHeaterShakerModuleIdsFromRun', () => { ], } as any) - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) const { result } = renderHook( diff --git a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/useRobotUpdateInfo.test.tsx b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/useRobotUpdateInfo.test.tsx index f1fd45669fc..db7cca239ab 100644 --- a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/useRobotUpdateInfo.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/useRobotUpdateInfo.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { createStore } from 'redux' import { I18nextProvider } from 'react-i18next' import { Provider } from 'react-redux' @@ -24,7 +24,7 @@ const mockGetRobotUpdateDownloadProgress = getRobotUpdateDownloadProgress as jes describe('useRobotUpdateInfo', () => { let store: Store - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> const MOCK_ROBOT_NAME = 'testRobot' const mockRobotUpdateSession: RobotUpdateSession | null = { diff --git a/app/src/organisms/Devices/hooks/__tests__/useAttachedModules.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useAttachedModules.test.tsx index e005fc7b2bd..b105dfbf8ae 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useAttachedModules.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useAttachedModules.test.tsx @@ -1,6 +1,6 @@ import { resetAllWhenMocks } from 'jest-when' import { UseQueryResult } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { mockModulesResponse } from '@opentrons/api-client' import { useModulesQuery } from '@opentrons/react-api-client' import { useAttachedModules } from '..' @@ -14,7 +14,7 @@ const mockUseModulesQuery = useModulesQuery as jest.MockedFunction< > describe('useAttachedModules hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> afterEach(() => { resetAllWhenMocks() jest.resetAllMocks() diff --git a/app/src/organisms/Devices/hooks/__tests__/useAttachedPipetteCalibrations.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useAttachedPipetteCalibrations.test.tsx index 27acbf0e4c6..a4c4fe989ba 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useAttachedPipetteCalibrations.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useAttachedPipetteCalibrations.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { Provider } from 'react-redux' import { createStore, Store } from 'redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { QueryClient, QueryClientProvider } from 'react-query' import { useAllPipetteOffsetCalibrationsQuery, @@ -50,7 +50,7 @@ const PIPETTE_CALIBRATIONS = { } describe('useAttachedPipetteCalibrations hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() wrapper = ({ children }) => ( diff --git a/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettes.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettes.test.tsx index e4f140205ec..264ef56cf5b 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettes.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettes.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { UseQueryResult } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { usePipettesQuery } from '@opentrons/react-api-client' import { getPipetteModelSpecs, PipetteModelSpecs } from '@opentrons/shared-data' import { useAttachedPipettes } from '../useAttachedPipettes' @@ -22,7 +22,7 @@ const mockGetPipetteModelSpecs = getPipetteModelSpecs as jest.MockedFunction< > describe('useAttachedPipettes hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { mockGetPipetteModelSpecs.mockReturnValue({ name: 'mockName', diff --git a/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts b/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts index f3f1994d384..201fe145a2d 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts +++ b/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts @@ -1,5 +1,5 @@ import * as React from 'react' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useInstrumentsQuery } from '@opentrons/react-api-client' import { instrumentsResponseLeftPipetteFixture, @@ -13,7 +13,7 @@ const mockUseInstrumentsQuery = useInstrumentsQuery as jest.MockedFunction< typeof useInstrumentsQuery > describe('useAttachedPipettesFromInstrumentsQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> it('returns attached pipettes', () => { mockUseInstrumentsQuery.mockReturnValue({ data: { diff --git a/app/src/organisms/Devices/hooks/__tests__/useCalibrationTaskList.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useCalibrationTaskList.test.tsx index be9160e1fb1..4a4a4ebd7e8 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useCalibrationTaskList.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useCalibrationTaskList.test.tsx @@ -3,7 +3,7 @@ import { createStore } from 'redux' import { I18nextProvider } from 'react-i18next' import { Provider } from 'react-redux' import { when, resetAllWhenMocks } from 'jest-when' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useDeleteCalibrationMutation, useAllPipetteOffsetCalibrationsQuery, @@ -56,7 +56,7 @@ const mockTipLengthCalLauncher = jest.fn() const mockDeckCalLauncher = jest.fn() describe('useCalibrationTaskList hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> let store: Store const mockDeleteCalibration = jest.fn() diff --git a/app/src/organisms/Devices/hooks/__tests__/useDeckCalibrationData.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useDeckCalibrationData.test.tsx index 8d6578b0693..462b414882a 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useDeckCalibrationData.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useDeckCalibrationData.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { Provider } from 'react-redux' import { createStore, Store } from 'redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { QueryClient, QueryClientProvider } from 'react-query' import { useCalibrationStatusQuery } from '@opentrons/react-api-client' @@ -40,7 +40,7 @@ const store: Store = createStore(jest.fn(), {}) describe('useDeckCalibrationData hook', () => { let dispatchApiRequest: DispatchApiRequestType - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { dispatchApiRequest = jest.fn() const queryClient = new QueryClient() diff --git a/app/src/organisms/Devices/hooks/__tests__/useDeckCalibrationStatus.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useDeckCalibrationStatus.test.tsx index e21da9867db..f7d3d5d6765 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useDeckCalibrationStatus.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useDeckCalibrationStatus.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { Provider } from 'react-redux' import { createStore, Store } from 'redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { QueryClient, QueryClientProvider } from 'react-query' import { useCalibrationStatusQuery } from '@opentrons/react-api-client' @@ -26,7 +26,7 @@ const mockUseCalibrationStatusQuery = useCalibrationStatusQuery as jest.MockedFu const store: Store = createStore(jest.fn(), {}) describe('useDeckCalibrationStatus hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() wrapper = ({ children }) => ( diff --git a/app/src/organisms/Devices/hooks/__tests__/useIsFlex.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useIsFlex.test.tsx index 0460da4d705..9b68a67e3b8 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useIsFlex.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useIsFlex.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { Provider } from 'react-redux' import { createStore, Store } from 'redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { QueryClient, QueryClientProvider } from 'react-query' import { getRobotModelByName } from '../../../../redux/discovery' @@ -18,7 +18,7 @@ const mockGetRobotModelByName = getRobotModelByName as jest.MockedFunction< const store: Store = createStore(jest.fn(), {}) describe('useIsFlex hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() wrapper = ({ children }) => ( diff --git a/app/src/organisms/Devices/hooks/__tests__/useIsRobotViewable.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useIsRobotViewable.test.tsx index 09d4d345a1a..b63b5ae39e7 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useIsRobotViewable.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useIsRobotViewable.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { Provider } from 'react-redux' import { createStore, Store } from 'redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { QueryClient, QueryClientProvider } from 'react-query' import { getDiscoverableRobotByName } from '../../../../redux/discovery' @@ -23,7 +23,7 @@ const mockGetDiscoverableRobotByName = getDiscoverableRobotByName as jest.Mocked const store: Store = createStore(jest.fn(), {}) describe('useIsRobotViewable hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() wrapper = ({ children }) => ( diff --git a/app/src/organisms/Devices/hooks/__tests__/useLPCDisabledReason.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useLPCDisabledReason.test.tsx index 108dd1094f6..ef29096de57 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useLPCDisabledReason.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useLPCDisabledReason.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { Provider } from 'react-redux' import { I18nextProvider } from 'react-i18next' import { createStore } from 'redux' @@ -51,7 +51,7 @@ const simpleV6Protocol = (_uncastedSimpleV6Protocol as unknown) as ProtocolAnaly describe('useLPCDisabledReason', () => { const store: Store = createStore(jest.fn(), {}) - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} diff --git a/app/src/organisms/Devices/hooks/__tests__/useLPCSuccessToast.test.ts b/app/src/organisms/Devices/hooks/__tests__/useLPCSuccessToast.test.ts index 9c45be5bfa0..3877015470b 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useLPCSuccessToast.test.ts +++ b/app/src/organisms/Devices/hooks/__tests__/useLPCSuccessToast.test.ts @@ -1,5 +1,5 @@ import * as React from 'react' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useLPCSuccessToast } from '..' jest.mock('react', () => { diff --git a/app/src/organisms/Devices/hooks/__tests__/useLabwareRenderInfoForRunById.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useLabwareRenderInfoForRunById.test.tsx index fa6e2ed8996..155a941a4bf 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useLabwareRenderInfoForRunById.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useLabwareRenderInfoForRunById.test.tsx @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { when, resetAllWhenMocks } from 'jest-when' import standardDeckDef from '@opentrons/shared-data/deck/definitions/4/ot2_standard.json' diff --git a/app/src/organisms/Devices/hooks/__tests__/useLights.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useLights.test.tsx index 7a9ff667d02..0e729100e76 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useLights.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useLights.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { resetAllWhenMocks } from 'jest-when' import { Provider } from 'react-redux' import { createStore, Store } from 'redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { QueryClient, QueryClientProvider } from 'react-query' import { useLightsQuery, @@ -23,7 +23,7 @@ const mockUseSetLightsMutation = useSetLightsMutation as jest.MockedFunction< const store: Store = createStore(jest.fn(), {}) describe('useLights hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> let setLights: jest.Mock beforeEach(() => { diff --git a/app/src/organisms/Devices/hooks/__tests__/useModuleCalibrationStatus.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useModuleCalibrationStatus.test.tsx index 56e0feec2e5..829e624e0b8 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useModuleCalibrationStatus.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useModuleCalibrationStatus.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { when, resetAllWhenMocks } from 'jest-when' import { @@ -23,7 +23,7 @@ const mockUseIsFlex = useIsFlex as jest.MockedFunction const mockUseModuleRenderInfoForProtocolById = useModuleRenderInfoForProtocolById as jest.MockedFunction< typeof useModuleRenderInfoForProtocolById > -let wrapper: React.FunctionComponent<{}> +let wrapper: React.FunctionComponent<{children: React.ReactNode}> const mockMagneticModuleDefinition = { moduleId: 'someMagneticModule', diff --git a/app/src/organisms/Devices/hooks/__tests__/useModuleRenderInfoForProtocolById.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useModuleRenderInfoForProtocolById.test.tsx index 575e349a5a8..87ff6adc660 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useModuleRenderInfoForProtocolById.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useModuleRenderInfoForProtocolById.test.tsx @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { when, resetAllWhenMocks } from 'jest-when' import { UseQueryResult } from 'react-query' diff --git a/app/src/organisms/Devices/hooks/__tests__/usePipetteOffsetCalibration.test.tsx b/app/src/organisms/Devices/hooks/__tests__/usePipetteOffsetCalibration.test.tsx index cdfa62a2240..a6cfa0ff2ff 100644 --- a/app/src/organisms/Devices/hooks/__tests__/usePipetteOffsetCalibration.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/usePipetteOffsetCalibration.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { Provider } from 'react-redux' import { createStore, Store } from 'redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { QueryClient, QueryClientProvider } from 'react-query' import { @@ -41,7 +41,7 @@ const MOUNT = 'left' as Mount describe('usePipetteOffsetCalibration hook', () => { let dispatchApiRequest: DispatchApiRequestType - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { dispatchApiRequest = jest.fn() const queryClient = new QueryClient() diff --git a/app/src/organisms/Devices/hooks/__tests__/usePipetteOffsetCalibrations.test.tsx b/app/src/organisms/Devices/hooks/__tests__/usePipetteOffsetCalibrations.test.tsx index feb18e5ff98..59bf766bc8d 100644 --- a/app/src/organisms/Devices/hooks/__tests__/usePipetteOffsetCalibrations.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/usePipetteOffsetCalibrations.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { QueryClient, QueryClientProvider } from 'react-query' import { useAllPipetteOffsetCalibrationsQuery } from '@opentrons/react-api-client' import { @@ -19,7 +19,7 @@ const mockUseAllPipetteOffsetCalibrationsQuery = useAllPipetteOffsetCalibrations const CALIBRATION_DATA_POLL_MS = 5000 describe('usePipetteOffsetCalibrations hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() wrapper = ({ children }) => ( diff --git a/app/src/organisms/Devices/hooks/__tests__/useProtocolAnalysisErrors.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useProtocolAnalysisErrors.test.tsx index 86f4d6c1180..ac8803f807f 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useProtocolAnalysisErrors.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useProtocolAnalysisErrors.test.tsx @@ -1,6 +1,6 @@ import { when, resetAllWhenMocks } from 'jest-when' import { UseQueryResult } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useProtocolAnalysisAsDocumentQuery, diff --git a/app/src/organisms/Devices/hooks/__tests__/useProtocolDetailsForRun.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useProtocolDetailsForRun.test.tsx index 84329276960..a2c8c381402 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useProtocolDetailsForRun.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useProtocolDetailsForRun.test.tsx @@ -1,6 +1,6 @@ import { when, resetAllWhenMocks } from 'jest-when' import { UseQueryResult } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useProtocolAnalysisAsDocumentQuery, diff --git a/app/src/organisms/Devices/hooks/__tests__/useProtocolMetadata.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useProtocolMetadata.test.tsx index 475b4bd69ba..0a7dbaf3daa 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useProtocolMetadata.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useProtocolMetadata.test.tsx @@ -3,7 +3,7 @@ import * as React from 'react' import { when } from 'jest-when' import { Provider } from 'react-redux' import { createStore } from 'redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useCurrentProtocol } from '../../../ProtocolUpload/hooks' import { useProtocolMetadata } from '../useProtocolMetadata' @@ -42,7 +42,7 @@ describe('useProtocolMetadata', () => { }) it('should return author, lastUpdated, method, description, and robot type', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) const { result } = renderHook(useProtocolMetadata, { wrapper }) diff --git a/app/src/organisms/Devices/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx index 0d1a9c48731..f89af6eb18e 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { resetAllWhenMocks, when } from 'jest-when' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { waitFor } from '@testing-library/react' import { createStore, Store } from 'redux' import { Provider } from 'react-redux' @@ -41,7 +41,7 @@ const mockFormatInterval = formatInterval as jest.MockedFunction< typeof formatInterval > -let wrapper: React.FunctionComponent<{}> +let wrapper: React.FunctionComponent<{children: React.ReactNode}> let store: Store = createStore(jest.fn(), {}) const RUN_ID = '1' diff --git a/app/src/organisms/Devices/hooks/__tests__/useRobot.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useRobot.test.tsx index 4bb464655fe..d020699c1e8 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useRobot.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useRobot.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { Provider } from 'react-redux' import { createStore, Store } from 'redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { QueryClient, QueryClientProvider } from 'react-query' import { getDiscoverableRobotByName } from '../../../../redux/discovery' @@ -19,7 +19,7 @@ const mockGetDiscoverableRobotByName = getDiscoverableRobotByName as jest.Mocked const store: Store = createStore(jest.fn(), {}) describe('useRobot hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() wrapper = ({ children }) => ( diff --git a/app/src/organisms/Devices/hooks/__tests__/useRobotAnalyticsData.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useRobotAnalyticsData.test.tsx index 13535050f68..730873b07c1 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useRobotAnalyticsData.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useRobotAnalyticsData.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { resetAllWhenMocks, when } from 'jest-when' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { createStore, Store } from 'redux' import { Provider } from 'react-redux' import { QueryClient, QueryClientProvider } from 'react-query' @@ -48,7 +48,7 @@ const ATTACHED_PIPETTES = { right: { id: '2', model: 'testModelRight' }, } -let wrapper: React.FunctionComponent<{}> +let wrapper: React.FunctionComponent<{children: React.ReactNode}> let store: Store = createStore(jest.fn(), {}) describe('useProtocolAnalysisErrors hook', () => { diff --git a/app/src/organisms/Devices/hooks/__tests__/useRunCalibrationStatus.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useRunCalibrationStatus.test.tsx index 955f278f3e5..3d990442ff0 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useRunCalibrationStatus.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useRunCalibrationStatus.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { when, resetAllWhenMocks } from 'jest-when' import { mockTipRackDefinition } from '../../../../redux/custom-labware/__fixtures__' @@ -26,7 +26,7 @@ const mockUseIsFlex = useIsFlex as jest.MockedFunction const mockUseRunPipetteInfoByMount = useRunPipetteInfoByMount as jest.MockedFunction< typeof useRunPipetteInfoByMount > -let wrapper: React.FunctionComponent<{}> +let wrapper: React.FunctionComponent<{children: React.ReactNode}> describe('useRunCalibrationStatus hook', () => { beforeEach(() => { diff --git a/app/src/organisms/Devices/hooks/__tests__/useRunCreatedAtTimestamp.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useRunCreatedAtTimestamp.test.tsx index b18f57aac51..938abafcfb0 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useRunCreatedAtTimestamp.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useRunCreatedAtTimestamp.test.tsx @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { when, resetAllWhenMocks } from 'jest-when' import { useRunQuery } from '@opentrons/react-api-client' diff --git a/app/src/organisms/Devices/hooks/__tests__/useRunHasStarted.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useRunHasStarted.test.tsx index 241847dfb5f..e5c13169eb8 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useRunHasStarted.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useRunHasStarted.test.tsx @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { when, resetAllWhenMocks } from 'jest-when' import { RUN_STATUS_IDLE, RUN_STATUS_RUNNING } from '@opentrons/api-client' diff --git a/app/src/organisms/Devices/hooks/__tests__/useRunPipetteInfoByMount.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useRunPipetteInfoByMount.test.tsx index 80c78448712..0144832cc96 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useRunPipetteInfoByMount.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useRunPipetteInfoByMount.test.tsx @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { when, resetAllWhenMocks } from 'jest-when' import { diff --git a/app/src/organisms/Devices/hooks/__tests__/useStoredProtocolAnalysis.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useStoredProtocolAnalysis.test.tsx index 66fbe643c74..8c0c507216a 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useStoredProtocolAnalysis.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useStoredProtocolAnalysis.test.tsx @@ -3,7 +3,7 @@ import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider, UseQueryResult } from 'react-query' import { Provider } from 'react-redux' import { createStore, Store } from 'redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { parseRequiredModulesEntity, @@ -64,7 +64,7 @@ const PROTOCOL_ID = 'the_protocol_id' const PROTOCOL_KEY = 'the_protocol_key' describe('useStoredProtocolAnalysis hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() wrapper = ({ children }) => ( diff --git a/app/src/organisms/Devices/hooks/__tests__/useSyncRobotClock.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useSyncRobotClock.test.tsx index 602deb48362..0de1377c0fb 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useSyncRobotClock.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useSyncRobotClock.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { resetAllWhenMocks } from 'jest-when' import { Provider } from 'react-redux' import { createStore, Store } from 'redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { QueryClient, QueryClientProvider } from 'react-query' import { syncSystemTime } from '../../../../redux/robot-admin' @@ -13,7 +13,7 @@ jest.mock('../../../../redux/discovery') const store: Store = createStore(jest.fn(), {}) describe('useSyncRobotClock hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { store.dispatch = jest.fn() const queryClient = new QueryClient() diff --git a/app/src/organisms/Devices/hooks/__tests__/useTipLengthCalibrations.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useTipLengthCalibrations.test.tsx index bda52131e7f..de88f7ae51a 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useTipLengthCalibrations.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useTipLengthCalibrations.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useAllTipLengthCalibrationsQuery } from '@opentrons/react-api-client' import { mockTipLengthCalibration1, @@ -19,7 +19,7 @@ const mockUseAllTipLengthCalibrationsQuery = useAllTipLengthCalibrationsQuery as const CALIBRATIONS_FETCH_MS = 5000 describe('useTipLengthCalibrations hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() wrapper = ({ children }) => ( diff --git a/app/src/organisms/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx index b118bd6c291..1d93851deb4 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx @@ -4,7 +4,7 @@ import { Provider } from 'react-redux' import { QueryClient, QueryClientProvider } from 'react-query' import { resetAllWhenMocks, when } from 'jest-when' import { waitFor } from '@testing-library/react' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { STORED_PROTOCOL_ANALYSIS } from '../__fixtures__/storedProtocolAnalysis' import { useTrackCreateProtocolRunEvent } from '../useTrackCreateProtocolRunEvent' @@ -37,7 +37,7 @@ const PROTOCOL_PROPERTIES = { protocolType: 'python' } as ProtocolAnalyticsData let mockTrackEvent: jest.Mock let mockGetProtocolRunAnalyticsData: jest.Mock -let wrapper: React.FunctionComponent<{}> +let wrapper: React.FunctionComponent<{children: React.ReactNode}> let store: Store = createStore(jest.fn(), {}) describe('useTrackCreateProtocolRunEvent hook', () => { diff --git a/app/src/organisms/Devices/hooks/__tests__/useTrackProtocolRunEvent.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useTrackProtocolRunEvent.test.tsx index 6f75538e17b..3e814da18fc 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useTrackProtocolRunEvent.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useTrackProtocolRunEvent.test.tsx @@ -4,7 +4,7 @@ import { Provider } from 'react-redux' import { QueryClient, QueryClientProvider } from 'react-query' import { resetAllWhenMocks, when } from 'jest-when' import { waitFor } from '@testing-library/react' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useTrackProtocolRunEvent } from '../useTrackProtocolRunEvent' import { useProtocolRunAnalyticsData } from '../useProtocolRunAnalyticsData' @@ -32,7 +32,7 @@ const PROTOCOL_PROPERTIES = { protocolType: 'python' } let mockTrackEvent: jest.Mock let mockGetProtocolRunAnalyticsData: jest.Mock -let wrapper: React.FunctionComponent<{}> +let wrapper: React.FunctionComponent<{children: React.ReactNode}> let store: Store = createStore(jest.fn(), {}) describe('useTrackProtocolRunEvent hook', () => { diff --git a/app/src/organisms/Devices/hooks/__tests__/useUnmatchedModulesForProtocol.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useUnmatchedModulesForProtocol.test.tsx index 971df5dc939..e32203cebd3 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useUnmatchedModulesForProtocol.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useUnmatchedModulesForProtocol.test.tsx @@ -1,5 +1,5 @@ import { when, resetAllWhenMocks } from 'jest-when' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { mockConnectedRobot } from '../../../../redux/discovery/__fixtures__' import { mockTemperatureModule } from '../../../../redux/modules/__fixtures__' diff --git a/app/src/organisms/EmergencyStop/__tests__/hooks.test.tsx b/app/src/organisms/EmergencyStop/__tests__/hooks.test.tsx index 43a613c69a2..275aa89aad6 100644 --- a/app/src/organisms/EmergencyStop/__tests__/hooks.test.tsx +++ b/app/src/organisms/EmergencyStop/__tests__/hooks.test.tsx @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useEstopContext } from '../hooks' diff --git a/app/src/organisms/LabwarePositionCheck/__tests__/useLaunchLPC.test.tsx b/app/src/organisms/LabwarePositionCheck/__tests__/useLaunchLPC.test.tsx index aa28090cb75..006bc3a184d 100644 --- a/app/src/organisms/LabwarePositionCheck/__tests__/useLaunchLPC.test.tsx +++ b/app/src/organisms/LabwarePositionCheck/__tests__/useLaunchLPC.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { Provider } from 'react-redux' import configureStore from 'redux-mock-store' import { when, resetAllWhenMocks } from 'jest-when' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { QueryClient, QueryClientProvider } from 'react-query' import { @@ -63,7 +63,7 @@ const mockCurrentOffsets: LabwareOffset[] = [ const mockLabwareDef = fixture_tiprack_300_ul as LabwareDefinition2 describe('useLaunchLPC hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> let mockCreateMaintenanceRun: jest.Mock let mockCreateLabwareDefinition: jest.Mock let mockDeleteMaintenanceRun: jest.Mock diff --git a/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx b/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx index 0ec0c27de50..a409d7c9b77 100644 --- a/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx @@ -4,7 +4,7 @@ import { Provider } from 'react-redux' import { when } from 'jest-when' import { createStore } from 'redux' import { I18nextProvider } from 'react-i18next' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { i18n } from '../../../i18n' import { useCreateLiveCommandMutation } from '@opentrons/react-api-client' import heaterShakerCommandsWithResultsKey from '@opentrons/shared-data/protocol/fixtures/6/heaterShakerCommandsWithResultsKey.json' @@ -201,7 +201,7 @@ describe('useLatchControls', () => { }) it('should return latch is open and handle latch function and command to close latch', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -223,7 +223,7 @@ describe('useLatchControls', () => { }) }) it('should return if latch is closed and handle latch function opens latch', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -272,7 +272,7 @@ describe('useModuleOverflowMenu', () => { jest.restoreAllMocks() }) it('should return everything for menuItemsByModuleType and create deactive heater command', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -311,7 +311,7 @@ describe('useModuleOverflowMenu', () => { const mockAboutClick = jest.fn() const mockTestShakeClick = jest.fn() const mockHandleWizard = jest.fn() - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -341,7 +341,7 @@ describe('useModuleOverflowMenu', () => { it('should return only 1 menu button when module is a magnetic module and calls handleClick when module is disengaged', () => { const mockHandleClick = jest.fn() - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -369,7 +369,7 @@ describe('useModuleOverflowMenu', () => { }) it('should render magnetic module and create disengage command', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -405,7 +405,7 @@ describe('useModuleOverflowMenu', () => { it('should render temperature module and call handleClick when module is idle', () => { const mockHandleClick = jest.fn() - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -432,7 +432,7 @@ describe('useModuleOverflowMenu', () => { }) it('should render temp module and create deactivate temp command', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -467,7 +467,7 @@ describe('useModuleOverflowMenu', () => { it('should render TC module and call handleClick when module is idle', () => { const mockHandleClick = jest.fn() - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -494,7 +494,7 @@ describe('useModuleOverflowMenu', () => { }) it('should render TC module and create open lid command', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -530,7 +530,7 @@ describe('useModuleOverflowMenu', () => { }) it('should render TC module and create deactivate lid command', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -566,7 +566,7 @@ describe('useModuleOverflowMenu', () => { }) it('should render TC module gen 2 and create a close lid command', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -639,7 +639,7 @@ describe('useIsHeaterShakerInProtocol', () => { }) it('should return true when a heater shaker is in the protocol', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) const { result } = renderHook(useIsHeaterShakerInProtocol, { wrapper }) @@ -663,7 +663,7 @@ describe('useIsHeaterShakerInProtocol', () => { }) ), } as any) - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) const { result } = renderHook(useIsHeaterShakerInProtocol, { wrapper }) diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx index d0c39598c1b..bdeda2789fc 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { I18nextProvider } from 'react-i18next' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { i18n } from '../../../../../i18n' import { useFeatureFlag } from '../../../../../redux/config' import { useHardwareStatusText } from '..' @@ -12,7 +12,7 @@ const mockUseFeatureFlag = useFeatureFlag as jest.MockedFunction< > describe('useHardwareStatusText', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { wrapper = ({ children }) => ( {children} diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/hooks.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/hooks.test.tsx index 4de038c7e71..8352f0dd1c8 100644 --- a/app/src/organisms/PipetteWizardFlows/__tests__/hooks.test.tsx +++ b/app/src/organisms/PipetteWizardFlows/__tests__/hooks.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { I18nextProvider } from 'react-i18next' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { NINETY_SIX_CHANNEL, RIGHT, @@ -22,7 +22,7 @@ const BASE_PROPS_FOR_RUN_SETUP = { } describe('usePipetteFlowWizardHeaderText', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { wrapper = ({ children }) => ( {children} diff --git a/app/src/organisms/ProtocolUpload/hooks/__tests__/useCloneRun.test.tsx b/app/src/organisms/ProtocolUpload/hooks/__tests__/useCloneRun.test.tsx index cfe7ec40028..151f9a126a7 100644 --- a/app/src/organisms/ProtocolUpload/hooks/__tests__/useCloneRun.test.tsx +++ b/app/src/organisms/ProtocolUpload/hooks/__tests__/useCloneRun.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { QueryClient, QueryClientProvider } from 'react-query' import { useRunQuery, @@ -23,7 +23,7 @@ const HOST_CONFIG: HostConfig = { hostname: 'localhost' } const RUN_ID: string = 'run_id' describe('useCloneRun hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { when(mockUseHost).calledWith().mockReturnValue(HOST_CONFIG) @@ -43,7 +43,7 @@ describe('useCloneRun hook', () => { .mockReturnValue({ createRun: jest.fn() } as any) const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/app/src/organisms/ProtocolUpload/hooks/__tests__/useCurrentRunId.test.tsx b/app/src/organisms/ProtocolUpload/hooks/__tests__/useCurrentRunId.test.tsx index 32f5159708b..d373ace98db 100644 --- a/app/src/organisms/ProtocolUpload/hooks/__tests__/useCurrentRunId.test.tsx +++ b/app/src/organisms/ProtocolUpload/hooks/__tests__/useCurrentRunId.test.tsx @@ -1,5 +1,5 @@ import { when, resetAllWhenMocks } from 'jest-when' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useAllRunsQuery } from '@opentrons/react-api-client' import { useCurrentRunId } from '../useCurrentRunId' diff --git a/app/src/organisms/ProtocolUpload/hooks/__tests__/useMostRecentRunId.test.tsx b/app/src/organisms/ProtocolUpload/hooks/__tests__/useMostRecentRunId.test.tsx index eb0d55f639c..4884810ceda 100644 --- a/app/src/organisms/ProtocolUpload/hooks/__tests__/useMostRecentRunId.test.tsx +++ b/app/src/organisms/ProtocolUpload/hooks/__tests__/useMostRecentRunId.test.tsx @@ -1,5 +1,5 @@ import { when, resetAllWhenMocks } from 'jest-when' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useAllRunsQuery } from '@opentrons/react-api-client' import { useMostRecentRunId } from '../useMostRecentRunId' diff --git a/app/src/organisms/ProtocolsLanding/__tests__/hooks.test.tsx b/app/src/organisms/ProtocolsLanding/__tests__/hooks.test.tsx index 41c60f2de40..1b4d5560c9a 100644 --- a/app/src/organisms/ProtocolsLanding/__tests__/hooks.test.tsx +++ b/app/src/organisms/ProtocolsLanding/__tests__/hooks.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { Provider } from 'react-redux' import { createStore } from 'redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data' import { useSortedProtocols } from '../hooks' @@ -286,7 +286,7 @@ describe('useSortedProtocols', () => { }) it('should return an object with protocols sorted alphabetically', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) @@ -310,7 +310,7 @@ describe('useSortedProtocols', () => { }) it('should return an object with protocols sorted reverse alphabetically', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) @@ -334,7 +334,7 @@ describe('useSortedProtocols', () => { }) it('should return an object with protocols sorted by most recent modified data', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) @@ -358,7 +358,7 @@ describe('useSortedProtocols', () => { }) it('should return an object with protocols sorted by oldest modified data', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) @@ -382,7 +382,7 @@ describe('useSortedProtocols', () => { }) it('should return an object with protocols sorted by flex then ot-2', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) @@ -405,7 +405,7 @@ describe('useSortedProtocols', () => { ) }) it('should return an object with protocols sorted by ot-2 then flex', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/__tests__/hooks.test.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/__tests__/hooks.test.tsx index 466cc7113a6..9e83149087d 100644 --- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/__tests__/hooks.test.tsx +++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/__tests__/hooks.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { Provider } from 'react-redux' import { createStore } from 'redux' @@ -32,7 +32,7 @@ const mockDisplaySettings = { } describe('useIsUnboxingFlowOngoing', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { wrapper = ({ children }) => {children} mockGetOnDeviceDisplaySettings.mockReturnValue(mockDisplaySettings) diff --git a/app/src/organisms/RunTimeControl/__tests__/hooks.test.tsx b/app/src/organisms/RunTimeControl/__tests__/hooks.test.tsx index f679c6965c3..7a68804834a 100644 --- a/app/src/organisms/RunTimeControl/__tests__/hooks.test.tsx +++ b/app/src/organisms/RunTimeControl/__tests__/hooks.test.tsx @@ -1,6 +1,6 @@ import { when, resetAllWhenMocks } from 'jest-when' import { UseQueryResult } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { useRunQuery, useRunActionMutations } from '@opentrons/react-api-client' import { diff --git a/app/src/pages/Labware/__tests__/hooks.test.tsx b/app/src/pages/Labware/__tests__/hooks.test.tsx index 5ad1dd241d1..1df4c6116a3 100644 --- a/app/src/pages/Labware/__tests__/hooks.test.tsx +++ b/app/src/pages/Labware/__tests__/hooks.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { Provider } from 'react-redux' import { createStore } from 'redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { i18n } from '../../../i18n' import { I18nextProvider } from 'react-i18next' import { getAllDefs } from '../helpers/getAllDefs' @@ -48,7 +48,7 @@ describe('useAllLabware hook', () => { }) it('should return object with only definition and modified date', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) const { result } = renderHook(() => useAllLabware('reverse', 'all'), { @@ -62,7 +62,7 @@ describe('useAllLabware hook', () => { expect(labware2.definition).toBe(mockValidLabware.definition) }) it('should return alphabetically sorted list', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) const { result } = renderHook(() => useAllLabware('alphabetical', 'all'), { @@ -76,7 +76,7 @@ describe('useAllLabware hook', () => { expect(labware1.definition).toBe(mockValidLabware.definition) }) it('should return no labware if not the right filter', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) const { result } = renderHook(() => useAllLabware('reverse', 'reservoir'), { @@ -89,7 +89,7 @@ describe('useAllLabware hook', () => { expect(labware2).toBe(undefined) }) it('should return labware with wellPlate filter', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) const { result } = renderHook(() => useAllLabware('reverse', 'wellPlate'), { @@ -103,7 +103,7 @@ describe('useAllLabware hook', () => { expect(labware2.definition).toBe(mockValidLabware.definition) }) it('should return custom labware with customLabware filter', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) const { result } = renderHook( @@ -136,7 +136,7 @@ describe('useLabwareFailure hook', () => { jest.restoreAllMocks() }) it('should return invalid labware definition', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -154,7 +154,7 @@ describe('useLabwareFailure hook', () => { errorMessage: null, }) - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -175,7 +175,7 @@ describe('useLabwareFailure hook', () => { errorMessage: null, }) - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -193,7 +193,7 @@ describe('useLabwareFailure hook', () => { errorMessage: 'error', }) - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -216,7 +216,7 @@ describe('useNewLabwareName hook', () => { }) it('should return filename as a string', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) const { result } = renderHook(useNewLabwareName, { wrapper }) diff --git a/app/src/pages/OnDeviceDisplay/hooks/__tests__/useNetworkConnection.test.tsx b/app/src/pages/OnDeviceDisplay/hooks/__tests__/useNetworkConnection.test.tsx index a07ca1312c0..c08ad1472f1 100644 --- a/app/src/pages/OnDeviceDisplay/hooks/__tests__/useNetworkConnection.test.tsx +++ b/app/src/pages/OnDeviceDisplay/hooks/__tests__/useNetworkConnection.test.tsx @@ -3,7 +3,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { Provider } from 'react-redux' import { createStore, Store } from 'redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { I18nextProvider } from 'react-i18next' import { i18n } from '../../../../i18n' @@ -50,7 +50,7 @@ const store: Store = createStore(jest.fn(), {}) // ToDo (kj:0202/2023) USB test cases will be added when USB is out describe('useNetworkConnection', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { wrapper = ({ children }) => ( diff --git a/app/src/pages/ProtocolDashboard/__tests__/LongPressModal.test.tsx b/app/src/pages/ProtocolDashboard/__tests__/LongPressModal.test.tsx index 90bdc2cdfc1..c0477410551 100644 --- a/app/src/pages/ProtocolDashboard/__tests__/LongPressModal.test.tsx +++ b/app/src/pages/ProtocolDashboard/__tests__/LongPressModal.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { MemoryRouter } from 'react-router-dom' import { fireEvent } from '@testing-library/react' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { renderWithProviders, useLongPress } from '@opentrons/components' import { HostConfig } from '@opentrons/api-client' diff --git a/app/src/pages/Protocols/hooks/__tests__/hooks.test.tsx b/app/src/pages/Protocols/hooks/__tests__/hooks.test.tsx index ee2a8d6ff95..7927e0a353b 100644 --- a/app/src/pages/Protocols/hooks/__tests__/hooks.test.tsx +++ b/app/src/pages/Protocols/hooks/__tests__/hooks.test.tsx @@ -1,5 +1,5 @@ import { UseQueryResult } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { when, resetAllWhenMocks } from 'jest-when' import omitBy from 'lodash/omitBy' @@ -173,7 +173,7 @@ describe('useRequiredProtocolLabware', () => { }) describe('useMissingProtocolHardware', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { mockUseInstrumentsQuery.mockReturnValue({ data: { data: [] }, diff --git a/app/src/redux/robot-api/hooks.ts b/app/src/redux/robot-api/hooks.ts index c29904ed1ed..37aaaa9fc95 100644 --- a/app/src/redux/robot-api/hooks.ts +++ b/app/src/redux/robot-api/hooks.ts @@ -38,6 +38,7 @@ export type DispatchRequestsType = (...actions: Action[]) => void * } */ export function useDispatchApiRequest(): [DispatchApiRequestType, string[]] { + // @ts-expect-error(BC, 2023-12-06): replace void with T const dispatch = useDispatch<(a: Action) => void>() // TODO(mc, 2019-11-06): evaluate whether or not this can be a ref diff --git a/app/src/redux/robot-update/__tests__/hooks.test.ts b/app/src/redux/robot-update/__tests__/hooks.test.ts index b1399e33f5d..9e26ddd521c 100644 --- a/app/src/redux/robot-update/__tests__/hooks.test.ts +++ b/app/src/redux/robot-update/__tests__/hooks.test.ts @@ -1,5 +1,5 @@ import { useDispatch } from 'react-redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useDispatchStartRobotUpdate } from '../hooks' import { startRobotUpdate, clearRobotUpdateSession } from '../actions' diff --git a/app/src/resources/networking/__tests__/useCanDisconnect.test.tsx b/app/src/resources/networking/__tests__/useCanDisconnect.test.tsx index e9e97b3d3a7..0874bcac927 100644 --- a/app/src/resources/networking/__tests__/useCanDisconnect.test.tsx +++ b/app/src/resources/networking/__tests__/useCanDisconnect.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { createStore } from 'redux' import { Provider } from 'react-redux' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getRobotApiVersionByName } from '../../../redux/discovery' import { useIsFlex } from '../../../organisms/Devices/hooks' @@ -24,7 +24,7 @@ const mockUseIsFlex = useIsFlex as jest.MockedFunction const store: Store = createStore(state => state, {}) -const wrapper: React.FunctionComponent<{}> = ({ children }) => ( +const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/components/package.json b/components/package.json index c5c029c236f..eb7428d722e 100644 --- a/components/package.json +++ b/components/package.json @@ -19,7 +19,8 @@ "homepage": "https://github.com/Opentrons/opentrons#readme", "peerDependencies": { "react": "18.2.0", - "react-router-dom": "5.1.1" + "react-router-dom": "5.3.4", + "@types/react-router-dom": "5.3.3" }, "dependencies": { "@opentrons/shared-data": "link:../shared-data", @@ -28,7 +29,6 @@ "@react-spring/web": "9.6.1", "@types/classnames": "2.2.5", "@types/lodash": "^4.14.191", - "@types/react-router-dom": "^5.1.7", "@types/styled-components": "^5.1.26", "@types/webpack-env": "^1.16.0", "classnames": "2.2.5", diff --git a/components/src/hooks/__tests__/useDrag.test.ts b/components/src/hooks/__tests__/useDrag.test.ts index 6aaccd7bd33..973c87a74bc 100644 --- a/components/src/hooks/__tests__/useDrag.test.ts +++ b/components/src/hooks/__tests__/useDrag.test.ts @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useDrag } from '../useDrag' import type { ElementPosition } from '../useDrag' diff --git a/components/src/hooks/__tests__/useIdle.test.ts b/components/src/hooks/__tests__/useIdle.test.ts index 64cd3f3283b..09ef34dc0a1 100644 --- a/components/src/hooks/__tests__/useIdle.test.ts +++ b/components/src/hooks/__tests__/useIdle.test.ts @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useIdle } from '../useIdle' const MOCK_EVENTS: Array = [ diff --git a/components/src/hooks/__tests__/useLongPress.test.ts b/components/src/hooks/__tests__/useLongPress.test.ts index ff58a3ba8e7..0661b90f1c6 100644 --- a/components/src/hooks/__tests__/useLongPress.test.ts +++ b/components/src/hooks/__tests__/useLongPress.test.ts @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useLongPress } from '../useLongPress' describe('useLongPress', () => { diff --git a/components/src/hooks/__tests__/useScrolling.test.tsx b/components/src/hooks/__tests__/useScrolling.test.tsx index d88d7e329c0..cefb044d5f2 100644 --- a/components/src/hooks/__tests__/useScrolling.test.tsx +++ b/components/src/hooks/__tests__/useScrolling.test.tsx @@ -1,4 +1,4 @@ -import { renderHook, act } from '@testing-library/react-hooks' +import { renderHook, act } from '@testing-library/react' import { useScrolling } from '../' describe('useScrolling', () => { diff --git a/components/src/hooks/__tests__/useSwipe.test.tsx b/components/src/hooks/__tests__/useSwipe.test.tsx index 9987b7c79b9..9e192c04147 100644 --- a/components/src/hooks/__tests__/useSwipe.test.tsx +++ b/components/src/hooks/__tests__/useSwipe.test.tsx @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { useSwipe } from '..' describe('useSwipe hook', () => { diff --git a/components/src/interaction-enhancers/useHover.ts b/components/src/interaction-enhancers/useHover.ts index ffdf9228d0a..a576180d7c9 100644 --- a/components/src/interaction-enhancers/useHover.ts +++ b/components/src/interaction-enhancers/useHover.ts @@ -40,7 +40,7 @@ export function useHover(options: UseHoverOptions = {}): UseHoverResult { const [hovered, setHovered] = useState(false) const timeoutRef = useRef() - const handleHoverChange = useCallback((value, delay) => { + const handleHoverChange = useCallback((value: boolean, delay: number | undefined) => { clearTimeout(timeoutRef.current) if (delay) { timeoutRef.current = setTimeout( diff --git a/components/src/tooltips/useTooltip.ts b/components/src/tooltips/useTooltip.ts index 7bef5141a1c..cc34c5dd256 100644 --- a/components/src/tooltips/useTooltip.ts +++ b/components/src/tooltips/useTooltip.ts @@ -55,7 +55,10 @@ export function useTooltip(options: UseTooltipOptions = {}): UseTooltipResult { arrowStyle: Styles.INITIAL_ARROW_STYLE, }) - const onStateUpdate = useCallback((placement, styles) => { + const onStateUpdate = useCallback((placement: Placement | null, styles: { + popper?: CSSProperties + arrow?: CSSProperties + }) => { setTooltipState({ placement, tooltipStyle: styles.popper ?? Styles.INITIAL_TOOLTIP_STYLE, diff --git a/labware-library/package.json b/labware-library/package.json index 2949be7803d..9c0010a60c2 100644 --- a/labware-library/package.json +++ b/labware-library/package.json @@ -23,7 +23,7 @@ "@types/jszip": "3.1.7", "@types/mixpanel-browser": "^2.35.6", "@types/query-string": "6.2.0", - "@types/react-router-dom": "^5.1.7", + "@types/react-router-dom": "5.3.3", "@types/webpack-env": "^1.16.0", "@types/yup": "0.29.11" }, @@ -41,7 +41,7 @@ "query-string": "6.2.0", "react": "18.2.0", "react-dom": "18.2.0", - "react-router-dom": "5.1.1", + "react-router-dom": "5.3.4", "yup": "0.32.9" } } diff --git a/package.json b/package.json index 7d40ee2afba..8be776bc883 100755 --- a/package.json +++ b/package.json @@ -53,8 +53,7 @@ "@storybook/addon-links": "^6.5.12", "@storybook/react": "^6.5.12", "@testing-library/jest-dom": "^5.12.0", - "@testing-library/react": "^11.2.6", - "@testing-library/react-hooks": "^5.1.1", + "@testing-library/react": "13.4.0", "@types/enzyme": "^3.10.8", "@types/express": "^4.17.11", "@types/jest": "^26.0.20", @@ -62,10 +61,11 @@ "@types/lodash": "^4.14.191", "@types/multer": "^1.4.5", "@types/netmask": "^1.0.30", - "@types/react": "18.2.0", + "@types/react": "18.0.21", "@types/react-color": "^3.0.6", - "@types/react-dom": "18.2.0", - "@types/react-redux": "^7.1.16", + "@types/react-dom": "18.0.6", + "@types/react-redux": "7.1.32", + "@types/react-router-dom": "5.3.3", "@types/react-test-renderer": "^17.0.1", "@types/redux-mock-store": "^1.0.2", "@types/semver": "^7.3.6", diff --git a/protocol-designer/package.json b/protocol-designer/package.json index 4f3af8eb322..3ed2e8babdd 100755 --- a/protocol-designer/package.json +++ b/protocol-designer/package.json @@ -41,7 +41,7 @@ "react-dnd": "6.0.0", "react-dnd-mouse-backend": "0.1.2", "react-dom": "18.2.0", - "react-redux": "7.2.1", + "react-redux": "8.1.2", "redux": "4.0.5", "redux-actions": "2.2.1", "redux-thunk": "2.3.0", diff --git a/react-api-client/package.json b/react-api-client/package.json index 8d8fada63d2..58bf0228380 100644 --- a/react-api-client/package.json +++ b/react-api-client/package.json @@ -13,6 +13,6 @@ "dependencies": { "@opentrons/api-client": "link:../api-client", "@opentrons/shared-data": "link:../shared-data", - "react-query": "^3.34.8" + "react-query": "3.35.0" } } diff --git a/react-api-client/src/api/__tests__/useHost.test.tsx b/react-api-client/src/api/__tests__/useHost.test.tsx index 5be1c6e4c38..0e55603245b 100644 --- a/react-api-client/src/api/__tests__/useHost.test.tsx +++ b/react-api-client/src/api/__tests__/useHost.test.tsx @@ -1,6 +1,6 @@ // tests for the HostConfig context and hook import * as React from 'react' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { ApiHostProvider, useHost } from '..' @@ -12,7 +12,7 @@ describe('ApiHostProvider and useHost', () => { }) it('should allow a hostname to be unset', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) const { result } = renderHook(useHost, { wrapper }) @@ -21,7 +21,7 @@ describe('ApiHostProvider and useHost', () => { }) it('should allow a hostname to be set', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) const { result } = renderHook(useHost, { wrapper }) @@ -34,7 +34,7 @@ describe('ApiHostProvider and useHost', () => { }) it('should allow a port to be set', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} @@ -49,7 +49,7 @@ describe('ApiHostProvider and useHost', () => { }) it('should allow a robot name to be set', () => { - const wrapper: React.FunctionComponent<{}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} diff --git a/react-api-client/src/calibration/__tests__/useDeleteCalibrationMutation.test.tsx b/react-api-client/src/calibration/__tests__/useDeleteCalibrationMutation.test.tsx index 1bcef9e5435..2e45cf033ce 100644 --- a/react-api-client/src/calibration/__tests__/useDeleteCalibrationMutation.test.tsx +++ b/react-api-client/src/calibration/__tests__/useDeleteCalibrationMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook, waitFor } from '@testing-library/react' import { deleteCalibration, DeleteCalRequestParams, @@ -24,7 +24,7 @@ const DELETE_CAL_DATA_RESPONSE = { } as EmptyResponse describe('useDeleteCalibrationMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> const requestParams = { calType: 'pipetteOffset', mount: 'left', @@ -33,7 +33,7 @@ describe('useDeleteCalibrationMutation hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) @@ -49,7 +49,7 @@ describe('useDeleteCalibrationMutation hook', () => { .calledWith(HOST_CONFIG, requestParams) .mockRejectedValue('oh no') - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useDeleteCalibrationMutation(), { wrapper, @@ -57,7 +57,7 @@ describe('useDeleteCalibrationMutation hook', () => { ) expect(result.current.data).toBeUndefined() - result.current.deleteCalibration(requestParams) + await act(() => result.current.deleteCalibration(requestParams)) await waitFor(() => { return result.current.status !== 'loading' }) @@ -72,15 +72,16 @@ describe('useDeleteCalibrationMutation hook', () => { data: DELETE_CAL_DATA_RESPONSE, } as Response) - const { result, waitFor } = renderHook( + const { result, rerender } = renderHook( () => useDeleteCalibrationMutation(), { wrapper, } ) - act(() => result.current.deleteCalibration(requestParams)) - - await waitFor(() => result.current.data != null) + await act(() => result.current.deleteCalibration(requestParams)) + await waitFor(() => { + expect(result.current.data).not.toBeNull() + }) expect(result.current.data).toEqual(DELETE_CAL_DATA_RESPONSE) }) diff --git a/react-api-client/src/health/__tests__/useHealth.test.tsx b/react-api-client/src/health/__tests__/useHealth.test.tsx index 299b2fbaf62..1ee71cbd2a8 100644 --- a/react-api-client/src/health/__tests__/useHealth.test.tsx +++ b/react-api-client/src/health/__tests__/useHealth.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { when } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook, waitFor } from '@testing-library/react' import { getHealth as mockGetHealth } from '@opentrons/api-client' import { useHost as mockUseHost } from '../../api' @@ -20,11 +20,11 @@ const HOST_CONFIG: HostConfig = { hostname: 'localhost' } const HEALTH_RESPONSE: Health = { name: 'robot-name' } as Health describe('useHealth hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) @@ -58,10 +58,8 @@ describe('useHealth hook', () => { .calledWith(HOST_CONFIG) .mockResolvedValue({ data: HEALTH_RESPONSE } as Response) - const { result, waitFor } = renderHook(useHealth, { wrapper }) + const { result } = renderHook(() => useHealth(), { wrapper }) - await waitFor(() => result.current != null) - - expect(result.current).toEqual(HEALTH_RESPONSE) + await waitFor(() => expect(result.current).toEqual(HEALTH_RESPONSE)) }) }) diff --git a/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceCommandMutation.test.tsx b/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceCommandMutation.test.tsx index 0a9de26e17d..8975b27d7c0 100644 --- a/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceCommandMutation.test.tsx +++ b/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceCommandMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { createMaintenanceCommand } from '@opentrons/api-client' import { useHost } from '../../api' import { useCreateMaintenanceCommandMutation } from '..' @@ -21,11 +21,11 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useCreateMaintenanceCommandMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceRunMutation.test.tsx b/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceRunMutation.test.tsx index 014dc517b7a..a5765280398 100644 --- a/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceRunMutation.test.tsx +++ b/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceRunMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { createMaintenanceRun } from '@opentrons/api-client' import { useHost } from '../../api' import { mockMaintenanceRunResponse } from '../__fixtures__' @@ -24,11 +24,11 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useCreateMaintenanceRunMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/maintenance_runs/__tests__/useDeleteMaintenanceRunMutation.test.tsx b/react-api-client/src/maintenance_runs/__tests__/useDeleteMaintenanceRunMutation.test.tsx index 07698b139ad..48040e6c61b 100644 --- a/react-api-client/src/maintenance_runs/__tests__/useDeleteMaintenanceRunMutation.test.tsx +++ b/react-api-client/src/maintenance_runs/__tests__/useDeleteMaintenanceRunMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { deleteMaintenanceRun } from '@opentrons/api-client' import { useHost } from '../../api' import { MAINTENANCE_RUN_ID } from '../__fixtures__' @@ -20,11 +20,11 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useDeleteMaintenanceRunMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/maintenance_runs/__tests__/useMaintenanceRunQuery.test.tsx b/react-api-client/src/maintenance_runs/__tests__/useMaintenanceRunQuery.test.tsx index 6650343464a..1ff16d93cbc 100644 --- a/react-api-client/src/maintenance_runs/__tests__/useMaintenanceRunQuery.test.tsx +++ b/react-api-client/src/maintenance_runs/__tests__/useMaintenanceRunQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getMaintenanceRun } from '@opentrons/api-client' import { useHost } from '../../api' import { useMaintenanceRunQuery } from '..' @@ -27,11 +27,11 @@ const MAINTENANCE_RUN_RESPONSE = { } as MaintenanceRun describe('useMaintenanceRunQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/maintenance_runs/__tests__/usePlayMaintenanceRunMutation.test.tsx b/react-api-client/src/maintenance_runs/__tests__/usePlayMaintenanceRunMutation.test.tsx index 93a4852e8c1..106a6955fa4 100644 --- a/react-api-client/src/maintenance_runs/__tests__/usePlayMaintenanceRunMutation.test.tsx +++ b/react-api-client/src/maintenance_runs/__tests__/usePlayMaintenanceRunMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { createRunAction, RUN_ACTION_TYPE_PLAY } from '@opentrons/api-client' import { useHost } from '../../api' import { usePlayMaintenanceRunMutation } from '..' @@ -12,6 +12,7 @@ import { } from '../__fixtures__' import type { HostConfig, Response, RunAction } from '@opentrons/api-client' +import type { UsePlayMaintenanceRunMutationOptions } from '../usePlayMaintenanceRunMutation' jest.mock('@opentrons/api-client') jest.mock('../../api/useHost') @@ -24,12 +25,12 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('usePlayMaintenanceRunMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode} & UsePlayMaintenanceRunMutationOptions> const createPlayRunActionData = { actionType: RUN_ACTION_TYPE_PLAY } beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UsePlayMaintenanceRunMutationOptions> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/modules/__tests__/useModulesQuery.test.tsx b/react-api-client/src/modules/__tests__/useModulesQuery.test.tsx index cb0acec6164..d4c226a5d83 100644 --- a/react-api-client/src/modules/__tests__/useModulesQuery.test.tsx +++ b/react-api-client/src/modules/__tests__/useModulesQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getModules, mockModulesResponse, @@ -11,6 +11,7 @@ import { useHost } from '../../api' import { useModulesQuery } from '..' import type { HostConfig, Response, Modules } from '@opentrons/api-client' +import { UseModulesQueryOptions } from '../useModulesQuery' jest.mock('@opentrons/api-client/src/modules/getModules') jest.mock('../../api/useHost') @@ -26,11 +27,11 @@ const MODULES_RESPONSE = { const V2_MODULES_RESPONSE = { data: v2MockModulesResponse } describe('useModulesQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode} & UseModulesQueryOptions> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UseModulesQueryOptions> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/modules/useModulesQuery.ts b/react-api-client/src/modules/useModulesQuery.ts index c09332123d5..01b81e25aef 100644 --- a/react-api-client/src/modules/useModulesQuery.ts +++ b/react-api-client/src/modules/useModulesQuery.ts @@ -4,8 +4,10 @@ import { useHost } from '../api' import type { UseQueryResult, UseQueryOptions } from 'react-query' import type { HostConfig, Modules } from '@opentrons/api-client' +export type UseModulesQueryOptions = UseQueryOptions + export function useModulesQuery( - options: UseQueryOptions = {} + options: UseModulesQueryOptions = {} ): UseQueryResult { const host = useHost() const query = useQuery( diff --git a/react-api-client/src/pipettes/__tests__/usePipettesQuery.test.tsx b/react-api-client/src/pipettes/__tests__/usePipettesQuery.test.tsx index cd10def3dab..57eeeb1f564 100644 --- a/react-api-client/src/pipettes/__tests__/usePipettesQuery.test.tsx +++ b/react-api-client/src/pipettes/__tests__/usePipettesQuery.test.tsx @@ -1,12 +1,12 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getPipettes } from '@opentrons/api-client' import { useHost } from '../../api' import { usePipettesQuery } from '..' -import type { HostConfig, Pipettes, Response } from '@opentrons/api-client' +import type { GetPipettesParams, HostConfig, Pipettes, Response } from '@opentrons/api-client' jest.mock('@opentrons/api-client') jest.mock('../../api/useHost') @@ -35,11 +35,11 @@ const PIPETTES_RESPONSE: Pipettes = { } as any describe('usePipettesQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode} & GetPipettesParams> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode} & GetPipettesParams> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/pipettes/__tests__/usePipettesSettingsQuery.test.tsx b/react-api-client/src/pipettes/__tests__/usePipettesSettingsQuery.test.tsx index 1f3115b6042..b74f46b87fc 100644 --- a/react-api-client/src/pipettes/__tests__/usePipettesSettingsQuery.test.tsx +++ b/react-api-client/src/pipettes/__tests__/usePipettesSettingsQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getPipetteSettings, pipetteSettingsResponseFixture, @@ -14,6 +14,7 @@ import type { PipetteSettings, Response, } from '@opentrons/api-client' +import type { UsePipetteSettingsQueryOptions } from '../usePipetteSettingsQuery' jest.mock('@opentrons/api-client') jest.mock('../../api/useHost') @@ -26,11 +27,11 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('usePipetteSettingsQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode} & UsePipetteSettingsQueryOptions> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UsePipetteSettingsQueryOptions> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/pipettes/usePipetteSettingsQuery.ts b/react-api-client/src/pipettes/usePipetteSettingsQuery.ts index d58818e1d21..0b0a157f31e 100644 --- a/react-api-client/src/pipettes/usePipetteSettingsQuery.ts +++ b/react-api-client/src/pipettes/usePipetteSettingsQuery.ts @@ -4,8 +4,10 @@ import { useHost } from '../api' import type { UseQueryResult, UseQueryOptions } from 'react-query' import type { HostConfig, PipetteSettings } from '@opentrons/api-client' +export type UsePipetteSettingsQueryOptions = UseQueryOptions + export function usePipetteSettingsQuery( - options: UseQueryOptions = {} + options: UsePipetteSettingsQueryOptions = {} ): UseQueryResult { const host = useHost() const query = useQuery( diff --git a/react-api-client/src/protocols/__tests__/useAllProtocolsQuery.test.tsx b/react-api-client/src/protocols/__tests__/useAllProtocolsQuery.test.tsx index cddd74c1235..f9bd1a3ea5f 100644 --- a/react-api-client/src/protocols/__tests__/useAllProtocolsQuery.test.tsx +++ b/react-api-client/src/protocols/__tests__/useAllProtocolsQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getProtocols } from '@opentrons/api-client' import { useHost } from '../../api' import { useAllProtocolsQuery } from '..' @@ -37,11 +37,11 @@ const PROTOCOLS_RESPONSE = { } as Protocols describe('useAllProtocolsQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/protocols/__tests__/useCreateProtocolMutation.test.tsx b/react-api-client/src/protocols/__tests__/useCreateProtocolMutation.test.tsx index 860180a9bd6..f8fc3ae92b7 100644 --- a/react-api-client/src/protocols/__tests__/useCreateProtocolMutation.test.tsx +++ b/react-api-client/src/protocols/__tests__/useCreateProtocolMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { createProtocol } from '@opentrons/api-client' import { useHost } from '../../api' import { useCreateProtocolMutation } from '..' @@ -43,12 +43,12 @@ const PROTOCOL_RESPONSE = { } as Protocol describe('useCreateProtocolMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> const createProtocolData = [jsonFile] beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/protocols/__tests__/useDeleteProtocol.test.tsx b/react-api-client/src/protocols/__tests__/useDeleteProtocol.test.tsx index 0c973f2cb6c..0bbf1db8119 100644 --- a/react-api-client/src/protocols/__tests__/useDeleteProtocol.test.tsx +++ b/react-api-client/src/protocols/__tests__/useDeleteProtocol.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { deleteProtocol } from '@opentrons/api-client' import { useHost } from '../../api' import { useDeleteProtocolMutation } from '..' @@ -21,12 +21,12 @@ const DELETE_PROTOCOL_RESPONSE = { } as EmptyResponse describe('useDeleteProtocolMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> const protocolId = '123' beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/protocols/__tests__/useProtocolQuery.test.tsx b/react-api-client/src/protocols/__tests__/useProtocolQuery.test.tsx index cf3aa87b86f..6e203f0d315 100644 --- a/react-api-client/src/protocols/__tests__/useProtocolQuery.test.tsx +++ b/react-api-client/src/protocols/__tests__/useProtocolQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getProtocol } from '@opentrons/api-client' import { useHost } from '../../api' import { useProtocolQuery } from '..' @@ -29,11 +29,11 @@ const PROTOCOL_RESPONSE = { } as Protocol describe('useProtocolQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/robot/__tests__/useAcknowledgeEstopDisengageMutation.test.tsx b/react-api-client/src/robot/__tests__/useAcknowledgeEstopDisengageMutation.test.tsx index e82b6927585..a33be2b9fc0 100644 --- a/react-api-client/src/robot/__tests__/useAcknowledgeEstopDisengageMutation.test.tsx +++ b/react-api-client/src/robot/__tests__/useAcknowledgeEstopDisengageMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { acknowledgeEstopDisengage } from '@opentrons/api-client' import { useAcknowledgeEstopDisengageMutation } from '..' @@ -18,7 +18,7 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useAcknowledgeEstopDisengageMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> const updatedEstopPhysicalStatus: EstopStatus = { data: { status: 'disengaged', @@ -29,7 +29,7 @@ describe('useAcknowledgeEstopDisengageMutation hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/robot/__tests__/useDoorQuery.test.tsx b/react-api-client/src/robot/__tests__/useDoorQuery.test.tsx index ad861daefb6..fb7f6302b9e 100644 --- a/react-api-client/src/robot/__tests__/useDoorQuery.test.tsx +++ b/react-api-client/src/robot/__tests__/useDoorQuery.test.tsx @@ -1,13 +1,14 @@ import * as React from 'react' import { when } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getDoorStatus } from '@opentrons/api-client' import { useHost } from '../../api' import { useDoorQuery } from '..' import type { HostConfig, Response, DoorStatus } from '@opentrons/api-client' +import type { UseDoorQueryOptions } from '../useDoorQuery' jest.mock('@opentrons/api-client') jest.mock('../../api/useHost') @@ -23,11 +24,11 @@ const DOOR_RESPONSE: DoorStatus = { } as DoorStatus describe('useDoorQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode} & UseDoorQueryOptions> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UseDoorQueryOptions> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/robot/__tests__/useEstopQuery.test.tsx b/react-api-client/src/robot/__tests__/useEstopQuery.test.tsx index 8cfade8e782..2141b210a6e 100644 --- a/react-api-client/src/robot/__tests__/useEstopQuery.test.tsx +++ b/react-api-client/src/robot/__tests__/useEstopQuery.test.tsx @@ -1,13 +1,14 @@ import * as React from 'react' import { when } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getEstopStatus } from '@opentrons/api-client' import { useHost } from '../../api' import { useEstopQuery } from '..' import type { HostConfig, Response, EstopStatus } from '@opentrons/api-client' +import type { UseEstopQueryOptions } from '../useEstopQuery' jest.mock('@opentrons/api-client') jest.mock('../../api/useHost') @@ -27,11 +28,11 @@ const ESTOP_STATE_RESPONSE: EstopStatus = { } describe('useEstopQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode} & UseEstopQueryOptions> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UseEstopQueryOptions> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/robot/__tests__/useLightsQuery.test.tsx b/react-api-client/src/robot/__tests__/useLightsQuery.test.tsx index 7846300dca4..95fa0df074a 100644 --- a/react-api-client/src/robot/__tests__/useLightsQuery.test.tsx +++ b/react-api-client/src/robot/__tests__/useLightsQuery.test.tsx @@ -2,13 +2,14 @@ import * as React from 'react' import { when } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getLights as mockGetLights } from '@opentrons/api-client' import { useHost as mockUseHost } from '../../api' import { useLightsQuery } from '..' import type { HostConfig, Response, Lights } from '@opentrons/api-client' +import type { UseLightsQueryOptions } from '../useLightsQuery' jest.mock('@opentrons/api-client') jest.mock('../../api/useHost') @@ -20,11 +21,11 @@ const HOST_CONFIG: HostConfig = { hostname: 'localhost' } const LIGHTS_RESPONSE: Lights = { on: true } as Lights describe('useLights hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode} & UseLightsQueryOptions> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UseLightsQueryOptions> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/robot/useDoorQuery.ts b/react-api-client/src/robot/useDoorQuery.ts index 0bd3edfac41..8e486989f30 100644 --- a/react-api-client/src/robot/useDoorQuery.ts +++ b/react-api-client/src/robot/useDoorQuery.ts @@ -5,8 +5,10 @@ import { useHost } from '../api' import type { UseQueryResult, UseQueryOptions } from 'react-query' import type { DoorStatus } from '@opentrons/api-client' +export type UseDoorQueryOptions = UseQueryOptions + export function useDoorQuery( - options: UseQueryOptions = {} + options: UseDoorQueryOptions = {} ): UseQueryResult { const host = useHost() const query = useQuery( diff --git a/react-api-client/src/robot/useEstopQuery.ts b/react-api-client/src/robot/useEstopQuery.ts index 190cbdab5aa..9b790c84369 100644 --- a/react-api-client/src/robot/useEstopQuery.ts +++ b/react-api-client/src/robot/useEstopQuery.ts @@ -5,8 +5,11 @@ import { useHost } from '../api' import type { UseQueryResult, UseQueryOptions } from 'react-query' import type { HostConfig, EstopStatus } from '@opentrons/api-client' + +export type UseEstopQueryOptions = UseQueryOptions + export function useEstopQuery( - options: UseQueryOptions = {} + options: UseEstopQueryOptions = {} ): UseQueryResult { const host = useHost() const query = useQuery( diff --git a/react-api-client/src/robot/useLightsQuery.ts b/react-api-client/src/robot/useLightsQuery.ts index 4de14dd65b5..100e8be580e 100644 --- a/react-api-client/src/robot/useLightsQuery.ts +++ b/react-api-client/src/robot/useLightsQuery.ts @@ -3,8 +3,10 @@ import { useQuery } from 'react-query' import { useHost } from '../api' import type { UseQueryResult, UseQueryOptions } from 'react-query' +export type UseLightsQueryOptions = UseQueryOptions + export function useLightsQuery( - options: UseQueryOptions = {} + options: UseLightsQueryOptions = {} ): UseQueryResult { const host = useHost() const allOptions: UseQueryOptions = { diff --git a/react-api-client/src/runs/__tests__/useAllCommandsQuery.test.tsx b/react-api-client/src/runs/__tests__/useAllCommandsQuery.test.tsx index 66778ed0118..9053f2dc66e 100644 --- a/react-api-client/src/runs/__tests__/useAllCommandsQuery.test.tsx +++ b/react-api-client/src/runs/__tests__/useAllCommandsQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getCommands } from '@opentrons/api-client' import { useHost } from '../../api' import { useAllCommandsQuery, DEFAULT_PARAMS } from '../useAllCommandsQuery' @@ -19,11 +19,11 @@ const HOST_CONFIG: HostConfig = { hostname: 'localhost' } const RUN_ID = 'run_id' describe('useAllCommandsQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/runs/__tests__/useAllRunsQuery.test.tsx b/react-api-client/src/runs/__tests__/useAllRunsQuery.test.tsx index 1475e941dbb..65ef5f026ba 100644 --- a/react-api-client/src/runs/__tests__/useAllRunsQuery.test.tsx +++ b/react-api-client/src/runs/__tests__/useAllRunsQuery.test.tsx @@ -1,13 +1,13 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getRuns } from '@opentrons/api-client' import { useHost } from '../../api' import { useAllRunsQuery } from '..' import { mockRunsResponse } from '../__fixtures__' -import type { HostConfig, Response, Runs } from '@opentrons/api-client' +import type { GetRunsParams, HostConfig, Response, Runs } from '@opentrons/api-client' jest.mock('@opentrons/api-client') jest.mock('../../api/useHost') @@ -18,11 +18,11 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useAllRunsQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode} & GetRunsParams> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode} & GetRunsParams> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/runs/__tests__/useCommandQuery.test.tsx b/react-api-client/src/runs/__tests__/useCommandQuery.test.tsx index befeb81d772..36dcc4a4960 100644 --- a/react-api-client/src/runs/__tests__/useCommandQuery.test.tsx +++ b/react-api-client/src/runs/__tests__/useCommandQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getCommand } from '@opentrons/api-client' import { useHost } from '../../api' import { useCommandQuery } from '..' @@ -23,11 +23,11 @@ const COMMAND_RESPONSE = { } as CommandDetail describe('useCommandQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/runs/__tests__/useCreateCommandMutation.test.tsx b/react-api-client/src/runs/__tests__/useCreateCommandMutation.test.tsx index cdd2038148d..8160596216b 100644 --- a/react-api-client/src/runs/__tests__/useCreateCommandMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useCreateCommandMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { createCommand } from '@opentrons/api-client' import { useHost } from '../../api' import { useCreateCommandMutation } from '..' @@ -21,11 +21,11 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useCreateCommandMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/runs/__tests__/useCreateLabwareDefinitionMutation.test.tsx b/react-api-client/src/runs/__tests__/useCreateLabwareDefinitionMutation.test.tsx index 5256a91372a..f049e49ecbd 100644 --- a/react-api-client/src/runs/__tests__/useCreateLabwareDefinitionMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useCreateLabwareDefinitionMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { createLabwareDefinition } from '@opentrons/api-client' import { useHost } from '../../api' @@ -22,12 +22,12 @@ const HOST_CONFIG: HostConfig = { hostname: 'localhost' } const RUN_ID = 'run_id' describe('useCreateLabwareDefinitionMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> let labwareDefinition: LabwareDefinition2 beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/runs/__tests__/useCreateLabwareOffsetsMutation.test.tsx b/react-api-client/src/runs/__tests__/useCreateLabwareOffsetsMutation.test.tsx index b87a1dc6fa3..7f9d0f076d9 100644 --- a/react-api-client/src/runs/__tests__/useCreateLabwareOffsetsMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useCreateLabwareOffsetsMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { createLabwareOffset } from '@opentrons/api-client' import { useHost } from '../../api' @@ -24,12 +24,12 @@ const LABWARE_LOCATION = { slotName: '4' } const OFFSET = { x: 1, y: 2, z: 3 } describe('useCreateLabwareOffsetMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> let labwareOffset: LabwareOffsetCreateData beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/runs/__tests__/useCreateLiveCommandMutation.test.tsx b/react-api-client/src/runs/__tests__/useCreateLiveCommandMutation.test.tsx index f95eb981638..149c1a47440 100644 --- a/react-api-client/src/runs/__tests__/useCreateLiveCommandMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useCreateLiveCommandMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { createLiveCommand } from '@opentrons/api-client' import { useHost } from '../../api' import { useCreateLiveCommandMutation } from '../useCreateLiveCommandMutation' @@ -21,11 +21,11 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useCreateLiveCommandMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/runs/__tests__/useCreateRunMutation.test.tsx b/react-api-client/src/runs/__tests__/useCreateRunMutation.test.tsx index 97ba484e0b0..186daacf464 100644 --- a/react-api-client/src/runs/__tests__/useCreateRunMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useCreateRunMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { createRun, CreateRunData } from '@opentrons/api-client' import { useHost } from '../../api' import { PROTOCOL_ID, mockRunResponse } from '../__fixtures__' @@ -18,12 +18,12 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useCreateRunMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> let createRunData = {} as CreateRunData beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) createRunData = {} diff --git a/react-api-client/src/runs/__tests__/useDismissCurrentRunMutation.test.tsx b/react-api-client/src/runs/__tests__/useDismissCurrentRunMutation.test.tsx index 64fc29f571b..61eff8d222b 100644 --- a/react-api-client/src/runs/__tests__/useDismissCurrentRunMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useDismissCurrentRunMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { dismissCurrentRun } from '@opentrons/api-client' import { useHost } from '../../api' import { useDismissCurrentRunMutation } from '..' @@ -21,11 +21,11 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useDismissCurrentRunMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/runs/__tests__/usePauseRunMutation.test.tsx b/react-api-client/src/runs/__tests__/usePauseRunMutation.test.tsx index 882c22d7d1e..b1cb050cab4 100644 --- a/react-api-client/src/runs/__tests__/usePauseRunMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/usePauseRunMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { createRunAction, RUN_ACTION_TYPE_PAUSE } from '@opentrons/api-client' import { useHost } from '../../api' import { usePauseRunMutation } from '..' @@ -9,6 +9,7 @@ import { usePauseRunMutation } from '..' import { RUN_ID_1, mockPauseRunAction } from '../__fixtures__' import type { HostConfig, Response, RunAction } from '@opentrons/api-client' +import type { UsePauseRunMutationOptions } from '../usePauseRunMutation' jest.mock('@opentrons/api-client') jest.mock('../../api/useHost') @@ -21,12 +22,12 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('usePauseRunMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode} & UsePauseRunMutationOptions> const createPauseRunActionData = { actionType: RUN_ACTION_TYPE_PAUSE } beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UsePauseRunMutationOptions> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/runs/__tests__/usePlayRunMutation.test.tsx b/react-api-client/src/runs/__tests__/usePlayRunMutation.test.tsx index 389c020e841..dee4d5aac16 100644 --- a/react-api-client/src/runs/__tests__/usePlayRunMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/usePlayRunMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { createRunAction, RUN_ACTION_TYPE_PLAY } from '@opentrons/api-client' import { useHost } from '../../api' import { usePlayRunMutation } from '..' @@ -9,6 +9,7 @@ import { usePlayRunMutation } from '..' import { RUN_ID_1, mockPlayRunAction } from '../__fixtures__' import type { HostConfig, Response, RunAction } from '@opentrons/api-client' +import type { UsePlayRunMutationOptions } from '../usePlayRunMutation' jest.mock('@opentrons/api-client') jest.mock('../../api/useHost') @@ -21,12 +22,12 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('usePlayRunMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode} & UsePlayRunMutationOptions> const createPlayRunActionData = { actionType: RUN_ACTION_TYPE_PLAY } beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UsePlayRunMutationOptions> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/runs/__tests__/useRunActionMutations.test.tsx b/react-api-client/src/runs/__tests__/useRunActionMutations.test.tsx index daffa6b92ce..9383b715b53 100644 --- a/react-api-client/src/runs/__tests__/useRunActionMutations.test.tsx +++ b/react-api-client/src/runs/__tests__/useRunActionMutations.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { RUN_ID_1 } from '../__fixtures__' import { @@ -28,11 +28,11 @@ const mockUseStopRunMutation = useStopRunMutation as jest.MockedFunction< > describe('useRunActionMutations hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/runs/__tests__/useRunQuery.test.tsx b/react-api-client/src/runs/__tests__/useRunQuery.test.tsx index be38c1659f9..588422da595 100644 --- a/react-api-client/src/runs/__tests__/useRunQuery.test.tsx +++ b/react-api-client/src/runs/__tests__/useRunQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getRun } from '@opentrons/api-client' import { useHost } from '../../api' import { useRunQuery } from '..' @@ -19,11 +19,11 @@ const RUN_ID = '1' const RUN_RESPONSE = { data: { id: RUN_ID } } as Run describe('useRunQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/runs/__tests__/useStopRunMutation.test.tsx b/react-api-client/src/runs/__tests__/useStopRunMutation.test.tsx index a168416bc06..36c3ecc84e4 100644 --- a/react-api-client/src/runs/__tests__/useStopRunMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useStopRunMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { createRunAction, RUN_ACTION_TYPE_STOP } from '@opentrons/api-client' import { useHost } from '../../api' import { useStopRunMutation } from '..' @@ -21,12 +21,12 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useStopRunMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> const createStopRunActionData = { actionType: RUN_ACTION_TYPE_STOP } beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/server/__tests__/useUpdateRobotNameMutation.test.tsx b/react-api-client/src/server/__tests__/useUpdateRobotNameMutation.test.tsx index bfee9bae3a1..0db5cadb7db 100644 --- a/react-api-client/src/server/__tests__/useUpdateRobotNameMutation.test.tsx +++ b/react-api-client/src/server/__tests__/useUpdateRobotNameMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { updateRobotName } from '@opentrons/api-client' import { useHost } from '../../api' import { useUpdateRobotNameMutation } from '..' @@ -28,11 +28,11 @@ const UPDATE_ROBOT_NAME_RESPONSE = { } describe('useUpdatedRobotNameMutation, hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/sessions/__tests__/useAllSessionsQuery.test.tsx b/react-api-client/src/sessions/__tests__/useAllSessionsQuery.test.tsx index fc6ddb8ba37..3a5bde04a7a 100644 --- a/react-api-client/src/sessions/__tests__/useAllSessionsQuery.test.tsx +++ b/react-api-client/src/sessions/__tests__/useAllSessionsQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' -import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { QueryClient, QueryClientProvider, UseQueryOptions } from 'react-query' +import { renderHook } from '@testing-library/react' import { getSessions } from '@opentrons/api-client' import { useHost } from '../../api' import { useAllSessionsQuery } from '..' @@ -23,11 +23,11 @@ const SESSIONS_RESPONSE = { } as Sessions describe('useAllSessionsQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode} & UseQueryOptions> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UseQueryOptions> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/sessions/__tests__/useCreateSessionMutation.test.tsx b/react-api-client/src/sessions/__tests__/useCreateSessionMutation.test.tsx index 31cb38aef0b..d9cd8e1840f 100644 --- a/react-api-client/src/sessions/__tests__/useCreateSessionMutation.test.tsx +++ b/react-api-client/src/sessions/__tests__/useCreateSessionMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { createSession, CreateSessionData, @@ -27,12 +27,12 @@ const SESSION_RESPONSE = { } as Session describe('useCreateSessionMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> let createSessionData = {} as CreateSessionData beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) createSessionData = { sessionType: SESSION_TYPE_DECK_CALIBRATION } diff --git a/react-api-client/src/sessions/__tests__/useSessionQuery.test.tsx b/react-api-client/src/sessions/__tests__/useSessionQuery.test.tsx index 2c031f653e6..7b12bf73310 100644 --- a/react-api-client/src/sessions/__tests__/useSessionQuery.test.tsx +++ b/react-api-client/src/sessions/__tests__/useSessionQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getSession } from '@opentrons/api-client' import { useHost } from '../../api' import { useSessionQuery } from '..' @@ -21,11 +21,11 @@ const SESSION_RESPONSE = { } as Session describe('useSessionQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/sessions/__tests__/useSessionsByTypeQuery.test.tsx b/react-api-client/src/sessions/__tests__/useSessionsByTypeQuery.test.tsx index 2db388e748f..d63a72f25a2 100644 --- a/react-api-client/src/sessions/__tests__/useSessionsByTypeQuery.test.tsx +++ b/react-api-client/src/sessions/__tests__/useSessionsByTypeQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getSessions } from '@opentrons/api-client' import { useHost } from '../../api' import { useSessionsByTypeQuery } from '..' @@ -23,11 +23,11 @@ const SESSIONS_RESPONSE = { } as Sessions describe('useSessionsByTypeQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/subsystems/__tests__/useAllCurrentSubsystemUpdateQuery.test.tsx b/react-api-client/src/subsystems/__tests__/useAllCurrentSubsystemUpdateQuery.test.tsx index d131848b33a..beed5d00715 100644 --- a/react-api-client/src/subsystems/__tests__/useAllCurrentSubsystemUpdateQuery.test.tsx +++ b/react-api-client/src/subsystems/__tests__/useAllCurrentSubsystemUpdateQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getCurrentAllSubsystemUpdates } from '@opentrons/api-client' import { useHost } from '../../api' @@ -41,11 +41,11 @@ const CURRENT_SUBSYSTEM_UPDATES_RESPONSE = { } as CurrentSubsystemUpdates describe('useAllCurrentSubsystemUpdateQuery', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/subsystems/__tests__/useCurrentSubsystemUpdateQuery.test.tsx b/react-api-client/src/subsystems/__tests__/useCurrentSubsystemUpdateQuery.test.tsx index 10df58a751f..3ec00716795 100644 --- a/react-api-client/src/subsystems/__tests__/useCurrentSubsystemUpdateQuery.test.tsx +++ b/react-api-client/src/subsystems/__tests__/useCurrentSubsystemUpdateQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getCurrentSubsystemUpdate } from '@opentrons/api-client' import { useHost } from '../../api' @@ -35,11 +35,11 @@ const CURRENT_SUBSYSTEM_UPDATE_RESPONSE = { } as SubsystemUpdateProgressData describe('useCurrentSubsystemUpdateQuery', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/subsystems/__tests__/useSubsystemUpdateQuery.test.tsx b/react-api-client/src/subsystems/__tests__/useSubsystemUpdateQuery.test.tsx index 9d1092ab081..022085509bf 100644 --- a/react-api-client/src/subsystems/__tests__/useSubsystemUpdateQuery.test.tsx +++ b/react-api-client/src/subsystems/__tests__/useSubsystemUpdateQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react-hooks' +import { renderHook } from '@testing-library/react' import { getSubsystemUpdate } from '@opentrons/api-client' import { useHost } from '../../api' import { useSubsystemUpdateQuery } from '..' @@ -34,11 +34,11 @@ const SUBSYSTEM_UPDATE_RESPONSE = { } as SubsystemUpdateProgressData describe('useSubsystemUpdateQuery hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/subsystems/__tests__/useUpdateSubsystemMutation.test.tsx b/react-api-client/src/subsystems/__tests__/useUpdateSubsystemMutation.test.tsx index ccafc5a1e8b..9cc3191e7fb 100644 --- a/react-api-client/src/subsystems/__tests__/useUpdateSubsystemMutation.test.tsx +++ b/react-api-client/src/subsystems/__tests__/useUpdateSubsystemMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react-hooks' +import { act, renderHook } from '@testing-library/react' import { updateSubsystem } from '@opentrons/api-client' import { useHost } from '../../api' import { useUpdateSubsystemMutation } from '..' @@ -34,11 +34,11 @@ const SUBSYSTEM_UPDATE_RESPONSE = { } as SubsystemUpdateProgressData describe('useUpdateSubsystemMutation hook', () => { - let wrapper: React.FunctionComponent<{}> + let wrapper: React.FunctionComponent<{children: React.ReactNode}> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/yarn.lock b/yarn.lock index 569afac4043..2b14801c967 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1237,13 +1237,20 @@ dependencies: regenerator-runtime "^0.12.0" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.14.6" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d" integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg== dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.12.13", "@babel/runtime@^7.22.5": + version "7.23.5" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.5.tgz#11edb98f8aeec529b82b211028177679144242db" + integrity sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/runtime@^7.17.8", "@babel/runtime@^7.8.7": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.6.tgz#6a1ef59f838debd670421f8c7f2cbb8da9751580" @@ -2184,7 +2191,7 @@ "@thi.ng/paths" "1.6.5" "@types/uuid" "^3.4.7" classnames "2.2.5" - connected-react-router "6.8.0" + connected-react-router "6.9.3" core-js "3.2.1" date-fns "2.25.0" events "3.0.0" @@ -2201,10 +2208,10 @@ react "18.2.0" react-dom "18.2.0" react-error-boundary "^4.0.10" - react-i18next "^11.7.3" + react-i18next "13.0.1" react-intersection-observer "^8.33.1" - react-redux "7.2.1" - react-router-dom "5.1.1" + react-redux "8.1.2" + react-router-dom "5.3.4" react-select "5.4.0" react-simple-keyboard "^3.4.187" react-viewport-list "6.3.0" @@ -2229,7 +2236,6 @@ "@react-spring/web" "9.6.1" "@types/classnames" "2.2.5" "@types/lodash" "^4.14.191" - "@types/react-router-dom" "^5.1.7" "@types/styled-components" "^5.1.26" "@types/webpack-env" "^1.16.0" classnames "2.2.5" @@ -2260,7 +2266,7 @@ dependencies: "@opentrons/api-client" "link:api-client" "@opentrons/shared-data" "link:shared-data" - react-query "^3.34.8" + react-query "3.35.0" "@opentrons/shared-data@link:shared-data": version "0.0.0-dev" @@ -3360,19 +3366,19 @@ dependencies: defer-to-connect "^2.0.0" -"@testing-library/dom@^7.28.1": - version "7.31.2" - resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.31.2.tgz#df361db38f5212b88555068ab8119f5d841a8c4a" - integrity sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ== +"@testing-library/dom@^8.5.0": + version "8.20.1" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.1.tgz#2e52a32e46fc88369eef7eef634ac2a192decd9f" + integrity sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g== dependencies: "@babel/code-frame" "^7.10.4" "@babel/runtime" "^7.12.5" - "@types/aria-query" "^4.2.0" - aria-query "^4.2.2" + "@types/aria-query" "^5.0.1" + aria-query "5.1.3" chalk "^4.1.0" - dom-accessibility-api "^0.5.6" - lz-string "^1.4.4" - pretty-format "^26.6.2" + dom-accessibility-api "^0.5.9" + lz-string "^1.5.0" + pretty-format "^27.0.2" "@testing-library/jest-dom@^5.12.0": version "5.14.1" @@ -3389,25 +3395,14 @@ lodash "^4.17.15" redent "^3.0.0" -"@testing-library/react-hooks@^5.1.1": - version "5.1.3" - resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-5.1.3.tgz#f722cc526025be2c16966a9a081edf47a2528721" - integrity sha512-UdEUtlQapQ579NEcXDAUE275u+KUsPtxW7NmFrNt0bE6lW8lqNCyxDK0RSuECmNZ/S0/fgP00W9RWRhVKO/hRg== +"@testing-library/react@13.4.0": + version "13.4.0" + resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-13.4.0.tgz#6a31e3bf5951615593ad984e96b9e5e2d9380966" + integrity sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw== dependencies: "@babel/runtime" "^7.12.5" - "@types/react" ">=16.9.0" - "@types/react-dom" ">=16.9.0" - "@types/react-test-renderer" ">=16.9.0" - filter-console "^0.1.1" - react-error-boundary "^3.1.0" - -"@testing-library/react@^11.2.6": - version "11.2.7" - resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.2.7.tgz#b29e2e95c6765c815786c0bc1d5aed9cb2bf7818" - integrity sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA== - dependencies: - "@babel/runtime" "^7.12.5" - "@testing-library/dom" "^7.28.1" + "@testing-library/dom" "^8.5.0" + "@types/react-dom" "^18.0.0" "@thi.ng/checks@^1.5.13": version "1.5.14" @@ -3437,10 +3432,10 @@ resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf" integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A== -"@types/aria-query@^4.2.0": - version "4.2.1" - resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.1.tgz#78b5433344e2f92e8b306c06a5622c50c245bf6b" - integrity sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg== +"@types/aria-query@^5.0.1": + version "5.0.4" + resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.4.tgz#1a31c3d378850d2778dabb6374d036dcba4ba708" + integrity sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw== "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7": version "7.1.14" @@ -3621,10 +3616,10 @@ dependencies: "@types/unist" "*" -"@types/history@*": - version "4.7.8" - resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934" - integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA== +"@types/history@^4.7.11": + version "4.7.11" + resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64" + integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA== "@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0": version "3.3.1" @@ -3634,6 +3629,14 @@ "@types/react" "*" hoist-non-react-statics "^3.3.0" +"@types/hoist-non-react-statics@^3.3.1": + version "3.3.5" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494" + integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/html-minifier-terser@^5.0.0": version "5.1.1" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50" @@ -3877,48 +3880,48 @@ "@types/react" "*" "@types/reactcss" "*" -"@types/react-dom@18.2.0": - version "18.2.0" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.0.tgz#374f28074bb117f56f58c4f3f71753bebb545156" - integrity sha512-8yQrvS6sMpSwIovhPOwfyNf2Wz6v/B62LFSVYQ85+Rq3tLsBIG7rP5geMxaijTUxSkrO6RzN/IRuIAADYQsleA== +"@types/react-dom@18.0.6": + version "18.0.6" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1" + integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA== dependencies: "@types/react" "*" -"@types/react-dom@>=16.9.0": - version "17.0.7" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.7.tgz#b8ee15ead9e5d6c2c858b44949fdf2ebe5212232" - integrity sha512-Wd5xvZRlccOrCTej8jZkoFZuZRKHzanDDv1xglI33oBNFMWrqOSzrvWFw7ngSiZjrpJAzPKFtX7JvuXpkNmQHA== +"@types/react-dom@^18.0.0": + version "18.2.17" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.17.tgz#375c55fab4ae671bd98448dcfa153268d01d6f64" + integrity sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg== dependencies: "@types/react" "*" -"@types/react-redux@^7.1.16": - version "7.1.16" - resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.16.tgz#0fbd04c2500c12105494c83d4a3e45c084e3cb21" - integrity sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw== +"@types/react-redux@7.1.32": + version "7.1.32" + resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.32.tgz#bf162289e0c69e44a649dfcadb30f7f7c4cb00e4" + integrity sha512-YJYV0M27cyHHJIacaRsZRx5OETzK8KWjEGnix7UH3ngItYo4It0MUBzU6WNwqnwhbrPw5wx9KXluuoTZ85Gg7A== dependencies: "@types/hoist-non-react-statics" "^3.3.0" "@types/react" "*" hoist-non-react-statics "^3.3.0" redux "^4.0.0" -"@types/react-router-dom@^5.1.7": - version "5.1.7" - resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.7.tgz#a126d9ea76079ffbbdb0d9225073eb5797ab7271" - integrity sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg== +"@types/react-router-dom@5.3.3": + version "5.3.3" + resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83" + integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw== dependencies: - "@types/history" "*" + "@types/history" "^4.7.11" "@types/react" "*" "@types/react-router" "*" "@types/react-router@*": - version "5.1.15" - resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.15.tgz#c1069e0da4617fd315e381b56b18b89490e14e2a" - integrity sha512-z3UlMG/x91SFEVmmvykk9FLTliDvfdIUky4k2rCfXWQ0NKbrP8o9BTCaCTPuYsB8gDkUnUmkcA2vYlm2DR+HAA== + version "5.1.20" + resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.20.tgz#88eccaa122a82405ef3efbcaaa5dcdd9f021387c" + integrity sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q== dependencies: - "@types/history" "*" + "@types/history" "^4.7.11" "@types/react" "*" -"@types/react-test-renderer@>=16.9.0", "@types/react-test-renderer@^17.0.1": +"@types/react-test-renderer@^17.0.1": version "17.0.1" resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3120f7d1c157fba9df0118dae20cb0297ee0e06b" integrity sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw== @@ -3932,19 +3935,10 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@>=16.9.0": - version "17.0.11" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.11.tgz#67fcd0ddbf5a0b083a0f94e926c7d63f3b836451" - integrity sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA== - dependencies: - "@types/prop-types" "*" - "@types/scheduler" "*" - csstype "^3.0.2" - -"@types/react@18.2.0": - version "18.2.0" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.0.tgz#15cda145354accfc09a18d2f2305f9fc099ada21" - integrity sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA== +"@types/react@*", "@types/react@18.0.21": + version "18.0.21" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.21.tgz#b8209e9626bb00a34c76f55482697edd2b43cc67" + integrity sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" @@ -4064,6 +4058,11 @@ resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e" integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ== +"@types/use-sync-external-store@^0.0.3": + version "0.0.3" + resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43" + integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA== + "@types/uuid@8.3.0": version "8.3.0" resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.0.tgz#215c231dff736d5ba92410e6d602050cce7e273f" @@ -4797,6 +4796,11 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0: dependencies: color-convert "^2.0.1" +ansi-styles@^5.0.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b" + integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA== + ansi-to-html@^0.6.11: version "0.6.15" resolved "https://registry.yarnpkg.com/ansi-to-html/-/ansi-to-html-0.6.15.tgz#ac6ad4798a00f6aa045535d7f6a9cb9294eebea7" @@ -4934,6 +4938,13 @@ argparse@^2.0.1: resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38" integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== +aria-query@5.1.3: + version "5.1.3" + resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e" + integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ== + dependencies: + deep-equal "^2.0.5" + aria-query@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b" @@ -4957,6 +4968,14 @@ arr-union@^3.1.0: resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4" integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ= +array-buffer-byte-length@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz#fabe8bc193fea865f317fe7807085ee0dee5aead" + integrity sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A== + dependencies: + call-bind "^1.0.2" + is-array-buffer "^3.0.1" + array-find-index@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1" @@ -6156,6 +6175,15 @@ call-bind@^1.0.0, call-bind@^1.0.2: function-bind "^1.1.1" get-intrinsic "^1.0.2" +call-bind@^1.0.4, call-bind@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.5.tgz#6fa2b7845ce0ea49bf4d8b9ef64727a2c2e2e513" + integrity sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ== + dependencies: + function-bind "^1.1.2" + get-intrinsic "^1.2.1" + set-function-length "^1.1.1" + call-me-maybe@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b" @@ -6949,12 +6977,16 @@ connect-history-api-fallback@^1.6.0: resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc" integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg== -connected-react-router@6.8.0: - version "6.8.0" - resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-6.8.0.tgz#ddc687b31d498322445d235d660798489fa56cae" - integrity sha512-E64/6krdJM3Ag3MMmh2nKPtMbH15s3JQDuaYJvOVXzu6MbHbDyIvuwLOyhQIuP4Om9zqEfZYiVyflROibSsONg== +connected-react-router@6.9.3: + version "6.9.3" + resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-6.9.3.tgz#72300aca9f9d6f38e1f4a2901572faa02adec972" + integrity sha512-4ThxysOiv/R2Dc4Cke1eJwjKwH1Y51VDwlOrOfs1LjpdYOVvCNjNkZDayo7+sx42EeGJPQUNchWkjAIJdXGIOQ== dependencies: + lodash.isequalwith "^4.4.0" prop-types "^15.7.2" + optionalDependencies: + immutable "^3.8.1 || ^4.0.0" + seamless-immutable "^7.1.3" console-browserify@^1.1.0: version "1.2.0" @@ -7938,6 +7970,30 @@ deep-equal@^1.0.1: object-keys "^1.1.1" regexp.prototype.flags "^1.2.0" +deep-equal@^2.0.5: + version "2.2.3" + resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.3.tgz#af89dafb23a396c7da3e862abc0be27cf51d56e1" + integrity sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA== + dependencies: + array-buffer-byte-length "^1.0.0" + call-bind "^1.0.5" + es-get-iterator "^1.1.3" + get-intrinsic "^1.2.2" + is-arguments "^1.1.1" + is-array-buffer "^3.0.2" + is-date-object "^1.0.5" + is-regex "^1.1.4" + is-shared-array-buffer "^1.0.2" + isarray "^2.0.5" + object-is "^1.1.5" + object-keys "^1.1.1" + object.assign "^4.1.4" + regexp.prototype.flags "^1.5.1" + side-channel "^1.0.4" + which-boxed-primitive "^1.0.2" + which-collection "^1.0.1" + which-typed-array "^1.1.13" + deep-extend@^0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac" @@ -8000,6 +8056,15 @@ defer-to-connect@^2.0.0: resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-2.0.1.tgz#8016bdb4143e4632b77a3449c6236277de520587" integrity sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg== +define-data-property@^1.0.1, define-data-property@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.1.tgz#c35f7cd0ab09883480d12ac5cb213715587800b3" + integrity sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ== + dependencies: + get-intrinsic "^1.2.1" + gopd "^1.0.1" + has-property-descriptors "^1.0.0" + define-lazy-prop@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f" @@ -8020,6 +8085,15 @@ define-properties@^1.1.4: has-property-descriptors "^1.0.0" object-keys "^1.1.1" +define-properties@^1.2.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c" + integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg== + dependencies: + define-data-property "^1.0.1" + has-property-descriptors "^1.0.0" + object-keys "^1.1.1" + define-property@^0.2.5: version "0.2.5" resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116" @@ -8380,6 +8454,11 @@ dom-accessibility-api@^0.5.6: resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.6.tgz#3f5d43b52c7a3bd68b5fb63fa47b4e4c1fdf65a9" integrity sha512-DplGLZd8L1lN64jlT27N9TVSESFR5STaEJvX+thCby7fuCHonfPpAlodYc3vuUYbDuDec5w8AMP7oCM5TWFsqw== +dom-accessibility-api@^0.5.9: + version "0.5.16" + resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453" + integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg== + dom-converter@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" @@ -9039,6 +9118,21 @@ es-get-iterator@^1.0.2: is-string "^1.0.5" isarray "^2.0.5" +es-get-iterator@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6" + integrity sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw== + dependencies: + call-bind "^1.0.2" + get-intrinsic "^1.1.3" + has-symbols "^1.0.3" + is-arguments "^1.1.1" + is-map "^2.0.2" + is-set "^2.0.2" + is-string "^1.0.7" + isarray "^2.0.5" + stop-iteration-iterator "^1.0.0" + es-module-lexer@^0.9.0: version "0.9.3" resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19" @@ -10012,11 +10106,6 @@ fill-range@^7.0.1: dependencies: to-regex-range "^5.0.1" -filter-console@^0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/filter-console/-/filter-console-0.1.1.tgz#6242be28982bba7415bcc6db74a79f4a294fa67c" - integrity sha512-zrXoV1Uaz52DqPs+qEwNJWJFAWZpYJ47UNmpN9q4j+/EYsz85uV0DC9k8tRND5kYmoVzL0W+Y75q4Rg8sRJCdg== - finalhandler@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.1.tgz#eebf4ed840079c83f4249038c9d703008301b105" @@ -10431,6 +10520,11 @@ function-bind@^1.1.1: resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== +function-bind@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c" + integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA== + function.prototype.name@^1.1.0, function.prototype.name@^1.1.2: version "1.1.4" resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.4.tgz#e4ea839b9d3672ae99d0efd9f38d9191c5eaac83" @@ -10461,6 +10555,11 @@ functions-have-names@^1.2.2: resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.2.tgz#98d93991c39da9361f8e50b337c4f6e41f120e21" integrity sha512-bLgc3asbWdwPbx2mNk2S49kmJCuQeu0nfmaOgbs8WIyzzkw3r4htszdIi9Q9EMezDPTYuJx2wvjZ/EwgAthpnA== +functions-have-names@^1.2.3: + version "1.2.3" + resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834" + integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ== + gauge@^3.0.0: version "3.0.2" resolved "https://registry.yarnpkg.com/gauge/-/gauge-3.0.2.tgz#03bf4441c044383908bcfa0656ad91803259b395" @@ -10531,6 +10630,16 @@ get-intrinsic@^1.1.3: has "^1.0.3" has-symbols "^1.0.3" +get-intrinsic@^1.2.0, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.2.tgz#281b7622971123e1ef4b3c90fd7539306da93f3b" + integrity sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA== + dependencies: + function-bind "^1.1.2" + has-proto "^1.0.1" + has-symbols "^1.0.3" + hasown "^2.0.0" + get-nonce@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3" @@ -10900,6 +11009,13 @@ gonzales-pe@^4.2.3, gonzales-pe@^4.3.0: dependencies: minimist "^1.2.5" +gopd@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c" + integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA== + dependencies: + get-intrinsic "^1.1.3" + got@^11.7.0: version "11.8.5" resolved "https://registry.yarnpkg.com/got/-/got-11.8.5.tgz#ce77d045136de56e8f024bebb82ea349bc730046" @@ -11093,6 +11209,11 @@ has-property-descriptors@^1.0.0: dependencies: get-intrinsic "^1.1.1" +has-proto@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0" + integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg== + has-symbol-support-x@^1.4.1: version "1.4.2" resolved "https://registry.yarnpkg.com/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz#1409f98bc00247da45da67cee0a36f282ff26455" @@ -11182,6 +11303,13 @@ hash.js@^1.0.0, hash.js@^1.0.3: inherits "^2.0.3" minimalistic-assert "^1.0.1" +hasown@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c" + integrity sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA== + dependencies: + function-bind "^1.1.2" + hast-to-hyperscript@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-4.0.0.tgz#3eb25483ec72a8e9a71e4b1ad7eb8f7c86f755db" @@ -11376,7 +11504,7 @@ hoist-non-react-statics@^2.3.1: resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== -hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -11827,6 +11955,11 @@ immer@9.0.6: resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.6.tgz#7a96bf2674d06c8143e327cbf73539388ddf1a73" integrity sha512-G95ivKpy+EvVAnAab4fVa4YGYn24J1SpEktnJX7JJ45Bd7xqME/SCplFzYFmTbrkwZbQ4xJK1xMTUYBkN6pWsQ== +"immutable@^3.8.1 || ^4.0.0": + version "4.3.4" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f" + integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA== + import-cwd@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9" @@ -11972,6 +12105,15 @@ internal-slot@^1.0.3: has "^1.0.3" side-channel "^1.0.4" +internal-slot@^1.0.4: + version "1.0.6" + resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.6.tgz#37e756098c4911c5e912b8edbf71ed3aa116f930" + integrity sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg== + dependencies: + get-intrinsic "^1.2.2" + hasown "^2.0.0" + side-channel "^1.0.4" + interpret@^1.0.0, interpret@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e" @@ -12076,6 +12218,23 @@ is-arguments@^1.0.4, is-arguments@^1.1.0: dependencies: call-bind "^1.0.0" +is-arguments@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b" + integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA== + dependencies: + call-bind "^1.0.2" + has-tostringtag "^1.0.0" + +is-array-buffer@^3.0.1, is-array-buffer@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz#f2653ced8412081638ecb0ebbd0c41c6e0aecbbe" + integrity sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w== + dependencies: + call-bind "^1.0.2" + get-intrinsic "^1.2.0" + is-typed-array "^1.1.10" + is-arrayish@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" @@ -12196,6 +12355,13 @@ is-date-object@^1.0.1: resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.4.tgz#550cfcc03afada05eea3dd30981c7b09551f73e5" integrity sha512-/b4ZVsG7Z5XVtIxs/h9W8nvfLgSAyKYdtGWQLbqy6jA1icmgjf8WCoTKgeS4wy5tYaPePouzFMANbnj94c2Z+A== +is-date-object@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f" + integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ== + dependencies: + has-tostringtag "^1.0.0" + is-decimal@^1.0.0, is-decimal@^1.0.2: version "1.0.4" resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5" @@ -12337,7 +12503,7 @@ is-lambda@^1.0.1: resolved "https://registry.yarnpkg.com/is-lambda/-/is-lambda-1.0.1.tgz#3d9877899e6a53efc0160504cde15f82e6f061d5" integrity sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ== -is-map@^2.0.2: +is-map@^2.0.1, is-map@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127" integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg== @@ -12513,7 +12679,7 @@ is-retry-allowed@^1.1.0: resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4" integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg== -is-set@^2.0.2: +is-set@^2.0.1, is-set@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec" integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g== @@ -12571,6 +12737,13 @@ is-text-path@^1.0.1: dependencies: text-extensions "^1.0.0" +is-typed-array@^1.1.10: + version "1.1.12" + resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.12.tgz#d0bab5686ef4a76f7a73097b95470ab199c57d4a" + integrity sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg== + dependencies: + which-typed-array "^1.1.11" + is-typed-array@^1.1.3, is-typed-array@^1.1.9: version "1.1.9" resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.9.tgz#246d77d2871e7d9f5aeb1d54b9f52c71329ece67" @@ -12602,6 +12775,11 @@ is-utf8@^0.2.0: resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72" integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI= +is-weakmap@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2" + integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA== + is-weakref@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.1.tgz#842dba4ec17fa9ac9850df2d6efbc1737274f2a2" @@ -12616,6 +12794,14 @@ is-weakref@^1.0.2: dependencies: call-bind "^1.0.2" +is-weakset@^2.0.1: + version "2.0.2" + resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.2.tgz#4569d67a747a1ce5a994dfd4ef6dcea76e7c0a1d" + integrity sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg== + dependencies: + call-bind "^1.0.2" + get-intrinsic "^1.1.1" + is-whitespace-character@^1.0.0: version "1.0.4" resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7" @@ -13768,6 +13954,11 @@ lodash.isequal@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA= +lodash.isequalwith@^4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz#266726ddd528f854f21f4ea98a065606e0fbc6b0" + integrity sha512-dcZON0IalGBpRmJBmMkaoV7d3I80R2O+FrzsZyHdNSFrANq/cgDqKQNmAHE8UEj4+QYWwwhkQOVdLHiAopzlsQ== + lodash.ismatch@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37" @@ -13946,10 +14137,10 @@ lru-cache@^7.7.1: resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.14.0.tgz#21be64954a4680e303a09e9468f880b98a0b3c7f" integrity sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ== -lz-string@^1.4.4: - version "1.4.4" - resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26" - integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY= +lz-string@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941" + integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ== lzma-native@^8.0.5: version "8.0.6" @@ -14463,14 +14654,6 @@ min-indent@^1.0.0: resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== -mini-create-react-context@^0.3.0: - version "0.3.3" - resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.3.tgz#b1b2bc6604d3a6c5d9752bad7692615410ebb38e" - integrity sha512-TtF6hZE59SGmS4U8529qB+jJFeW6asTLDIpPgvPLSCsooAwJS7QprHIFTqv9/Qh3NdLwQxFYgiHX5lqb6jqzPA== - dependencies: - "@babel/runtime" "^7.12.1" - tiny-warning "^1.0.3" - mini-css-extract-plugin@^0.9.0: version "0.9.0" resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz#47f2cf07aa165ab35733b1fc97d4c46c0564339e" @@ -15263,7 +15446,7 @@ object-inspect@^1.12.2: resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea" integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ== -object-is@^1.0.1, object-is@^1.0.2, object-is@^1.1.2: +object-is@^1.0.1, object-is@^1.0.2, object-is@^1.1.2, object-is@^1.1.5: version "1.1.5" resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac" integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw== @@ -16942,6 +17125,15 @@ pretty-format@^26.0.0, pretty-format@^26.6.2: ansi-styles "^4.0.0" react-is "^17.0.1" +pretty-format@^27.0.2: + version "27.5.1" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e" + integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ== + dependencies: + ansi-regex "^5.0.1" + ansi-styles "^5.0.0" + react-is "^17.0.1" + pretty-hrtime@^1.0.2, pretty-hrtime@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" @@ -17412,13 +17604,6 @@ react-element-to-jsx-string@^14.3.4: is-plain-object "5.0.0" react-is "17.0.2" -react-error-boundary@^3.1.0: - version "3.1.3" - resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.3.tgz#276bfa05de8ac17b863587c9e0647522c25e2a0b" - integrity sha512-A+F9HHy9fvt9t8SNDlonq01prnU8AmkjvGKV4kk8seB9kU3xMEO8J/PQlLVmoOIDODl5U2kufSBs4vrWIqhsAA== - dependencies: - "@babel/runtime" "^7.12.5" - react-error-boundary@^4.0.10: version "4.0.10" resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.10.tgz#975cc298e93ab7760d1460b7ea5a7855621e355a" @@ -17431,12 +17616,12 @@ react-fast-compare@^2.0.1: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== -react-i18next@^11.7.3: - version "11.11.0" - resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.11.0.tgz#2f7c6cb4f81f94d1728a02d60e4bb5216709f942" - integrity sha512-p1jHmoyJgDFQmyubUEjrx6kCsr1izW/C8i9pOiJy+9lJqLYwNA8sElVplm0VAnop3kH68edT0/g3wB3UvAcRCQ== +react-i18next@13.0.1: + version "13.0.1" + resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.0.1.tgz#4d047d2d63d9616f7f5fd4ca88b1cc449cc15290" + integrity sha512-gMO6N2GfSfuH7xlHSsZ/mZf+Py9bLm/+EDKIn5fNTuDTjcCcwmMU5UEuGCDk5mdfivbo7ySyYXBN7B9tbGUxiA== dependencies: - "@babel/runtime" "^7.14.5" + "@babel/runtime" "^7.22.5" html-parse-stringify "^3.0.1" react-inspector@^5.1.0: @@ -17458,12 +17643,12 @@ react-is@17.0.2, "react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1, react-is@^17. resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== -react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.9.0: +react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.2.0: +"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== @@ -17490,25 +17675,26 @@ react-property@1.0.1: resolved "https://registry.yarnpkg.com/react-property/-/react-property-1.0.1.tgz#4ae4211557d0a0ae050a71aa8ad288c074bea4e6" integrity sha512-1tKOwxFn3dXVomH6pM9IkLkq2Y8oh+fh/lYW3MJ/B03URswUTqttgckOlbxY2XHF3vPG6uanSc4dVsLW/wk3wQ== -react-query@^3.34.8: - version "3.34.8" - resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.34.8.tgz#a3be8523fd95f766b04c32847a1b58d8231db03c" - integrity sha512-pl9e2VmVbgKf29Qn/WpmFVtB2g17JPqLLyOQg3GfSs/S2WABvip5xlT464vfXtilLPcJVg9bEHHlqmC38/nvDw== +react-query@3.35.0: + version "3.35.0" + resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.35.0.tgz#f807ba8497f8d6218a73e81a977e44ea786a7267" + integrity sha512-mRBJdpELLV+snzyXDsXM5ZEXM+HYt05L7st6ihSXr3nHX+4ULFr30mDjsziZvx0oF5dhlSDB8aMdvG6Ah4Bukg== dependencies: "@babel/runtime" "^7.5.5" broadcast-channel "^3.4.1" match-sorter "^6.0.2" -react-redux@7.2.1: - version "7.2.1" - resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.1.tgz#8dedf784901014db2feca1ab633864dee68ad985" - integrity sha512-T+VfD/bvgGTUA74iW9d2i5THrDQWbweXP0AVNI8tNd1Rk5ch1rnMiJkDD67ejw7YBKM4+REvcvqRuWJb7BLuEg== +react-redux@8.1.2: + version "8.1.2" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.2.tgz#9076bbc6b60f746659ad6d51cb05de9c5e1e9188" + integrity sha512-xJKYI189VwfsFc4CJvHqHlDrzyFTY/3vZACbE+rr/zQ34Xx1wQfB4OTOSeOSNrF6BDVe8OOdxIrAnMGXA3ggfw== dependencies: - "@babel/runtime" "^7.5.5" - hoist-non-react-statics "^3.3.0" - loose-envify "^1.4.0" - prop-types "^15.7.2" - react-is "^16.9.0" + "@babel/runtime" "^7.12.1" + "@types/hoist-non-react-statics" "^3.3.1" + "@types/use-sync-external-store" "^0.0.3" + hoist-non-react-statics "^3.3.2" + react-is "^18.0.0" + use-sync-external-store "^1.0.0" react-refresh@^0.11.0: version "0.11.0" @@ -17534,29 +17720,28 @@ react-remove-scroll@2.4.3: use-callback-ref "^1.2.3" use-sidecar "^1.0.1" -react-router-dom@5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.1.tgz#53caa089c291f64c1d597a52827b978b54d7c25d" - integrity sha512-r8R8H0Vt2ISqpk02rR6VZBLk+JZdR6pZV+h9K1y0ISh3/G4GGByNevYBS69x6czcOcWVRcZmXjwY8l9UBCKV+w== +react-router-dom@5.3.4: + version "5.3.4" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.4.tgz#2ed62ffd88cae6db134445f4a0c0ae8b91d2e5e6" + integrity sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ== dependencies: - "@babel/runtime" "^7.1.2" + "@babel/runtime" "^7.12.13" history "^4.9.0" loose-envify "^1.3.1" prop-types "^15.6.2" - react-router "5.1.1" + react-router "5.3.4" tiny-invariant "^1.0.2" tiny-warning "^1.0.0" -react-router@5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.1.tgz#9d65f54795f938c0c5b69eaeef58728134ce7c7c" - integrity sha512-ozTXqxKZsn4GfZqpG5rVFHSSxlNuDoMNxgyjM+mFJVhqlnPwwkRsAPkDm1PcNjBdYxMzqAhtz48HkQB6fSYaAQ== +react-router@5.3.4: + version "5.3.4" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.3.4.tgz#8ca252d70fcc37841e31473c7a151cf777887bb5" + integrity sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA== dependencies: - "@babel/runtime" "^7.1.2" + "@babel/runtime" "^7.12.13" history "^4.9.0" hoist-non-react-statics "^3.1.0" loose-envify "^1.3.1" - mini-create-react-context "^0.3.0" path-to-regexp "^1.7.0" prop-types "^15.6.2" react-is "^16.6.0" @@ -17916,6 +18101,11 @@ regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55" integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew== +regenerator-runtime@^0.14.0: + version "0.14.0" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45" + integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA== + regenerator-transform@^0.14.2: version "0.14.5" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4" @@ -17948,6 +18138,15 @@ regexp.prototype.flags@^1.4.3: define-properties "^1.1.3" functions-have-names "^1.2.2" +regexp.prototype.flags@^1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz#90ce989138db209f81492edd734183ce99f9677e" + integrity sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg== + dependencies: + call-bind "^1.0.2" + define-properties "^1.2.0" + set-function-name "^2.0.0" + regexpp@^3.0.0, regexpp@^3.1.0: version "3.2.0" resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2" @@ -18743,6 +18942,11 @@ script-ext-html-webpack-plugin@^2.1.4: dependencies: debug "^4.2.0" +seamless-immutable@^7.1.3: + version "7.1.4" + resolved "https://registry.yarnpkg.com/seamless-immutable/-/seamless-immutable-7.1.4.tgz#6e9536def083ddc4dea0207d722e0e80d0f372f8" + integrity sha512-XiUO1QP4ki4E2PHegiGAlu6r82o5A+6tRh7IkGGTVg/h+UoeX4nFBeCGPOhb4CYjvkqsfm/TUtvOMYC1xmV30A== + seek-bzip@^1.0.5: version "1.0.6" resolved "https://registry.yarnpkg.com/seek-bzip/-/seek-bzip-1.0.6.tgz#35c4171f55a680916b52a07859ecf3b5857f21c4" @@ -18936,6 +19140,25 @@ set-blocking@^2.0.0: resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc= +set-function-length@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.1.1.tgz#4bc39fafb0307224a33e106a7d35ca1218d659ed" + integrity sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ== + dependencies: + define-data-property "^1.1.1" + get-intrinsic "^1.2.1" + gopd "^1.0.1" + has-property-descriptors "^1.0.0" + +set-function-name@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.1.tgz#12ce38b7954310b9f61faa12701620a0c882793a" + integrity sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA== + dependencies: + define-data-property "^1.0.1" + functions-have-names "^1.2.3" + has-property-descriptors "^1.0.0" + set-immediate-shim@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61" @@ -19517,6 +19740,13 @@ stealthy-require@^1.1.1: resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b" integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks= +stop-iteration-iterator@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4" + integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ== + dependencies: + internal-slot "^1.0.4" + store2@^2.12.0: version "2.12.0" resolved "https://registry.yarnpkg.com/store2/-/store2-2.12.0.tgz#e1f1b7e1a59b6083b2596a8d067f6ee88fd4d3cf" @@ -20439,7 +20669,7 @@ tiny-invariant@^1.0.2: resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875" integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw== -tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3: +tiny-warning@^1.0.0, tiny-warning@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== @@ -21287,6 +21517,11 @@ use-sidecar@^1.0.1: detect-node-es "^1.1.0" tslib "^1.9.3" +use-sync-external-store@^1.0.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" + integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== + use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" @@ -21922,11 +22157,32 @@ which-boxed-primitive@^1.0.2: is-string "^1.0.5" is-symbol "^1.0.3" +which-collection@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906" + integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A== + dependencies: + is-map "^2.0.1" + is-set "^2.0.1" + is-weakmap "^2.0.1" + is-weakset "^2.0.1" + which-module@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a" integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho= +which-typed-array@^1.1.11, which-typed-array@^1.1.13: + version "1.1.13" + resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.13.tgz#870cd5be06ddb616f504e7b039c4c24898184d36" + integrity sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow== + dependencies: + available-typed-arrays "^1.0.5" + call-bind "^1.0.4" + for-each "^0.3.3" + gopd "^1.0.1" + has-tostringtag "^1.0.0" + which-typed-array@^1.1.2: version "1.1.8" resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.8.tgz#0cfd53401a6f334d90ed1125754a42ed663eb01f" From ca1835004bea7a4d05ca77554c518523b3d20e2e Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Thu, 7 Dec 2023 13:55:14 -0500 Subject: [PATCH 04/31] migrate hook waitFor to rtl waitFor --- .../__tests__/U2EDriverOutdatedAlert.test.tsx | 99 +---------------- .../__tests__/useHistoricRunDetails.test.tsx | 28 ++--- .../useOffsetCandidatesForAnalysis.test.tsx | 55 +++++----- .../__tests__/ReturnTip.test.tsx | 103 +----------------- ...eCreateMaintenanceCommandMutation.test.tsx | 12 +- .../useCreateMaintenanceRunMutation.test.tsx | 14 +-- .../useDeleteMaintenanceRunMutation.test.tsx | 20 ++-- .../__tests__/useMaintenanceRunQuery.test.tsx | 14 +-- .../usePlayMaintenanceRunMutation.test.tsx | 19 ++-- .../__tests__/useModulesQuery.test.tsx | 25 +++-- .../__tests__/usePipettesQuery.test.tsx | 10 +- .../usePipettesSettingsQuery.test.tsx | 10 +- .../__tests__/useAllProtocolsQuery.test.tsx | 10 +- .../useCreateProtocolMutation.test.tsx | 27 +++-- .../__tests__/useDeleteProtocol.test.tsx | 20 ++-- .../__tests__/useProtocolQuery.test.tsx | 14 +-- ...AcknowledgeEstopDisengageMutation.test.tsx | 18 +-- .../src/robot/__tests__/useDoorQuery.test.tsx | 14 +-- .../robot/__tests__/useEstopQuery.test.tsx | 14 +-- .../robot/__tests__/useLightsQuery.test.tsx | 14 +-- .../__tests__/useAllCommandsQuery.test.tsx | 14 +-- .../runs/__tests__/useAllRunsQuery.test.tsx | 22 ++-- .../runs/__tests__/useCommandQuery.test.tsx | 14 +-- .../useCreateCommandMutation.test.tsx | 12 +- ...seCreateLabwareDefinitionMutation.test.tsx | 7 +- .../useCreateLabwareOffsetsMutation.test.tsx | 7 +- .../useCreateLiveCommandMutation.test.tsx | 12 +- .../__tests__/useCreateRunMutation.test.tsx | 27 +++-- .../useDismissCurrentRunMutation.test.tsx | 7 +- .../__tests__/usePauseRunMutation.test.tsx | 15 ++- .../__tests__/usePlayRunMutation.test.tsx | 19 ++-- .../src/runs/__tests__/useRunQuery.test.tsx | 10 +- .../__tests__/useStopRunMutation.test.tsx | 19 ++-- .../useUpdateRobotNameMutation.test.tsx | 17 +-- .../__tests__/useAllSessionsQuery.test.tsx | 13 ++- .../useCreateSessionMutation.test.tsx | 20 ++-- .../__tests__/useSessionQuery.test.tsx | 14 +-- .../__tests__/useSessionsByTypeQuery.test.tsx | 14 +-- ...useAllCurrentSubsystemUpdateQuery.test.tsx | 14 +-- .../useCurrentSubsystemUpdateQuery.test.tsx | 14 +-- .../useSubsystemUpdateQuery.test.tsx | 14 +-- .../useUpdateSubsystemMutation.test.tsx | 14 +-- 42 files changed, 324 insertions(+), 535 deletions(-) diff --git a/app/src/organisms/Alerts/__tests__/U2EDriverOutdatedAlert.test.tsx b/app/src/organisms/Alerts/__tests__/U2EDriverOutdatedAlert.test.tsx index 2691a21df63..5737f3336fe 100644 --- a/app/src/organisms/Alerts/__tests__/U2EDriverOutdatedAlert.test.tsx +++ b/app/src/organisms/Alerts/__tests__/U2EDriverOutdatedAlert.test.tsx @@ -1,100 +1,3 @@ -import * as React from 'react' -import { act } from 'react-dom/test-utils' -import { mount } from 'enzyme' - -import { AlertModal } from '@opentrons/components' -import * as Analytics from '../../../redux/analytics' -import { U2EDriverOutdatedAlert } from '../U2EDriverOutdatedAlert' - -jest.mock('../../../redux/analytics') - -jest.mock('react-router-dom', () => ({ - // TODO(mc, 2020-05-07): create a tested Link wrapper that's safe to mock - Link: () => <>, -})) - -// TODO(mc, 2020-05-07): remove this feature flag -jest.mock('../../../redux/config/hooks', () => ({ - useFeatureFlag: (flag: string) => flag === 'systemInfoEnabled', -})) - -const EXPECTED_DOWNLOAD_URL = - 'https://www.realtek.com/en/component/zoo/category/network-interface-controllers-10-100-1000m-gigabit-ethernet-usb-3-0-software' - -const useTrackEvent = Analytics.useTrackEvent as jest.MockedFunction< - typeof Analytics.useTrackEvent -> - describe('U2EDriverOutdatedAlert', () => { - const dismissAlert = jest.fn() - const trackEvent: ReturnType< - typeof Analytics.useTrackEvent - > = jest.fn() as any - const render = (): ReturnType => { - return mount() - } - - beforeEach(() => { - useTrackEvent.mockReturnValue(trackEvent) - }) - - afterEach(() => { - jest.resetAllMocks() - }) - - it('should render an AlertModal', () => { - const wrapper = render() - const alertModal = wrapper.find(AlertModal) - - expect(alertModal.prop('heading')).toBe( - 'Realtek USB-to-Ethernet Driver Update Available' - ) - }) - - it('should have a link to /network-and-system that dismisses the alert', () => { - const wrapper = render() - const link = wrapper.find('Link[to="/more/network-and-system"]') - - link.invoke('onClick')?.({} as React.MouseEvent) - - expect(link.prop('children')).toContain('view adapter info') - expect(dismissAlert).toHaveBeenCalledWith(false) - expect(trackEvent).toHaveBeenCalledWith({ - name: Analytics.ANALYTICS_U2E_DRIVE_ALERT_DISMISSED, - properties: { rememberDismiss: false }, - }) - }) - - it('should have a link to the Realtek website', () => { - const wrapper = render() - const link = wrapper.find(`a[href="${EXPECTED_DOWNLOAD_URL}"]`) - - link.invoke('onClick')?.({} as React.MouseEvent) - - expect(link.prop('children')).toContain('get update') - expect(dismissAlert).toHaveBeenCalledWith(false) - expect(trackEvent).toHaveBeenCalledWith({ - name: Analytics.ANALYTICS_U2E_DRIVE_LINK_CLICKED, - properties: { source: 'modal' }, - }) - }) - - it('should be able to perma-ignore the alert', () => { - const wrapper = render() - const checkbox = wrapper.find(`input[type="checkbox"]`) - - act(() => { - checkbox.simulate('change') - }) - wrapper.update() - wrapper.find('Link[to="/more/network-and-system"]').invoke('onClick')?.( - {} as React.MouseEvent - ) - - expect(dismissAlert).toHaveBeenCalledWith(true) - expect(trackEvent).toHaveBeenCalledWith({ - name: Analytics.ANALYTICS_U2E_DRIVE_ALERT_DISMISSED, - properties: { rememberDismiss: true }, - }) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx b/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx index cea3cf9cd4a..5b2325886bf 100644 --- a/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx +++ b/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { when } from 'jest-when' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { useAllRunsQuery } from '@opentrons/react-api-client' import { useHistoricRunDetails } from '../useHistoricRunDetails' import { mockRunningRun } from '../../../RunTimeControl/__fixtures__' @@ -42,12 +42,13 @@ describe('useHistoricRunDetails', () => { ) it('returns historical run details with newest first', async () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => (
{children}
) - const { result, waitFor } = renderHook(useHistoricRunDetails, { wrapper }) - await waitFor(() => result.current != null) - expect(result.current).toEqual([MOCK_RUN_LATER, MOCK_RUN_EARLIER]) + const { result } = renderHook(useHistoricRunDetails, { wrapper }) + await waitFor(() => { + expect(result.current).toEqual([MOCK_RUN_LATER, MOCK_RUN_EARLIER]) + }) }) it('returns historical run details with newest first to specific host', async () => { when(mockUseAllRunsQuery) @@ -58,18 +59,19 @@ describe('useHistoricRunDetails', () => { links: {}, }) ) - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => (
{children}
) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useHistoricRunDetails({ hostname: 'fakeIp' }), { wrapper } ) - await waitFor(() => result.current != null) - expect(result.current).toEqual([ - MOCK_RUN_LATER, - MOCK_RUN_EARLIER, - MOCK_RUN_EARLIER, - ]) + await waitFor(() => { + expect(result.current).toEqual([ + MOCK_RUN_LATER, + MOCK_RUN_EARLIER, + MOCK_RUN_EARLIER, + ]) + }) }) }) diff --git a/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx b/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx index d7aa7513ff8..5c7c2d81b0f 100644 --- a/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx +++ b/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { resetAllWhenMocks, when } from 'jest-when' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import fixture_tiprack_300_ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_300_ul.json' import { getLabwareDisplayName, @@ -111,22 +111,23 @@ describe('useOffsetCandidatesForAnalysis', () => { }) it('returns an empty array if robot ip but no analysis output', async () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => (
{children}
) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useOffsetCandidatesForAnalysis(null, mockRobotIp), { wrapper } ) - await waitFor(() => result.current != null) - expect(result.current).toEqual([]) + await waitFor(() => { + expect(result.current).toEqual([]) + }) }) it('returns an empty array if no robot ip', async () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => (
{children}
) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useOffsetCandidatesForAnalysis( storedProtocolDataFixture.mostRecentAnalysis, @@ -134,14 +135,15 @@ describe('useOffsetCandidatesForAnalysis', () => { ), { wrapper } ) - await waitFor(() => result.current != null) - expect(result.current).toEqual([]) + await waitFor(() => { + expect(result.current).toEqual([]) + }) }) it('returns candidates for each first match with newest first', async () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => (
{children}
) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useOffsetCandidatesForAnalysis( storedProtocolDataFixture.mostRecentAnalysis, @@ -149,20 +151,21 @@ describe('useOffsetCandidatesForAnalysis', () => { ), { wrapper } ) - await waitFor(() => result.current != null) - expect(result.current).toEqual([ - { - ...mockFirstDupCandidate, - labwareDisplayName: getLabwareDisplayName(mockLabwareDef), - }, - { - ...mockSecondCandidate, - labwareDisplayName: getLabwareDisplayName(mockLabwareDef), - }, - { - ...mockThirdCandidate, - labwareDisplayName: getLabwareDisplayName(mockLabwareDef), - }, - ]) + await waitFor(() => { + expect(result.current).toEqual([ + { + ...mockFirstDupCandidate, + labwareDisplayName: getLabwareDisplayName(mockLabwareDef), + }, + { + ...mockSecondCandidate, + labwareDisplayName: getLabwareDisplayName(mockLabwareDef), + }, + { + ...mockThirdCandidate, + labwareDisplayName: getLabwareDisplayName(mockLabwareDef), + }, + ]) + }) }) }) diff --git a/app/src/organisms/CheckCalibration/__tests__/ReturnTip.test.tsx b/app/src/organisms/CheckCalibration/__tests__/ReturnTip.test.tsx index 15ccb375f46..a16ef3ebd23 100644 --- a/app/src/organisms/CheckCalibration/__tests__/ReturnTip.test.tsx +++ b/app/src/organisms/CheckCalibration/__tests__/ReturnTip.test.tsx @@ -1,104 +1,3 @@ -import * as React from 'react' -import { mount } from 'enzyme' -import * as Fixtures from '../../../redux/sessions/__fixtures__' -import * as Sessions from '../../../redux/sessions' -import { ReturnTip } from '../ReturnTip' - -import type { ReactWrapper } from 'enzyme' -import type { Mount } from '@opentrons/components' - -const mockSessionDetails = Fixtures.mockRobotCalibrationCheckSessionDetails - describe('ReturnTip', () => { - let render: ( - props?: Partial< - React.ComponentProps & { pipMount: Mount } - > - ) => ReactWrapper> - let mockSendCommands: jest.MockedFunction - - const getContinueButton = ( - wrapper: ReactWrapper> - ) => wrapper.find('button[aria-label="return tip"]') - - beforeEach(() => { - mockSendCommands = jest.fn() - - render = (props = {}) => { - const { - pipMount = 'left', - isMulti = false, - tipRack = Fixtures.mockDeckCalTipRack, - calBlock = null, - sendCommands = mockSendCommands, - cleanUpAndExit = jest.fn(), - currentStep = Sessions.CHECK_STEP_RESULTS_SUMMARY, - sessionType = Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK, - comparisonsByPipette = mockSessionDetails.comparisonsByPipette, - instruments = mockSessionDetails.instruments, - activePipette = mockSessionDetails.activePipette, - } = props - return mount( - - ) - } - }) - - afterEach(() => { - jest.resetAllMocks() - }) - - it('on continue, if final pipette, return tip and transition', () => { - const wrapper = render({ - activePipette: { - ...mockSessionDetails.activePipette, - rank: Sessions.CHECK_PIPETTE_RANK_SECOND, - }, - }) - getContinueButton(wrapper).invoke('onClick')?.({} as React.MouseEvent) - - expect(mockSendCommands).toHaveBeenCalledWith( - { command: Sessions.checkCommands.RETURN_TIP }, - { command: Sessions.checkCommands.TRANSITION } - ) - }) - - it('on continue, if first pipette with diff tip racks, return tip and switch', () => { - const wrapper = render() - getContinueButton(wrapper).invoke('onClick')?.({} as React.MouseEvent) - - expect(mockSendCommands).toHaveBeenCalledWith( - { command: Sessions.checkCommands.RETURN_TIP }, - { command: Sessions.checkCommands.CHECK_SWITCH_PIPETTE } - ) - }) - - it('on continue, if first pipette with same tip racks, return tip and switch, then move to ref point', () => { - const wrapper = render({ - instruments: mockSessionDetails.instruments.map(i => ({ - ...i, - tipRackLoadName: 'same-tip-rack-name', - })), - }) - getContinueButton(wrapper).invoke('onClick')?.({} as React.MouseEvent) - - expect(mockSendCommands).toHaveBeenCalledWith( - { command: Sessions.checkCommands.RETURN_TIP }, - { command: Sessions.checkCommands.CHECK_SWITCH_PIPETTE }, - { command: Sessions.checkCommands.MOVE_TO_REFERENCE_POINT } - ) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceCommandMutation.test.tsx b/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceCommandMutation.test.tsx index 8975b27d7c0..3f9c7024a3f 100644 --- a/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceCommandMutation.test.tsx +++ b/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceCommandMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { createMaintenanceCommand } from '@opentrons/api-client' import { useHost } from '../../api' import { useCreateMaintenanceCommandMutation } from '..' @@ -40,7 +40,7 @@ describe('useCreateMaintenanceCommandMutation hook', () => { .calledWith(HOST_CONFIG, MAINTENANCE_RUN_ID, mockAnonLoadCommand, {}) .mockResolvedValue({ data: 'something' } as any) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useCreateMaintenanceCommandMutation(), { wrapper, @@ -55,9 +55,8 @@ describe('useCreateMaintenanceCommandMutation hook', () => { }) }) await waitFor(() => { - return result.current.data != null + expect(result.current.data).toBe('something') }) - expect(result.current.data).toBe('something') }) it('should pass waitUntilComplete and timeout through if given command', async () => { const waitUntilComplete = true @@ -70,7 +69,7 @@ describe('useCreateMaintenanceCommandMutation hook', () => { }) .mockResolvedValue({ data: 'something' } as any) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useCreateMaintenanceCommandMutation(), { wrapper, @@ -87,8 +86,7 @@ describe('useCreateMaintenanceCommandMutation hook', () => { }) }) await waitFor(() => { - return result.current.data != null + expect(result.current.data).toBe('something') }) - expect(result.current.data).toBe('something') }) }) diff --git a/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceRunMutation.test.tsx b/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceRunMutation.test.tsx index a5765280398..4d89625f9ea 100644 --- a/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceRunMutation.test.tsx +++ b/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceRunMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { createMaintenanceRun } from '@opentrons/api-client' import { useHost } from '../../api' import { mockMaintenanceRunResponse } from '../__fixtures__' @@ -24,11 +24,11 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useCreateMaintenanceRunMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) @@ -69,7 +69,7 @@ describe('useCreateMaintenanceRunMutation hook', () => { data: mockMaintenanceRunResponse, } as Response) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useCreateMaintenanceRunMutation(), { wrapper, @@ -79,8 +79,8 @@ describe('useCreateMaintenanceRunMutation hook', () => { result.current.createMaintenanceRun({ labwareOffsets: [mockOffset] }) }) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(mockMaintenanceRunResponse) + await waitFor(() => { + expect(result.current.data).toEqual(mockMaintenanceRunResponse) + }) }) }) diff --git a/react-api-client/src/maintenance_runs/__tests__/useDeleteMaintenanceRunMutation.test.tsx b/react-api-client/src/maintenance_runs/__tests__/useDeleteMaintenanceRunMutation.test.tsx index 48040e6c61b..b8968a1e8ef 100644 --- a/react-api-client/src/maintenance_runs/__tests__/useDeleteMaintenanceRunMutation.test.tsx +++ b/react-api-client/src/maintenance_runs/__tests__/useDeleteMaintenanceRunMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { deleteMaintenanceRun } from '@opentrons/api-client' import { useHost } from '../../api' import { MAINTENANCE_RUN_ID } from '../__fixtures__' @@ -20,11 +20,11 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useDeleteMaintenanceRunMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) @@ -40,7 +40,7 @@ describe('useDeleteMaintenanceRunMutation hook', () => { .calledWith(HOST_CONFIG, MAINTENANCE_RUN_ID) .mockRejectedValue('oh no') - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useDeleteMaintenanceRunMutation(), { wrapper, @@ -50,10 +50,8 @@ describe('useDeleteMaintenanceRunMutation hook', () => { expect(result.current.data).toBeUndefined() result.current.deleteMaintenanceRun(MAINTENANCE_RUN_ID) await waitFor(() => { - console.log(result.current.status) - return result.current.status !== 'loading' + expect(result.current.data).toBeUndefined() }) - expect(result.current.data).toBeUndefined() }) it('should delete a maintenance run when calling the deleteMaintenanceRun callback with basic run args', async () => { @@ -62,7 +60,7 @@ describe('useDeleteMaintenanceRunMutation hook', () => { .calledWith(HOST_CONFIG, MAINTENANCE_RUN_ID) .mockResolvedValue({ data: { data: null } } as Response) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useDeleteMaintenanceRunMutation(), { wrapper, @@ -70,8 +68,8 @@ describe('useDeleteMaintenanceRunMutation hook', () => { ) act(() => result.current.deleteMaintenanceRun(MAINTENANCE_RUN_ID)) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual({ data: null }) + await waitFor(() => { + expect(result.current.data).toEqual({ data: null }) + }) }) }) diff --git a/react-api-client/src/maintenance_runs/__tests__/useMaintenanceRunQuery.test.tsx b/react-api-client/src/maintenance_runs/__tests__/useMaintenanceRunQuery.test.tsx index 1ff16d93cbc..6ba8e3221bb 100644 --- a/react-api-client/src/maintenance_runs/__tests__/useMaintenanceRunQuery.test.tsx +++ b/react-api-client/src/maintenance_runs/__tests__/useMaintenanceRunQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getMaintenanceRun } from '@opentrons/api-client' import { useHost } from '../../api' import { useMaintenanceRunQuery } from '..' @@ -27,11 +27,11 @@ const MAINTENANCE_RUN_RESPONSE = { } as MaintenanceRun describe('useMaintenanceRunQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) @@ -77,15 +77,15 @@ describe('useMaintenanceRunQuery hook', () => { data: MAINTENANCE_RUN_RESPONSE, } as Response) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useMaintenanceRunQuery(MAINTENANCE_RUN_ID), { wrapper, } ) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(MAINTENANCE_RUN_RESPONSE) + await waitFor(() => { + expect(result.current.data).toEqual(MAINTENANCE_RUN_RESPONSE) + }) }) }) diff --git a/react-api-client/src/maintenance_runs/__tests__/usePlayMaintenanceRunMutation.test.tsx b/react-api-client/src/maintenance_runs/__tests__/usePlayMaintenanceRunMutation.test.tsx index 106a6955fa4..73f73ee4357 100644 --- a/react-api-client/src/maintenance_runs/__tests__/usePlayMaintenanceRunMutation.test.tsx +++ b/react-api-client/src/maintenance_runs/__tests__/usePlayMaintenanceRunMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { createRunAction, RUN_ACTION_TYPE_PLAY } from '@opentrons/api-client' import { useHost } from '../../api' import { usePlayMaintenanceRunMutation } from '..' @@ -25,12 +25,12 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('usePlayMaintenanceRunMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode} & UsePlayMaintenanceRunMutationOptions> + let wrapper: React.FunctionComponent<{ children: React.ReactNode } & UsePlayMaintenanceRunMutationOptions> const createPlayRunActionData = { actionType: RUN_ACTION_TYPE_PLAY } beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UsePlayMaintenanceRunMutationOptions> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode } & UsePlayMaintenanceRunMutationOptions> = ({ children }) => ( {children} ) wrapper = clientProvider @@ -45,16 +45,15 @@ describe('usePlayMaintenanceRunMutation hook', () => { .calledWith(HOST_CONFIG, MAINTENANCE_RUN_ID, createPlayRunActionData) .mockRejectedValue('oh no') - const { result, waitFor } = renderHook(usePlayMaintenanceRunMutation, { + const { result } = renderHook(usePlayMaintenanceRunMutation, { wrapper, }) expect(result.current.data).toBeUndefined() act(() => result.current.playMaintenanceRun(MAINTENANCE_RUN_ID)) await waitFor(() => { - return result.current.status !== 'loading' + expect(result.current.data).toBeUndefined() }) - expect(result.current.data).toBeUndefined() }) it('should create a play run action when calling the playRun callback', async () => { @@ -65,13 +64,13 @@ describe('usePlayMaintenanceRunMutation hook', () => { data: mockPlayMaintenanceRunAction, } as Response) - const { result, waitFor } = renderHook(usePlayMaintenanceRunMutation, { + const { result } = renderHook(usePlayMaintenanceRunMutation, { wrapper, }) act(() => result.current.playMaintenanceRun(MAINTENANCE_RUN_ID)) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(mockPlayMaintenanceRunAction) + await waitFor(() => { + expect(result.current.data).toEqual(mockPlayMaintenanceRunAction) + }) }) }) diff --git a/react-api-client/src/modules/__tests__/useModulesQuery.test.tsx b/react-api-client/src/modules/__tests__/useModulesQuery.test.tsx index d4c226a5d83..3c086c733da 100644 --- a/react-api-client/src/modules/__tests__/useModulesQuery.test.tsx +++ b/react-api-client/src/modules/__tests__/useModulesQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getModules, mockModulesResponse, @@ -27,11 +27,11 @@ const MODULES_RESPONSE = { const V2_MODULES_RESPONSE = { data: v2MockModulesResponse } describe('useModulesQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode} & UseModulesQueryOptions> + let wrapper: React.FunctionComponent<{ children: React.ReactNode } & UseModulesQueryOptions> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UseModulesQueryOptions> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode } & UseModulesQueryOptions> = ({ children }) => ( {children} ) @@ -65,11 +65,11 @@ describe('useModulesQuery hook', () => { data: MODULES_RESPONSE, } as Response) - const { result, waitFor } = renderHook(useModulesQuery, { wrapper }) - - await waitFor(() => result.current.data != null) + const { result } = renderHook(useModulesQuery, { wrapper }) - expect(result.current.data).toEqual(MODULES_RESPONSE) + await waitFor(() => { + expect(result.current.data).toEqual(MODULES_RESPONSE) + }) }) it('should return an empty array if an old version of modules returns', async () => { when(mockUseHost).calledWith().mockReturnValue(HOST_CONFIG) @@ -79,12 +79,13 @@ describe('useModulesQuery hook', () => { data: V2_MODULES_RESPONSE, } as Response) - const { result, waitFor } = renderHook(useModulesQuery, { wrapper }) + const { result } = renderHook(useModulesQuery, { wrapper }) - await waitFor(() => result.current.data != null) - expect(result.current.data).toEqual({ - data: [], - meta: { totalLength: 0, cursor: 0 }, + await waitFor(() => { + expect(result.current.data).toEqual({ + data: [], + meta: { totalLength: 0, cursor: 0 }, + }) }) }) }) diff --git a/react-api-client/src/pipettes/__tests__/usePipettesQuery.test.tsx b/react-api-client/src/pipettes/__tests__/usePipettesQuery.test.tsx index 57eeeb1f564..882ea4ba6e1 100644 --- a/react-api-client/src/pipettes/__tests__/usePipettesQuery.test.tsx +++ b/react-api-client/src/pipettes/__tests__/usePipettesQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getPipettes } from '@opentrons/api-client' import { useHost } from '../../api' import { usePipettesQuery } from '..' @@ -73,12 +73,12 @@ describe('usePipettesQuery hook', () => { .calledWith(HOST_CONFIG, { refresh: false }) .mockResolvedValue({ data: PIPETTES_RESPONSE } as Response) - const { result, waitFor } = renderHook(usePipettesQuery, { + const { result } = renderHook(usePipettesQuery, { wrapper, }) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(PIPETTES_RESPONSE) + await waitFor(() => { + expect(result.current.data).toEqual(PIPETTES_RESPONSE) + }) }) }) diff --git a/react-api-client/src/pipettes/__tests__/usePipettesSettingsQuery.test.tsx b/react-api-client/src/pipettes/__tests__/usePipettesSettingsQuery.test.tsx index b74f46b87fc..ba9a8698499 100644 --- a/react-api-client/src/pipettes/__tests__/usePipettesSettingsQuery.test.tsx +++ b/react-api-client/src/pipettes/__tests__/usePipettesSettingsQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getPipetteSettings, pipetteSettingsResponseFixture, @@ -67,12 +67,12 @@ describe('usePipetteSettingsQuery hook', () => { data: pipetteSettingsResponseFixture as any, } as Response) - const { result, waitFor } = renderHook(usePipetteSettingsQuery, { + const { result } = renderHook(usePipetteSettingsQuery, { wrapper, }) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(pipetteSettingsResponseFixture) + await waitFor(() => { + expect(result.current.data).toEqual(pipetteSettingsResponseFixture) + }) }) }) diff --git a/react-api-client/src/protocols/__tests__/useAllProtocolsQuery.test.tsx b/react-api-client/src/protocols/__tests__/useAllProtocolsQuery.test.tsx index f9bd1a3ea5f..684b778a04c 100644 --- a/react-api-client/src/protocols/__tests__/useAllProtocolsQuery.test.tsx +++ b/react-api-client/src/protocols/__tests__/useAllProtocolsQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getProtocols } from '@opentrons/api-client' import { useHost } from '../../api' import { useAllProtocolsQuery } from '..' @@ -73,10 +73,10 @@ describe('useAllProtocolsQuery hook', () => { .calledWith(HOST_CONFIG) .mockResolvedValue({ data: PROTOCOLS_RESPONSE } as Response) - const { result, waitFor } = renderHook(useAllProtocolsQuery, { wrapper }) - - await waitFor(() => result.current.data != null) + const { result } = renderHook(useAllProtocolsQuery, { wrapper }) - expect(result.current.data).toEqual(PROTOCOLS_RESPONSE) + await waitFor(() => { + expect(result.current.data).toEqual(PROTOCOLS_RESPONSE) + }) }) }) diff --git a/react-api-client/src/protocols/__tests__/useCreateProtocolMutation.test.tsx b/react-api-client/src/protocols/__tests__/useCreateProtocolMutation.test.tsx index f8fc3ae92b7..5785879125d 100644 --- a/react-api-client/src/protocols/__tests__/useCreateProtocolMutation.test.tsx +++ b/react-api-client/src/protocols/__tests__/useCreateProtocolMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { createProtocol } from '@opentrons/api-client' import { useHost } from '../../api' import { useCreateProtocolMutation } from '..' @@ -43,12 +43,12 @@ const PROTOCOL_RESPONSE = { } as Protocol describe('useCreateProtocolMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> const createProtocolData = [jsonFile] beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) wrapper = clientProvider @@ -63,16 +63,15 @@ describe('useCreateProtocolMutation hook', () => { .calledWith(HOST_CONFIG, createProtocolData) .mockRejectedValue('oh no') - const { result, waitFor } = renderHook(() => useCreateProtocolMutation(), { + const { result } = renderHook(() => useCreateProtocolMutation(), { wrapper, }) expect(result.current.data).toBeUndefined() result.current.createProtocol({ files: createProtocolData }) await waitFor(() => { - return result.current.status !== 'loading' + expect(result.current.data).toBeUndefined() }) - expect(result.current.data).toBeUndefined() }) it('should create a protocol when calling the createProtocol callback', async () => { @@ -81,14 +80,14 @@ describe('useCreateProtocolMutation hook', () => { .calledWith(HOST_CONFIG, createProtocolData, undefined) .mockResolvedValue({ data: PROTOCOL_RESPONSE } as Response) - const { result, waitFor } = renderHook(() => useCreateProtocolMutation(), { + const { result } = renderHook(() => useCreateProtocolMutation(), { wrapper, }) act(() => result.current.createProtocol({ files: createProtocolData })) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(PROTOCOL_RESPONSE) + await waitFor(() => { + expect(result.current.data).toEqual(PROTOCOL_RESPONSE) + }) }) it('should create a protocol with a protocolKey if included', async () => { @@ -97,7 +96,7 @@ describe('useCreateProtocolMutation hook', () => { .calledWith(HOST_CONFIG, createProtocolData, 'fakeProtocolKey') .mockResolvedValue({ data: PROTOCOL_RESPONSE } as Response) - const { result, waitFor } = renderHook(() => useCreateProtocolMutation(), { + const { result } = renderHook(() => useCreateProtocolMutation(), { wrapper, }) act(() => @@ -107,8 +106,8 @@ describe('useCreateProtocolMutation hook', () => { }) ) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(PROTOCOL_RESPONSE) + await waitFor(() => { + expect(result.current.data).toEqual(PROTOCOL_RESPONSE) + }) }) }) diff --git a/react-api-client/src/protocols/__tests__/useDeleteProtocol.test.tsx b/react-api-client/src/protocols/__tests__/useDeleteProtocol.test.tsx index 0bbf1db8119..cd1251f29bf 100644 --- a/react-api-client/src/protocols/__tests__/useDeleteProtocol.test.tsx +++ b/react-api-client/src/protocols/__tests__/useDeleteProtocol.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { deleteProtocol } from '@opentrons/api-client' import { useHost } from '../../api' import { useDeleteProtocolMutation } from '..' @@ -21,12 +21,12 @@ const DELETE_PROTOCOL_RESPONSE = { } as EmptyResponse describe('useDeleteProtocolMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> const protocolId = '123' beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) @@ -42,7 +42,7 @@ describe('useDeleteProtocolMutation hook', () => { .calledWith(HOST_CONFIG, protocolId) .mockRejectedValue('oh no') - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useDeleteProtocolMutation(protocolId), { wrapper, @@ -52,10 +52,8 @@ describe('useDeleteProtocolMutation hook', () => { expect(result.current.data).toBeUndefined() result.current.deleteProtocol() await waitFor(() => { - console.log(result.current.status) - return result.current.status !== 'loading' + expect(result.current.data).toBeUndefined() }) - expect(result.current.data).toBeUndefined() }) it('should delete a protocol when calling the deleteProtocol callback', async () => { @@ -66,7 +64,7 @@ describe('useDeleteProtocolMutation hook', () => { data: DELETE_PROTOCOL_RESPONSE, } as Response) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useDeleteProtocolMutation(protocolId), { wrapper, @@ -74,8 +72,8 @@ describe('useDeleteProtocolMutation hook', () => { ) act(() => result.current.deleteProtocol()) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(DELETE_PROTOCOL_RESPONSE) + await waitFor(() => { + expect(result.current.data).toEqual(DELETE_PROTOCOL_RESPONSE) + }) }) }) diff --git a/react-api-client/src/protocols/__tests__/useProtocolQuery.test.tsx b/react-api-client/src/protocols/__tests__/useProtocolQuery.test.tsx index 6e203f0d315..a663f7cdd6b 100644 --- a/react-api-client/src/protocols/__tests__/useProtocolQuery.test.tsx +++ b/react-api-client/src/protocols/__tests__/useProtocolQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getProtocol } from '@opentrons/api-client' import { useHost } from '../../api' import { useProtocolQuery } from '..' @@ -29,11 +29,11 @@ const PROTOCOL_RESPONSE = { } as Protocol describe('useProtocolQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) @@ -71,15 +71,15 @@ describe('useProtocolQuery hook', () => { .calledWith(HOST_CONFIG, PROTOCOL_ID) .mockResolvedValue({ data: PROTOCOL_RESPONSE } as Response) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useProtocolQuery(PROTOCOL_ID), { wrapper, } ) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(PROTOCOL_RESPONSE) + await waitFor(() => { + expect(result.current.data).toEqual(PROTOCOL_RESPONSE) + }) }) }) diff --git a/react-api-client/src/robot/__tests__/useAcknowledgeEstopDisengageMutation.test.tsx b/react-api-client/src/robot/__tests__/useAcknowledgeEstopDisengageMutation.test.tsx index a33be2b9fc0..3b1b4fe0f49 100644 --- a/react-api-client/src/robot/__tests__/useAcknowledgeEstopDisengageMutation.test.tsx +++ b/react-api-client/src/robot/__tests__/useAcknowledgeEstopDisengageMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { acknowledgeEstopDisengage } from '@opentrons/api-client' import { useAcknowledgeEstopDisengageMutation } from '..' @@ -18,7 +18,7 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useAcknowledgeEstopDisengageMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> const updatedEstopPhysicalStatus: EstopStatus = { data: { status: 'disengaged', @@ -29,7 +29,7 @@ describe('useAcknowledgeEstopDisengageMutation hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) wrapper = clientProvider @@ -44,16 +44,15 @@ describe('useAcknowledgeEstopDisengageMutation hook', () => { when(mockAcknowledgeEstopDisengage) .calledWith(HOST_CONFIG) .mockRejectedValue('oh no') - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useAcknowledgeEstopDisengageMutation(), { wrapper } ) expect(result.current.data).toBeUndefined() result.current.acknowledgeEstopDisengage(null) await waitFor(() => { - return result.current.status !== 'loading' + expect(result.current.data).toBeUndefined() }) - expect(result.current.data).toBeUndefined() }) it('should update a estop status when calling the setEstopPhysicalStatus with empty payload', async () => { @@ -64,12 +63,13 @@ describe('useAcknowledgeEstopDisengageMutation hook', () => { data: updatedEstopPhysicalStatus, } as Response) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useAcknowledgeEstopDisengageMutation(), { wrapper } ) act(() => result.current.acknowledgeEstopDisengage(null)) - await waitFor(() => result.current.data != null) - expect(result.current.data).toEqual(updatedEstopPhysicalStatus) + await waitFor(() => { + expect(result.current.data).toEqual(updatedEstopPhysicalStatus) + }) }) }) diff --git a/react-api-client/src/robot/__tests__/useDoorQuery.test.tsx b/react-api-client/src/robot/__tests__/useDoorQuery.test.tsx index fb7f6302b9e..a95a4346654 100644 --- a/react-api-client/src/robot/__tests__/useDoorQuery.test.tsx +++ b/react-api-client/src/robot/__tests__/useDoorQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getDoorStatus } from '@opentrons/api-client' import { useHost } from '../../api' @@ -24,11 +24,11 @@ const DOOR_RESPONSE: DoorStatus = { } as DoorStatus describe('useDoorQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode} & UseDoorQueryOptions> + let wrapper: React.FunctionComponent<{ children: React.ReactNode } & UseDoorQueryOptions> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UseDoorQueryOptions> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode } & UseDoorQueryOptions> = ({ children }) => ( {children} ) @@ -62,10 +62,10 @@ describe('useDoorQuery hook', () => { .calledWith(HOST_CONFIG) .mockResolvedValue({ data: DOOR_RESPONSE } as Response) - const { result, waitFor } = renderHook(useDoorQuery, { wrapper }) - - await waitFor(() => result.current?.data != null) + const { result } = renderHook(useDoorQuery, { wrapper }) - expect(result.current?.data).toEqual(DOOR_RESPONSE) + await waitFor(() => { + expect(result.current?.data).toEqual(DOOR_RESPONSE) + }) }) }) diff --git a/react-api-client/src/robot/__tests__/useEstopQuery.test.tsx b/react-api-client/src/robot/__tests__/useEstopQuery.test.tsx index 2141b210a6e..3c006cbc905 100644 --- a/react-api-client/src/robot/__tests__/useEstopQuery.test.tsx +++ b/react-api-client/src/robot/__tests__/useEstopQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getEstopStatus } from '@opentrons/api-client' import { useHost } from '../../api' @@ -28,11 +28,11 @@ const ESTOP_STATE_RESPONSE: EstopStatus = { } describe('useEstopQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode} & UseEstopQueryOptions> + let wrapper: React.FunctionComponent<{ children: React.ReactNode } & UseEstopQueryOptions> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UseEstopQueryOptions> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode } & UseEstopQueryOptions> = ({ children }) => ( {children} ) @@ -68,10 +68,10 @@ describe('useEstopQuery hook', () => { data: ESTOP_STATE_RESPONSE, } as Response) - const { result, waitFor } = renderHook(useEstopQuery, { wrapper }) - - await waitFor(() => result.current?.data != null) + const { result } = renderHook(useEstopQuery, { wrapper }) - expect(result.current?.data).toEqual(ESTOP_STATE_RESPONSE) + await waitFor(() => { + expect(result.current?.data).toEqual(ESTOP_STATE_RESPONSE) + }) }) }) diff --git a/react-api-client/src/robot/__tests__/useLightsQuery.test.tsx b/react-api-client/src/robot/__tests__/useLightsQuery.test.tsx index 95fa0df074a..842702343de 100644 --- a/react-api-client/src/robot/__tests__/useLightsQuery.test.tsx +++ b/react-api-client/src/robot/__tests__/useLightsQuery.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { when } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getLights as mockGetLights } from '@opentrons/api-client' import { useHost as mockUseHost } from '../../api' @@ -21,11 +21,11 @@ const HOST_CONFIG: HostConfig = { hostname: 'localhost' } const LIGHTS_RESPONSE: Lights = { on: true } as Lights describe('useLights hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode} & UseLightsQueryOptions> + let wrapper: React.FunctionComponent<{ children: React.ReactNode } & UseLightsQueryOptions> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UseLightsQueryOptions> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode } & UseLightsQueryOptions> = ({ children }) => ( {children} ) @@ -59,10 +59,10 @@ describe('useLights hook', () => { .calledWith(HOST_CONFIG) .mockResolvedValue({ data: LIGHTS_RESPONSE } as Response) - const { result, waitFor } = renderHook(useLightsQuery, { wrapper }) - - await waitFor(() => result.current?.data != null) + const { result } = renderHook(useLightsQuery, { wrapper }) - expect(result.current?.data).toEqual(LIGHTS_RESPONSE) + await waitFor(() => { + expect(result.current?.data).toEqual(LIGHTS_RESPONSE) + }) }) }) diff --git a/react-api-client/src/runs/__tests__/useAllCommandsQuery.test.tsx b/react-api-client/src/runs/__tests__/useAllCommandsQuery.test.tsx index 9053f2dc66e..6bb247c31f8 100644 --- a/react-api-client/src/runs/__tests__/useAllCommandsQuery.test.tsx +++ b/react-api-client/src/runs/__tests__/useAllCommandsQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getCommands } from '@opentrons/api-client' import { useHost } from '../../api' import { useAllCommandsQuery, DEFAULT_PARAMS } from '../useAllCommandsQuery' @@ -19,11 +19,11 @@ const HOST_CONFIG: HostConfig = { hostname: 'localhost' } const RUN_ID = 'run_id' describe('useAllCommandsQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) @@ -63,12 +63,12 @@ describe('useAllCommandsQuery hook', () => { data: mockCommandsResponse, } as Response) - const { result, waitFor } = renderHook(() => useAllCommandsQuery(RUN_ID), { + const { result } = renderHook(() => useAllCommandsQuery(RUN_ID), { wrapper, }) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(mockCommandsResponse) + await waitFor(() => { + expect(result.current.data).toEqual(mockCommandsResponse) + }) }) }) diff --git a/react-api-client/src/runs/__tests__/useAllRunsQuery.test.tsx b/react-api-client/src/runs/__tests__/useAllRunsQuery.test.tsx index 65ef5f026ba..bb6167ce473 100644 --- a/react-api-client/src/runs/__tests__/useAllRunsQuery.test.tsx +++ b/react-api-client/src/runs/__tests__/useAllRunsQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getRuns } from '@opentrons/api-client' import { useHost } from '../../api' import { useAllRunsQuery } from '..' @@ -18,11 +18,11 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useAllRunsQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode} & GetRunsParams> + let wrapper: React.FunctionComponent<{ children: React.ReactNode } & GetRunsParams> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode} & GetRunsParams> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode } & GetRunsParams> = ({ children }) => ( {children} ) @@ -54,11 +54,11 @@ describe('useAllRunsQuery hook', () => { .calledWith(HOST_CONFIG, {}) .mockResolvedValue({ data: mockRunsResponse } as Response) - const { result, waitFor } = renderHook(useAllRunsQuery, { wrapper }) - - await waitFor(() => result.current.data != null) + const { result } = renderHook(useAllRunsQuery, { wrapper }) - expect(result.current.data).toEqual(mockRunsResponse) + await waitFor(() => { + expect(result.current.data).toEqual(mockRunsResponse) + }) }) it('should return specified pageLength of runs', async () => { @@ -67,13 +67,13 @@ describe('useAllRunsQuery hook', () => { .calledWith(HOST_CONFIG, { pageLength: 20 }) .mockResolvedValue({ data: mockRunsResponse } as Response) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useAllRunsQuery({ pageLength: 20 }), { wrapper } ) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(mockRunsResponse) + await waitFor(() => { + expect(result.current.data).toEqual(mockRunsResponse) + }) }) }) diff --git a/react-api-client/src/runs/__tests__/useCommandQuery.test.tsx b/react-api-client/src/runs/__tests__/useCommandQuery.test.tsx index 36dcc4a4960..243109d0557 100644 --- a/react-api-client/src/runs/__tests__/useCommandQuery.test.tsx +++ b/react-api-client/src/runs/__tests__/useCommandQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getCommand } from '@opentrons/api-client' import { useHost } from '../../api' import { useCommandQuery } from '..' @@ -23,11 +23,11 @@ const COMMAND_RESPONSE = { } as CommandDetail describe('useCommandQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) @@ -65,15 +65,15 @@ describe('useCommandQuery hook', () => { .calledWith(HOST_CONFIG, RUN_ID, COMMAND_ID) .mockResolvedValue({ data: COMMAND_RESPONSE } as Response) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useCommandQuery(RUN_ID, COMMAND_ID), { wrapper, } ) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(COMMAND_RESPONSE) + await waitFor(() => { + expect(result.current.data).toEqual(COMMAND_RESPONSE) + }) }) }) diff --git a/react-api-client/src/runs/__tests__/useCreateCommandMutation.test.tsx b/react-api-client/src/runs/__tests__/useCreateCommandMutation.test.tsx index 8160596216b..e4103bcbfeb 100644 --- a/react-api-client/src/runs/__tests__/useCreateCommandMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useCreateCommandMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { createCommand } from '@opentrons/api-client' import { useHost } from '../../api' import { useCreateCommandMutation } from '..' @@ -40,7 +40,7 @@ describe('useCreateCommandMutation hook', () => { .calledWith(HOST_CONFIG, RUN_ID_1, mockAnonLoadCommand, {}) .mockResolvedValue({ data: 'something' } as any) - const { result, waitFor } = renderHook(() => useCreateCommandMutation(), { + const { result } = renderHook(() => useCreateCommandMutation(), { wrapper, }) @@ -52,9 +52,8 @@ describe('useCreateCommandMutation hook', () => { }) }) await waitFor(() => { - return result.current.data != null + expect(result.current.data).toBe('something') }) - expect(result.current.data).toBe('something') }) it('should pass waitUntilComplete and timeout through if given command', async () => { const waitUntilComplete = true @@ -67,7 +66,7 @@ describe('useCreateCommandMutation hook', () => { }) .mockResolvedValue({ data: 'something' } as any) - const { result, waitFor } = renderHook(() => useCreateCommandMutation(), { + const { result } = renderHook(() => useCreateCommandMutation(), { wrapper, }) @@ -81,8 +80,7 @@ describe('useCreateCommandMutation hook', () => { }) }) await waitFor(() => { - return result.current.data != null + expect(result.current.data).toBe('something') }) - expect(result.current.data).toBe('something') }) }) diff --git a/react-api-client/src/runs/__tests__/useCreateLabwareDefinitionMutation.test.tsx b/react-api-client/src/runs/__tests__/useCreateLabwareDefinitionMutation.test.tsx index f049e49ecbd..11de5556f82 100644 --- a/react-api-client/src/runs/__tests__/useCreateLabwareDefinitionMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useCreateLabwareDefinitionMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { createLabwareDefinition } from '@opentrons/api-client' import { useHost } from '../../api' @@ -43,7 +43,7 @@ describe('useCreateLabwareDefinitionMutation hook', () => { .calledWith(HOST_CONFIG, RUN_ID, labwareDefinition) .mockResolvedValue({ data: 'created labware definition!' } as any) - const { result, waitFor } = renderHook(useCreateLabwareDefinitionMutation, { + const { result } = renderHook(useCreateLabwareDefinitionMutation, { wrapper, }) @@ -55,8 +55,7 @@ describe('useCreateLabwareDefinitionMutation hook', () => { }) }) await waitFor(() => { - return result.current.data != null + expect(result.current.data).toBe('created labware definition!') }) - expect(result.current.data).toBe('created labware definition!') }) }) diff --git a/react-api-client/src/runs/__tests__/useCreateLabwareOffsetsMutation.test.tsx b/react-api-client/src/runs/__tests__/useCreateLabwareOffsetsMutation.test.tsx index 7f9d0f076d9..e91ced0696e 100644 --- a/react-api-client/src/runs/__tests__/useCreateLabwareOffsetsMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useCreateLabwareOffsetsMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { createLabwareOffset } from '@opentrons/api-client' import { useHost } from '../../api' @@ -49,7 +49,7 @@ describe('useCreateLabwareOffsetMutation hook', () => { .calledWith(HOST_CONFIG, RUN_ID, labwareOffset) .mockResolvedValue({ data: 'created offsets!' } as any) - const { result, waitFor } = renderHook(useCreateLabwareOffsetMutation, { + const { result } = renderHook(useCreateLabwareOffsetMutation, { wrapper, }) @@ -61,8 +61,7 @@ describe('useCreateLabwareOffsetMutation hook', () => { }) }) await waitFor(() => { - return result.current.data != null + expect(result.current.data).toBe('created offsets!') }) - expect(result.current.data).toBe('created offsets!') }) }) diff --git a/react-api-client/src/runs/__tests__/useCreateLiveCommandMutation.test.tsx b/react-api-client/src/runs/__tests__/useCreateLiveCommandMutation.test.tsx index 149c1a47440..61a9a253b0f 100644 --- a/react-api-client/src/runs/__tests__/useCreateLiveCommandMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useCreateLiveCommandMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { createLiveCommand } from '@opentrons/api-client' import { useHost } from '../../api' import { useCreateLiveCommandMutation } from '../useCreateLiveCommandMutation' @@ -40,7 +40,7 @@ describe('useCreateLiveCommandMutation hook', () => { .calledWith(HOST_CONFIG, mockAnonLoadCommand, {}) .mockResolvedValue({ data: 'something' } as any) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useCreateLiveCommandMutation(), { wrapper, @@ -54,9 +54,8 @@ describe('useCreateLiveCommandMutation hook', () => { }) }) await waitFor(() => { - return result.current.data != null + expect(result.current.data).toBe('something') }) - expect(result.current.data).toBe('something') }) it('should pass waitUntilComplete and timeout through if given command', async () => { const waitUntilComplete = true @@ -69,7 +68,7 @@ describe('useCreateLiveCommandMutation hook', () => { }) .mockResolvedValue({ data: 'something' } as any) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useCreateLiveCommandMutation(), { wrapper, @@ -85,8 +84,7 @@ describe('useCreateLiveCommandMutation hook', () => { }) }) await waitFor(() => { - return result.current.data != null + expect(result.current.data).toBe('something') }) - expect(result.current.data).toBe('something') }) }) diff --git a/react-api-client/src/runs/__tests__/useCreateRunMutation.test.tsx b/react-api-client/src/runs/__tests__/useCreateRunMutation.test.tsx index 186daacf464..23011a7aec5 100644 --- a/react-api-client/src/runs/__tests__/useCreateRunMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useCreateRunMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { createRun, CreateRunData } from '@opentrons/api-client' import { useHost } from '../../api' import { PROTOCOL_ID, mockRunResponse } from '../__fixtures__' @@ -18,12 +18,12 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useCreateRunMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> let createRunData = {} as CreateRunData beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) createRunData = {} @@ -40,16 +40,15 @@ describe('useCreateRunMutation hook', () => { .calledWith(HOST_CONFIG, createRunData) .mockRejectedValue('oh no') - const { result, waitFor } = renderHook(() => useCreateRunMutation(), { + const { result } = renderHook(() => useCreateRunMutation(), { wrapper, }) expect(result.current.data).toBeUndefined() result.current.createRun({}) await waitFor(() => { - return result.current.status !== 'loading' + expect(result.current.data).toBeUndefined() }) - expect(result.current.data).toBeUndefined() }) it('should create a run when calling the createRun callback with basic run args', async () => { @@ -58,14 +57,14 @@ describe('useCreateRunMutation hook', () => { .calledWith(HOST_CONFIG, createRunData) .mockResolvedValue({ data: mockRunResponse } as Response) - const { result, waitFor } = renderHook(() => useCreateRunMutation(), { + const { result } = renderHook(() => useCreateRunMutation(), { wrapper, }) act(() => result.current.createRun(createRunData)) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(mockRunResponse) + await waitFor(() => { + expect(result.current.data).toEqual(mockRunResponse) + }) }) it('should create a protocol run when calling the createRun callback with protocol run args', async () => { @@ -75,13 +74,13 @@ describe('useCreateRunMutation hook', () => { .calledWith(HOST_CONFIG, createRunData) .mockResolvedValue({ data: mockRunResponse } as Response) - const { result, waitFor } = renderHook(() => useCreateRunMutation(), { + const { result } = renderHook(() => useCreateRunMutation(), { wrapper, }) act(() => result.current.createRun(createRunData)) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(mockRunResponse) + await waitFor(() => { + expect(result.current.data).toEqual(mockRunResponse) + }) }) }) diff --git a/react-api-client/src/runs/__tests__/useDismissCurrentRunMutation.test.tsx b/react-api-client/src/runs/__tests__/useDismissCurrentRunMutation.test.tsx index 61eff8d222b..6ba4e862329 100644 --- a/react-api-client/src/runs/__tests__/useDismissCurrentRunMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useDismissCurrentRunMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { dismissCurrentRun } from '@opentrons/api-client' import { useHost } from '../../api' import { useDismissCurrentRunMutation } from '..' @@ -40,7 +40,7 @@ describe('useDismissCurrentRunMutation hook', () => { .calledWith(HOST_CONFIG, RUN_ID_1) .mockResolvedValue({ data: 'something' } as any) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useDismissCurrentRunMutation(), { wrapper, @@ -52,8 +52,7 @@ describe('useDismissCurrentRunMutation hook', () => { result.current.dismissCurrentRun(RUN_ID_1) }) await waitFor(() => { - return result.current.data != null + expect(result.current.data).toBe('something') }) - expect(result.current.data).toBe('something') }) }) diff --git a/react-api-client/src/runs/__tests__/usePauseRunMutation.test.tsx b/react-api-client/src/runs/__tests__/usePauseRunMutation.test.tsx index b1cb050cab4..943accad4ff 100644 --- a/react-api-client/src/runs/__tests__/usePauseRunMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/usePauseRunMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { createRunAction, RUN_ACTION_TYPE_PAUSE } from '@opentrons/api-client' import { useHost } from '../../api' import { usePauseRunMutation } from '..' @@ -42,16 +42,15 @@ describe('usePauseRunMutation hook', () => { .calledWith(HOST_CONFIG, RUN_ID_1, createPauseRunActionData) .mockRejectedValue('uh oh') - const { result, waitFor } = renderHook(usePauseRunMutation, { + const { result } = renderHook(usePauseRunMutation, { wrapper, }) expect(result.current.data).toBeUndefined() act(() => result.current.pauseRun(RUN_ID_1)) await waitFor(() => { - return result.current.status !== 'loading' + expect(result.current.data).toBeUndefined() }) - expect(result.current.data).toBeUndefined() }) it('should create a pause run action when calling the pauseRun callback', async () => { @@ -60,13 +59,13 @@ describe('usePauseRunMutation hook', () => { .calledWith(HOST_CONFIG, RUN_ID_1, createPauseRunActionData) .mockResolvedValue({ data: mockPauseRunAction } as Response) - const { result, waitFor } = renderHook(usePauseRunMutation, { + const { result } = renderHook(usePauseRunMutation, { wrapper, }) act(() => result.current.pauseRun(RUN_ID_1)) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(mockPauseRunAction) + await waitFor(() => { + expect(result.current.data).toEqual(mockPauseRunAction) + }) }) }) diff --git a/react-api-client/src/runs/__tests__/usePlayRunMutation.test.tsx b/react-api-client/src/runs/__tests__/usePlayRunMutation.test.tsx index dee4d5aac16..0b2151b9f7c 100644 --- a/react-api-client/src/runs/__tests__/usePlayRunMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/usePlayRunMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { createRunAction, RUN_ACTION_TYPE_PLAY } from '@opentrons/api-client' import { useHost } from '../../api' import { usePlayRunMutation } from '..' @@ -22,12 +22,12 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('usePlayRunMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode} & UsePlayRunMutationOptions> + let wrapper: React.FunctionComponent<{ children: React.ReactNode } & UsePlayRunMutationOptions> const createPlayRunActionData = { actionType: RUN_ACTION_TYPE_PLAY } beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UsePlayRunMutationOptions> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode } & UsePlayRunMutationOptions> = ({ children }) => ( {children} ) wrapper = clientProvider @@ -42,16 +42,15 @@ describe('usePlayRunMutation hook', () => { .calledWith(HOST_CONFIG, RUN_ID_1, createPlayRunActionData) .mockRejectedValue('oh no') - const { result, waitFor } = renderHook(usePlayRunMutation, { + const { result } = renderHook(usePlayRunMutation, { wrapper, }) expect(result.current.data).toBeUndefined() act(() => result.current.playRun(RUN_ID_1)) await waitFor(() => { - return result.current.status !== 'loading' + expect(result.current.data).toBeUndefined() }) - expect(result.current.data).toBeUndefined() }) it('should create a play run action when calling the playRun callback', async () => { @@ -60,13 +59,13 @@ describe('usePlayRunMutation hook', () => { .calledWith(HOST_CONFIG, RUN_ID_1, createPlayRunActionData) .mockResolvedValue({ data: mockPlayRunAction } as Response) - const { result, waitFor } = renderHook(usePlayRunMutation, { + const { result } = renderHook(usePlayRunMutation, { wrapper, }) act(() => result.current.playRun(RUN_ID_1)) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(mockPlayRunAction) + await waitFor(() => { + expect(result.current.data).toEqual(mockPlayRunAction) + }) }) }) diff --git a/react-api-client/src/runs/__tests__/useRunQuery.test.tsx b/react-api-client/src/runs/__tests__/useRunQuery.test.tsx index 588422da595..7f027232502 100644 --- a/react-api-client/src/runs/__tests__/useRunQuery.test.tsx +++ b/react-api-client/src/runs/__tests__/useRunQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getRun } from '@opentrons/api-client' import { useHost } from '../../api' import { useRunQuery } from '..' @@ -59,12 +59,12 @@ describe('useRunQuery hook', () => { .calledWith(HOST_CONFIG, RUN_ID) .mockResolvedValue({ data: RUN_RESPONSE } as Response) - const { result, waitFor } = renderHook(() => useRunQuery(RUN_ID), { + const { result } = renderHook(() => useRunQuery(RUN_ID), { wrapper, }) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(RUN_RESPONSE) + await waitFor(() => { + expect(result.current.data).toEqual(RUN_RESPONSE) + }) }) }) diff --git a/react-api-client/src/runs/__tests__/useStopRunMutation.test.tsx b/react-api-client/src/runs/__tests__/useStopRunMutation.test.tsx index 36c3ecc84e4..9501c990f39 100644 --- a/react-api-client/src/runs/__tests__/useStopRunMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useStopRunMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { createRunAction, RUN_ACTION_TYPE_STOP } from '@opentrons/api-client' import { useHost } from '../../api' import { useStopRunMutation } from '..' @@ -21,12 +21,12 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useStopRunMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> const createStopRunActionData = { actionType: RUN_ACTION_TYPE_STOP } beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) wrapper = clientProvider @@ -41,16 +41,15 @@ describe('useStopRunMutation hook', () => { .calledWith(HOST_CONFIG, RUN_ID_1, createStopRunActionData) .mockRejectedValue('oops') - const { result, waitFor } = renderHook(() => useStopRunMutation(), { + const { result } = renderHook(() => useStopRunMutation(), { wrapper, }) expect(result.current.data).toBeUndefined() result.current.stopRun(RUN_ID_1) await waitFor(() => { - return result.current.status !== 'loading' + expect(result.current.data).toBeUndefined() }) - expect(result.current.data).toBeUndefined() }) it('should create a stop run action when calling the stopRun callback', async () => { @@ -59,13 +58,13 @@ describe('useStopRunMutation hook', () => { .calledWith(HOST_CONFIG, RUN_ID_1, createStopRunActionData) .mockResolvedValue({ data: mockStopRunAction } as Response) - const { result, waitFor } = renderHook(() => useStopRunMutation(), { + const { result } = renderHook(() => useStopRunMutation(), { wrapper, }) act(() => result.current.stopRun(RUN_ID_1)) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(mockStopRunAction) + await waitFor(() => { + expect(result.current.data).toEqual(mockStopRunAction) + }) }) }) diff --git a/react-api-client/src/server/__tests__/useUpdateRobotNameMutation.test.tsx b/react-api-client/src/server/__tests__/useUpdateRobotNameMutation.test.tsx index 0db5cadb7db..8369bc11d97 100644 --- a/react-api-client/src/server/__tests__/useUpdateRobotNameMutation.test.tsx +++ b/react-api-client/src/server/__tests__/useUpdateRobotNameMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { updateRobotName } from '@opentrons/api-client' import { useHost } from '../../api' import { useUpdateRobotNameMutation } from '..' @@ -28,11 +28,11 @@ const UPDATE_ROBOT_NAME_RESPONSE = { } describe('useUpdatedRobotNameMutation, hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) wrapper = clientProvider @@ -47,14 +47,14 @@ describe('useUpdatedRobotNameMutation, hook', () => { .calledWith(HOST_CONFIG, newRobotName) .mockRejectedValue('error') - const { result, waitFor } = renderHook(() => useUpdateRobotNameMutation(), { + const { result } = renderHook(() => useUpdateRobotNameMutation(), { wrapper, }) expect(result.current.data).toBeUndefined() result.current.updateRobotName(newRobotName) await waitFor(() => { - return result.current.status !== 'loading' + expect(result.current.data).toBe(newRobotName) }) }) @@ -66,13 +66,14 @@ describe('useUpdatedRobotNameMutation, hook', () => { data: UPDATE_ROBOT_NAME_RESPONSE, } as Response) - const { result, waitFor } = renderHook(() => useUpdateRobotNameMutation(), { + const { result } = renderHook(() => useUpdateRobotNameMutation(), { wrapper, }) act(() => result.current.updateRobotName(newRobotName)) - await waitFor(() => result.current.data != null) + await waitFor(() => { + expect(result.current.data).toEqual(UPDATE_ROBOT_NAME_RESPONSE) + }) - expect(result.current.data).toEqual(UPDATE_ROBOT_NAME_RESPONSE) }) }) diff --git a/react-api-client/src/sessions/__tests__/useAllSessionsQuery.test.tsx b/react-api-client/src/sessions/__tests__/useAllSessionsQuery.test.tsx index 3a5bde04a7a..0473d874d37 100644 --- a/react-api-client/src/sessions/__tests__/useAllSessionsQuery.test.tsx +++ b/react-api-client/src/sessions/__tests__/useAllSessionsQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider, UseQueryOptions } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getSessions } from '@opentrons/api-client' import { useHost } from '../../api' import { useAllSessionsQuery } from '..' @@ -23,11 +23,11 @@ const SESSIONS_RESPONSE = { } as Sessions describe('useAllSessionsQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode} & UseQueryOptions> + let wrapper: React.FunctionComponent<{ children: React.ReactNode } & UseQueryOptions> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UseQueryOptions> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode } & UseQueryOptions> = ({ children }) => ( {children} ) @@ -59,10 +59,11 @@ describe('useAllSessionsQuery hook', () => { .calledWith(HOST_CONFIG) .mockResolvedValue({ data: SESSIONS_RESPONSE } as Response) - const { result, waitFor } = renderHook(useAllSessionsQuery, { wrapper }) + const { result } = renderHook(useAllSessionsQuery, { wrapper }) - await waitFor(() => result.current.data != null) + await waitFor(() => { + expect(result.current.data).toEqual(SESSIONS_RESPONSE) + }) - expect(result.current.data).toEqual(SESSIONS_RESPONSE) }) }) diff --git a/react-api-client/src/sessions/__tests__/useCreateSessionMutation.test.tsx b/react-api-client/src/sessions/__tests__/useCreateSessionMutation.test.tsx index d9cd8e1840f..1ad4fe357e5 100644 --- a/react-api-client/src/sessions/__tests__/useCreateSessionMutation.test.tsx +++ b/react-api-client/src/sessions/__tests__/useCreateSessionMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { createSession, CreateSessionData, @@ -27,12 +27,12 @@ const SESSION_RESPONSE = { } as Session describe('useCreateSessionMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> let createSessionData = {} as CreateSessionData beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) createSessionData = { sessionType: SESSION_TYPE_DECK_CALIBRATION } @@ -49,7 +49,7 @@ describe('useCreateSessionMutation hook', () => { .calledWith(HOST_CONFIG, createSessionData) .mockRejectedValue('oh no') - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useCreateSessionMutation(createSessionData), { wrapper, @@ -59,10 +59,8 @@ describe('useCreateSessionMutation hook', () => { expect(result.current.data).toBeUndefined() result.current.createSession() await waitFor(() => { - console.log(result.current.status) - return result.current.status !== 'loading' + expect(result.current.data).toBeUndefined() }) - expect(result.current.data).toBeUndefined() }) it('should create a session when calling the createSession callback', async () => { @@ -71,7 +69,7 @@ describe('useCreateSessionMutation hook', () => { .calledWith(HOST_CONFIG, createSessionData) .mockResolvedValue({ data: SESSION_RESPONSE } as Response) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useCreateSessionMutation(createSessionData), { wrapper, @@ -79,8 +77,8 @@ describe('useCreateSessionMutation hook', () => { ) act(() => result.current.createSession()) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(SESSION_RESPONSE) + await waitFor(() => { + expect(result.current.data).toEqual(SESSION_RESPONSE) + }) }) }) diff --git a/react-api-client/src/sessions/__tests__/useSessionQuery.test.tsx b/react-api-client/src/sessions/__tests__/useSessionQuery.test.tsx index 7b12bf73310..d344eeee083 100644 --- a/react-api-client/src/sessions/__tests__/useSessionQuery.test.tsx +++ b/react-api-client/src/sessions/__tests__/useSessionQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getSession } from '@opentrons/api-client' import { useHost } from '../../api' import { useSessionQuery } from '..' @@ -21,11 +21,11 @@ const SESSION_RESPONSE = { } as Session describe('useSessionQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) @@ -63,12 +63,12 @@ describe('useSessionQuery hook', () => { .calledWith(HOST_CONFIG, SESSION_ID) .mockResolvedValue({ data: SESSION_RESPONSE } as Response) - const { result, waitFor } = renderHook(() => useSessionQuery(SESSION_ID), { + const { result } = renderHook(() => useSessionQuery(SESSION_ID), { wrapper, }) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(SESSION_RESPONSE) + await waitFor(() => { + expect(result.current.data).toEqual(SESSION_RESPONSE) + }) }) }) diff --git a/react-api-client/src/sessions/__tests__/useSessionsByTypeQuery.test.tsx b/react-api-client/src/sessions/__tests__/useSessionsByTypeQuery.test.tsx index d63a72f25a2..7c0921b5100 100644 --- a/react-api-client/src/sessions/__tests__/useSessionsByTypeQuery.test.tsx +++ b/react-api-client/src/sessions/__tests__/useSessionsByTypeQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getSessions } from '@opentrons/api-client' import { useHost } from '../../api' import { useSessionsByTypeQuery } from '..' @@ -23,11 +23,11 @@ const SESSIONS_RESPONSE = { } as Sessions describe('useSessionsByTypeQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) @@ -74,13 +74,13 @@ describe('useSessionsByTypeQuery hook', () => { .calledWith(HOST_CONFIG, { session_type: 'tipLengthCalibration' }) .mockResolvedValue({ data: tipLengthCalSessions } as Response) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useSessionsByTypeQuery({ sessionType: 'tipLengthCalibration' }), { wrapper } ) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(tipLengthCalSessions) + await waitFor(() => { + expect(result.current.data).toEqual(tipLengthCalSessions) + }) }) }) diff --git a/react-api-client/src/subsystems/__tests__/useAllCurrentSubsystemUpdateQuery.test.tsx b/react-api-client/src/subsystems/__tests__/useAllCurrentSubsystemUpdateQuery.test.tsx index beed5d00715..d7f6536b333 100644 --- a/react-api-client/src/subsystems/__tests__/useAllCurrentSubsystemUpdateQuery.test.tsx +++ b/react-api-client/src/subsystems/__tests__/useAllCurrentSubsystemUpdateQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getCurrentAllSubsystemUpdates } from '@opentrons/api-client' import { useHost } from '../../api' @@ -41,11 +41,11 @@ const CURRENT_SUBSYSTEM_UPDATES_RESPONSE = { } as CurrentSubsystemUpdates describe('useAllCurrentSubsystemUpdateQuery', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) @@ -85,15 +85,15 @@ describe('useAllCurrentSubsystemUpdateQuery', () => { data: CURRENT_SUBSYSTEM_UPDATES_RESPONSE, } as Response) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useCurrentAllSubsystemUpdatesQuery(), { wrapper, } ) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(CURRENT_SUBSYSTEM_UPDATES_RESPONSE) + await waitFor(() => { + expect(result.current.data).toEqual(CURRENT_SUBSYSTEM_UPDATES_RESPONSE) + }) }) }) diff --git a/react-api-client/src/subsystems/__tests__/useCurrentSubsystemUpdateQuery.test.tsx b/react-api-client/src/subsystems/__tests__/useCurrentSubsystemUpdateQuery.test.tsx index 3ec00716795..73467bd4b0c 100644 --- a/react-api-client/src/subsystems/__tests__/useCurrentSubsystemUpdateQuery.test.tsx +++ b/react-api-client/src/subsystems/__tests__/useCurrentSubsystemUpdateQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getCurrentSubsystemUpdate } from '@opentrons/api-client' import { useHost } from '../../api' @@ -35,11 +35,11 @@ const CURRENT_SUBSYSTEM_UPDATE_RESPONSE = { } as SubsystemUpdateProgressData describe('useCurrentSubsystemUpdateQuery', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) @@ -82,15 +82,15 @@ describe('useCurrentSubsystemUpdateQuery', () => { data: CURRENT_SUBSYSTEM_UPDATE_RESPONSE, } as Response) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useCurrentSubsystemUpdateQuery(SUBSYSTEM_TYPE), { wrapper, } ) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(CURRENT_SUBSYSTEM_UPDATE_RESPONSE) + await waitFor(() => { + expect(result.current.data).toEqual(CURRENT_SUBSYSTEM_UPDATE_RESPONSE) + }) }) }) diff --git a/react-api-client/src/subsystems/__tests__/useSubsystemUpdateQuery.test.tsx b/react-api-client/src/subsystems/__tests__/useSubsystemUpdateQuery.test.tsx index 022085509bf..36a04bf7fa6 100644 --- a/react-api-client/src/subsystems/__tests__/useSubsystemUpdateQuery.test.tsx +++ b/react-api-client/src/subsystems/__tests__/useSubsystemUpdateQuery.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { renderHook } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { getSubsystemUpdate } from '@opentrons/api-client' import { useHost } from '../../api' import { useSubsystemUpdateQuery } from '..' @@ -34,11 +34,11 @@ const SUBSYSTEM_UPDATE_RESPONSE = { } as SubsystemUpdateProgressData describe('useSubsystemUpdateQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) @@ -78,15 +78,15 @@ describe('useSubsystemUpdateQuery hook', () => { data: SUBSYSTEM_UPDATE_RESPONSE, } as Response) - const { result, waitFor } = renderHook( + const { result } = renderHook( () => useSubsystemUpdateQuery(UPDATE_ID), { wrapper, } ) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(SUBSYSTEM_UPDATE_RESPONSE) + await waitFor(() => { + expect(result.current.data).toEqual(SUBSYSTEM_UPDATE_RESPONSE) + }) }) }) diff --git a/react-api-client/src/subsystems/__tests__/useUpdateSubsystemMutation.test.tsx b/react-api-client/src/subsystems/__tests__/useUpdateSubsystemMutation.test.tsx index 9cc3191e7fb..5c79249f6f9 100644 --- a/react-api-client/src/subsystems/__tests__/useUpdateSubsystemMutation.test.tsx +++ b/react-api-client/src/subsystems/__tests__/useUpdateSubsystemMutation.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { QueryClient, QueryClientProvider } from 'react-query' -import { act, renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { updateSubsystem } from '@opentrons/api-client' import { useHost } from '../../api' import { useUpdateSubsystemMutation } from '..' @@ -34,11 +34,11 @@ const SUBSYSTEM_UPDATE_RESPONSE = { } as SubsystemUpdateProgressData describe('useUpdateSubsystemMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( {children} ) wrapper = clientProvider @@ -77,13 +77,13 @@ describe('useUpdateSubsystemMutation hook', () => { data: SUBSYSTEM_UPDATE_RESPONSE, } as Response) - const { result, waitFor } = renderHook(() => useUpdateSubsystemMutation(), { + const { result } = renderHook(() => useUpdateSubsystemMutation(), { wrapper, }) act(() => result.current.updateSubsystem(SUBSYSTEM)) - await waitFor(() => result.current.data != null) - - expect(result.current.data).toEqual(SUBSYSTEM_UPDATE_RESPONSE) + await waitFor(() => { + expect(result.current.data).toEqual(SUBSYSTEM_UPDATE_RESPONSE) + }) }) }) From 77936d7bc5d8574b2b660904a7166c126b165529 Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Thu, 7 Dec 2023 15:25:58 -0500 Subject: [PATCH 05/31] remove legacy enzyme tests --- app/src/App/__mocks__/portal.tsx | 12 - .../__tests__/ConnectModal.test.tsx | 201 +--- .../ConnectModal/__tests__/FormModal.test.tsx | 219 +---- .../__tests__/KeyFileField.test.tsx | 162 +-- .../__tests__/SecurityField.test.tsx | 132 +-- .../ConnectModal/__tests__/TextField.test.tsx | 114 +-- .../__tests__/UploadKeyInput.test.tsx | 108 +- .../__tests__/form-state.test.tsx | 165 +--- .../__tests__/NetworkOptionLabel.test.tsx | 85 +- .../SelectSsid/__tests__/SelectSsid.test.tsx | 148 +-- .../__tests__/ResultModal.test.tsx | 289 +----- .../__tests__/SelectNetwork.test.tsx | 350 +------ .../redux/analytics/__tests__/hooks.test.tsx | 80 +- app/src/redux/config/__tests__/hooks.test.tsx | 74 +- .../DeprecatedCheckboxField.test.tsx | 78 +- .../forms/__tests__/DropdownField.test.tsx | 56 +- .../src/forms/__tests__/InputField.test.tsx | 31 +- .../src/forms/__tests__/Select.test.tsx | 51 +- .../src/forms/__tests__/SelectField.test.tsx | 109 +-- .../src/forms/__tests__/ToggleField.test.tsx | 59 +- .../__tests__/useConditionalConfirm.test.tsx | 171 +--- .../src/hooks/__tests__/useInterval.test.tsx | 45 +- .../hooks/__tests__/useMountEffect.test.tsx | 50 +- .../src/hooks/__tests__/usePrevious.test.tsx | 26 +- .../src/hooks/__tests__/useTimeout.test.tsx | 49 +- .../src/hooks/__tests__/useToggle.test.tsx | 41 +- .../__tests__/PipetteSelect.test.tsx | 154 +-- .../__tests__/useHover.test.tsx | 146 +-- .../src/modals/__tests__/BaseModal.test.tsx | 115 +-- .../src/primitives/__tests__/Box.test.tsx | 20 +- .../src/primitives/__tests__/Btn.test.tsx | 381 +------- .../src/primitives/__tests__/Flex.test.tsx | 20 +- .../src/primitives/__tests__/Link.test.tsx | 29 +- .../src/primitives/__tests__/Svg.test.tsx | 34 +- .../src/primitives/__tests__/Text.test.tsx | 21 +- .../primitives/__tests__/primitives.test.tsx | 129 +-- .../primitives/__tests__/style-props.test.tsx | 475 +-------- .../src/slotmap/__tests__/SlotMap.test.tsx | 50 +- components/src/testing/utils/index.ts | 2 - .../src/testing/utils/mountWithProviders.tsx | 99 -- .../src/testing/utils/mountWithStore.tsx | 77 -- .../src/tooltips/__tests__/Tooltip.test.tsx | 98 +- .../__tests__/useHoverTooltip.test.tsx | 167 +--- .../src/tooltips/__tests__/usePopper.test.tsx | 179 +--- .../tooltips/__tests__/useTooltip.test.tsx | 120 +-- jest.config.js | 2 - .../src/components/App/__tests__/App.test.tsx | 39 +- .../components/App/__tests__/Page.test.tsx | 34 +- .../__tests__/LabwareList.test.tsx | 38 +- .../src/components/Nav/__tests__/Nav.test.tsx | 12 +- .../Sidebar/__tests__/FilterCategory.test.tsx | 15 +- .../__tests__/FilterManufacturer.test.tsx | 33 +- .../Sidebar/__tests__/LabwareGuide.test.tsx | 12 +- .../Sidebar/__tests__/Sidebar.test.tsx | 22 +- .../__tests__/Logo.test.tsx | 18 +- .../__tests__/MainNav.test.tsx | 12 +- .../__tests__/NavLink.test.tsx | 37 +- .../__tests__/NavList.test.tsx | 32 +- .../__tests__/SubdomainNav.test.tsx | 20 +- package.json | 4 - .../__tests__/BatchEditMoveLiquid.test.tsx | 110 +-- .../__tests__/SlotControls.test.tsx | 108 +- .../__tests__/FileSidebar.test.tsx | 295 +----- .../fields/__tests__/DelayFields.test.tsx | 262 +---- .../fields/__tests__/WellOrderField.test.tsx | 80 +- .../forms/__tests__/MagnetForm.test.tsx | 140 +-- .../forms/__tests__/MixForm.test.tsx | 176 +--- .../forms/__tests__/SourceDestFields.test.tsx | 266 +---- .../__tests__/StepSelectionBanner.test.tsx | 93 +- .../components/__tests__/EditModules.test.tsx | 84 +- .../components/__tests__/FilePage.test.tsx | 65 +- .../__tests__/StepCreationButton.test.tsx | 185 +--- .../lists/__tests__/TitledStepList.test.tsx | 85 +- .../__tests__/AnnouncementModal.test.tsx | 115 +-- .../__tests__/EditModulesModal.test.tsx | 376 +------ .../__tests__/ModelDropdown.test.tsx | 81 +- .../__tests__/SlotDropdown.test.tsx | 74 +- .../__tests__/form-state.test.tsx | 99 +- .../__tests__/ModuleFields.test.tsx | 196 +--- .../__tests__/PipetteFields.test.tsx | 189 +--- .../__tests__/index.test.tsx | 388 +------- .../__tests__/EditModulesCard.test.tsx | 327 +------ .../modules/__tests__/ModuleDiagram.test.tsx | 19 +- .../modules/__tests__/ModuleRow.test.tsx | 227 +---- .../portals/__mocks__/MainPageModalPortal.tsx | 2 +- .../__tests__/ModuleStepItems.test.tsx | 55 +- .../__tests__/MultiSelectToolbar.test.tsx | 291 +----- .../__tests__/StepItemContents.test.tsx | 207 +--- .../steplist/__tests__/StepList.test.tsx | 31 +- .../steplist/__tests__/TerminalItem.test.tsx | 110 +-- .../__tests__/ConnectedStepItem.test.tsx | 925 +----------------- yarn.lock | 334 +------ 92 files changed, 110 insertions(+), 11436 deletions(-) delete mode 100644 app/src/App/__mocks__/portal.tsx delete mode 100644 components/src/testing/utils/mountWithProviders.tsx delete mode 100644 components/src/testing/utils/mountWithStore.tsx diff --git a/app/src/App/__mocks__/portal.tsx b/app/src/App/__mocks__/portal.tsx deleted file mode 100644 index 67fd57af2de..00000000000 --- a/app/src/App/__mocks__/portal.tsx +++ /dev/null @@ -1,12 +0,0 @@ -// mock portal for enzyme tests -import * as React from 'react' - -interface Props { - children: React.ReactNode -} - -// replace Portal with a pass-through React.Fragment -export const Portal = ({ children }: Props): JSX.Element => <>{children} - -export const PortalRoot = (): JSX.Element => <> -export const TopPortalRoot = (): JSX.Element => <> diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/ConnectModal.test.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/ConnectModal.test.tsx index 37ae928218e..2a42de5819b 100644 --- a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/ConnectModal.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/ConnectModal.test.tsx @@ -1,202 +1,3 @@ -import * as React from 'react' -import { Formik } from 'formik' -import { shallow, mount } from 'enzyme' - -import * as Fixtures from '../../../../../../redux/networking/__fixtures__' -import * as FormFields from '../form-fields' - -import { ConnectModal, ConnectModalComponent } from '..' -import { FormModal } from '../FormModal' -import { ConnectFormField } from '../../types' - -import type { ShallowWrapper } from 'enzyme' - -jest.mock('../form-fields') - -const getConnectFormFields = FormFields.getConnectFormFields as jest.MockedFunction< - typeof FormFields.getConnectFormFields -> - -const validateConnectFormFields = FormFields.validateConnectFormFields as jest.MockedFunction< - typeof FormFields.validateConnectFormFields -> - -const connectFormToConfigureRequest = FormFields.connectFormToConfigureRequest as jest.MockedFunction< - typeof FormFields.connectFormToConfigureRequest -> - -const robotName = 'robotName' -const eapOptions = [Fixtures.mockEapOption] -const wifiKeys = [Fixtures.mockWifiKey] - describe("SelectNetwork's ConnectModal", () => { - const handleConnect = jest.fn() - const handleCancel = jest.fn() - - beforeEach(() => { - getConnectFormFields.mockReturnValue([]) - validateConnectFormFields.mockReturnValue({}) - connectFormToConfigureRequest.mockReturnValue(null) - }) - - afterEach(() => { - jest.resetAllMocks() - }) - - describe('Formik wrapper', () => { - const render = ( - network: - | React.ComponentProps['network'] - | null = null - ): ShallowWrapper> => { - return shallow( - - ) - } - - it('wraps ConnectModalComponent in a Formik wrapper', () => { - const wrapper = render() - const formik = wrapper.find(Formik) - const component = wrapper.find(ConnectModalComponent) - - expect(formik.prop('initialValues')).toEqual({}) - expect(formik.prop('onSubmit')).toEqual(expect.any(Function)) - expect(formik.prop('validate')).toEqual(expect.any(Function)) - expect(formik.prop('validateOnMount')).toBe(true) - expect(component.props()).toEqual({ - robotName, - eapOptions, - wifiKeys, - network: null, - onConnect: handleConnect, - onCancel: handleCancel, - }) - }) - - it('calls onConnect on submit', () => { - const network = Fixtures.mockWifiNetwork - const wrapper = render(network) - const formik: ShallowWrapper< - React.ComponentProps - > = wrapper.find(Formik) - const mockValues = { ssid: 'foobar' } as any - const mockRequest = { ssid: 'foobar', hidden: false } - - connectFormToConfigureRequest.mockReturnValue(mockRequest) - formik.invoke('onSubmit')?.(mockValues, {} as any) - - expect(connectFormToConfigureRequest).toHaveBeenCalledWith( - network, - mockValues - ) - expect(handleConnect).toHaveBeenCalledWith(mockRequest) - }) - - it('does not call onConnect if request comes back null', () => { - const network = Fixtures.mockWifiNetwork - const wrapper = render(network) - const formik = wrapper.find(Formik) - const mockValues = {} - - connectFormToConfigureRequest.mockReturnValue(null) - formik.invoke('onSubmit')?.(mockValues, {} as any) - - expect(handleConnect).not.toHaveBeenCalled() - }) - - it('validates using validateConnectFormFields', () => { - const network = Fixtures.mockWifiNetwork - const wrapper = render(network) - const formik = wrapper.find(Formik) - const mockValues = { ssid: 'foobar' } - const mockErrors = { ssid: 'oh no!' } - - validateConnectFormFields.mockReturnValue(mockErrors) - - const result = formik.invoke('validate')?.(mockValues) - - expect(result).toEqual(mockErrors) - expect(validateConnectFormFields).toHaveBeenCalledWith( - network, - eapOptions, - mockValues - ) - }) - }) - - describe('connected form', () => { - const handleSubmit = jest.fn() - const handleValidate = jest.fn() - - const render = ( - network: - | React.ComponentProps['network'] - | null = null - ): ReturnType => { - return mount( - , - { - wrappingComponent: Formik, - wrappingComponentProps: { - initialValues: {}, - onSubmit: handleSubmit, - validate: handleValidate, - }, - } - ) - } - - it('renders a FormModal for unknown network', () => { - const wrapper = render() - const modal = wrapper.find(FormModal) - - expect(modal.prop('id')).toContain(robotName) - expect(modal.prop('network')).toEqual(null) - expect(modal.prop('onCancel')).toBe(handleCancel) - }) - - it('renders a connect form for an known network', () => { - const network = Fixtures.mockWifiNetwork - const wrapper = render(network) - const modal = wrapper.find(FormModal) - - expect(modal.prop('network')).toEqual(network) - }) - - it('passes fields to the connect form modal', () => { - const mockFields: ConnectFormField[] = [ - { - type: 'text', - name: 'fieldName', - label: '* Field Name', - isPassword: false, - }, - ] as any - - getConnectFormFields.mockReturnValue(mockFields) - - const wrapper = render() - const modal = wrapper.find(FormModal) - - expect(modal.prop('fields')).toEqual(mockFields) - }) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/FormModal.test.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/FormModal.test.tsx index 590c46f4539..c1efe64434f 100644 --- a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/FormModal.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/FormModal.test.tsx @@ -1,220 +1,3 @@ -import * as React from 'react' -import { mount } from 'enzyme' -import { Formik, Form } from 'formik' -import * as Fixtures from '../../../../../../redux/networking/__fixtures__' -import * as Networking from '../../../../../../redux/networking' -import { ScrollableAlertModal } from '../../../../../../molecules/modals' -import * as Constants from '../../constants' -import { TextField } from '../TextField' -import { KeyFileField } from '../KeyFileField' -import { SecurityField } from '../SecurityField' -import { FormModal } from '../FormModal' - -import type { FormModalProps } from '../FormModal' - -// KeyFileField is wired to redux, so mock it out -jest.mock('../KeyFileField', () => ({ KeyFileField: () => null })) - -const id = 'formId' -const robotName = 'robotName' -const eapOptions = [Fixtures.mockEapOption] -const wifiKeys = [Fixtures.mockWifiKey] - describe('FormModal', () => { - const handleCancel = jest.fn() - - const render = ( - network: FormModalProps['network'] = null, - fields: FormModalProps['fields'] = [], - isValid: FormModalProps['isValid'] = false - ) => { - return mount( - , - { - wrappingComponent: Formik, - wrappingComponentProps: { initialValues: {} }, - } - ) - } - - afterEach(() => { - jest.resetAllMocks() - }) - - it('should render a with a form', () => { - const wrapper = render() - const modal = wrapper.find(ScrollableAlertModal) - - expect(modal.prop('alertOverlay')).toEqual(true) - expect(modal.prop('iconName')).toEqual('wifi') - expect(modal.prop('onCloseClick')).toEqual(handleCancel) - }) - - it('should render a form with attached cancel and submit buttons', () => { - const wrapper = render(null, [], true) - const modal = wrapper.find(ScrollableAlertModal) - const form = modal.find(Form) - const formId = form.prop('id') - - expect(formId).toBe(id) - expect(modal.prop('buttons')).toEqual([ - { children: 'cancel', onClick: handleCancel }, - { children: 'connect', type: 'submit', form: formId, disabled: false }, - ]) - }) - - it('should disable the button if form is not valid', () => { - const wrapper = render(null, [], false) - const modal = wrapper.find(ScrollableAlertModal) - const form = modal.find(Form) - const formId = form.prop('id') - - expect(modal.prop('buttons')).toEqual([ - { children: 'cancel', onClick: handleCancel }, - { children: 'connect', type: 'submit', form: formId, disabled: true }, - ]) - }) - - it('should render the correct heading for an unknown network', () => { - const wrapper = render() - const heading = wrapper.find(ScrollableAlertModal).prop('heading') - - expect(heading).toMatch(/Find and join a Wi-Fi network/) - }) - - it('should render the correct heading for a known network', () => { - const network = Fixtures.mockWifiNetwork - const wrapper = render(network) - const heading = wrapper.find(ScrollableAlertModal).prop('heading') - - expect(heading).toContain(`Connect to ${network.ssid}`) - }) - - it('should render the correct body copy for an unknown network', () => { - const wrapper = render() - const modal = wrapper.find(ScrollableAlertModal) - const copy = modal.find('p').html() - - expect(copy).toMatch(/Enter the network name and security/) - }) - - it('renders proper body for WPA-PSK network', () => { - const network = { - ...Fixtures.mockWifiNetwork, - securityType: Networking.SECURITY_WPA_PSK, - } - - const wrapper = render(network) - const modal = wrapper.find(ScrollableAlertModal) - const copy = modal.find('p').html() - - expect(copy).toMatch(/requires a WPA2 password/) - }) - - it('renders proper body for WPA-EAP network', () => { - const network = { - ...Fixtures.mockWifiNetwork, - securityType: Networking.SECURITY_WPA_EAP, - } - - const wrapper = render(network) - const alert = wrapper.find(ScrollableAlertModal) - const copy = alert.find('p').html() - - expect(copy).toMatch(/requires 802.1X authentication/) - }) - - describe('string fields', () => { - const stringField = { - type: Constants.FIELD_TYPE_TEXT, - name: 'fieldName', - label: '* Field Name', - isPassword: false, - } - - it('can render a string field', () => { - const fields = [stringField] - const wrapper = render(null, fields) - const field = wrapper.find(TextField) - - expect(field.prop('isPassword')).toBe(false) - expect(field.prop('label')).toBe('* Field Name') - expect(field.prop('name')).toBe('fieldName') - expect(field.prop('id')).toMatch(/__fieldName$/) - }) - - it('can render a password field', () => { - const fields = [{ ...stringField, isPassword: true }] - const wrapper = render(null, fields) - const field = wrapper.find(TextField) - - expect(field.prop('isPassword')).toBe(true) - expect(field.prop('label')).toBe('* Field Name') - expect(field.prop('name')).toBe('fieldName') - expect(field.prop('id')).toMatch(/__fieldName$/) - }) - }) - - describe('wifi key fields', () => { - const keyField = { - type: Constants.FIELD_TYPE_KEY_FILE, - name: 'fieldName', - label: '* Field Name', - placeholder: 'Select file', - robotName, - wifiKeys, - } - - it('can render a "file" field', () => { - const fields = [keyField] - const wrapper = render(null, fields) - const field = wrapper.find(KeyFileField) - - expect(field.prop('label')).toBe('* Field Name') - expect(field.prop('name')).toBe('fieldName') - expect(field.prop('placeholder')).toBe('Select file') - expect(field.prop('id')).toMatch(/__fieldName$/) - expect(field.prop('robotName')).toBe(robotName) - expect(field.prop('wifiKeys')).toBe(wifiKeys) - }) - }) - - describe('wifi security fields', () => { - const securityField = { - type: Constants.FIELD_TYPE_SECURITY, - name: 'securityType', - label: '* Authentication', - showAllOptions: true, - placeholder: 'Select authentication method', - eapOptions, - } - - it('can render a "security" field for unknown network', () => { - const fields = [securityField] - const wrapper = render(null, fields) - const field = wrapper.find(SecurityField) - - expect(field.prop('label')).toBe('* Authentication') - expect(field.prop('name')).toBe('securityType') - expect(field.prop('id')).toMatch(/__securityType$/) - expect(field.prop('showAllOptions')).toBe(true) - expect(field.prop('placeholder')).toBe('Select authentication method') - expect(field.prop('eapOptions')).toBe(eapOptions) - }) - - it('can render a "security" field for known network', () => { - const network = Fixtures.mockWifiNetwork - const fields = [{ ...securityField, showAllOptions: false }] - const wrapper = render(network, fields) - const field = wrapper.find(SecurityField) - - expect(field.prop('showAllOptions')).toBe(false) - }) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/KeyFileField.test.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/KeyFileField.test.tsx index 2306f6a3373..78b532daaa8 100644 --- a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/KeyFileField.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/KeyFileField.test.tsx @@ -1,163 +1,3 @@ -import * as React from 'react' -import { shallow } from 'enzyme' - -import * as Fixtures from '../../../../../../redux/networking/__fixtures__' -import { SelectField } from '@opentrons/components' -import { UploadKeyInput } from '../UploadKeyInput' -import { KeyFileField } from '../KeyFileField' -import * as FormState from '../form-state' - -import { LABEL_ADD_NEW_KEY } from '../../i18n' - -import type { ShallowWrapper } from 'enzyme' -import type { ActionMeta } from 'react-select' -import type { SelectOption } from '@opentrons/components' - -jest.mock('../form-state') - -const useConnectFormField = FormState.useConnectFormField as jest.MockedFunction< - typeof FormState.useConnectFormField -> - describe('ConnectModal KeyFileField', () => { - const fieldId = 'field-id' - const fieldName = 'field-name' - const fieldLabel = 'Field Label:' - const fieldPlaceholder = 'Placeholder...' - const fieldError = 'oh no!' - const robotName = 'robot-name' - const wifiKeys = [ - { ...Fixtures.mockWifiKey, id: 'foo', name: 'foo.crt' }, - { ...Fixtures.mockWifiKey, id: 'bar', name: 'bar.crt' }, - { ...Fixtures.mockWifiKey, id: 'baz', name: 'baz.crt' }, - ] - const setValue = jest.fn() - const setTouched = jest.fn() - - const render = (value: any | null = null): ReturnType => { - useConnectFormField.mockImplementation(name => { - expect(name).toBe(fieldName) - return { - value, - setValue, - setTouched, - error: fieldError, - onChange: () => {}, - onBlur: () => {}, - } - }) - - return shallow( - - ) - } - - it('renders a SelectField', () => { - const wrapper = render('bar') - const select = wrapper.find(SelectField) - - expect(select.prop('id')).toEqual(fieldId) - expect(select.prop('name')).toEqual(fieldName) - expect(select.prop('error')).toEqual(fieldError) - expect(select.prop('placeholder')).toEqual(fieldPlaceholder) - expect(select.prop('value')).toEqual('bar') - }) - - it('renders a label for the field', () => { - const wrapper = render() - - const label = wrapper - .find(`[label="${fieldLabel}"]`) - .dive() - .find(`[htmlFor="${fieldId}"]`) - - expect(label.text()).toEqual(fieldLabel) - }) - - it('renders wifiKeys as options', () => { - const wrapper = render() - const select = wrapper.find(SelectField) - - expect(select.prop('options')).toEqual( - expect.arrayContaining([ - { - options: [ - { value: 'foo', label: 'foo.crt' }, - { value: 'bar', label: 'bar.crt' }, - { value: 'baz', label: 'baz.crt' }, - ], - }, - ]) - ) - }) - - it('renders an UploadKeyInput and an option to trigger it', () => { - const wrapper = render() - const select = wrapper.find(SelectField) - const upload = wrapper.find(UploadKeyInput) - const expected = { value: expect.any(String), label: LABEL_ADD_NEW_KEY } - - expect(upload.prop('label')).toEqual(LABEL_ADD_NEW_KEY) - expect(upload.prop('robotName')).toEqual(robotName) - expect(select.prop('options')).toEqual( - expect.arrayContaining([ - { - options: [expected], - }, - ]) - ) - }) - - it('updates the field value with UploadKeyInput::onUpload', () => { - const wrapper = render() - const upload: ShallowWrapper< - React.ComponentProps - > = wrapper.find(UploadKeyInput) - - upload.invoke('onUpload')?.('new-key-id') - expect(setValue).toHaveBeenCalledWith('new-key-id') - }) - - it('updates the field value with SelectField::onValueChange', () => { - const wrapper = render() - const select = wrapper.find(SelectField) - - select.invoke('onValueChange')?.( - fieldName, - 'new-key-id', - ('input-change' as unknown) as ActionMeta - ) - expect(setValue).toHaveBeenCalledWith('new-key-id') - }) - - it('does not update the field value when add new option is selected', () => { - const wrapper = render() - const select = wrapper.find(SelectField) - const options = select.prop('options').flatMap((o: any) => o.options) - const addNewOpt = options.find(o => o?.label === LABEL_ADD_NEW_KEY) - - select.invoke('onValueChange')?.( - fieldName, - addNewOpt?.value, - ('input-change' as unknown) as ActionMeta - ) - expect(setValue).not.toHaveBeenCalledWith(addNewOpt?.value) - }) - - it('updates field touched with SelectField::onLoseFocus', () => { - const wrapper = render() - const select: ShallowWrapper< - React.ComponentProps - > = wrapper.find(SelectField) - - select.invoke('onLoseFocus')?.('') - expect(setTouched).toHaveBeenCalledWith(true) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/SecurityField.test.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/SecurityField.test.tsx index 2f02b498b78..f9b91b9ca4f 100644 --- a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/SecurityField.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/SecurityField.test.tsx @@ -1,133 +1,3 @@ -import * as React from 'react' -import { mount } from 'enzyme' - -import * as Fixtures from '../../../../../../redux/networking/__fixtures__' -import { SelectField } from '@opentrons/components' -import { SecurityField } from '../SecurityField' -import * as FormState from '../form-state' - -import { LABEL_SECURITY_NONE, LABEL_SECURITY_PSK } from '../../i18n' -import { SECURITY_NONE, SECURITY_WPA_PSK } from '../../constants' -import type { ActionMeta } from 'react-select' -import type { SelectOption } from '@opentrons/components' - -jest.mock('../form-state') - -const useConnectFormField = FormState.useConnectFormField as jest.MockedFunction< - typeof FormState.useConnectFormField -> - describe('ConnectModal SecurityField', () => { - const fieldId = 'field-id' - const fieldName = 'field-name' - const fieldLabel = 'Field Label:' - const fieldPlaceholder = 'Placeholder...' - const eapOptions = [ - { ...Fixtures.mockEapOption, name: 'option1', displayName: 'Option 1' }, - { ...Fixtures.mockEapOption, name: 'option2', displayName: 'Option 2' }, - { ...Fixtures.mockEapOption, name: 'option3', displayName: 'Option 3' }, - ] - const setValue = jest.fn() - const setTouched = jest.fn() - - const render = ( - value: any | null = null, - error: any | null = null, - showAllOptions: any | null = false - ): ReturnType => { - useConnectFormField.mockImplementation(name => { - expect(name).toBe(fieldName) - return { - value, - error, - setValue, - setTouched, - onChange: () => {}, - onBlur: () => {}, - } - }) - - return mount( - - ) - } - - it('renders a SelectField', () => { - const wrapper = render('value', 'error') - const select = wrapper.find(SelectField) - - expect(select.prop('id')).toEqual(fieldId) - expect(select.prop('name')).toEqual(fieldName) - expect(select.prop('placeholder')).toEqual(fieldPlaceholder) - expect(select.prop('value')).toEqual('value') - expect(select.prop('error')).toEqual('error') - }) - - it('renders a label for the field', () => { - const wrapper = render() - const label = wrapper.find(`label[htmlFor="${fieldId}"]`) - - expect(label.text()).toEqual(fieldLabel) - }) - - it('renders EAP security options', () => { - const wrapper = render() - const select = wrapper.find(SelectField) - - expect(select.prop('options')).toEqual( - expect.arrayContaining([ - { - options: [ - { value: 'option1', label: 'Option 1' }, - { value: 'option2', label: 'Option 2' }, - { value: 'option3', label: 'Option 3' }, - ], - }, - ]) - ) - }) - - it('can render all security options', () => { - const wrapper = render(null, null, true) - const select = wrapper.find(SelectField) - - expect(select.prop('options')).toEqual( - expect.arrayContaining([ - { - options: [{ value: SECURITY_NONE, label: LABEL_SECURITY_NONE }], - }, - { - options: [{ value: SECURITY_WPA_PSK, label: LABEL_SECURITY_PSK }], - }, - ]) - ) - }) - - it('triggers a value update if selected', () => { - const wrapper = render() - const select = wrapper.find(SelectField) - - select.invoke('onValueChange')?.( - fieldName, - SECURITY_NONE, - ('input-change' as unknown) as ActionMeta - ) - - expect(setValue).toHaveBeenCalledWith(SECURITY_NONE) - }) - - it('triggers a touched update if blurred', () => { - const wrapper = render() - const select = wrapper.find(SelectField) - - select.invoke('onLoseFocus')?.(fieldName) - expect(setTouched).toHaveBeenCalledWith(true) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/TextField.test.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/TextField.test.tsx index 4af3ce0a267..a3ee93706a0 100644 --- a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/TextField.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/TextField.test.tsx @@ -1,115 +1,3 @@ -import * as React from 'react' -import { act } from 'react-dom/test-utils' -import { mount } from 'enzyme' -import { TextField } from '../TextField' -import * as FormState from '../form-state' - -jest.mock('../form-state') - -const useConnectFormField = FormState.useConnectFormField as jest.MockedFunction< - typeof FormState.useConnectFormField -> - describe('ConnectModal TextField', () => { - const fieldId = 'field-id' - const fieldName = 'field-name' - const fieldValue = 'field-value' - const handleChange = jest.fn() - const handleBlur = jest.fn() - - const fieldLabel = 'Field Label:' - const inputSelector = `input[name="${fieldName}"]` - const labelSelector = `label[htmlFor="${fieldId}"]` - const checkboxSelector = 'input[type="checkbox"]' - - const render = ( - isPassword: boolean = false, - error: any | null = null - ): ReturnType => { - useConnectFormField.mockImplementation(name => { - expect(name).toBe(fieldName) - return { - value: fieldValue, - error, - onChange: handleChange, - onBlur: handleBlur, - setValue: () => {}, - setTouched: () => {}, - } - }) - - return mount( - - ) - } - - afterEach(() => { - jest.resetAllMocks() - }) - - it('renders an input and passes field props through', () => { - const wrapper = render() - const input = wrapper.find(inputSelector) - - expect(input.prop('id')).toEqual(fieldId) - expect(input.prop('name')).toEqual(fieldName) - expect(input.prop('value')).toEqual(fieldValue) - expect(input.prop('onChange')).toEqual(handleChange) - expect(input.prop('onBlur')).toEqual(handleBlur) - }) - - it('renders an input[type="text"] if props.type is string', () => { - const wrapper = render() - const input = wrapper.find(inputSelector) - - expect(input.prop('type')).toEqual('text') - }) - - it('renders an input[type="password"] if props.type is password', () => { - const wrapper = render(true) - const input = wrapper.find(inputSelector) - - expect(input.prop('type')).toEqual('password') - }) - - it('renders a checkbox to toggle showing password if type password', () => { - const wrapper = render(true) - const checkbox = wrapper.find(checkboxSelector) - - expect(checkbox).toHaveLength(1) - expect(checkbox.prop('checked')).toEqual(false) - }) - - it('toggling the checkbox switches password input to text', () => { - const wrapper = render(true) - const checkbox = wrapper.find(checkboxSelector) - - act(() => checkbox.invoke('onChange')?.({} as React.ChangeEvent)) - wrapper.update() - expect(wrapper.find(checkboxSelector).prop('checked')).toEqual(true) - expect(wrapper.find(inputSelector).prop('type')).toEqual('text') - - act(() => checkbox.invoke('onChange')?.({} as React.ChangeEvent)) - wrapper.update() - expect(wrapper.find(checkboxSelector).prop('checked')).toEqual(false) - expect(wrapper.find(inputSelector).prop('type')).toEqual('password') - }) - - it('renders a label attached to the input', () => { - const wrapper = render() - const label = wrapper.find(labelSelector) - - expect(label.text()).toEqual(fieldLabel) - }) - - it('can render an error message', () => { - const wrapper = render(false, 'oh no!') - - expect(wrapper.html()).toContain('oh no!') - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/UploadKeyInput.test.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/UploadKeyInput.test.tsx index 870f18433f4..48bf5edec0a 100644 --- a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/UploadKeyInput.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/UploadKeyInput.test.tsx @@ -1,109 +1,3 @@ -import * as React from 'react' -import { Provider } from 'react-redux' -import { act } from 'react-dom/test-utils' -import { mount } from 'enzyme' - -import * as Fixtures from '../../../../../../redux/networking/__fixtures__' -import * as Networking from '../../../../../../redux/networking' -import { UploadKeyInput } from '../UploadKeyInput' - -import type { Action } from '../../../../../../redux/types' - -jest.mock('../../../../../../redux/networking/selectors') - -const mockState = { state: true, mock: true } -const mockRobotName = 'robot-name' as any -const mockFile = new File(['key-contents'], 'key.crt') - -const mockGetWifiKeyByRequestId = Networking.getWifiKeyByRequestId as jest.MockedFunction< - typeof Networking.getWifiKeyByRequestId -> - describe('ConnectForm UploadKey input field', () => { - const handleUpload = jest.fn() - const label = 'field-label' - let dispatch: any - let mockStore: any - let render: (ref?: any) => ReturnType - - beforeEach(() => { - dispatch = jest.fn() - mockStore = { - dispatch, - subscribe: () => {}, - getState: () => mockState, - } - - mockGetWifiKeyByRequestId.mockReturnValue(null) - - render = ref => { - return mount( - , - { - wrappingComponent: Provider, - wrappingComponentProps: { store: mockStore }, - } - ) - } - }) - - afterEach(() => { - jest.clearAllMocks() - jest.clearAllTimers() - jest.useRealTimers() - }) - - it('has an input type=file', () => { - const wrapper = render() - const input = wrapper.find('input[type="file"]') - - expect(input).toHaveLength(1) - expect(input.prop('aria-label')).toEqual(label) - }) - - it('dispatches networking:POST_WIFI_KEYS on file input', () => { - const wrapper = render() - const input = wrapper.find('input[type="file"]') - - act(() => { - input.invoke('onChange')?.({ target: { files: [mockFile] } } as any) - }) - - expect(dispatch).toHaveBeenCalledWith( - expect.objectContaining({ - ...Networking.postWifiKeys(mockRobotName, mockFile), - meta: { requestId: expect.any(String) }, - }) - ) - }) - - it('calls onUpload with ID of POSTed key', () => { - const wrapper = render() - const input = wrapper.find('input[type="file"]') - - act(() => { - input.invoke('onChange')?.({ target: { files: [mockFile] } } as any) - const postAction = dispatch.mock.calls.find(([action]: Action[]) => { - return action.type === Networking.POST_WIFI_KEYS - }) - const requestId = postAction?.[0].meta.requestId - const mockKey = { ...Fixtures.mockWifiKey, requestId } - - mockGetWifiKeyByRequestId.mockImplementation( - (state, robotName, reqId) => { - expect(state).toEqual(mockState) - expect(robotName).toEqual(mockRobotName) - return reqId === requestId ? mockKey : null - } - ) - }) - wrapper.update() - - expect(handleUpload).toHaveBeenCalledWith(Fixtures.mockWifiKey.id) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/form-state.test.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/form-state.test.tsx index fdd50c8d84f..5ab862d776e 100644 --- a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/form-state.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/__tests__/form-state.test.tsx @@ -1,166 +1,3 @@ -import * as React from 'react' -import { mount } from 'enzyme' -import * as Formik from 'formik' - -import { - useResetFormOnSecurityChange, - useConnectFormField, -} from '../form-state' - -import type { ConnectFormFieldProps } from '../../types' - -// TODO(mc, 2020-03-13): DANGER: mocking Formik hooks here is code smell, -// but unfortunately the async nature of validation in Formik v2 basically -// means Formik hooks can't be tested in `act`. This should be resolved by the -// removal of async validation in Formik v3 -// https://github.com/jaredpalmer/formik/issues/1543 -// https://github.com/jaredpalmer/formik/pull/2360 -jest.mock('formik') - -const useFormikContext = Formik.useFormikContext as jest.MockedFunction< - typeof Formik.useFormikContext -> - -const useField = Formik.useField as jest.MockedFunction - describe('ConnectModal state hooks', () => { - afterEach(() => { - jest.resetAllMocks() - }) - - describe('useResetFormOnSecurityChange', () => { - const setErrors = jest.fn() - const setTouched = jest.fn() - const setValues = jest.fn() - - const mockFormOnce = ( - values: any, - errors: any = {}, - touched: any = {} - ): void => { - useFormikContext.mockReturnValueOnce({ - values, - errors, - touched, - setValues, - setErrors, - setTouched, - } as any) - } - - const TestUseResetFormOnSecurityChange = (): JSX.Element => { - useResetFormOnSecurityChange() - return <> - } - - const render = (): ReturnType => { - return mount() - } - - it('resets form values if values.securityType changes', () => { - mockFormOnce({ ssid: 'foo', securityType: 'baz', psk: 'baz' }) - mockFormOnce({ ssid: 'foo', securityType: 'qux', psk: 'baz' }) - const wrapper = render() - - wrapper.setProps({}) - - expect(setValues).toHaveBeenCalledTimes(1) - expect(setValues).toHaveBeenCalledWith({ - ssid: 'foo', - securityType: 'qux', - }) - }) - - it('resets form errors if values.securityType changes', () => { - const errors = { ssid: 'missing!', psk: 'too short!' } - mockFormOnce({ ssid: '', securityType: 'baz', psk: 'baz' }, errors) - mockFormOnce({ ssid: '', securityType: 'qux', psk: 'baz' }, errors) - const wrapper = render() - - wrapper.setProps({}) - - expect(setErrors).toHaveBeenCalledTimes(1) - expect(setErrors).toHaveBeenCalledWith({ ssid: 'missing!' }) - }) - - it('resets form touched if values.securityType changes', () => { - const touched = { ssid: false, psk: true } - mockFormOnce({ ssid: '', securityType: 'baz', psk: 'baz' }, {}, touched) - mockFormOnce({ ssid: '', securityType: 'qux', psk: 'baz' }, {}, touched) - const wrapper = render() - - wrapper.setProps({}) - - expect(setTouched).toHaveBeenCalledTimes(1) - expect(setTouched).toHaveBeenCalledWith( - { - ssid: false, - securityType: true, - }, - false - ) - }) - }) - - describe('useConnectFormField', () => { - const fieldName = 'field-name' - const onChange = jest.fn() - const onBlur = jest.fn() - const setValue = jest.fn() - const setTouched = jest.fn() - - const mockFieldOnce = (value?: any, error?: any, touched?: any): void => { - const fieldProps: any = { value, onChange, onBlur } - const fieldMeta: any = { error, touched } - const fieldHelpers: any = { setValue, setTouched } - useField.mockReturnValueOnce([fieldProps, fieldMeta, fieldHelpers]) - } - - const MockField = (props: ConnectFormFieldProps): JSX.Element => <> - - const TestUseConnectFormField = (): JSX.Element => { - const fieldProps = useConnectFormField(fieldName) - return - } - - const render = (): ReturnType => - mount() - - it('passes field name to useField', () => { - mockFieldOnce() - render() - expect(useField).toHaveBeenCalledWith(fieldName) - }) - - it('passes down field props', () => { - mockFieldOnce('value', 'error', true) - const wrapper = render() - expect(wrapper.find(MockField).props()).toEqual({ - value: 'value', - error: 'error', - onChange, - onBlur, - setValue, - setTouched, - }) - }) - - it('maps undefined to null', () => { - mockFieldOnce(undefined, undefined, true) - const wrapper = render() - expect(wrapper.find(MockField).props()).toMatchObject({ - value: null, - error: null, - }) - }) - - it('sets error to null if not touched', () => { - mockFieldOnce('value', 'error', false) - const wrapper = render() - expect(wrapper.find(MockField).props()).toMatchObject({ - value: 'value', - error: null, - }) - }) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/SelectSsid/__tests__/NetworkOptionLabel.test.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/SelectSsid/__tests__/NetworkOptionLabel.test.tsx index b1d19ca9548..ac9e48fe8ea 100644 --- a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/SelectSsid/__tests__/NetworkOptionLabel.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/SelectSsid/__tests__/NetworkOptionLabel.test.tsx @@ -1,86 +1,3 @@ -import * as React from 'react' -import { mount } from 'enzyme' - -import * as Fixtures from '../../../../../../redux/networking/__fixtures__' -import { SECURITY_NONE } from '../../constants' -import { NetworkOptionLabel } from '../NetworkOptionLabel' - -import type { NetworkOptionLabelProps } from '../NetworkOptionLabel' - describe('NetworkOptionLabel presentational component', () => { - let props: NetworkOptionLabelProps - const render = () => mount() - - beforeEach(() => { - props = { ...Fixtures.mockWifiNetwork, showConnectedIcon: true } - }) - - it('renders the ssid of the network', () => { - const wrapper = render() - - expect(wrapper.html()).toContain(props.ssid) - }) - - it('renders the security icon if network has security', () => { - const wrapper = render() - const icon = wrapper.find('Icon[name="lock"]') - expect(icon).toHaveLength(1) - }) - - it('renders no security icon if network has no security', () => { - props = { ...props, securityType: SECURITY_NONE } - const wrapper = render() - const icon = wrapper.find('Icon[name="lock"]') - expect(icon).toHaveLength(0) - }) - - it('renders a check icon if network is active', () => { - props = { ...props, active: true, showConnectedIcon: true } - - const wrapper = render() - const icon = wrapper.find('Icon[name="check"]') - expect(icon).toHaveLength(1) - }) - - it('renders no check icon if network is not active', () => { - props = { ...props, active: false, showConnectedIcon: true } - const wrapper = render() - const icon = wrapper.find('Icon[name="check"]') - expect(icon).toHaveLength(0) - }) - - it('renders no check icon if network is active but showConnectedIcon is false', () => { - props = { ...props, active: true, showConnectedIcon: false } - const wrapper = render() - const icon = wrapper.find('Icon[name="check"]') - expect(icon).toHaveLength(0) - }) - - it('renders very low signal icon when props.signal is very low', () => { - props = { ...props, signal: 24 } - const wrapper = render() - const icon = wrapper.find('Icon[name="ot-wifi-0"]') - expect(icon).toHaveLength(1) - }) - - it('renders low signal icon when props.signal is "low"', () => { - props = { ...props, signal: 49 } - const wrapper = render() - const icon = wrapper.find('Icon[name="ot-wifi-1"]') - expect(icon).toHaveLength(1) - }) - - it('renders medium signal icon when props.signal is "medium"', () => { - props = { ...props, signal: 74 } - const wrapper = render() - const icon = wrapper.find('Icon[name="ot-wifi-2"]') - expect(icon).toHaveLength(1) - }) - - it('renders high signal icon when props.signal is "high"', () => { - props = { ...props, signal: 76 } - const wrapper = render() - const icon = wrapper.find('Icon[name="wifi"]') - expect(icon).toHaveLength(1) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/SelectSsid/__tests__/SelectSsid.test.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/SelectSsid/__tests__/SelectSsid.test.tsx index bba3dee4009..7e15ed7943b 100644 --- a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/SelectSsid/__tests__/SelectSsid.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/SelectSsid/__tests__/SelectSsid.test.tsx @@ -1,149 +1,3 @@ -import * as React from 'react' -import { mount } from 'enzyme' -import { CONTEXT_VALUE, CONTEXT_MENU } from '@opentrons/components' - -import { SelectField } from '../../../../../../atoms/SelectField' -import * as Fixtures from '../../../../../../redux/networking/__fixtures__' -import { LABEL_JOIN_OTHER_NETWORK } from '../../i18n' - -import { SelectSsid } from '..' -import { NetworkOptionLabel } from '../NetworkOptionLabel' - -import type { ActionMeta } from 'react-select' -import type { SelectOption } from '../../../../../../atoms/SelectField/Select' - -const mockWifiList = [ - { ...Fixtures.mockWifiNetwork, ssid: 'foo', active: true }, - { ...Fixtures.mockWifiNetwork, ssid: 'bar' }, - { ...Fixtures.mockWifiNetwork, ssid: 'baz' }, -] - describe('SelectSsid component', () => { - const handleConnect = jest.fn() - const handleJoinOther = jest.fn() - let mockIsRobotBusy = false - - const render = () => { - return mount( - - ) - } - - afterEach(() => { - jest.resetAllMocks() - }) - - it('renders a SelectField', () => { - const wrapper = render() - const selectField = wrapper.find(SelectField) - - expect(selectField).toHaveLength(1) - }) - - it('renders a disabled SelectField if a robot is busy', () => { - mockIsRobotBusy = true - const wrapper = render() - const selectField = wrapper.find(SelectField) - - expect(selectField.prop('disabled')).toBe(true) - }) - - it('maps ssid list to an ssid option group', () => { - const wrapper = render() - const selectField = wrapper.find(SelectField) - const options = selectField.prop('options') - - expect(options).toContainEqual({ - options: [{ value: 'foo' }, { value: 'bar' }, { value: 'baz' }], - }) - }) - - it('adds an option group for join other network', () => { - const wrapper = render() - const selectField = wrapper.find(SelectField) - const options = selectField.prop('options') - - expect(options).toContainEqual({ - options: [ - { - value: expect.any(String), - label: LABEL_JOIN_OTHER_NETWORK, - }, - ], - }) - }) - - it('if user selects ssid value, onSelect is called with ssid', () => { - const wrapper = render() - const selectField = wrapper.find(SelectField) - - selectField.invoke('onValueChange')?.( - '_', - 'foo', - ('input-change' as unknown) as ActionMeta - ) - - expect(handleConnect).toHaveBeenCalledWith('foo') - }) - - it('if user selects join other value, onJoinOther is called', () => { - const wrapper = render() - const selectField = wrapper.find(SelectField) - const options = selectField.prop('options').flatMap((o: any) => o.options) - const joinOtherValue = options.find( - o => o.label === LABEL_JOIN_OTHER_NETWORK - )?.value - - expect(joinOtherValue).toEqual(expect.any(String)) - selectField.invoke('onValueChange')?.( - '_', - joinOtherValue, - ('input-change' as unknown) as ActionMeta - ) - - expect(handleJoinOther).toHaveBeenCalled() - }) - - it('formats the wifi options as s', () => { - const wrapper = render() - const selectField = wrapper.find(SelectField) - - const expectedFoo = mount( - - ) - const expectedBar = mount( - - ) - const fooLabel = selectField.prop('formatOptionLabel')?.({ value: 'foo' }, { - context: CONTEXT_VALUE, - } as any) as any - const barLabel = selectField.prop('formatOptionLabel')?.({ value: 'bar' }, { - context: CONTEXT_MENU, - } as any) as any - - expect(mount(fooLabel)).toEqual(expectedFoo) - expect(mount(barLabel)).toEqual(expectedBar) - }) - - it('formats the join other label', () => { - const wrapper = render() - const selectField = wrapper.find(SelectField) - const options = selectField.prop('options').flatMap((o: any) => o.options) - const joinOtherOpt = options.find(o => o.label === LABEL_JOIN_OTHER_NETWORK) - - expect(joinOtherOpt?.value).toEqual(expect.any(String)) - expect(joinOtherOpt?.label).toEqual(expect.any(String)) - - const label = selectField.prop('formatOptionLabel')?.(joinOtherOpt, { - context: CONTEXT_MENU, - } as any) as any - - expect(mount(label).html()).toContain(joinOtherOpt?.label) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/__tests__/ResultModal.test.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/__tests__/ResultModal.test.tsx index 00f7e9ce389..c748d07f94c 100644 --- a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/__tests__/ResultModal.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/__tests__/ResultModal.test.tsx @@ -1,290 +1,3 @@ -import * as React from 'react' -import { shallow } from 'enzyme' - -import { AlertModal, SpinnerModal } from '@opentrons/components' -import { ErrorModal } from '../../../../../molecules/modals' -import { ResultModal } from '../ResultModal' -import { DISCONNECT, CONNECT, JOIN_OTHER } from '../constants' -import { PENDING, FAILURE, SUCCESS } from '../../../../../redux/robot-api' - -import type { ShallowWrapper } from 'enzyme' -import type { ResultModalProps } from '../ResultModal' - describe("SelectNetwork's ResultModal", () => { - const mockSsid = 'foobar' - const handleClose = jest.fn() - - afterEach(() => { - jest.resetAllMocks() - }) - - describe('pending', () => { - const render: ( - type: ResultModalProps['type'], - ssid?: ResultModalProps['ssid'] - ) => ShallowWrapper> = ( - type, - ssid = mockSsid - ) => { - return shallow( - - ) - } - - it('displays a spinner modal for disconnecting', () => { - const wrapper = render(DISCONNECT) - const spinner = wrapper.find(SpinnerModal) - - expect(spinner).toHaveLength(1) - expect(spinner.props()).toEqual({ - alertOverlay: true, - message: expect.stringContaining( - 'Disconnecting from Wi-Fi network foobar' - ), - }) - }) - - it('displays a spinner modal for connecting', () => { - const wrapper = render(CONNECT) - const spinner = wrapper.find(SpinnerModal) - - expect(spinner).toHaveLength(1) - expect(spinner.props()).toEqual({ - alertOverlay: true, - message: expect.stringContaining('Connecting to Wi-Fi network foobar'), - }) - }) - - it('displays a spinner modal for join other', () => { - const wrapper = render(JOIN_OTHER) - const spinner = wrapper.find(SpinnerModal) - - expect(spinner).toHaveLength(1) - expect(spinner.props()).toEqual({ - alertOverlay: true, - message: expect.stringContaining('Connecting to Wi-Fi network foobar'), - }) - }) - - it('displays a spinner modal even if ssid is not set', () => { - const wrapper = render(JOIN_OTHER, null) - const spinner = wrapper.find(SpinnerModal) - - expect(spinner).toHaveLength(1) - expect(spinner.props()).toEqual({ - alertOverlay: true, - message: expect.stringContaining('Connecting to Wi-Fi'), - }) - }) - }) - - describe('success', () => { - const render: ( - type: ResultModalProps['type'], - ssid?: ResultModalProps['ssid'] - ) => ShallowWrapper> = ( - type, - ssid = mockSsid - ) => { - return shallow( - - ) - } - - it('displays an AlertModal with success message for disconnect', () => { - const wrapper = render(DISCONNECT) - const alert = wrapper.find(AlertModal) - - expect(alert).toHaveLength(1) - expect(alert.props()).toMatchObject({ - alertOverlay: true, - iconName: 'wifi', - heading: 'Successfully disconnected from Wi-Fi', - onCloseClick: handleClose, - buttons: [{ children: 'close', onClick: handleClose }], - }) - expect(alert.children().text()).toContain( - 'disconnected from Wi-Fi network foobar' - ) - }) - - it('displays an AlertModal with success message for connect', () => { - const wrapper = render(CONNECT) - const alert = wrapper.find(AlertModal) - - expect(alert).toHaveLength(1) - expect(alert.props()).toMatchObject({ - alertOverlay: true, - iconName: 'wifi', - heading: 'Successfully connected to Wi-Fi', - onCloseClick: handleClose, - buttons: [{ children: 'close', onClick: handleClose }], - }) - expect(alert.children().text()).toContain( - 'connected to Wi-Fi network foobar' - ) - }) - - it('displays an AlertModal with success message for join other', () => { - const wrapper = render(JOIN_OTHER) - const alert = wrapper.find(AlertModal) - - expect(alert).toHaveLength(1) - expect(alert.props()).toMatchObject({ - alertOverlay: true, - iconName: 'wifi', - heading: 'Successfully connected to Wi-Fi', - onCloseClick: handleClose, - buttons: [{ children: 'close', onClick: handleClose }], - }) - expect(alert.children().text()).toContain( - 'connected to Wi-Fi network foobar' - ) - }) - - it('displays an AlertModal with success message for join other with ssid unset', () => { - const wrapper = render(JOIN_OTHER, null) - const alert = wrapper.find(AlertModal) - - expect(alert).toHaveLength(1) - expect(alert.props()).toMatchObject({ - alertOverlay: true, - iconName: 'wifi', - heading: 'Successfully connected to Wi-Fi', - onCloseClick: handleClose, - buttons: [{ children: 'close', onClick: handleClose }], - }) - expect(alert.children().text()).toContain('connected to Wi-Fi') - }) - }) - - describe('failure', () => { - const error = { message: 'oh no!' } - const render: ( - type: ResultModalProps['type'], - ssid?: ResultModalProps['ssid'] - ) => ShallowWrapper> = ( - type, - ssid = mockSsid - ) => { - return shallow( - - ) - } - - it('displays an ErrorModal with failure message for disconnect', () => { - const wrapper = render(DISCONNECT) - const alert = wrapper.find(ErrorModal) - - expect(alert).toHaveLength(1) - expect(alert).toHaveLength(1) - expect(alert.prop('heading')).toEqual('Unable to disconnect from Wi-Fi') - expect(alert.prop('description')).toEqual( - expect.stringContaining( - 'unable to disconnect from Wi-Fi network foobar' - ) - ) - expect(alert.prop('close')).toEqual(handleClose) - expect(alert.prop('error')).toEqual(error) - }) - - it('displays an ErrorModal with failure message for connect', () => { - const wrapper = render(CONNECT) - const alert = wrapper.find(ErrorModal) - - expect(alert).toHaveLength(1) - expect(alert.prop('heading')).toEqual('Unable to connect to Wi-Fi') - expect(alert.prop('description')).toEqual( - expect.stringContaining('unable to connect to Wi-Fi network foobar') - ) - expect(alert.prop('close')).toEqual(handleClose) - expect(alert.prop('error')).toEqual(error) - }) - - it('displays an ErrorModal with failure message for join other', () => { - const wrapper = render(JOIN_OTHER) - const alert = wrapper.find(ErrorModal) - - expect(alert).toHaveLength(1) - expect(alert.prop('heading')).toEqual('Unable to connect to Wi-Fi') - expect(alert.prop('description')).toEqual( - expect.stringContaining('unable to connect to Wi-Fi network foobar') - ) - expect(alert.prop('close')).toEqual(handleClose) - expect(alert.prop('error')).toEqual(error) - }) - - it('displays an ErrorModal with failure message for join other without ssid', () => { - const wrapper = render(JOIN_OTHER, null) - const alert = wrapper.find(ErrorModal) - - expect(alert).toHaveLength(1) - expect(alert.prop('heading')).toEqual('Unable to connect to Wi-Fi') - expect(alert.prop('description')).toEqual( - expect.stringContaining('unable to connect to Wi-Fi') - ) - expect(alert.prop('close')).toEqual(handleClose) - expect(alert.prop('error')).toEqual(error) - }) - - it('displays an ErrorModal with appropriate failure message if the status is failure and no error message is given', () => { - const render: ( - type: ResultModalProps['type'], - ssid?: ResultModalProps['ssid'] - ) => ShallowWrapper> = ( - type, - ssid = mockSsid - ) => { - return shallow( - - ) - } - - const wrapper = render(JOIN_OTHER, null) - const alert = wrapper.find(ErrorModal) - - expect(alert).toHaveLength(1) - expect(alert.prop('heading')).toEqual('Unable to connect to Wi-Fi') - expect(alert.prop('description')).toEqual( - expect.stringContaining('unable to connect to Wi-Fi') - ) - expect(alert.prop('close')).toEqual(handleClose) - expect(alert.prop('error')).toEqual({ - message: - 'Likely incorrect network password. Please double-check your network credentials.', - }) - }) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/organisms/Devices/RobotSettings/__tests__/SelectNetwork.test.tsx b/app/src/organisms/Devices/RobotSettings/__tests__/SelectNetwork.test.tsx index 9223b07ddd5..9f77ac1e30f 100644 --- a/app/src/organisms/Devices/RobotSettings/__tests__/SelectNetwork.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/__tests__/SelectNetwork.test.tsx @@ -1,351 +1,3 @@ -import * as React from 'react' -import { when, resetAllWhenMocks } from 'jest-when' -import { Provider } from 'react-redux' - -import { act } from 'react-dom/test-utils' -import { mount } from 'enzyme' - -import { useWifiList } from '../../../../resources/networking/hooks' -import * as Networking from '../../../../redux/networking' -import * as RobotApi from '../../../../redux/robot-api' -import * as Fixtures from '../../../../redux/networking/__fixtures__' -import * as Constants from '../ConnectNetwork/constants' - -import { Portal } from '../../../../App/portal' -import { SelectSsid } from '../ConnectNetwork/SelectSsid' -import { ConnectModal } from '../ConnectNetwork/ConnectModal' -import { ResultModal } from '../ConnectNetwork/ResultModal' - -import { SelectNetwork } from '../SelectNetwork' -import { RequestState } from '../../../../redux/robot-api/types' -import { PENDING, SUCCESS, FAILURE } from '../../../../redux/robot-api' - -import type { ReactWrapper } from 'enzyme' - -jest.mock('../../../../resources/networking/hooks') -jest.mock('../../../../redux/networking/selectors') -jest.mock('../../../../redux/robot-api/selectors') - -// mock out ConnectModal to prevent warning logs from async formik -// validation happening outside an `act` -jest.mock('../ConnectNetwork/ConnectModal', () => ({ - ConnectModal: () => <>, -})) - -const mockState = { state: true, mock: true } - -const mockRobotName = 'robot-name' - -const mockWifiList = [ - { ...Fixtures.mockWifiNetwork, ssid: 'foo', active: true }, - { ...Fixtures.mockWifiNetwork, ssid: 'bar' }, - { - ...Fixtures.mockWifiNetwork, - ssid: 'baz', - securityType: Networking.SECURITY_NONE, - }, -] - -const mockWifiKeys = [ - { ...Fixtures.mockWifiKey, id: 'abc' }, - { ...Fixtures.mockWifiKey, id: 'def' }, - { ...Fixtures.mockWifiKey, id: 'ghi' }, -] - -const mockEapOptions = [Fixtures.mockEapOption] - -const mockUseWifiList = useWifiList as jest.MockedFunction - -const mockGetWifiKeys = Networking.getWifiKeys as jest.MockedFunction< - typeof Networking.getWifiKeys -> - -const mockGetEapOptions = Networking.getEapOptions as jest.MockedFunction< - typeof Networking.getEapOptions -> - -const mockGetRequestById = RobotApi.getRequestById as jest.MockedFunction< - typeof RobotApi.getRequestById -> - describe('', () => { - let dispatch: any - let mockStore: any - - let render: () => ReactWrapper> - - beforeEach(() => { - dispatch = jest.fn() - mockStore = { - dispatch, - subscribe: () => {}, - getState: () => mockState, - } - - jest.useFakeTimers() - - when(mockUseWifiList) - .calledWith(mockRobotName) - .mockReturnValue(mockWifiList) - - mockGetWifiKeys.mockImplementation((state, robotName) => { - expect(state).toEqual(mockState) - expect(robotName).toEqual(mockRobotName) - return mockWifiKeys - }) - - mockGetEapOptions.mockImplementation((state, robotName) => { - expect(state).toEqual(mockState) - expect(robotName).toEqual(mockRobotName) - return mockEapOptions - }) - - render = () => { - return mount( - , - { - wrappingComponent: Provider, - wrappingComponentProps: { store: mockStore }, - } - ) - } - }) - - afterEach(() => { - jest.clearAllMocks() - jest.clearAllTimers() - jest.useRealTimers() - resetAllWhenMocks() - }) - - it('renders an child with props from state', () => { - const wrapper = render() - const selectSsid = wrapper.find(SelectSsid) - expect(selectSsid.prop('list')).toEqual(mockWifiList) - expect(selectSsid.prop('value')).toEqual('foo') - }) - - it('renders an child with no active ssid', () => { - when(mockUseWifiList) - .calledWith(mockRobotName) - .mockReturnValue(mockWifiList.slice(1)) - - const wrapper = render() - const selectSsid = wrapper.find(SelectSsid) - expect(selectSsid.prop('list')).toEqual(mockWifiList.slice(1)) - expect(selectSsid.prop('value')).toEqual(null) - }) - - describe('joining a network', () => { - let wrapper: ReactWrapper> - let connectModal: ReactWrapper> - - beforeEach(() => { - wrapper = render() - const selectSsid = wrapper.find(SelectSsid) - dispatch.mockReset() - - act(() => { - selectSsid.invoke('onConnect')?.(mockWifiList[1].ssid) - }) - wrapper.update() - - connectModal = wrapper.find(ConnectModal) - }) - - it('renders a ConnectModal on SelectSsid::onSelect', () => { - expect(connectModal).toHaveLength(1) - expect(connectModal.props()).toEqual({ - robotName: mockRobotName, - network: mockWifiList[1], - wifiKeys: mockWifiKeys, - eapOptions: mockEapOptions, - onConnect: expect.any(Function), - onCancel: expect.any(Function), - }) - }) - - it('dispatches fetchEapOptions and fetchWifiKeys on SelectSsid::onSelect', () => { - const expectedFetchEap = Networking.fetchEapOptions(mockRobotName) - const expectedFetchKeys = Networking.fetchEapOptions(mockRobotName) - - expect(dispatch).toHaveBeenCalledWith(expectedFetchEap) - expect(dispatch).toHaveBeenCalledWith(expectedFetchKeys) - }) - - it('renders a ConnectModal with network={null} on SelectSsid::onJoinOther', () => { - wrapper = render() - const selectSsid = wrapper.find(SelectSsid) - - act(() => { - selectSsid.invoke('onJoinOther')?.() - }) - wrapper.update() - connectModal = wrapper.find(Portal).find(ConnectModal) - - expect(connectModal).toHaveLength(1) - expect(connectModal.props()).toEqual({ - robotName: mockRobotName, - network: null, - wifiKeys: mockWifiKeys, - eapOptions: mockEapOptions, - onConnect: expect.any(Function), - onCancel: expect.any(Function), - }) - }) - - it('dispatches fetchEapOptions and fetchWifiKeys on SelectSsid::onJoinOther', () => { - wrapper = render() - const selectSsid = wrapper.find(SelectSsid) - dispatch.mockReset() - - act(() => { - selectSsid.invoke('onJoinOther')?.() - }) - - const expectedFetchEap = Networking.fetchEapOptions(mockRobotName) - const expectedFetchKeys = Networking.fetchEapOptions(mockRobotName) - - expect(dispatch).toHaveBeenCalledWith(expectedFetchEap) - expect(dispatch).toHaveBeenCalledWith(expectedFetchKeys) - }) - - it('passes onCancel prop that closes the modal', () => { - act(() => { - connectModal.invoke('onCancel')?.() - }) - wrapper.update() - - expect(wrapper.find(ConnectModal)).toHaveLength(0) - }) - - describe('dispatching the request', () => { - const mockConfigure = { ssid: mockWifiList[1].ssid, psk: 'password' } - let requestId: string | null - - const connectAndSetMockRequestState = ( - requestState: RequestState | null = null - ) => { - act(() => { - connectModal.invoke('onConnect')?.(mockConfigure) - const actionCall = dispatch.mock.calls.find( - (call: any) => call[0].type === Networking.POST_WIFI_CONFIGURE - ) - requestId = actionCall?.[0].meta.requestId - - mockGetRequestById.mockImplementation((state, reqId) => { - expect(state).toEqual(mockState) - return reqId === requestId ? requestState : null - }) - }) - wrapper.update() - } - - it('passes an onConnect prop that dispatches networking:POST_WIFI_CONFIGURE', () => { - connectAndSetMockRequestState() - - expect(dispatch).toHaveBeenCalledWith( - expect.objectContaining({ - ...Networking.postWifiConfigure(mockRobotName, mockConfigure), - meta: { requestId: expect.any(String) }, - }) - ) - }) - - it('closes modal and shows a spinner while disconnect is in progress', () => { - connectAndSetMockRequestState({ status: RobotApi.PENDING }) - - expect(wrapper.find(ConnectModal)).toHaveLength(0) - const resultModal = wrapper.find(Portal).find(ResultModal) - expect(resultModal).toHaveLength(1) - expect(resultModal.props()).toEqual({ - type: Constants.CONNECT, - ssid: mockConfigure.ssid, - requestStatus: PENDING, - error: null, - onClose: expect.any(Function), - }) - }) - - it('closes spinner and shows success if connect succeeds', () => { - connectAndSetMockRequestState({ - status: RobotApi.SUCCESS, - response: {} as any, - }) - - expect(wrapper.find(ConnectModal)).toHaveLength(0) - const resultModal = wrapper.find(Portal).find(ResultModal) - expect(resultModal).toHaveLength(1) - expect(resultModal.props()).toEqual({ - type: Constants.CONNECT, - ssid: mockConfigure.ssid, - requestStatus: SUCCESS, - error: null, - onClose: expect.any(Function), - }) - - act(() => { - resultModal.invoke('onClose')?.() - }) - wrapper.update() - - expect(wrapper.find(ResultModal)).toHaveLength(0) - expect(dispatch).toHaveBeenCalledWith( - RobotApi.dismissRequest(requestId as any) - ) - }) - - it('closes spinner and shows failure if connect fails', () => { - connectAndSetMockRequestState({ - status: RobotApi.FAILURE, - response: {} as any, - error: { message: 'oh no!' }, - }) - - expect(wrapper.find(ConnectModal)).toHaveLength(0) - const resultModal = wrapper.find(Portal).find(ResultModal) - expect(resultModal).toHaveLength(1) - expect(resultModal.props()).toEqual({ - type: Constants.CONNECT, - ssid: mockConfigure.ssid, - requestStatus: FAILURE, - error: { message: 'oh no!' }, - onClose: expect.any(Function), - }) - - act(() => { - resultModal.invoke('onClose')?.() - }) - wrapper.update() - - expect(wrapper.find(ResultModal)).toHaveLength(0) - expect(dispatch).toHaveBeenCalledWith( - RobotApi.dismissRequest(requestId as any) - ) - }) - - it('dispatches a configure request immediately for an open network', () => { - wrapper = render() - - const selectSsid = wrapper.find(SelectSsid) - const expectedConfigure = { - ssid: mockWifiList[2].ssid, - securityType: Networking.SECURITY_NONE, - hidden: false, - } - - act(() => { - selectSsid.invoke('onConnect')?.(mockWifiList[2].ssid) - }) - wrapper.update() - - expect(dispatch).toHaveBeenCalledWith( - expect.objectContaining({ - ...Networking.postWifiConfigure(mockRobotName, expectedConfigure), - meta: { requestId: expect.any(String) }, - }) - ) - }) - }) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/redux/analytics/__tests__/hooks.test.tsx b/app/src/redux/analytics/__tests__/hooks.test.tsx index b4d23039fe2..80edf2fa40d 100644 --- a/app/src/redux/analytics/__tests__/hooks.test.tsx +++ b/app/src/redux/analytics/__tests__/hooks.test.tsx @@ -1,81 +1,3 @@ -import * as React from 'react' -import { Provider } from 'react-redux' -import { mount } from 'enzyme' -import noop from 'lodash/noop' - -import * as Cfg from '../../config' -import * as Mixpanel from '../mixpanel' -import { useTrackEvent } from '../hooks' - -import type { State } from '../../types' -import type { Config } from '../../config/types' - -jest.mock('../../config') -jest.mock('../mixpanel') - -const getConfig = Cfg.getConfig as jest.MockedFunction -const trackEvent = Mixpanel.trackEvent as jest.MockedFunction< - typeof Mixpanel.trackEvent -> - -const MOCK_STATE: State = { mockState: true } as any - -const MOCK_ANALYTICS_CONFIG = { - appId: 'abc', - optedIn: true, - seenOptIn: true, -} - describe('analytics hooks', () => { - beforeEach(() => { - getConfig.mockImplementation((state: State) => { - expect(state).toBe(MOCK_STATE) - return { analytics: MOCK_ANALYTICS_CONFIG } as Config - }) - }) - - afterEach(() => { - jest.resetAllMocks() - }) - - describe('useTrackEvent', () => { - let trackEventResult: ReturnType - - const TestTrackEvent = (): JSX.Element => { - trackEventResult = useTrackEvent() - return <> - } - - const render = () => { - return mount(, { - wrappingComponent: Provider, - wrappingComponentProps: { - store: { - subscribe: noop, - dispatch: noop, - getState: () => MOCK_STATE, - }, - }, - }) - } - - it('should return a trackEvent function with config bound from state', () => { - const event = { name: 'someEvent', properties: { foo: 'bar' } } - - render() - trackEventResult(event) - - expect(trackEvent).toHaveBeenCalledWith(event, MOCK_ANALYTICS_CONFIG) - }) - - it('should noop if config not loaded', () => { - const event = { name: 'someEvent', properties: { foo: 'bar' } } - - getConfig.mockReturnValue(null) - render() - trackEventResult(event) - - expect(trackEvent).toHaveBeenCalledTimes(0) - }) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/redux/config/__tests__/hooks.test.tsx b/app/src/redux/config/__tests__/hooks.test.tsx index 09cae0e52fc..2f41d231183 100644 --- a/app/src/redux/config/__tests__/hooks.test.tsx +++ b/app/src/redux/config/__tests__/hooks.test.tsx @@ -1,75 +1,3 @@ -import * as React from 'react' -import { Provider } from 'react-redux' -import { mount } from 'enzyme' -import noop from 'lodash/noop' - -import * as Selectors from '../selectors' -import { useFeatureFlag } from '../hooks' - -jest.mock('../selectors') - -const getFeatureFlags = Selectors.getFeatureFlags as jest.MockedFunction< - typeof Selectors.getFeatureFlags -> - describe('config hooks', () => { - afterEach(() => { - jest.resetAllMocks() - }) - - describe('useFeatureFlag', () => { - let result: boolean - const TestUseFeatureFlag = (props: { flag: any }) => { - result = useFeatureFlag(props.flag) - return <> - } - - const mockStore = { - getState: () => ({ mockState: true } as any), - dispatch: noop, - subscribe: noop, - } - - const render = (flag: string) => { - return mount(, { - wrappingComponent: Provider, - wrappingComponentProps: { store: mockStore }, - }) - } - - it('should return false if the feature flag is not set', () => { - getFeatureFlags.mockReturnValue({}) - - render('someFlag') - expect(result).toBe(false) - }) - - it('should return false if the feature flag is set to false', () => { - getFeatureFlags.mockReturnValue({ someFlag: false } as any) - - render('someFlag') - expect(result).toBe(false) - }) - - it('should return false if the feature flag is set to falsey', () => { - getFeatureFlags.mockReturnValue({ someFlag: 0 as any } as any) - - render('someFlag') - expect(result).toBe(false) - }) - - it('should return true if the feature flag is set', () => { - getFeatureFlags.mockReturnValue({ someFlag: true } as any) - - render('someFlag') - expect(result).toBe(true) - }) - - it('should return true if the feature flag is set to truthy', () => { - getFeatureFlags.mockReturnValue({ someFlag: 1 as any } as any) - - render('someFlag') - expect(result).toBe(true) - }) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/forms/__tests__/DeprecatedCheckboxField.test.tsx b/components/src/forms/__tests__/DeprecatedCheckboxField.test.tsx index ad3cf28c408..caa4206ba43 100644 --- a/components/src/forms/__tests__/DeprecatedCheckboxField.test.tsx +++ b/components/src/forms/__tests__/DeprecatedCheckboxField.test.tsx @@ -1,79 +1,3 @@ -import * as React from 'react' -import { mount } from 'enzyme' - -import { DeprecatedCheckboxField } from '../DeprecatedCheckboxField' -import { Icon } from '../../icons' - describe('DeprecatedCheckboxField', () => { - describe('DeprecatedCheckboxField', () => { - it('renders a checked icon when value === true', () => { - const wrapper = mount( - - ) - const icon = wrapper.find(Icon) - - expect(icon.prop('name')).toEqual('checkbox-marked') - }) - - it('sets input checked attribute to true when value === true', () => { - const wrapper = mount( - - ) - - const input = wrapper.find('input') - expect(input.prop('checked')).toBe(true) - }) - - it('renders an unchecked icon when value === false', () => { - const wrapper = mount( - - ) - const icon = wrapper.find(Icon) - - expect(icon.prop('name')).toEqual('checkbox-blank-outline') - }) - - it('sets input checked attribute to false when value === false', () => { - const wrapper = mount( - - ) - - const input = wrapper.find('input') - expect(input.prop('checked')).toBe(false) - }) - - it('renders an unchecked icon when no value prop', () => { - const wrapper = mount() - const icon = wrapper.find(Icon) - - expect(icon).toBeDefined() - expect(icon.prop('name')).toEqual('checkbox-blank-outline') - }) - - it('sets input checked attribute to false when no value prop', () => { - const wrapper = mount() - - const input = wrapper.find('input') - expect(input.prop('checked')).toBe(false) - }) - }) - - describe('indeterminate DeprecatedCheckboxField', () => { - it(' renders a minux box icon', () => { - const wrapper = mount( - - ) - const icon = wrapper.find(Icon) - expect(icon.prop('name')).toEqual('minus-box') - }) - - it('passes isIndeterimate prop and adds input indeterminate attribute', () => { - const wrapper = mount( - - ) - - const input = wrapper.find('input') - expect(input.prop('indeterminate')).toBeTruthy() - }) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/forms/__tests__/DropdownField.test.tsx b/components/src/forms/__tests__/DropdownField.test.tsx index 55f11c035d4..3137327e6c1 100644 --- a/components/src/forms/__tests__/DropdownField.test.tsx +++ b/components/src/forms/__tests__/DropdownField.test.tsx @@ -1,57 +1,3 @@ -import * as React from 'react' -import { mount } from 'enzyme' - -import { DropdownField } from '../DropdownField' - describe('DropdownField', () => { - it('populates the dropdown with value when present', () => { - const wrapper = mount( - - ) - const select = wrapper.find('select') - expect(select.prop('value')).toBe('dna') - }) - - it('populates and selects the dropdown with blank option when value is null ', () => { - const wrapper = mount( - - ) - const select = wrapper.find('select') - expect(select.prop('value')).toBe('') - expect(select.find('option').first().text()).toBe('') - }) - - it('populates and selects the dropdown with disabled option when isIndeterminate === true ', () => { - const wrapper = mount( - - ) - const select = wrapper.find('select') - expect(select.prop('value')).toBe('') - expect(select.find('option').first().text()).toBe('-') - expect(select.find('option').first().prop('disabled')).toBeTruthy() - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/forms/__tests__/InputField.test.tsx b/components/src/forms/__tests__/InputField.test.tsx index 9fe856262e8..34f85779a3e 100644 --- a/components/src/forms/__tests__/InputField.test.tsx +++ b/components/src/forms/__tests__/InputField.test.tsx @@ -1,32 +1,3 @@ -import * as React from 'react' -import { mount } from 'enzyme' - -import { InputField } from '../InputField' - describe('InputField', () => { - it('clears out value when isIndeterminate === true', () => { - const wrapper = mount( - - ) - const input = wrapper.find('input') - expect(input.prop('value')).toBe('') - }) - - it('overrides placeholder prop when isIndeterminate === true', () => { - const wrapper = mount( - - ) - const input = wrapper.find('input') - expect(input.prop('placeholder')).toBe('-') - }) - - it('sets value to an empty string when no value prop present', () => { - const wrapper = mount() - const input = wrapper.find('input') - expect(input.prop('value')).toBe('') - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/forms/__tests__/Select.test.tsx b/components/src/forms/__tests__/Select.test.tsx index faaf9def3f0..a4f66e143b4 100644 --- a/components/src/forms/__tests__/Select.test.tsx +++ b/components/src/forms/__tests__/Select.test.tsx @@ -1,52 +1,3 @@ -import * as React from 'react' -import ReactSelect from 'react-select' -import { shallow } from 'enzyme' - -import { Select } from '../Select' - describe('Select', () => { - it('component renders a ReactSelect', () => { - const wrapper = shallow( - ) - - expect(wrapper.find(ReactSelect).props()).toMatchObject({ - options, - value, - name, - onChange, - onBlur, - }) - }) - - it('merges in className prop', () => { - const wrapperDefault = shallow( - ) - - const defaultCx = wrapperDefault.find(ReactSelect).prop('className') - const withClassCx = wrapperWithClass.find(ReactSelect).prop('className') - - expect(withClassCx).toContain('something_else') - expect(withClassCx).toContain(defaultCx) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/forms/__tests__/SelectField.test.tsx b/components/src/forms/__tests__/SelectField.test.tsx index 12b4909021d..2516876fd0d 100644 --- a/components/src/forms/__tests__/SelectField.test.tsx +++ b/components/src/forms/__tests__/SelectField.test.tsx @@ -1,110 +1,3 @@ -import * as React from 'react' -import { shallow } from 'enzyme' - -import { SelectField } from '../SelectField' -import { Select } from '../Select' -import type { SelectOption, SelectProps } from '../Select' - describe('SelectField', () => { - it('renders a Select', () => { - const wrapper = shallow( - - ) - - expect(wrapper.find(Select)).toHaveLength(1) - }) - - it('renders caption', () => { - const wrapper = shallow( - hello there} - /> - ) - - expect(wrapper.find('[data-hook="caption"]')).toHaveLength(1) - }) - - it('passes props to Select', () => { - const id = 'id' - const name = 'name' - const options = [{ value: 'foo' }, { value: 'bar' }] - const value = 'bar' - const disabled = false - const placeholder = 'hello there' - const menuPosition = 'absolute' - const formatOptionLabel = (opt: SelectOption): string => - opt.label || opt.value - const className = 'class' - - const wrapper = shallow( - - ) - - expect(wrapper.find(Select).props()).toMatchObject({ - id, - name, - options, - placeholder, - menuPosition, - formatOptionLabel, - isDisabled: disabled, - className: expect.stringContaining(className), - value: options[1], - }) - }) - - it('passes disabled to isDisabled when disabled=true', () => { - const name = 'name' - const options = [{ value: 'foo' }, { value: 'bar' }] - const value = 'bar' - const disabled = true - - const wrapper = shallow( - - ) - - expect(wrapper.find(Select).props()).toMatchObject({ - isDisabled: disabled, - }) - }) - - it('handles onChange and onBlur from Select', () => { - const handleValueChange = jest.fn() - const handleLoseFocus = jest.fn() - const options = [{ value: 'foo' }, { value: 'bar' }] - const selectWrapper = shallow( - - ).find(Select) - - selectWrapper.invoke('onChange')?.(options[1], {} as any) - expect(handleValueChange).toHaveBeenCalledWith('field', 'bar', {}) - selectWrapper.invoke('onBlur')?.({} as any) - expect(handleLoseFocus).toHaveBeenCalledWith('field') - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/forms/__tests__/ToggleField.test.tsx b/components/src/forms/__tests__/ToggleField.test.tsx index 699efbdbc75..96cb7e5ec77 100644 --- a/components/src/forms/__tests__/ToggleField.test.tsx +++ b/components/src/forms/__tests__/ToggleField.test.tsx @@ -1,60 +1,3 @@ -import * as React from 'react' -import { shallow, mount } from 'enzyme' - -import { ToggleField } from '../ToggleField' -import { Icon } from '../../icons' - describe('ToggleField', () => { - it('renders an Icon', () => { - const wrapper = shallow( - - ) - - expect(wrapper.find(Icon)).toHaveLength(1) - }) - - it('renders label conditional labels', () => { - const labelOnText = 'Toggled On' - const labelOffText = 'Toggled Off' - - const wrapperOn = mount( - - ) - - const wrapperOff = mount( - - ) - - expect(wrapperOn.text()).toEqual(labelOnText) - expect(wrapperOff.text()).toEqual(labelOffText) - }) - - it('passes disabled prop', () => { - const wrapper = mount( - - ) - - expect(wrapper.props().disabled).toEqual(true) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/hooks/__tests__/useConditionalConfirm.test.tsx b/components/src/hooks/__tests__/useConditionalConfirm.test.tsx index a13581e8d3f..e507afa777c 100644 --- a/components/src/hooks/__tests__/useConditionalConfirm.test.tsx +++ b/components/src/hooks/__tests__/useConditionalConfirm.test.tsx @@ -1,172 +1,3 @@ -import * as React from 'react' -import { act } from 'react-dom/test-utils' -import { mount } from 'enzyme' -import { useConditionalConfirm } from '../useConditionalConfirm' - describe('useConditionalConfirm', () => { - let confirm: () => unknown - let showConfirmation: boolean - let cancel: () => unknown - - const TestUseConditionalConfirm = (options: any): JSX.Element => { - ;({ confirm, showConfirmation, cancel } = useConditionalConfirm( - options.handleContinue, - options.shouldBlock - )) - - return test wrapper using useConditionalConfirm - } - - afterEach(() => { - jest.resetAllMocks() - }) - - it('should initially set showConfirmation to false', () => { - const props = { - handleContinue: jest.fn(), - shouldBlock: true, - } - mount() - - expect(showConfirmation).toBe(false) - }) - - it('should NOT call handleContinue when calling cancel', () => { - const props = { - handleContinue: jest.fn(), - shouldBlock: true, - } - - mount() - - act(() => { - cancel() - }) - - expect(props.handleContinue).not.toHaveBeenCalled() - }) - - it('should set showConfirmation to false when calling cancel', () => { - const props = { - handleContinue: jest.fn(), - shouldBlock: true, - } - - mount() - - act(() => { - cancel() - }) - - expect(showConfirmation).toBe(false) - }) - - describe('when it should block the user', () => { - describe('and the user has NOT yet confirmed', () => { - it('should set showConfirmation to true after calling confirm', () => { - const props = { - handleContinue: jest.fn(), - shouldBlock: true, - } - - mount() - - expect(showConfirmation).toBe(false) - - act(() => { - confirm() - }) - - expect(showConfirmation).toBe(true) - }) - - it('should NOT call handleContinue after calling confirm', () => { - const props = { - handleContinue: jest.fn(), - shouldBlock: true, - } - - mount() - - act(() => { - confirm() - }) - - expect(props.handleContinue).not.toHaveBeenCalled() - }) - }) - - describe('and the user has confirmed', () => { - it('should call handleContinue after calling confirm', () => { - const props = { - handleContinue: jest.fn(), - shouldBlock: true, - } - - mount() - - expect(showConfirmation).toBe(false) - - act(() => { - confirm() // initial confirmation - }) - - act(() => { - confirm() // we've already confirmed, go ahead! - }) - - expect(props.handleContinue).toHaveBeenCalled() - }) - - it('should set showConfirmation to false after calling confirm', () => { - const props = { - handleContinue: jest.fn(), - shouldBlock: true, - } - - mount() - - act(() => { - confirm() // initial confirmation - }) - - act(() => { - confirm() // we've already confirmed, go ahead! - }) - - expect(showConfirmation).toBe(false) - }) - }) - }) - describe('when it should NOT block the user', () => { - it('should call handleContinue after calling confirm', () => { - const props = { - handleContinue: jest.fn(), - shouldBlock: false, - } - - mount() - - act(() => { - confirm() - }) - - expect(props.handleContinue).toHaveBeenCalled() - }) - - it('should NOT set showConfirmation to true after calling confirm', () => { - const props = { - handleContinue: jest.fn(), - shouldBlock: false, - } - - mount() - - act(() => { - confirm() - }) - - expect(showConfirmation).toBe(false) - }) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/hooks/__tests__/useInterval.test.tsx b/components/src/hooks/__tests__/useInterval.test.tsx index 036683100f2..bc8626bac10 100644 --- a/components/src/hooks/__tests__/useInterval.test.tsx +++ b/components/src/hooks/__tests__/useInterval.test.tsx @@ -1,46 +1,3 @@ -import * as React from 'react' -import { mount } from 'enzyme' -import { useInterval } from '..' - describe('useInterval hook', () => { - const callback = jest.fn() - - beforeEach(() => { - jest.useFakeTimers() - }) - - afterEach(() => { - jest.resetAllMocks() - jest.clearAllTimers() - jest.useRealTimers() - }) - - const TestUseInterval = (props: { delay: number | null }): JSX.Element => { - useInterval(callback, props.delay) - return - } - - it('delay `null` results in no calls', () => { - mount() - jest.runTimersToTime(10000) - - expect(callback).toHaveBeenCalledTimes(0) - }) - - it('delay sets an interval', () => { - mount() - jest.runTimersToTime(10) - - expect(callback).toHaveBeenCalledTimes(5) - }) - - it('re-rendering with delay={null} clears the interval', () => { - const wrapper = mount() - - jest.runTimersToTime(6) - wrapper.setProps({ delay: null }) - jest.runTimersToTime(4) - - expect(callback).toHaveBeenCalledTimes(3) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/hooks/__tests__/useMountEffect.test.tsx b/components/src/hooks/__tests__/useMountEffect.test.tsx index 0c14c2f8fca..71179291375 100644 --- a/components/src/hooks/__tests__/useMountEffect.test.tsx +++ b/components/src/hooks/__tests__/useMountEffect.test.tsx @@ -1,51 +1,3 @@ -import * as React from 'react' -import { mount } from 'enzyme' - -import { useMountEffect } from '../useMountEffect' - describe('useMountEffect hook', () => { - const TestUseMountEffect = (props: { - onMount: React.EffectCallback - }): JSX.Element => { - useMountEffect(props.onMount) - return <> - } - const render = (handleMount: () => void): ReturnType => { - return mount() - } - - it('should call mount handler on render', () => { - const handleMount = jest.fn() - - render(handleMount) - expect(handleMount).toHaveBeenCalledTimes(1) - }) - - it('should not call mount handler again on subsequent renders', () => { - const handleMount = jest.fn() - const wrapper = render(handleMount) - - wrapper.setProps({}) - expect(handleMount).toHaveBeenCalledTimes(1) - }) - - it('should not call mount handler again if handler changes', () => { - const handleMount = jest.fn() - const handleMountDifferently = jest.fn() - const wrapper = render(handleMount) - - wrapper.setProps({ onMount: handleMountDifferently }) - expect(handleMount).toHaveBeenCalledTimes(1) - expect(handleMountDifferently).toHaveBeenCalledTimes(0) - }) - - it('should run a cleanup function', () => { - const handleUnmount = jest.fn() - const handleMount = (): unknown => handleUnmount - const wrapper = render(handleMount) - - expect(handleUnmount).toHaveBeenCalledTimes(0) - wrapper.unmount() - expect(handleUnmount).toHaveBeenCalledTimes(1) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/hooks/__tests__/usePrevious.test.tsx b/components/src/hooks/__tests__/usePrevious.test.tsx index 4503306b034..92f12e38d85 100644 --- a/components/src/hooks/__tests__/usePrevious.test.tsx +++ b/components/src/hooks/__tests__/usePrevious.test.tsx @@ -1,27 +1,3 @@ -import * as React from 'react' -import { mount } from 'enzyme' -import { usePrevious } from '..' - describe('usePrevious hook', () => { - const TestUsePrevious = (props: { value: string }): JSX.Element => { - const prevValue = usePrevious(props.value) - return ( - {typeof prevValue === 'undefined' ? 'undefined' : prevValue} - ) - } - - it('initial previous value is `undefined', () => { - const wrapper = mount() - expect(wrapper.html()).toEqual('undefined') - }) - - it('saves previous values', () => { - const wrapper = mount() - wrapper.setProps({ value: 'bar' }) - expect(wrapper.html()).toEqual('foo') - wrapper.setProps({ value: 'baz' }) - expect(wrapper.html()).toEqual('bar') - wrapper.setProps({ value: 'qux' }) - expect(wrapper.html()).toEqual('baz') - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/hooks/__tests__/useTimeout.test.tsx b/components/src/hooks/__tests__/useTimeout.test.tsx index e3258ef8b14..33c48337018 100644 --- a/components/src/hooks/__tests__/useTimeout.test.tsx +++ b/components/src/hooks/__tests__/useTimeout.test.tsx @@ -1,50 +1,3 @@ -import * as React from 'react' -import { mount } from 'enzyme' -import { useTimeout } from '..' - describe('useTimeouthook', () => { - const callback = jest.fn() - - beforeEach(() => { - jest.useFakeTimers() - }) - - afterEach(() => { - jest.resetAllMocks() - jest.clearAllTimers() - jest.useRealTimers() - }) - - const TestUseTimeout = (props: { delay: number | null }): JSX.Element => { - useTimeout(callback, props.delay) - return - } - - it('delay `null` results in no calls', () => { - mount() - jest.runTimersToTime(10000) - - expect(callback).toHaveBeenCalledTimes(0) - }) - - it('delay sets a timeout', () => { - mount() - jest.runTimersToTime(3) - - expect(callback).toHaveBeenCalledTimes(1) - }) - - it('re-rendering with delay={null} clears the interval', () => { - const wrapper = mount() - - jest.runTimersToTime(2) - wrapper.setProps({ delay: null }) - - expect(callback).toHaveBeenCalledTimes(0) - - wrapper.setProps({ delay: 4 }) - jest.runTimersToTime(6) - - expect(callback).toHaveBeenCalledTimes(1) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/hooks/__tests__/useToggle.test.tsx b/components/src/hooks/__tests__/useToggle.test.tsx index 6d0234df17c..b6ad18aa94d 100644 --- a/components/src/hooks/__tests__/useToggle.test.tsx +++ b/components/src/hooks/__tests__/useToggle.test.tsx @@ -1,42 +1,3 @@ -import * as React from 'react' -import { act } from 'react-dom/test-utils' -import { mount } from 'enzyme' - -import { useToggle } from '../useToggle' - describe('useToggle hook', () => { - let result: ReturnType - - const TestUseToggle = (props: { - initialValue: boolean | undefined - }): JSX.Element => { - result = useToggle(props.initialValue) - return <> - } - const render = (initialValue?: boolean): ReturnType => { - return mount() - } - - it('should use initialValue=false', () => { - render(false) - expect(result[0]).toBe(false) - }) - - it('should use initialValue=true', () => { - render(true) - expect(result[0]).toBe(true) - }) - - it('should default initialValue to false', () => { - render() - expect(result[0]).toBe(false) - }) - - it('should toggle', () => { - render(false) - act(() => result[1]()) - expect(result[0]).toBe(true) - act(() => result[1]()) - expect(result[0]).toBe(false) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/instrument/__tests__/PipetteSelect.test.tsx b/components/src/instrument/__tests__/PipetteSelect.test.tsx index 90a94192261..d6bf72e00a6 100644 --- a/components/src/instrument/__tests__/PipetteSelect.test.tsx +++ b/components/src/instrument/__tests__/PipetteSelect.test.tsx @@ -1,155 +1,3 @@ -import * as React from 'react' -import { shallow } from 'enzyme' - -import { - getAllPipetteNames, - getPipetteNameSpecs, - GEN1, - GEN2, - OT3_PIPETTES, - FLEX, -} from '@opentrons/shared-data' -import { PipetteSelect } from '../PipetteSelect' -import { Select } from '../../forms' - -import type { PipetteNameSpecs } from '@opentrons/shared-data' - describe('PipetteSelect', () => { - it('renders a Select', () => { - const wrapper = shallow() - - expect(wrapper.find(Select)).toHaveLength(1) - }) - - it('passes props to Select', () => { - const tabIndex = '3' - const className = 'class' - - const selectWrapper = shallow( - - ).find(Select) - - expect(selectWrapper.props()).toMatchObject({ - tabIndex, - isSearchable: false, - menuPosition: 'fixed', - className: expect.stringContaining('class'), - }) - }) - - it('passes pipettes as grouped options to Select', () => { - const wrapper = shallow() - const pipetteSpecs: PipetteNameSpecs[] = getAllPipetteNames( - 'maxVolume', - 'channels' - ) - .map(getPipetteNameSpecs) - .filter((specs): specs is PipetteNameSpecs => specs !== null) - - const flexSpecs = pipetteSpecs.filter(s => s.displayCategory === FLEX) - const gen2Specs = pipetteSpecs.filter(s => s.displayCategory === GEN2) - const gen1Specs = pipetteSpecs.filter(s => s.displayCategory === GEN1) - - expect(wrapper.find(Select).prop('options')).toEqual([ - { - options: flexSpecs.map(s => ({ value: s.name, label: s.displayName })), - }, - { - options: gen2Specs.map(s => ({ value: s.name, label: s.displayName })), - }, - { - options: gen1Specs.map(s => ({ value: s.name, label: s.displayName })), - }, - ]) - }) - - it('can omit pipettes by name', () => { - const pipetteSpecs: PipetteNameSpecs[] = getAllPipetteNames( - 'maxVolume', - 'channels' - ) - .map(getPipetteNameSpecs) - .filter((specs): specs is PipetteNameSpecs => specs !== null) - - const gen2Specs = pipetteSpecs.filter(s => s.displayCategory === GEN2) - const nameBlocklist = pipetteSpecs - .filter(s => s.displayCategory !== GEN2) - .map(s => s.name) - - const wrapper = shallow( - - ) - - expect(wrapper.find(Select).prop('options')).toEqual([ - { - options: gen2Specs.map(s => ({ value: s.name, label: s.displayName })), - }, - ]) - }) - - it('excludes the flex pipette options', () => { - const pipetteSpecs: PipetteNameSpecs[] = getAllPipetteNames( - 'maxVolume', - 'channels' - ) - .map(getPipetteNameSpecs) - .filter((specs): specs is PipetteNameSpecs => specs !== null) - - const gen1Specs = pipetteSpecs.filter( - s => s.displayCategory === GEN1 && s.name !== 'p1000_96' - ) - const gen2Specs = pipetteSpecs.filter(s => s.displayCategory === GEN2) - - const nameBlocklist = OT3_PIPETTES - const wrapper = shallow( - - ) - - expect(wrapper.find(Select).prop('options')).toEqual([ - { - options: gen2Specs.map(s => ({ value: s.name, label: s.displayName })), - }, - { - options: gen1Specs.map(s => ({ value: s.name, label: s.displayName })), - }, - ]) - }) - - it('maps pipetteName prop to Select value', () => { - const pipetteName = 'p300_single_gen2' - const pipetteSpecs = getPipetteNameSpecs(pipetteName) - const expectedOption = { - value: pipetteName, - label: pipetteSpecs?.displayName, - } - - const wrapper = shallow( - - ) - - expect(wrapper.find(Select).prop('value')).toEqual(expectedOption) - }) - - it('allows "None" as an option', () => { - const expectedNone = { value: '', label: 'None' } - const selectWrapper = shallow( - - ).find(Select) - - expect(selectWrapper.prop('defaultValue')).toEqual(expectedNone) - expect(selectWrapper.prop('options')).toContainEqual(expectedNone) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/interaction-enhancers/__tests__/useHover.test.tsx b/components/src/interaction-enhancers/__tests__/useHover.test.tsx index c6d25012a48..7d485af6b3c 100644 --- a/components/src/interaction-enhancers/__tests__/useHover.test.tsx +++ b/components/src/interaction-enhancers/__tests__/useHover.test.tsx @@ -1,147 +1,3 @@ -import * as React from 'react' -import { act } from 'react-dom/test-utils' -import { mount } from 'enzyme' - -import { useHover } from '../useHover' -import type { UseHoverOptions, UseHoverResult } from '../useHover' - -const TARGET_SELECTOR = '[title="target"]' - describe('useHover hook', () => { - let result: UseHoverResult - - const TestUseHover = (options: UseHoverOptions): JSX.Element => { - result = useHover(options) - return
- } - - const render = (options?: UseHoverOptions): ReturnType => { - return mount() - } - - afterEach(() => { - jest.clearAllTimers() - jest.useRealTimers() - }) - - it('returns not hovered by default', () => { - render() - const [hovered] = result - expect(hovered).toBe(false) - }) - - it('sets hovered on component mouse enter', () => { - const wrapper = render() - const target = wrapper.find(TARGET_SELECTOR) - - act(() => { - target.simulate('pointerEnter') - }) - - expect(result[0]).toBe(true) - }) - - it('unsets hovered on component mouse leave', () => { - const wrapper = render() - const target = wrapper.find(TARGET_SELECTOR) - - act(() => { - target.simulate('pointerEnter') - }) - - act(() => { - target.simulate('pointerLeave') - }) - - expect(result[0]).toBe(false) - }) - - it('can take an enter delay option', () => { - jest.useFakeTimers() - - const wrapper = render({ enterDelay: 42 }) - const target = wrapper.find(TARGET_SELECTOR) - - act(() => { - target.simulate('pointerEnter') - }) - - expect(result[0]).toBe(false) - - act(() => { - jest.advanceTimersByTime(42) - }) - - expect(result[0]).toBe(true) - }) - - it('cancels enter delay on leave', () => { - jest.useFakeTimers() - - const wrapper = render({ enterDelay: 42 }) - const target = wrapper.find(TARGET_SELECTOR) - - act(() => { - target.simulate('pointerEnter') - target.simulate('pointerLeave') - jest.advanceTimersByTime(42) - }) - - expect(result[0]).toBe(false) - }) - - it('can take a leave delay option', () => { - jest.useFakeTimers() - - const wrapper = render({ leaveDelay: 42 }) - const target = wrapper.find(TARGET_SELECTOR) - - act(() => { - target.simulate('pointerEnter') - target.simulate('pointerLeave') - }) - - expect(result[0]).toBe(true) - - act(() => { - jest.advanceTimersByTime(42) - }) - - expect(result[0]).toBe(false) - }) - - it('cancels a leave delay on enter', () => { - jest.useFakeTimers() - - const wrapper = render({ leaveDelay: 42 }) - const target = wrapper.find(TARGET_SELECTOR) - - act(() => { - target.simulate('pointerEnter') - target.simulate('pointerLeave') - target.simulate('pointerEnter') - jest.advanceTimersByTime(42) - }) - - act(() => { - jest.advanceTimersByTime(42) - }) - - expect(result[0]).toBe(true) - }) - - it('cleans up its timeouts', () => { - jest.useFakeTimers() - - const wrapper = render({ enterDelay: 42 }) - const target = wrapper.find(TARGET_SELECTOR) - - act(() => { - target.simulate('pointerEnter') - wrapper.unmount() - jest.advanceTimersByTime(0) - }) - - expect(jest.getTimerCount()).toBe(0) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/modals/__tests__/BaseModal.test.tsx b/components/src/modals/__tests__/BaseModal.test.tsx index 7cb9bd05a77..a18dd46683f 100644 --- a/components/src/modals/__tests__/BaseModal.test.tsx +++ b/components/src/modals/__tests__/BaseModal.test.tsx @@ -1,116 +1,3 @@ -import * as React from 'react' -import { shallow } from 'enzyme' - -import { OVERLAY_BLACK_90, C_WHITE, C_LIGHT_GRAY } from '../../styles' - -import { Box, Flex, Text, Btn } from '../../primitives' -import { SPACING } from '../../ui-style-constants' -import { BaseModal } from '../BaseModal' - describe('BaseModal', () => { - it('should take up the whole parent', () => { - const wrapper = shallow() - const box = wrapper.find(Flex).at(1) - - expect({ ...box.props() }).toMatchObject({ - position: 'absolute', - top: 0, - right: 0, - bottom: 0, - left: 0, - width: '100%', - height: '100%', - alignItems: 'center', - justifyContent: 'center', - padding: `${SPACING.spacing16}, ${SPACING.spacing24}`, - }) - }) - - it('should have an overlay background that can be overridden', () => { - const wrapper = shallow() - const box = wrapper.find(Flex).first() - - expect(box.prop('backgroundColor')).toBe('#16212d59') - - wrapper.setProps({ overlayColor: OVERLAY_BLACK_90 }) - expect(wrapper.find(Flex).first().prop('backgroundColor')).toBe( - OVERLAY_BLACK_90 - ) - }) - - it('should have a zIndex that can be overridden', () => { - const wrapper = shallow() - const box = wrapper.find(Flex).at(1) - - expect(box.prop('zIndex')).toBe(10) - - wrapper.setProps({ zIndex: 5 }) - expect(wrapper.find(Flex).at(1).prop('zIndex')).toBe(5) - }) - - it('should have a white content box', () => { - const wrapper = shallow() - const modal = wrapper.find(Flex).at(1) - const content = modal.children(Box).first() - - expect({ ...content.props() }).toMatchObject({ - position: 'relative', - backgroundColor: C_WHITE, - maxHeight: '100%', - width: '100%', - overflowY: 'auto', - }) - }) - - it('should apply style props to content box', () => { - const wrapper = shallow() - const modal = wrapper.find(Flex).at(1) - const content = modal.children(Box).first() - - expect(content.prop('maxWidth')).toBe('32rem') - }) - - it('should render a header bar if props.header is passed', () => { - const header = Modal title - const wrapper = shallow() - const icon = wrapper.find(Text) - const headerBar = icon.closest(Box) - - expect({ ...headerBar.props() }).toMatchObject({ - backgroundColor: C_LIGHT_GRAY, - padding: '1rem', - position: 'sticky', - top: 0, - }) - }) - - it('should render a footer bar if props.footer is passed', () => { - const footer = button in the footer - const wrapper = shallow() - const text = wrapper.find(Btn) - const footerBar = text.closest(Box) - - expect({ ...footerBar.props() }).toMatchObject({ - backgroundColor: C_WHITE, - padding: '1rem', - position: 'sticky', - bottom: 0, - }) - }) - - it('should render children in a padded box', () => { - const wrapper = shallow( - - Hey there - - ) - const text = wrapper.find('[data-test="content"]') - const contentWrapper = text.closest(Box) - - expect({ ...contentWrapper.props() }).toMatchObject({ - paddingTop: '1rem', - paddingX: '1.5rem', - paddingBottom: '1.5rem', - }) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/primitives/__tests__/Box.test.tsx b/components/src/primitives/__tests__/Box.test.tsx index 8dfb9c96f50..52274f1d25d 100644 --- a/components/src/primitives/__tests__/Box.test.tsx +++ b/components/src/primitives/__tests__/Box.test.tsx @@ -1,21 +1,3 @@ -import * as React from 'react' -import { shallow } from 'enzyme' - -import { Box } from '..' - describe('Box primitive component', () => { - it('should be a div with min-width: 0', () => { - const wrapper = shallow() - expect(wrapper.exists('div')).toBe(true) - expect(wrapper).toHaveStyleRule('min-width', '0') - }) - - it('should render children', () => { - const wrapper = shallow( - - - - ) - expect(wrapper.exists('[data-test="child"]')).toBe(true) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/components/src/primitives/__tests__/Btn.test.tsx b/components/src/primitives/__tests__/Btn.test.tsx index 0a83933b044..8d2c71afe3f 100644 --- a/components/src/primitives/__tests__/Btn.test.tsx +++ b/components/src/primitives/__tests__/Btn.test.tsx @@ -1,382 +1,3 @@ -import * as React from 'react' -import { shallow } from 'enzyme' - -import { - Btn, - PrimaryBtn, - SecondaryBtn, - NewPrimaryBtn, - NewSecondaryBtn, - NewAlertSecondaryBtn, - NewAlertPrimaryBtn, - LightSecondaryBtn, - TertiaryBtn, - BUTTON_TYPE_SUBMIT, - BUTTON_TYPE_RESET, -} from '..' - describe('Btn primitive component', () => { - it('should be an -
- -`; - -exports[`alerts warning alert renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
-
- - - warning - -
-
-`; - -exports[`alerts warning alert with message body renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
-
- - - warning - - -
-
-

- Title -

-
-
-`; diff --git a/components/src/__tests__/__snapshots__/buttons.test.tsx.snap b/components/src/__tests__/__snapshots__/buttons.test.tsx.snap deleted file mode 100644 index 254d5788e41..00000000000 --- a/components/src/__tests__/__snapshots__/buttons.test.tsx.snap +++ /dev/null @@ -1,215 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`buttons Button renders correctly 1`] = ` - -`; - -exports[`buttons Button with iconName renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`buttons DeprecatedPrimaryButton renders correctly 1`] = ` - -`; - -exports[`buttons DeprecatedPrimaryButton with iconName renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`buttons FlatButton renders correctly 1`] = ` - -`; - -exports[`buttons FlatButton with iconName renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`buttons IconButton renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`buttons Inverted OutlineButton renders correctly 1`] = ` - -`; - -exports[`buttons OutlineButton renders correctly 1`] = ` - -`; - -exports[`buttons OutlineButton with iconName renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; diff --git a/components/src/__tests__/__snapshots__/forms.test.tsx.snap b/components/src/__tests__/__snapshots__/forms.test.tsx.snap deleted file mode 100644 index 3aa523d04f1..00000000000 --- a/components/src/__tests__/__snapshots__/forms.test.tsx.snap +++ /dev/null @@ -1,649 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`DeprecatedCheckboxField renders correctly when checked 1`] = ` -.c0 { - width: 100%; -} - -.c1.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`DeprecatedCheckboxField renders correctly when unchecked 1`] = ` -.c0 { - width: 100%; -} - -.c1.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`DropdownField renders correctly with a falsey value 1`] = ` -.c0 { - width: 100%; -} - -.c1.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
-
- -
- -
-
-
- -
-
-`; - -exports[`DropdownField renders correctly with a value 1`] = ` -.c0 { - width: 100%; -} - -.c1.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
-
- -
- -
-
-
- -
-
-`; - -exports[`FormGroup renders correctly 1`] = ` -
-
- This is the label -
-
- Hey test here -
-
- More test here -
-
-`; - -exports[`InputField renders correctly 1`] = ` - -`; - -exports[`RadioGroup renders correctly inline 1`] = ` -.c0 { - width: 100%; -} - -.c1.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
- - - -
-`; - -exports[`RadioGroup renders correctly with checked value 1`] = ` -.c0 { - width: 100%; -} - -.c1.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
- - - -
-`; - -exports[`RadioGroup renders correctly with no checked value 1`] = ` -.c0 { - width: 100%; -} - -.c1.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
- - - -
-`; diff --git a/components/src/__tests__/__snapshots__/icons.test.tsx.snap b/components/src/__tests__/__snapshots__/icons.test.tsx.snap deleted file mode 100644 index 7c7fc2fd9fc..00000000000 --- a/components/src/__tests__/__snapshots__/icons.test.tsx.snap +++ /dev/null @@ -1,3526 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Notification Icon NotificationIcon renders correctly 1`] = ` -.c1 { - color: #e28200; -} - -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons add renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons alert renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons alert-circle renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons arrow-down renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons arrow-left renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons arrow-right renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons arrow-up renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons back renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons book-open-page-variant renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons brightness renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons build renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons caret-right renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons check renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons check-circle renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons check-decagram renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons checkbox-blank-circle-outline renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons checkbox-blank-outline renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons checkbox-marked renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons checkbox-multiple-marked-outline renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons chevron-down renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons chevron-left renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons chevron-right renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons chevron-up renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons circle renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons clockwise-arrow renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons close renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons close-circle renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons close-icon renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons closed-locked renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons comment renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons connection-status renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons content-copy renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons copy-text renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons counter-clockwise-arrow renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons cursor-move renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons deck-map renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons delete renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons dots-horizontal renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons dots-vertical renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons download renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ethernet renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons eye renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons eye-slash renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons flask-outline renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons flex-robot renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons folder-open renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons gantry-homing renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons gear renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons help-circle renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons reset-position renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons horizontal-plane renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons info renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons information renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons jump-size renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons latch-closed renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons latch-open renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons light renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons lock renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons menu renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons menu-down renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons minus renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons minus-box renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons more renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons move-xy renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons move-xy-circle renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons open-in-new renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-alert renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-arrow-down renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-arrow-left renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-arrow-right renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-arrow-up renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-calibrate renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-check renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-checkbox renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-click-and-drag renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-close renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-close-thick renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-connect renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-consolidate renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-copy-text renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-design renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-distribute renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-file renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-flat-bottom renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-heater-shaker renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-hot-to-touch renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-logo renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-magnet renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-magnet-v2 renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-mix renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-run renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-spinner renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-temperature renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-temperature-v2 renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-thermocycler renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-toggle-field-off renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-toggle-field-on renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-toggle-input-off renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-toggle-input-on renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-toggle-switch-off renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-toggle-switch-on renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-transfer renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-u-bottom renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-v-bottom renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-water-outline renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-wifi-0 renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-wifi-1 renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-wifi-2 renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons ot-wifi-3 renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons overflow-btn-touchscreen renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons pause renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons pause-circle renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons pause-icon renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons pen renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons pencil renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons pin renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons play renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons play-circle renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons play-icon renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons play-round-corners renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons plus renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons privacy renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons question-mark-circle renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons radiobox-blank renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons radiobox-marked renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons refresh renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons remove renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons reset renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons restart renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons reticle renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons settings renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons sleep renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons swap-horizontal renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons text-size renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons trash renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons unfold-less-horizontal renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons unfold-more-horizontal renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons union renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons update renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons update-channel renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons upload renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons usb renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons vertical-plane renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons water renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; - -exports[`icons wifi renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - -`; diff --git a/components/src/__tests__/__snapshots__/instrument-diagram.test.tsx.snap b/components/src/__tests__/__snapshots__/instrument-diagram.test.tsx.snap deleted file mode 100644 index 5ef7839f431..00000000000 --- a/components/src/__tests__/__snapshots__/instrument-diagram.test.tsx.snap +++ /dev/null @@ -1,332 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`InstrumentDiagram 96-channel GEN1 renders correctly 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -
- -
-`; - -exports[`InstrumentDiagram Multi-channel GEN2 renders correctly 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-transform: scaleX(-1); - -ms-transform: scaleX(-1); - transform: scaleX(-1); - -webkit-filter: FlipH; - filter: FlipH; -} - -
- -
-`; - -exports[`InstrumentDiagram Multi-channel renders correctly 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -
- -
-`; - -exports[`InstrumentDiagram Single-channel GEN2 renders correctly 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-transform: scaleX(-1); - -ms-transform: scaleX(-1); - transform: scaleX(-1); - -webkit-filter: FlipH; - filter: FlipH; -} - -
- -
-`; - -exports[`InstrumentDiagram Single-channel renders correctly 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -
- -
-`; - -exports[`InstrumentDiagram eight-channel FLEX renders correctly 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-transform: scaleX(-1); - -ms-transform: scaleX(-1); - transform: scaleX(-1); - -webkit-filter: FlipH; - filter: FlipH; -} - -
- -
-`; - -exports[`InstrumentDiagram single-channel FLEX renders correctly 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-transform: scaleX(-1); - -ms-transform: scaleX(-1); - transform: scaleX(-1); - -webkit-filter: FlipH; - filter: FlipH; -} - -
- -
-`; - -exports[`InstrumentGroup Renders correctly 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - grid-gap: 1rem; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-transform: scaleX(-1); - -ms-transform: scaleX(-1); - transform: scaleX(-1); - -webkit-filter: FlipH; - filter: FlipH; -} - -
-
-
-
-

- pipette -

- - p300 8-Channel - -
-
-
- -
-
-
-
- -
-
-
-

- pipette -

- - p10 Single - -
-
-
-
-`; diff --git a/components/src/__tests__/__snapshots__/lists.test.tsx.snap b/components/src/__tests__/__snapshots__/lists.test.tsx.snap deleted file mode 100644 index 8e2ee5f2257..00000000000 --- a/components/src/__tests__/__snapshots__/lists.test.tsx.snap +++ /dev/null @@ -1,302 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ListItem Disabled Side Panel Group renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
-
- -

- title -

-
- children -
-`; - -exports[`ListItem Side Panel Group renders correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
-
- -

- title -

-
- children -
-`; - -exports[`ListItem renders ListItem with icon correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
  • - -
    • -`; - -exports[`ListItem renders ListItem without icon correctly 1`] = ` -
  • -`; - -exports[`TitledList renders TitledList with children correctly 1`] = ` -
    -
    -

    - foo -

    -
    -
      -
    1. - Woop -
      2. -
    -
    -`; - -exports[`TitledList renders TitledList with onMouseEnter & onMouseLeave correctly 1`] = ` -
    -
    -

    - foo -

    -
    -
    -`; - -exports[`TitledList renders TitledList with optional icon correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
    -
    - -

    - foo -

    -
    -
    -`; - -exports[`TitledList renders TitledList without icon correctly 1`] = ` -
    -
    -

    - foo -

    -
    -
    -`; - -exports[`TitledList renders collapsed TitledList correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
    -
    -

    - foo -

    -
    - -
    -
    -
    -`; - -exports[`TitledList renders expanded TitledList correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
    -
    -

    - foo -

    -
    - -
    -
    - - Description - -
      -
    1. - 1 -
      2. -
    2. - 2 -
      3. -
    -
    -`; diff --git a/components/src/__tests__/__snapshots__/modals.test.tsx.snap b/components/src/__tests__/__snapshots__/modals.test.tsx.snap deleted file mode 100644 index 152475ea201..00000000000 --- a/components/src/__tests__/__snapshots__/modals.test.tsx.snap +++ /dev/null @@ -1,412 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`modals AlertModal renders correctly 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background-color: rgba(0,0,0,0.9); - position: fixed; - z-index: 1; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -.c1.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
    -
    -
    -
    -
    - - heading -
    -
    - children -
    -
    - - -
    -
    -
    -
    -`; - -exports[`modals ContinueModal renders correctly 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background-color: rgba(0,0,0,0.9); - position: fixed; - z-index: 1; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -
    -
    -
    -
    - children -
    -
    - - -
    -
    -
    -`; - -exports[`modals Modal renders correctly 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background-color: rgba(0,0,0,0.9); - position: fixed; - z-index: 1; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -
    -
    -
    -
    - children -
    -
    -
    -`; - -exports[`modals Modal renders correctly with optional heading 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background-color: rgba(0,0,0,0.9); - position: fixed; - z-index: 1; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -
    -
    -
    -
    -

    - Heading Visible -

    - children -
    -
    -
    -`; - -exports[`modals ModalPage renders correctly 1`] = ` -.c0 { - min-width: 0; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background-color: rgba(0,0,0,0.9); - position: fixed; - z-index: 1; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -.c2.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
    -
    -
    - -

    - Title -

    - - | - -

    - Subtitle -

    -
    -
    - children -
    -
    -`; - -exports[`modals Overlay renders correctly 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background-color: rgba(0,0,0,0.9); - position: fixed; - z-index: 1; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -
    -`; - -exports[`modals SpinnerModalPage renders correctly 1`] = ` -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background-color: rgba(0,0,0,0.9); - position: fixed; - z-index: 1; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
    -
    - -

    - Title -

    - - | - -

    - Subtitle -

    -
    -
    -
    -
    - -

    -

    -
    -
    -`; diff --git a/components/src/__tests__/__snapshots__/slotmap.test.tsx.snap b/components/src/__tests__/__snapshots__/slotmap.test.tsx.snap deleted file mode 100644 index 90ca7cff619..00000000000 --- a/components/src/__tests__/__snapshots__/slotmap.test.tsx.snap +++ /dev/null @@ -1,475 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SlotMap renders correctly with collision warning 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`SlotMap renders correctly with error 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`SlotMap renders correctly with error and collision warning 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`SlotMap renders correctly without collision warnings or errors 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; diff --git a/components/src/__tests__/__snapshots__/structure.test.tsx.snap b/components/src/__tests__/__snapshots__/structure.test.tsx.snap deleted file mode 100644 index f91ee51257d..00000000000 --- a/components/src/__tests__/__snapshots__/structure.test.tsx.snap +++ /dev/null @@ -1,261 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Card renders Card correctly 1`] = ` -.c0 { - font-size: 0.875rem; - position: relative; - overflow: visible; - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.33); -} - -.c1 { - font-size: 1.125rem; - font-weight: 600; - color: #4a4a4a; - font-weight: 400; - margin: 0; - padding: 1rem 1rem 0; - text-transform: capitalize; -} - -
    -

    - title -

    - children children children -
    -`; - -exports[`LabeledValue renders LabeledValue correctly 1`] = ` -
    -

    - Label - : -

    -

    - Value -

    -
    -`; - -exports[`PageTabs renders PageTabs correctly 1`] = ` - -`; - -exports[`Pill renders Pill correctly 1`] = ` - - Blue - -`; - -exports[`Pill renders Pill correctly with inverted text 1`] = ` - - Blue - -`; - -exports[`Splash renders correctly with custom props 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
    - -
    -`; - -exports[`Splash renders correctly with no props 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
    - -
    -`; - -exports[`TitleBar renders TitleBar with back button correctly 1`] = ` -.c0.spin { - -webkit-animation: GLFYz 0.8s steps(8) infinite; - animation: GLFYz 0.8s steps(8) infinite; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -
    - -

    - foo -

    - - | - -

    - bar -

    -
    -`; - -exports[`TitleBar renders TitleBar with rightNode and its ReactNode as a string 1`] = ` -
    -

    - foo -

    -
    - foo bar -
    -
    -`; - -exports[`TitleBar renders TitleBar with subtitle correctly 1`] = ` -
    -

    - foo -

    - - | - -

    - bar -

    -
    -`; - -exports[`TitleBar renders TitleBar without subtitle correctly 1`] = ` -
    -

    - foo -

    -
    -`; diff --git a/components/src/__tests__/alerts.test.tsx b/components/src/__tests__/alerts.test.tsx deleted file mode 100644 index 761691706f2..00000000000 --- a/components/src/__tests__/alerts.test.tsx +++ /dev/null @@ -1,65 +0,0 @@ -// button component tests -import * as React from 'react' -import Renderer from 'react-test-renderer' - -import { AlertItem } from '..' - -describe('alerts', () => { - const onCloseClick = jest.fn() - - afterEach(() => { - jest.resetAllMocks() - }) - - it('creates an alert with close button', () => { - const button = Renderer.create( - - ).root.findByType('button') - - expect(button.props.className).toMatch('close') - button.props.onClick() - expect(onCloseClick).toHaveBeenCalled() - }) - - it('success alert renders correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('warning alert renders correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('warning alert onCloseClick renders correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('warning alert with message body renders correctly', () => { - const tree = Renderer.create( - -

    Title

    -     - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) diff --git a/components/src/__tests__/buttons.test.tsx b/components/src/__tests__/buttons.test.tsx deleted file mode 100644 index 651a665052e..00000000000 --- a/components/src/__tests__/buttons.test.tsx +++ /dev/null @@ -1,172 +0,0 @@ -// button component tests -import React from 'react' -import Renderer from 'react-test-renderer' - -import { - Button, - FlatButton, - DeprecatedPrimaryButton, - OutlineButton, - IconButton, -} from '..' - -describe('buttons', () => { - const onClick = jest.fn() - - afterEach(() => { - jest.resetAllMocks() - }) - - it('creates a button with props', () => { - const button = Renderer.create( - - ).root.findByType('button') - - button.props.onClick() - expect(button.props.className).toMatch(/\bclass\b/) - expect(button.props.title).toBe('title') - expect(button.props.disabled).toBe(false) - expect(onClick).toHaveBeenCalled() - }) - - it('disabled sets onClick to undefined', () => { - const button = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('Button with iconName renders correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('DeprecatedPrimaryButton renders correctly', () => { - const tree = Renderer.create( - - children - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('DeprecatedPrimaryButton with iconName renders correctly', () => { - const tree = Renderer.create( - - children - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('FlatButton renders correctly', () => { - const tree = Renderer.create( - - children - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('FlatButton with iconName renders correctly', () => { - const tree = Renderer.create( - - children - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('OutlineButton renders correctly', () => { - const tree = Renderer.create( - - children - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('Inverted OutlineButton renders correctly', () => { - const tree = Renderer.create( - - children - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('OutlineButton with iconName renders correctly', () => { - const tree = Renderer.create( - - children - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('IconButton renders correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) diff --git a/components/src/__tests__/forms.test.tsx b/components/src/__tests__/forms.test.tsx deleted file mode 100644 index cef7aa72c1d..00000000000 --- a/components/src/__tests__/forms.test.tsx +++ /dev/null @@ -1,151 +0,0 @@ -// form component tests -import React from 'react' -import Renderer from 'react-test-renderer' - -import { - DeprecatedCheckboxField, - DropdownField, - FormGroup, - InputField, - RadioGroup, -} from '..' - -describe('DeprecatedCheckboxField', () => { - it('renders correctly when unchecked', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders correctly when checked', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) - -describe('DropdownField', () => { - it('renders correctly with a value', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders correctly with a falsey value', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) - -describe('FormGroup', () => { - it('renders correctly', () => { - const tree = Renderer.create( - -
    Hey test here
    -
    More test here
    -     - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) - -describe('InputField', () => { - it('renders correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) - -describe('RadioGroup', () => { - it('renders correctly with no checked value', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders correctly with checked value', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders correctly inline', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) diff --git a/components/src/__tests__/icons.test.tsx b/components/src/__tests__/icons.test.tsx deleted file mode 100644 index 69627c31056..00000000000 --- a/components/src/__tests__/icons.test.tsx +++ /dev/null @@ -1,36 +0,0 @@ -// icon components tests -import React from 'react' -import Renderer from 'react-test-renderer' - -import { Icon, NotificationIcon } from '..' - -import { ICON_DATA_BY_NAME } from '../icons/icon-data' -import type { IconName } from '../icons' - -const icons = Object.keys(ICON_DATA_BY_NAME) as IconName[] - -describe('icons', () => { - icons.forEach(icon => - it(`${icon} renders correctly`, () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - ) -}) - -describe('Notification Icon', () => { - it('NotificationIcon renders correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) diff --git a/components/src/__tests__/instrument-diagram.test.tsx b/components/src/__tests__/instrument-diagram.test.tsx deleted file mode 100644 index 104d450bdbf..00000000000 --- a/components/src/__tests__/instrument-diagram.test.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React from 'react' -import Renderer from 'react-test-renderer' - -import { InstrumentDiagram, InstrumentGroup } from '..' - -// TODO(bc, 2021-03-03): unit test this component and split out InstrumentDiagram from InstrumentGroup - -describe('InstrumentDiagram', () => { - it('Single-channel renders correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('Multi-channel renders correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('Single-channel GEN2 renders correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('Multi-channel GEN2 renders correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('single-channel FLEX renders correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('eight-channel FLEX renders correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('96-channel GEN1 renders correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) - -describe('InstrumentGroup', () => { - it('Renders correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) diff --git a/components/src/__tests__/lists.test.tsx b/components/src/__tests__/lists.test.tsx deleted file mode 100644 index c6b340256e5..00000000000 --- a/components/src/__tests__/lists.test.tsx +++ /dev/null @@ -1,148 +0,0 @@ -// list and list item components tests -import React from 'react' -import { MemoryRouter } from 'react-router-dom' -import Renderer from 'react-test-renderer' - -import { SidePanelGroup, TitledList, ListItem } from '..' - -describe('TitledList', () => { - it('adds an h3 with the title', () => { - const heading = Renderer.create( - - ).root.findByType('h3') - - expect(heading).toBeDefined() - expect(heading.children).toEqual(['hello']) - }) - - it('adds an optional svg icon to title', () => { - const icon = Renderer.create( - - ).root.findByType('svg') - - expect(icon).toBeDefined() - }) - - it('renders TitledList without icon correctly', () => { - const tree = Renderer.create().toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders TitledList with children correctly', () => { - const tree = Renderer.create( - -
  • Woop
    • - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders TitledList with onMouseEnter & onMouseLeave correctly', () => { - const noop = (): void => {} - - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders TitledList with optional icon correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders expanded TitledList correctly', () => { - const tree = Renderer.create( - {}} - description={Description} - > -
  • 1
    • -
  • 2
    • -     - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders collapsed TitledList correctly', () => { - const tree = Renderer.create( - {}} - description={Description} - collapsed - > -
  • 1
    • -
  • 2
    • -     - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) - -describe('ListItem', () => { - it('creates a linked list item from props', () => { - const linkItemProps = { - url: '/foo/bar', - isDisabled: false, - } - - const root = Renderer.create( - - foo - - ).root - - const link = root.findByType('a') - expect(link.props.href).toBe(linkItemProps.url) - }) - - it('adds an optional svg icon as child', () => { - const icon = Renderer.create( - - ).root.findByType('svg') - - expect(icon).toBeDefined() - }) - - it('renders ListItem with icon correctly', () => { - const tree = Renderer.create().toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders ListItem without icon correctly', () => { - const tree = Renderer.create().toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('Side Panel Group renders correctly', () => { - const tree = Renderer.create( - - children - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('Disabled Side Panel Group renders correctly', () => { - const tree = Renderer.create( - - children - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) diff --git a/components/src/__tests__/modals.test.tsx b/components/src/__tests__/modals.test.tsx deleted file mode 100644 index cac3fe59b9e..00000000000 --- a/components/src/__tests__/modals.test.tsx +++ /dev/null @@ -1,163 +0,0 @@ -// modal component tests -import React from 'react' -import Renderer from 'react-test-renderer' - -import { - Modal, - AlertModal, - ContinueModal, - ModalPage, - SpinnerModalPage, - Overlay, -} from '..' - -describe('modals', () => { - it('Modal has a clickable overlay', () => { - const onCloseClick = jest.fn() - const root = Renderer.create( - children - ).root - - const overlay = root.findByProps({ - backgroundColor: 'rgba(0, 0, 0, 0.9)', - }) - overlay.props.onClick() - - expect(onCloseClick).toHaveBeenCalled() - }) - - it('ContinueModal has continue and cancel buttons', () => { - const onCancelClick = jest.fn() - const onContinueClick = jest.fn() - const root = Renderer.create( - - children - - ).root - - const cancelButton = root.findByProps({ title: 'Cancel' }) - const continueButton = root.findByProps({ title: 'Continue' }) - - cancelButton.props.onClick() - expect(onCancelClick).toHaveBeenCalled() - - continueButton.props.onClick() - expect(onContinueClick).toHaveBeenCalled() - }) - - it('ContinueModal calls onCancelClick on overlay click', () => { - const onCancelClick = jest.fn() - const onContinueClick = jest.fn() - const root = Renderer.create( - - children - - ).root - - const overlay = root.findByProps({ - backgroundColor: 'rgba(0, 0, 0, 0.9)', - }) - - overlay.props.onClick() - expect(onCancelClick).toHaveBeenCalled() - }) - - it('Modal renders correctly', () => { - const tree = Renderer.create( - {}} className="foo"> - children - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('Modal renders correctly with optional heading', () => { - const tree = Renderer.create( - {}} - className="foo" - heading={'Heading Visible'} - > - children - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('AlertModal renders correctly', () => { - const tree = Renderer.create( - {}} - buttons={[ - { onClick: () => {}, children: 'a' }, - { onClick: () => {}, children: 'b' }, - ]} - > - children - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('ContinueModal renders correctly', () => { - const tree = Renderer.create( - {}} onContinueClick={() => {}}> - children - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('Overlay renders correctly', () => { - const tree = Renderer.create( {}} />).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('ModalPage renders correctly', () => { - const tree = Renderer.create( - alert('back button clicked'), - }, - }} - > - children - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('SpinnerModalPage renders correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) diff --git a/components/src/__tests__/nav.test.tsx b/components/src/__tests__/nav.test.tsx deleted file mode 100644 index dfa6a9aa887..00000000000 --- a/components/src/__tests__/nav.test.tsx +++ /dev/null @@ -1,22 +0,0 @@ -// navigation components tests -import React from 'react' -import Renderer from 'react-test-renderer' - -import { SidePanel } from '..' - -describe('SidePanel', () => { - it('renders sidebar with title', () => { - const heading = Renderer.create( - - ).root.findByType('h2') - - expect(heading).toBeDefined() - expect(heading.children).toEqual(['title']) - }) - - it('renders sidebar without title', () => { - const headings = Renderer.create().root.findAllByType('h2') - - expect(headings).toHaveLength(0) - }) -}) diff --git a/components/src/__tests__/slotmap.test.tsx b/components/src/__tests__/slotmap.test.tsx deleted file mode 100644 index 1400385c716..00000000000 --- a/components/src/__tests__/slotmap.test.tsx +++ /dev/null @@ -1,36 +0,0 @@ -// slot map component tests -import React from 'react' -import Renderer from 'react-test-renderer' -import { SlotMap } from '..' - -describe('SlotMap', () => { - it('renders correctly without collision warnings or errors', () => { - const tree = Renderer.create().toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders correctly with collision warning', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders correctly with error', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders correctly with error and collision warning', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) diff --git a/components/src/__tests__/structure.test.tsx b/components/src/__tests__/structure.test.tsx deleted file mode 100644 index f47c6a956ec..00000000000 --- a/components/src/__tests__/structure.test.tsx +++ /dev/null @@ -1,190 +0,0 @@ -// structure components tests -import React from 'react' -import { MemoryRouter } from 'react-router-dom' -import Renderer from 'react-test-renderer' - -import { PageTabs, TitleBar, Card, LabeledValue, Splash, Pill } from '..' - -describe('TitleBar', () => { - it('adds an h1 with the title', () => { - const heading = Renderer.create().root.findByType( - 'h1' - ) - - expect(heading).toBeDefined() - expect(heading.children).toEqual(['hello']) - }) - - it('adds an optional h2 with the subtitle', () => { - const heading = Renderer.create( - - ).root.findByType('h2') - - expect(heading).toBeDefined() - expect(heading.children).toEqual(['world']) - }) - - it('add optional back button', () => { - const onBackClick = jest.fn() - const button = Renderer.create( - - ).root.findByType('button') - - button.props.onClick() - expect(onBackClick).toHaveBeenCalled() - }) - - it('renders TitleBar without subtitle correctly', () => { - const tree = Renderer.create().toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders TitleBar with subtitle correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders TitleBar with back button correctly', () => { - const tree = Renderer.create( - {}} /> - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders TitleBar with rightNode and its ReactNode as a string', () => { - const rightNode = 'foo bar' - const tree = Renderer.create() - - expect(tree).toMatchSnapshot() - }) -}) - -describe('PageTabs', () => { - it('renders h3 links for each page', () => { - const pages = [ - { title: 'Page1', href: '/page1', isActive: false, isDisabled: false }, - { title: 'Page2', href: '/page2', isActive: false, isDisabled: false }, - ] - - const root = Renderer.create( - - - - ).root - - const links = root.findAllByType('a') - expect(links).toHaveLength(2) - - links.forEach((link, index) => { - const { title, href } = pages[index] - expect(link.props.href).toBe(href) - expect(link.findByType('h3').children).toEqual([title]) - }) - }) - - it('does not create a link if disabled', () => { - const pages = [ - { title: 'Page1', href: '/page1', isActive: false, isDisabled: true }, - ] - - const notLink = Renderer.create( - - - - ).root.findByType('span') - - expect(notLink.findByType('h3').children).toEqual([pages[0].title]) - }) - - it('adds active class if active', () => { - const pages = [ - { title: 'Page1', href: '/page1', isActive: true, isDisabled: false }, - ] - - const link = Renderer.create( - - - - ).root.findByType('a') - - expect(link.props.className).toMatch(/active/) - }) - - it('renders PageTabs correctly', () => { - const pages = [ - { title: 'Page1', href: '/page1', isActive: true, isDisabled: false }, - { title: 'Page2', href: '/page2', isActive: false, isDisabled: true }, - ] - - const tree = Renderer.create( - - - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) - -describe('Card', () => { - it('renders Card correctly', () => { - const tree = Renderer.create( - children children children - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) - -describe('LabeledValue', () => { - it('renders LabeledValue correctly', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) - -describe('Splash', () => { - it('renders correctly with no props', () => { - const tree = Renderer.create().toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders correctly with custom props', () => { - const tree = Renderer.create( - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) - -describe('Pill', () => { - it('renders Pill correctly', () => { - const tree = Renderer.create( - - Blue - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('renders Pill correctly with inverted text', () => { - const tree = Renderer.create( - - Blue - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) -}) diff --git a/package.json b/package.json index 0f290c9d41d..91bd5cd72f8 100755 --- a/package.json +++ b/package.json @@ -65,7 +65,6 @@ "@types/react-dom": "18.0.6", "@types/react-redux": "7.1.32", "@types/react-router-dom": "5.3.3", - "@types/react-test-renderer": "^17.0.1", "@types/redux-mock-store": "^1.0.2", "@types/semver": "^7.3.6", "@typescript-eslint/eslint-plugin": "^4.18.0", @@ -136,7 +135,6 @@ "react-docgen-typescript": "^1.21.0", "react-dom": "18.2.0", "react-snap": "^1.23.0", - "react-test-renderer": "^18.2.0", "redux-mock-store": "^1.5.3", "rehype": "^9.0.0", "rehype-urls": "^1.0.0", diff --git a/yarn.lock b/yarn.lock index 273ab4f8a73..f9fc4dd33cf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3906,13 +3906,6 @@ "@types/history" "^4.7.11" "@types/react" "*" -"@types/react-test-renderer@^17.0.1": - version "17.0.1" - resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3120f7d1c157fba9df0118dae20cb0297ee0e06b" - integrity sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw== - dependencies: - "@types/react" "*" - "@types/react-transition-group@^4.4.0": version "4.4.5" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416" @@ -17396,16 +17389,16 @@ react-is@17.0.2, react-is@^17.0.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== -"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0: - version "18.2.0" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" - integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== - react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-is@^18.0.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" + integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== + react-lifecycles-compat@^3.0.2: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" @@ -17514,14 +17507,6 @@ react-select@5.4.0: prop-types "^15.6.0" react-transition-group "^4.3.0" -react-shallow-renderer@^16.15.0: - version "16.15.0" - resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457" - integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA== - dependencies: - object-assign "^4.1.1" - react-is "^16.12.0 || ^17.0.0 || ^18.0.0" - react-simple-keyboard@^3.4.187: version "3.4.226" resolved "https://registry.yarnpkg.com/react-simple-keyboard/-/react-simple-keyboard-3.4.226.tgz#84a05dadf32c9c8d13855e3ecc73d4e92b15a7d8" @@ -17552,15 +17537,6 @@ react-style-singleton@^2.1.0: invariant "^2.2.4" tslib "^1.0.0" -react-test-renderer@^18.2.0: - version "18.2.0" - resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.2.0.tgz#1dd912bd908ff26da5b9fca4fd1c489b9523d37e" - integrity sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA== - dependencies: - react-is "^18.2.0" - react-shallow-renderer "^16.15.0" - scheduler "^0.23.0" - react-transition-group@^4.3.0: version "4.4.2" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" From 1a1bfde1df414fbc4da0dcd62ec97b45d8739b64 Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Thu, 7 Dec 2023 17:11:12 -0500 Subject: [PATCH 08/31] wait for after user interaction --- .../MenuList/__tests__/OverflowBtn.test.tsx | 2 +- .../__tests__/FloatingActionButton.test.tsx | 1 + .../__tests__/QuaternaryButton.test.tsx | 1 + .../__tests__/SubmitPrimaryButton.test.tsx | 1 + .../buttons/__tests__/TabbedButton.test.tsx | 1 + .../buttons/__tests__/TertiaryButton.test.tsx | 1 + .../buttons/__tests__/ToggleButton.test.tsx | 1 + .../__tests__/LegacyModalHeader.test.tsx | 1 + .../MiniCard/__tests__/MiniCard.test.tsx | 1 + .../ModuleIcon/__tests__/ModuleIcon.test.tsx | 1 + .../__tests__/ProtocolDetails.test.tsx | 44 +++++++------ .../__tests__/CheckboxField.test.tsx | 1 + .../__tests__/AlertPrimaryButton.test.tsx | 1 + .../buttons/__tests__/PrimaryButton.test.tsx | 1 + .../__tests__/SecondaryButton.test.tsx | 1 + .../__snapshots__/Logo.test.tsx.snap | 17 ----- .../__snapshots__/MainNav.test.tsx.snap | 11 ---- .../__snapshots__/NavLink.test.tsx.snap | 19 ------ .../__snapshots__/NavList.test.tsx.snap | 9 --- .../__snapshots__/SubdomainNav.test.tsx.snap | 66 ------------------- 20 files changed, 39 insertions(+), 142 deletions(-) delete mode 100644 labware-library/src/components/website-navigation/__tests__/__snapshots__/Logo.test.tsx.snap delete mode 100644 labware-library/src/components/website-navigation/__tests__/__snapshots__/MainNav.test.tsx.snap delete mode 100644 labware-library/src/components/website-navigation/__tests__/__snapshots__/NavLink.test.tsx.snap delete mode 100644 labware-library/src/components/website-navigation/__tests__/__snapshots__/NavList.test.tsx.snap delete mode 100644 labware-library/src/components/website-navigation/__tests__/__snapshots__/SubdomainNav.test.tsx.snap diff --git a/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx b/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx index 9e8f0945d7b..0ca1c115d33 100644 --- a/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx +++ b/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx @@ -1,6 +1,6 @@ +import 'jest-styled-components' import * as React from 'react' import { fireEvent } from '@testing-library/react' -import 'jest-styled-components' import { COLORS, renderWithProviders } from '@opentrons/components' import { OverflowBtn } from '../OverflowBtn' diff --git a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx index 0c14cec1f55..55e04d8bfea 100644 --- a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx @@ -1,3 +1,4 @@ +import 'jest-styled-components' import * as React from 'react' import { renderWithProviders, diff --git a/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx b/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx index 11df7e1a5bc..91a93db092a 100644 --- a/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx @@ -1,3 +1,4 @@ +import 'jest-styled-components' import * as React from 'react' import { renderWithProviders, diff --git a/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx b/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx index 5cb3c65f933..5ceffe87b28 100644 --- a/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx @@ -1,3 +1,4 @@ +import 'jest-styled-components' import * as React from 'react' import { fireEvent } from '@testing-library/react' import { diff --git a/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx b/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx index 5af751f3982..74e7b169cbd 100644 --- a/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx @@ -1,3 +1,4 @@ +import 'jest-styled-components' import * as React from 'react' import { renderWithProviders, diff --git a/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx b/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx index 947a75fef7b..d7ac4dd6dc0 100644 --- a/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx @@ -1,3 +1,4 @@ +import 'jest-styled-components' import * as React from 'react' import { renderWithProviders, diff --git a/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx b/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx index dd841423dc8..88410aa8747 100644 --- a/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx @@ -1,3 +1,4 @@ +import 'jest-styled-components' import * as React from 'react' import { fireEvent } from '@testing-library/react' import { renderWithProviders, COLORS, SIZE_2 } from '@opentrons/components' diff --git a/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx b/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx index f4b341caf25..2a4af05e006 100644 --- a/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx +++ b/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx @@ -1,3 +1,4 @@ +import 'jest-styled-components' import * as React from 'react' import { diff --git a/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx b/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx index d50ce98d6f0..0defbd4cc7e 100644 --- a/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx +++ b/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx @@ -1,3 +1,4 @@ +import 'jest-styled-components' import * as React from 'react' import { fireEvent } from '@testing-library/react' import { diff --git a/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx b/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx index 090d5dcfc35..8c7dd92763b 100644 --- a/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx +++ b/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx @@ -1,3 +1,4 @@ +import 'jest-styled-components' import * as React from 'react' import { renderWithProviders, COLORS, SPACING } from '@opentrons/components' diff --git a/app/src/organisms/ProtocolDetails/__tests__/ProtocolDetails.test.tsx b/app/src/organisms/ProtocolDetails/__tests__/ProtocolDetails.test.tsx index 0f9294b6b1f..576ff847754 100644 --- a/app/src/organisms/ProtocolDetails/__tests__/ProtocolDetails.test.tsx +++ b/app/src/organisms/ProtocolDetails/__tests__/ProtocolDetails.test.tsx @@ -1,9 +1,9 @@ import * as React from 'react' import '@testing-library/jest-dom' -import { resetAllWhenMocks } from 'jest-when' -import { renderWithProviders } from '@opentrons/components' +import { resetAllWhenMocks, when } from 'jest-when' +import { partialComponentPropsMatcher, renderWithProviders } from '@opentrons/components' import { StaticRouter } from 'react-router-dom' -import { fireEvent } from '@testing-library/react' +import { act, waitFor } from '@testing-library/react' import { i18n } from '../../../i18n' import { useTrackEvent, @@ -28,6 +28,7 @@ import { ChooseRobotToRunProtocolSlideout } from '../../ChooseRobotToRunProtocol import type { ProtocolAnalysisOutput } from '@opentrons/shared-data' + jest.mock('../../../redux/analytics') jest.mock('../../../redux/custom-labware/selectors') jest.mock('../../../redux/discovery/selectors') @@ -50,12 +51,12 @@ const mockGetIsProtocolAnalysisInProgress = getIsProtocolAnalysisInProgress as j const mockGetValidCustomLabwareFiles = getValidCustomLabwareFiles as jest.MockedFunction< typeof getValidCustomLabwareFiles > -const mockChooseRobotToRunProtocolSlideout = ChooseRobotToRunProtocolSlideout as jest.MockedFunction< - typeof ChooseRobotToRunProtocolSlideout -> const mockUseTrackEvent = useTrackEvent as jest.MockedFunction< typeof useTrackEvent > +const mockChooseRobotToRunProtocolSlideout = ChooseRobotToRunProtocolSlideout as jest.MockedFunction< + typeof ChooseRobotToRunProtocolSlideout +> const render = ( props: Partial> = {} @@ -88,10 +89,13 @@ describe('ProtocolDetails', () => { mockGetUnreachableRobots.mockReturnValue([mockUnreachableRobot]) mockGetReachableRobots.mockReturnValue([mockReachableRobot]) mockGetScanning.mockReturnValue(false) - mockChooseRobotToRunProtocolSlideout.mockImplementation( - ({ showSlideout }) => - showSlideout ?
    mock Choose Robot Slideout
    : null - ) + + when(mockChooseRobotToRunProtocolSlideout) + .calledWith(partialComponentPropsMatcher({ showSlideout: true })) + .mockReturnValue(
    open Slideout
    ) + when(mockChooseRobotToRunProtocolSlideout) + .calledWith(partialComponentPropsMatcher({ showSlideout: false })) + .mockReturnValue(
    close Slideout
    ) mockGetIsProtocolAnalysisInProgress.mockReturnValue(false) mockUseTrackEvent.mockReturnValue(mockTrackEvent) }) @@ -138,7 +142,7 @@ describe('ProtocolDetails', () => { expect(getByText('fakeSrcFileName')).toBeInTheDocument() }) it('renders deck view section', () => { - const { getByRole } = render({ + const { getByRole, getByText } = render({ mostRecentAnalysis: { ...mockMostRecentAnalysis, createdAt, @@ -153,9 +157,10 @@ describe('ProtocolDetails', () => { }, }) expect(getByRole('heading', { name: 'Deck View' })).toBeInTheDocument() + getByText('close Slideout') }) - it('opens choose robot slideout when Start setup button is clicked', () => { - const { getByRole, getByText, queryByText } = render({ + it('opens choose robot slideout when Start setup button is clicked', async () => { + const { getByRole, getByText } = render({ mostRecentAnalysis: { ...mockMostRecentAnalysis, createdAt, @@ -170,13 +175,14 @@ describe('ProtocolDetails', () => { }, }) const runProtocolButton = getByRole('button', { name: 'Start setup' }) - expect(queryByText('mock Choose Robot Slideout')).toBeNull() - fireEvent.click(runProtocolButton) - expect(mockTrackEvent).toHaveBeenCalledWith({ - name: ANALYTICS_PROTOCOL_PROCEED_TO_RUN, - properties: { sourceLocation: 'ProtocolsDetail' }, + runProtocolButton.click() + await waitFor(() => { + expect(mockTrackEvent).toHaveBeenCalledWith({ + name: ANALYTICS_PROTOCOL_PROCEED_TO_RUN, + properties: { sourceLocation: 'ProtocolsDetail' }, + }) }) - expect(getByText('mock Choose Robot Slideout')).toBeVisible() + getByText('open Slideout') }) it('renders the protocol creation method', () => { const { getByRole, getByText } = render({ diff --git a/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx b/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx index d553bc0ed65..f1487c3e1ba 100644 --- a/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx +++ b/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx @@ -1,3 +1,4 @@ +import 'jest-styled-components' import * as React from 'react' import { fireEvent } from '@testing-library/react' import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles' diff --git a/components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx b/components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx index ae09ca1a2ec..30c56f0e936 100644 --- a/components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx +++ b/components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx @@ -1,3 +1,4 @@ +import 'jest-styled-components' import * as React from 'react' import { renderWithProviders } from '../../../testing/utils' import { diff --git a/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx b/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx index 45d0e69c506..5edc100c259 100644 --- a/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx +++ b/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx @@ -1,3 +1,4 @@ +import 'jest-styled-components' import * as React from 'react' import { renderWithProviders } from '../../../testing/utils' import { diff --git a/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx b/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx index 3f31693360e..babf1ded4db 100644 --- a/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx +++ b/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx @@ -1,3 +1,4 @@ +import 'jest-styled-components' import * as React from 'react' import { renderWithProviders } from '../../../testing/utils' import { diff --git a/labware-library/src/components/website-navigation/__tests__/__snapshots__/Logo.test.tsx.snap b/labware-library/src/components/website-navigation/__tests__/__snapshots__/Logo.test.tsx.snap deleted file mode 100644 index 6bf3e862042..00000000000 --- a/labware-library/src/components/website-navigation/__tests__/__snapshots__/Logo.test.tsx.snap +++ /dev/null @@ -1,17 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Logo component renders 1`] = ` -     - - -`; diff --git a/labware-library/src/components/website-navigation/__tests__/__snapshots__/MainNav.test.tsx.snap b/labware-library/src/components/website-navigation/__tests__/__snapshots__/MainNav.test.tsx.snap deleted file mode 100644 index 0db971d3a87..00000000000 --- a/labware-library/src/components/website-navigation/__tests__/__snapshots__/MainNav.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MainNav component renders 1`] = ` -
    - - - -
    -`; diff --git a/labware-library/src/components/website-navigation/__tests__/__snapshots__/NavLink.test.tsx.snap b/labware-library/src/components/website-navigation/__tests__/__snapshots__/NavLink.test.tsx.snap deleted file mode 100644 index bc463779ec1..00000000000 --- a/labware-library/src/components/website-navigation/__tests__/__snapshots__/NavLink.test.tsx.snap +++ /dev/null @@ -1,19 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`NavLink component renders 1`] = ` - -`; diff --git a/labware-library/src/components/website-navigation/__tests__/__snapshots__/NavList.test.tsx.snap b/labware-library/src/components/website-navigation/__tests__/__snapshots__/NavList.test.tsx.snap deleted file mode 100644 index e6057709cb9..00000000000 --- a/labware-library/src/components/website-navigation/__tests__/__snapshots__/NavList.test.tsx.snap +++ /dev/null @@ -1,9 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`NavList component renders 1`] = ` - - - -`; diff --git a/labware-library/src/components/website-navigation/__tests__/__snapshots__/SubdomainNav.test.tsx.snap b/labware-library/src/components/website-navigation/__tests__/__snapshots__/SubdomainNav.test.tsx.snap deleted file mode 100644 index 033c606177e..00000000000 --- a/labware-library/src/components/website-navigation/__tests__/__snapshots__/SubdomainNav.test.tsx.snap +++ /dev/null @@ -1,66 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SecondaryNav component renders 1`] = ` - -`; From 5697866b846f70bb4377ad1103cc16bb5a72b505 Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Fri, 8 Dec 2023 12:41:22 -0500 Subject: [PATCH 09/31] migrate to fire event --- .eslintrc.js | 5 +- .../__tests__/CustomKeyboard.test.tsx | 27 +- .../__tests__/NormalKeyboard.test.tsx | 31 +- .../Numpad/__tests__/Numpad.test.tsx | 16 +- .../__tests__/CollapsibleSection.test.tsx | 22 +- .../__tests__/useToggleGroup.test.tsx | 11 +- .../__tests__/UpdateBanner.test.tsx | 50 +- .../__tests__/UploadInput.test.tsx | 48 +- .../__tests__/ConnectRobotSlideout.test.tsx | 110 +- .../__tests__/ApplyHistoricOffsets.test.tsx | 109 +- .../__tests__/LabwareOffsetTable.test.tsx | 97 +- .../__tests__/CalibrateDeck.test.tsx | 75 +- .../__tests__/CalibratePipetteOffset.test.tsx | 77 +- .../src/hooks/__tests__/useSwipe.test.tsx | 6 +- .../__tests__/__snapshots__/App.test.tsx.snap | 83 - .../__snapshots__/Page.test.tsx.snap | 51 - .../__snapshots__/LabwareList.test.tsx.snap | 12939 ---------------- .../__tests__/__snapshots__/Nav.test.tsx.snap | 28 - .../FilterCategory.test.tsx.snap | 81 - .../FilterManufacturer.test.tsx.snap | 47 - .../__snapshots__/LabwareGuide.test.tsx.snap | 69 - .../__snapshots__/Sidebar.test.tsx.snap | 33 - package.json | 1 + yarn.lock | 93 +- 24 files changed, 443 insertions(+), 13666 deletions(-) delete mode 100644 labware-library/src/components/App/__tests__/__snapshots__/App.test.tsx.snap delete mode 100644 labware-library/src/components/App/__tests__/__snapshots__/Page.test.tsx.snap delete mode 100644 labware-library/src/components/LabwareList/__tests__/__snapshots__/LabwareList.test.tsx.snap delete mode 100644 labware-library/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap delete mode 100644 labware-library/src/components/Sidebar/__tests__/__snapshots__/FilterCategory.test.tsx.snap delete mode 100644 labware-library/src/components/Sidebar/__tests__/__snapshots__/FilterManufacturer.test.tsx.snap delete mode 100644 labware-library/src/components/Sidebar/__tests__/__snapshots__/LabwareGuide.test.tsx.snap delete mode 100644 labware-library/src/components/Sidebar/__tests__/__snapshots__/Sidebar.test.tsx.snap diff --git a/.eslintrc.js b/.eslintrc.js index e4d018b52be..42fa672a061 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -9,7 +9,7 @@ module.exports = { extends: ['standard-with-typescript', 'plugin:react/recommended', 'prettier'], - plugins: ['react', 'react-hooks', 'json', 'jest'], + plugins: ['react', 'react-hooks', 'json', 'jest', 'testing-library'], rules: { camelcase: 'off', @@ -79,7 +79,7 @@ module.exports = { env: { jest: true, }, - extends: ['plugin:jest/recommended'], + extends: ['plugin:jest/recommended', 'plugin:testing-library/react'], rules: { 'jest/expect-expect': 'off', 'jest/no-standalone-expect': 'off', @@ -93,6 +93,7 @@ module.exports = { 'jest/no-deprecated-functions': 'warn', 'jest/valid-title': 'warn', 'jest/no-conditional-expect': 'warn', + 'testing-library/prefer-screen-queries': 'warn' }, }, { diff --git a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx index 9abebe0abc7..aa64a347c24 100644 --- a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx @@ -1,6 +1,5 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' -import { renderHook } from '@testing-library/react' +import { fireEvent, renderHook } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { CustomKeyboard } from '..' @@ -9,17 +8,12 @@ const render = (props: React.ComponentProps) => { } describe('CustomKeyboard', () => { - let props: React.ComponentProps - - beforeEach(() => { + it('should render the custom keyboards lower case', () => { const { result } = renderHook(() => React.useRef(null)) - props = { + const props = { onChange: jest.fn(), keyboardRef: result.current, } - }) - - it('should render the custom keyboards lower case', () => { const { getAllByRole } = render(props) const buttons = getAllByRole('button') const expectedButtonNames = [ @@ -59,6 +53,11 @@ describe('CustomKeyboard', () => { }) }) it('should render the custom keyboards upper case, when clicking shift key', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: jest.fn(), + keyboardRef: result.current, + } const { getByRole, getAllByRole } = render(props) const shiftKey = getByRole('button', { name: 'SHIFT' }) fireEvent.click(shiftKey) @@ -102,6 +101,11 @@ describe('CustomKeyboard', () => { }) it('should render the custom keyboards numbers, when clicking number key', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: jest.fn(), + keyboardRef: result.current, + } const { getByRole, getAllByRole } = render(props) const numberKey = getByRole('button', { name: '123' }) fireEvent.click(numberKey) @@ -127,6 +131,11 @@ describe('CustomKeyboard', () => { }) it('should render the custom keyboards lower case, when clicking number key then abc key', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: jest.fn(), + keyboardRef: result.current, + } const { getByRole } = render(props) const numberKey = getByRole('button', { name: '123' }) getByRole('button', { name: 'a' }) diff --git a/app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx index 4ea95b875e3..061e9bdd810 100644 --- a/app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx @@ -1,6 +1,5 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' -import { renderHook } from '@testing-library/react' +import { fireEvent, renderHook } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { NormalKeyboard } from '..' @@ -9,16 +8,12 @@ const render = (props: React.ComponentProps) => { } describe('SoftwareKeyboard', () => { - let props: React.ComponentProps - - beforeEach(() => { + it('should render the software keyboards', () => { const { result } = renderHook(() => React.useRef(null)) - props = { + const props = { onChange: jest.fn(), keyboardRef: result.current, } - }) - it('should render the software keyboards', () => { const { getAllByRole } = render(props) const buttons = getAllByRole('button') @@ -62,6 +57,11 @@ describe('SoftwareKeyboard', () => { }) it('should render the software keyboards when hitting shift key', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: jest.fn(), + keyboardRef: result.current, + } const { getAllByRole, getByRole } = render(props) const shiftKey = getByRole('button', { name: 'SHIFT' }) fireEvent.click(shiftKey) @@ -106,6 +106,11 @@ describe('SoftwareKeyboard', () => { }) it('should render the software keyboards when hitting 123 key', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: jest.fn(), + keyboardRef: result.current, + } const { getAllByRole, getByRole } = render(props) const numberKey = getByRole('button', { name: '123' }) fireEvent.click(numberKey) @@ -149,6 +154,11 @@ describe('SoftwareKeyboard', () => { }) it('should render the software keyboards when hitting #+= key', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: jest.fn(), + keyboardRef: result.current, + } const { getAllByRole, getByRole } = render(props) const numberKey = getByRole('button', { name: '123' }) fireEvent.click(numberKey) @@ -194,6 +204,11 @@ describe('SoftwareKeyboard', () => { }) it('should call mock function when clicking a key', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: jest.fn(), + keyboardRef: result.current, + } const { getByRole } = render(props) const aKey = getByRole('button', { name: 'a' }) fireEvent.click(aKey) diff --git a/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx b/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx index a54a53268f0..aaf43b64e84 100644 --- a/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx @@ -1,6 +1,5 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' -import { renderHook } from '@testing-library/react' +import { fireEvent, renderHook } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { Numpad } from '..' @@ -9,16 +8,12 @@ const render = (props: React.ComponentProps) => { } describe('Numpad', () => { - let props: React.ComponentProps - - beforeEach(() => { + it('should render the numpad keys', () => { const { result } = renderHook(() => React.useRef(null)) - props = { + const props = { onChange: jest.fn(), keyboardRef: result.current, } - }) - it('should render the numpad keys', () => { const { getAllByRole } = render(props) const buttons = getAllByRole('button') const expectedButtonNames = [ @@ -43,6 +38,11 @@ describe('Numpad', () => { }) it('should call mock function when clicking num key', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: jest.fn(), + keyboardRef: result.current, + } const { getByRole } = render(props) const numKey = getByRole('button', { name: '1' }) fireEvent.click(numKey) diff --git a/app/src/molecules/CollapsibleSection/__tests__/CollapsibleSection.test.tsx b/app/src/molecules/CollapsibleSection/__tests__/CollapsibleSection.test.tsx index e02e90e83d7..513f74c8e57 100644 --- a/app/src/molecules/CollapsibleSection/__tests__/CollapsibleSection.test.tsx +++ b/app/src/molecules/CollapsibleSection/__tests__/CollapsibleSection.test.tsx @@ -1,40 +1,40 @@ import * as React from 'react' -import { fireEvent, render } from '@testing-library/react' +import { fireEvent, render, screen } from '@testing-library/react' import { CollapsibleSection } from '../' describe('CollapsibleSection', () => { it('renders children by default', () => { - const { queryByText } = render( + render( section children ) - expect(queryByText('section children')).toBeInTheDocument() + expect(screen.getByText('section children')).toBeInTheDocument() }) it('renders title by default', () => { - const { queryByText } = render( + render( section children ) - expect(queryByText('fakeTitle')).toBeInTheDocument() + expect(screen.getByText('fakeTitle')).toBeInTheDocument() }) it('after clicking collapse icon, children are hidden', () => { - const { queryByRole, queryByText } = render( + render( section children ) - const collapseButton = queryByRole('button') - collapseButton != null && fireEvent.click(collapseButton) - expect(queryByText('section children')).toBeFalsy() + const collapseButton = screen.getByRole('button') + fireEvent.click(collapseButton) + expect(screen.queryByText('section children')).toBeNull() }) it('initially collapsed if prop passed to override', () => { - const { queryByText } = render( + render( section children ) - expect(queryByText('section children')).toBeFalsy() + expect(screen.queryByText('section children')).toBeNull() }) }) diff --git a/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx b/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx index 9ac423f5d7d..f8dfa4e763e 100644 --- a/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx +++ b/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx @@ -1,8 +1,7 @@ import * as React from 'react' import { Provider } from 'react-redux' import { createStore } from 'redux' -import { act, renderHook } from '@testing-library/react' -import { render, fireEvent } from '@testing-library/react' +import { act, renderHook, render, fireEvent } from '@testing-library/react' import { useTrackEvent } from '../../../redux/analytics' import { useToggleGroup } from '../useToggleGroup' @@ -51,9 +50,7 @@ describe('useToggleGroup', () => { const { getByText } = render(result.current[1] as any) const listViewButton = getByText('List View') - act(() => { - fireEvent.click(listViewButton) - }) + fireEvent.click(listViewButton) expect(mockTrackEvent).toHaveBeenCalledWith({ name: 'fake event', properties: { view: 'list' }, @@ -71,9 +68,7 @@ describe('useToggleGroup', () => { const { getByText } = render(result.current[1] as any) const mapViewButton = getByText('Map View') - act(() => { - fireEvent.click(mapViewButton) - }) + fireEvent.click(mapViewButton) expect(mockTrackEvent).toHaveBeenCalledWith({ name: 'fake event', properties: { view: 'map' }, diff --git a/app/src/molecules/UpdateBanner/__tests__/UpdateBanner.test.tsx b/app/src/molecules/UpdateBanner/__tests__/UpdateBanner.test.tsx index c04943ca650..5cbd46e2b1b 100644 --- a/app/src/molecules/UpdateBanner/__tests__/UpdateBanner.test.tsx +++ b/app/src/molecules/UpdateBanner/__tests__/UpdateBanner.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { when } from 'jest-when' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' import { UpdateBanner } from '..' @@ -31,40 +31,38 @@ describe('Module Update Banner', () => { when(mockUseIsFlex).calledWith(props.robotName).mockReturnValue(true) }) it('enables the updateType and serialNumber to be used as the test ID', () => { - const { getByTestId } = render(props) - getByTestId('ModuleCard_calibration_update_banner_test_number') + render(props) + screen.getByTestId('ModuleCard_calibration_update_banner_test_number') }) it('renders an error banner if calibration is required with no exit button', () => { - const { getByLabelText, queryByLabelText } = render(props) - - getByLabelText('icon_error') - expect(queryByLabelText('close_icon')).not.toBeInTheDocument() + render(props) + screen.getByLabelText('icon_error') + expect(screen.queryByLabelText('close_icon')).not.toBeInTheDocument() }) it('renders an error banner if a mandatory firmware update is required with no exit button', () => { props = { ...props, updateType: 'firmware_important', } - const { getByLabelText, queryByLabelText } = render(props) - - getByLabelText('icon_error') - expect(queryByLabelText('close_icon')).not.toBeInTheDocument() + render(props) + screen.getByLabelText('icon_error') + expect(screen.queryByLabelText('close_icon')).not.toBeInTheDocument() }) it('renders a warning banner if an optional firmware update is needed with an exit button that dismisses the banner', () => { props = { ...props, updateType: 'firmware', } - const { getByLabelText, queryByLabelText } = render(props) - getByLabelText('icon_warning') - expect(queryByLabelText('close_icon')).toBeInTheDocument() - const btn = getByLabelText('close_icon') + render(props) + screen.getByLabelText('icon_warning') + expect(screen.getByLabelText('close_icon')).toBeInTheDocument() + const btn = screen.getByLabelText('close_icon') fireEvent.click(btn) expect(props.setShowBanner).toHaveBeenCalled() }) it('enables clicking of text to open the appropriate update modal', () => { - const { getByText } = render(props) - const calibrateBtn = getByText('Calibrate now') + render(props) + const calibrateBtn = screen.getByText('Calibrate now') fireEvent.click(calibrateBtn) expect(props.handleUpdateClick).toHaveBeenCalled() @@ -73,7 +71,7 @@ describe('Module Update Banner', () => { updateType: 'firmware', } render(props) - const firmwareBtn = getByText('Update now') + const firmwareBtn = screen.getByText('Update now') fireEvent.click(firmwareBtn) expect(props.handleUpdateClick).toHaveBeenCalledTimes(2) }) @@ -82,16 +80,16 @@ describe('Module Update Banner', () => { ...props, attachPipetteRequired: true, } - const { queryByText } = render(props) - expect(queryByText('Calibrate now')).not.toBeInTheDocument() + render(props) + expect(screen.queryByText('Calibrate now')).not.toBeInTheDocument() }) it('should not render a calibrate link if pipette firmware update is required', () => { props = { ...props, updatePipetteFWRequired: true, } - const { queryByText } = render(props) - expect(queryByText('Calibrate now')).not.toBeInTheDocument() + render(props) + expect(screen.queryByText('Calibrate now')).not.toBeInTheDocument() }) it('should render a firmware update link if pipette calibration or firmware update is required', () => { props = { @@ -100,12 +98,12 @@ describe('Module Update Banner', () => { attachPipetteRequired: true, updatePipetteFWRequired: true, } - const { queryByText } = render(props) - expect(queryByText('Update now')).toBeInTheDocument() + render(props) + expect(screen.getByText('Update now')).toBeInTheDocument() }) it('should not render a calibrate update link if the robot is an OT-2', () => { when(mockUseIsFlex).calledWith(props.robotName).mockReturnValue(false) - const { queryByText } = render(props) - expect(queryByText('Calibrate now')).not.toBeInTheDocument() + render(props) + expect(screen.queryByText('Calibrate now')).not.toBeInTheDocument() }) }) diff --git a/app/src/molecules/UploadInput/__tests__/UploadInput.test.tsx b/app/src/molecules/UploadInput/__tests__/UploadInput.test.tsx index 9da307296b0..32a0d231adb 100644 --- a/app/src/molecules/UploadInput/__tests__/UploadInput.test.tsx +++ b/app/src/molecules/UploadInput/__tests__/UploadInput.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import '@testing-library/jest-dom' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { BrowserRouter } from 'react-router-dom' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' @@ -8,42 +8,52 @@ import { UploadInput } from '..' describe('UploadInput', () => { let onUpload: jest.MockedFunction<() => {}> - let render: () => ReturnType[0] beforeEach(() => { onUpload = jest.fn() - render = () => { - return renderWithProviders( - - - , - { - i18nInstance: i18n, - } - )[0] - } }) afterEach(() => { jest.resetAllMocks() }) it('renders correct contents for empty state', () => { - const { getByRole } = render() + renderWithProviders( + + + , + { + i18nInstance: i18n, + } + ) - expect(getByRole('button', { name: 'Upload' })).toBeTruthy() + expect(screen.getByRole('button', { name: 'Upload' })).toBeTruthy() }) it('opens file select on button click', () => { - const { getByRole, getByTestId } = render() - const button = getByRole('button', { name: 'Upload' }) - const input = getByTestId('file_input') + renderWithProviders( + + + , + { + i18nInstance: i18n, + } + ) + const button = screen.getByRole('button', { name: 'Upload' }) + const input = screen.getByTestId('file_input') input.click = jest.fn() fireEvent.click(button) expect(input.click).toHaveBeenCalled() }) it('calls create session on choose file', () => { - const { getByTestId } = render() - const input = getByTestId('file_input') + renderWithProviders( + + + , + { + i18nInstance: i18n, + } + ) + const input = screen.getByTestId('file_input') fireEvent.change(input, { target: { files: ['dummyFile'] } }) expect(onUpload).toHaveBeenCalledWith('dummyFile') }) diff --git a/app/src/organisms/AppSettings/__tests__/ConnectRobotSlideout.test.tsx b/app/src/organisms/AppSettings/__tests__/ConnectRobotSlideout.test.tsx index 757ea8393c9..6923cd1dc3b 100644 --- a/app/src/organisms/AppSettings/__tests__/ConnectRobotSlideout.test.tsx +++ b/app/src/organisms/AppSettings/__tests__/ConnectRobotSlideout.test.tsx @@ -1,7 +1,5 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' -import { act } from 'react-dom/test-utils' - +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' @@ -69,69 +67,65 @@ describe('ConnectRobotSlideout', () => { }) it('renders correct title, body, and footer for ConnectRobotSlideout', () => { - const { getByText } = render(props) - getByText('Connect to a Robot via IP Address') - getByText('Enter an IP address or hostname to connect to a robot.') - getByText( + render(props) + screen.getByText('Connect to a Robot via IP Address') + screen.getByText('Enter an IP address or hostname to connect to a robot.') + screen.getByText( 'Opentrons recommends working with your network administrator to assign a static IP address to the robot.' ) - getByText('Learn more about connecting a robot manually') + screen.getByText('Learn more about connecting a robot manually') - getByText('Add IP Address or Hostname') + screen.getByText('Add IP Address or Hostname') }) it('renders the Add button, Done button, and input form', () => { - const { getByRole } = render(props) - getByRole('button', { name: 'Add' }) - getByRole('button', { name: 'Done' }) - expect(getByRole('textbox')).toBeInTheDocument() + render(props) + screen.getByRole('button', { name: 'Add' }) + screen.getByRole('button', { name: 'Done' }) + expect(screen.getByRole('textbox')).toBeInTheDocument() }) it('renders the link and it has the correct href attribute', () => { - const { getByText } = render(props) + render(props) const targetLink = 'https://support.opentrons.com/s/article/Manually-adding-a-robot-s-IP-address' - const link = getByText('Learn more about connecting a robot manually') + const link = screen.getByText('Learn more about connecting a robot manually') expect(link.closest('a')).toHaveAttribute('href', targetLink) }) it('Clicking Add button without IP address/hostname should display an error message', async () => { - const { getByRole, findByText } = render(props) - const addButton = getByRole('button', { name: 'Add' }) + render(props) + const addButton = screen.getByRole('button', { name: 'Add' }) expect(addButton).toBeEnabled() - await fireEvent.click(addButton) - const errorMessage = await findByText('Enter an IP Address or Hostname') + fireEvent.click(addButton) + const errorMessage = await screen.findByText('Enter an IP Address or Hostname') expect(errorMessage).toBeInTheDocument() }) it('Clicking Add button with an IP address/hostname should display the IP address/hostname', async () => { - const { getByRole, getByText, queryByText } = render(props) + render(props) const newIpAddress = 'localhost' - const inputBox = getByRole('textbox') - const addButton = getByRole('button', { name: 'Add' }) - await act(async () => { - await fireEvent.change(inputBox, { target: { value: newIpAddress } }) - await fireEvent.click(addButton) - }) - - getByText(newIpAddress) - getByText('Searching for 30s') - expect(queryByText('Available')).toBeInTheDocument() + const inputBox = screen.getByRole('textbox') + const addButton = screen.getByRole('button', { name: 'Add' }) + fireEvent.change(inputBox, { target: { value: newIpAddress } }) + fireEvent.click(addButton) + + screen.getByText(newIpAddress) + screen.getByText('Searching for 30s') + expect(screen.queryByText('Available')).toBeInTheDocument() }) it('Clicking Add button with an IP address/hostname should display the IP address/hostname and Available label', async () => { - const { getByRole, getByText, queryByText } = render(props) + render(props) const availableIpAddress = '192.168.1.1' - const inputBox = getByRole('textbox') - const addButton = getByRole('button', { name: 'Add' }) - await act(async () => { - await fireEvent.change(inputBox, { - target: { value: availableIpAddress }, - }) - await fireEvent.click(addButton) + const inputBox = screen.getByRole('textbox') + const addButton = screen.getByRole('button', { name: 'Add' }) + fireEvent.change(inputBox, { + target: { value: availableIpAddress }, }) - getByText(availableIpAddress) - queryByText('Available') + fireEvent.click(addButton) + screen.getByText(availableIpAddress) + screen.queryByText('Available') }) it('Clicking Add button with an IP address/hostname should display the IP address/hostname and Not Found label', async () => { @@ -139,44 +133,40 @@ describe('ConnectRobotSlideout', () => { const notFoundIpAddress = '1.1.1.2' const inputBox = getByRole('textbox') const addButton = getByRole('button', { name: 'Add' }) - await act(async () => { - await fireEvent.change(inputBox, { - target: { value: notFoundIpAddress }, - }) - await fireEvent.click(addButton) + fireEvent.change(inputBox, { + target: { value: notFoundIpAddress }, }) + fireEvent.click(addButton) findByText(notFoundIpAddress) findByText('Not Found') }) it('Clicking Close button in a row should remove an IP address/hostname', async () => { - const { queryByText, getByRole, getAllByTestId } = render(props) + render(props) const targetIpAddress = 'test' - const inputBox = getByRole('textbox') - const addButton = getByRole('button', { name: 'Add' }) - await act(async () => { - fireEvent.change(inputBox, { target: { value: targetIpAddress } }) - fireEvent.click(addButton) - }) - const removeButtons = getAllByTestId('close-button') + const inputBox = screen.getByRole('textbox') + const addButton = screen.getByRole('button', { name: 'Add' }) + fireEvent.change(inputBox, { target: { value: targetIpAddress } }) + fireEvent.click(addButton) + const removeButtons = screen.getAllByTestId('close-button') const btnLength = removeButtons.length fireEvent.click(removeButtons[btnLength - 1]) - expect(queryByText(targetIpAddress)).toBeFalsy() + expect(screen.queryByText(targetIpAddress)).toBeFalsy() }) it('Clicking close button should close the slideout', async () => { - const { getByTestId } = render(props) - const closeButton = getByTestId( + render(props) + const closeButton = screen.getByTestId( 'Slideout_icon_close_Connect to a Robot via IP Address' ) - await fireEvent.click(closeButton) + fireEvent.click(closeButton) expect(props.onCloseClick).toHaveBeenCalled() }) it('Clicking Done button should close the slideout', async () => { - const { getByRole } = render(props) - const doneButton = getByRole('button', { name: 'Done' }) - await fireEvent.click(doneButton) + render(props) + const doneButton = screen.getByRole('button', { name: 'Done' }) + fireEvent.click(doneButton) expect(props.onCloseClick).toHaveBeenCalled() }) }) diff --git a/app/src/organisms/ApplyHistoricOffsets/__tests__/ApplyHistoricOffsets.test.tsx b/app/src/organisms/ApplyHistoricOffsets/__tests__/ApplyHistoricOffsets.test.tsx index a287523512f..2f31cf0f266 100644 --- a/app/src/organisms/ApplyHistoricOffsets/__tests__/ApplyHistoricOffsets.test.tsx +++ b/app/src/organisms/ApplyHistoricOffsets/__tests__/ApplyHistoricOffsets.test.tsx @@ -8,6 +8,7 @@ import { getIsLabwareOffsetCodeSnippetsOn } from '../../../redux/config' import { getLabwareDefinitionsFromCommands } from '../../LabwarePositionCheck/utils/labware' import type { LabwareDefinition2 } from '@opentrons/shared-data' import type { OffsetCandidate } from '../hooks/useOffsetCandidatesForAnalysis' +import { fireEvent, screen } from '@testing-library/react' jest.mock('../../../redux/config') jest.mock('../../LabwarePositionCheck/utils/labware') @@ -64,46 +65,40 @@ const mockFourthCandidate: OffsetCandidate = { } describe('ApplyHistoricOffsets', () => { - let render: ( - props?: Partial> - ) => ReturnType const mockSetShouldApplyOffsets = jest.fn() - - beforeEach(() => { - render = props => - renderWithProviders>( - , - { i18nInstance: i18n } - ) - }) + const render = (props?: Partial>) => + renderWithProviders>( + , + { i18nInstance: i18n } + ) afterEach(() => { jest.resetAllMocks() }) it('renders correct copy when shouldApplyOffsets is true', () => { - const [{ getByText }] = render() - getByText('Apply labware offset data') - getByText('View data') + render() + screen.getByText('Apply labware offset data') + screen.getByText('View data') }) it('renders correct copy when shouldApplyOffsets is false', () => { - const [{ getByText }] = render({ shouldApplyOffsets: false }) - getByText('Apply labware offset data') - getByText('View data') + render({ shouldApplyOffsets: false }) + screen.getByText('Apply labware offset data') + screen.getByText('View data') }) it('renders view data modal when link clicked, with correct copy and table row for each candidate', () => { @@ -111,59 +106,62 @@ describe('ApplyHistoricOffsets', () => { mockLabwareDef, mockAdapterDef, ]) - const [{ getByText, getByRole, queryByText, getByTestId }] = render() - getByText('View data').click() + render() + const viewDataButton = screen.getByText('View data') + fireEvent.click(viewDataButton) - getByRole('heading', { name: 'Apply Stored Labware Offset Data?' }) - getByText( + screen.getByRole('heading', { name: 'Apply Stored Labware Offset Data?' }) + screen.getByText( 'This robot has offsets for labware used in this protocol. If you apply these offsets, you can still adjust them with Labware Position Check.' ) expect( - getByRole('link', { name: 'See how labware offsets work' }) + screen.getByRole('link', { name: 'See how labware offsets work' }) ).toHaveAttribute( 'href', 'https://support.opentrons.com/s/article/How-Labware-Offsets-work-on-the-OT-2' ) // first candidate table row - getByText('Slot 1') + screen.getByText('Slot 1') // second candidate table row - getByText('Slot 2') + screen.getByText('Slot 2') // 4th candidate a labware on adapter on module - getByText( + screen.getByText( 'Opentrons 96 PCR Heater-Shaker Adapter in Heater-Shaker Module GEN1 in Slot 3' ) // third candidate on module table row - getByText('Heater-Shaker Module GEN1 in Slot 3') - getByTestId( + screen.getByText('Heater-Shaker Module GEN1 in Slot 3') + const closeButton = screen.getByTestId( 'ModalHeader_icon_close_Apply Stored Labware Offset Data?' - ).click() - expect(queryByText('Apply Stored Labware Offset Data?')).toBeNull() + ) + fireEvent.click(closeButton) + expect(screen.queryByText('Apply Stored Labware Offset Data?')).toBeNull() }) it('renders view data modal when link clicked, with correct empty state if no candidates', () => { - const [{ getByText, getByRole, queryByText }] = render({ + render({ offsetCandidates: [], }) - getByText('No offset data available') - getByText('Learn more').click() + screen.getByText('No offset data available') + const learnMoreBUtton = screen.getByText('Learn more') + fireEvent.click(learnMoreBUtton) - getByRole('heading', { name: 'What is labware offset data?' }) + screen.getByRole('heading', { name: 'What is labware offset data?' }) - getByText( + screen.getByText( 'Labware offset data references previous protocol run labware locations to save you time. If all the labware in this protocol have been checked in previous runs, that data will be applied to this run.' ) - getByText( + screen.getByText( 'You can add new offsets with Labware Position Check in later steps.' ) expect( - getByRole('link', { name: 'See how labware offsets work' }) + screen.getByRole('link', { name: 'See how labware offsets work' }) ).toHaveAttribute( 'href', 'https://support.opentrons.com/s/article/How-Labware-Offsets-work-on-the-OT-2' ) - expect(queryByText('location')).toBeNull() + expect(screen.queryByText('location')).toBeNull() }) it('renders tabbed offset data with snippets when config option is selected', () => { @@ -172,10 +170,11 @@ describe('ApplyHistoricOffsets', () => { mockAdapterDef, ]) mockGetIsLabwareOffsetCodeSnippetsOn.mockReturnValue(true) - const [{ getByText }] = render() - getByText('View data').click() - expect(getByText('Table View')).toBeTruthy() - expect(getByText('Jupyter Notebook')).toBeTruthy() - expect(getByText('Command Line Interface (SSH)')).toBeTruthy() + render() + const viewDataButton = screen.getByText('View data') + fireEvent.click(viewDataButton) + expect(screen.getByText('Table View')).toBeTruthy() + expect(screen.getByText('Jupyter Notebook')).toBeTruthy() + expect(screen.getByText('Command Line Interface (SSH)')).toBeTruthy() }) }) diff --git a/app/src/organisms/ApplyHistoricOffsets/__tests__/LabwareOffsetTable.test.tsx b/app/src/organisms/ApplyHistoricOffsets/__tests__/LabwareOffsetTable.test.tsx index cd662e22ab7..09e843a6e57 100644 --- a/app/src/organisms/ApplyHistoricOffsets/__tests__/LabwareOffsetTable.test.tsx +++ b/app/src/organisms/ApplyHistoricOffsets/__tests__/LabwareOffsetTable.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { renderWithProviders } from '@opentrons/components' +import { screen } from '@testing-library/react' import fixture_adapter from '@opentrons/shared-data/labware/definitions/2/opentrons_96_pcr_adapter/1.json' import fixture_96_wellplate from '@opentrons/shared-data/labware/definitions/2/opentrons_96_wellplate_200ul_pcr_full_skirt/1.json' import { i18n } from '../../../i18n' @@ -51,70 +52,64 @@ const mockFourthCandidate: OffsetCandidate = { createdAt: '2022-05-12T13:34:51.012179+00:00', runCreatedAt: '2022-05-12T13:33:51.012179+00:00', } +const render = () => + renderWithProviders>( + , + { i18nInstance: i18n } + ) -describe('LabwareOffsetTable', () => { - let render: ( - props?: Partial> - ) => ReturnType - - beforeEach(() => { - render = () => - renderWithProviders>( - , - { i18nInstance: i18n } - ) - }) +describe('LabwareOffsetTable', () => { afterEach(() => { jest.resetAllMocks() }) it('renders headers text and values for each candidate', () => { - const [{ getByText, queryAllByText }] = render() + render() // headers - getByText('location') - getByText('Run') - getByText('labware') - getByText('labware offset data') - expect(queryAllByText('X')).toHaveLength(4) - expect(queryAllByText('Y')).toHaveLength(4) - expect(queryAllByText('Z')).toHaveLength(4) + screen.getByText('location') + screen.getByText('Run') + screen.getByText('labware') + screen.getByText('labware offset data') + expect(screen.queryAllByText('X')).toHaveLength(4) + expect(screen.queryAllByText('Y')).toHaveLength(4) + expect(screen.queryAllByText('Z')).toHaveLength(4) // first candidate - getByText('Slot 1') - getByText(/7\/11\/2022/i) - getByText('First Fake Labware Display Name') - getByText('1.00') - getByText('2.00') - getByText('3.00') + screen.getByText('Slot 1') + screen.getByText(/7\/11\/2022/i) + screen.getByText('First Fake Labware Display Name') + screen.getByText('1.00') + screen.getByText('2.00') + screen.getByText('3.00') // second candidate - getByText('Slot 2') - getByText(/6\/11\/2022/i) - getByText('Second Fake Labware Display Name') - getByText('4.00') - getByText('5.00') - getByText('6.00') + screen.getByText('Slot 2') + screen.getByText(/6\/11\/2022/i) + screen.getByText('Second Fake Labware Display Name') + screen.getByText('4.00') + screen.getByText('5.00') + screen.getByText('6.00') // third candidate is adapter on module - getByText('Heater-Shaker Module GEN1 in Slot 3') - getByText(/5\/11\/2022/i) - getByText('Third Fake Labware Display Name') - getByText('7.00') - getByText('8.00') - getByText('9.00') + screen.getByText('Heater-Shaker Module GEN1 in Slot 3') + screen.getByText(/5\/11\/2022/i) + screen.getByText('Third Fake Labware Display Name') + screen.getByText('7.00') + screen.getByText('8.00') + screen.getByText('9.00') // fourth candidate is labware on adapter on module - getByText( + screen.getByText( 'Opentrons 96 PCR Heater-Shaker Adapter in Heater-Shaker Module GEN1 in Slot 3' ) - getByText('Fourth Fake Labware Display Name') - getByText('7.20') - getByText('8.10') - getByText('7.10') + screen.getByText('Fourth Fake Labware Display Name') + screen.getByText('7.20') + screen.getByText('8.10') + screen.getByText('7.10') }) }) diff --git a/app/src/organisms/CalibrateDeck/__tests__/CalibrateDeck.test.tsx b/app/src/organisms/CalibrateDeck/__tests__/CalibrateDeck.test.tsx index cc0c99249c0..d782e68dc7b 100644 --- a/app/src/organisms/CalibrateDeck/__tests__/CalibrateDeck.test.tsx +++ b/app/src/organisms/CalibrateDeck/__tests__/CalibrateDeck.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { getDeckDefinitions } from '@opentrons/components/src/hardware-sim/Deck/getDeckDefinitions' @@ -26,15 +27,30 @@ const mockGetDeckDefinitions = getDeckDefinitions as jest.MockedFunction< typeof getDeckDefinitions > + describe('CalibrateDeck', () => { - let render: ( - props?: Partial> - ) => ReturnType let dispatchRequests: DispatchRequestsType const mockDeckCalSession: Sessions.DeckCalibrationSession = { id: 'fake_session_id', ...mockDeckCalibrationSessionAttributes, } + const render = (props: Partial> = {}) => { + const { + showSpinner = false, + isJogging = false, + session = mockDeckCalSession, + } = props + return renderWithProviders>( + , + { i18nInstance: i18n } + ) + } const SPECS: CalibrateDeckSpec[] = [ { heading: 'Before you begin', currentStep: 'sessionStarted' }, @@ -66,33 +82,14 @@ describe('CalibrateDeck', () => { beforeEach(() => { dispatchRequests = jest.fn() when(mockGetDeckDefinitions).calledWith().mockReturnValue({}) - - render = (props = {}) => { - const { - showSpinner = false, - isJogging = false, - session = mockDeckCalSession, - } = props - return renderWithProviders>( - , - { i18nInstance: i18n } - ) - } }) - afterEach(() => { resetAllWhenMocks() }) SPECS.forEach(spec => { it(`renders correct contents when currentStep is ${spec.currentStep}`, () => { - const { getByRole, queryByRole } = render({ + render({ session: { ...mockDeckCalSession, details: { @@ -100,38 +97,38 @@ describe('CalibrateDeck', () => { currentStep: spec.currentStep, }, }, - })[0] + }) SPECS.forEach(({ currentStep, heading }) => { if (currentStep === spec.currentStep) { expect( - getByRole('heading', { name: spec.heading }) + screen.getByRole('heading', { name: spec.heading }) ).toBeInTheDocument() } else { - expect(queryByRole('heading', { name: heading })).toBeNull() + expect(screen.queryByRole('heading', { name: heading })).toBeNull() } }) }) }) it('renders confirm exit on exit click', () => { - const { getByRole, queryByRole } = render()[0] - + render() expect( - queryByRole('heading', { + screen.queryByRole('heading', { name: 'Deck Calibration progress will be lost', }) ).toBeNull() - getByRole('button', { name: 'Exit' }).click() + const exitButton = screen.getByRole('button', { name: 'Exit' }) + fireEvent.click(exitButton) expect( - getByRole('heading', { + screen.getByRole('heading', { name: 'Deck Calibration progress will be lost', }) ).toBeInTheDocument() }) it('does not render contents when showSpinner is true', () => { - const { queryByRole } = render({ + render({ showSpinner: true, session: { ...mockDeckCalSession, @@ -140,8 +137,8 @@ describe('CalibrateDeck', () => { currentStep: 'sessionStarted', }, }, - })[0] - expect(queryByRole('heading', { name: 'Before you begin' })).toBeNull() + }) + expect(screen.queryByRole('heading', { name: 'Before you begin' })).toBeNull() }) it('does dispatch jog requests when not isJogging', () => { @@ -153,8 +150,9 @@ describe('CalibrateDeck', () => { currentStep: Sessions.DECK_STEP_PREPARING_PIPETTE, }, } - const { getByRole } = render({ isJogging: false, session })[0] - getByRole('button', { name: 'forward' }).click() + render({ isJogging: false, session }) + const forwardButton = screen.getByRole('button', { name: 'forward' }) + fireEvent.click(forwardButton) expect(dispatchRequests).toHaveBeenCalledWith( Sessions.createSessionCommand('robot-name', session.id, { command: Sessions.sharedCalCommands.JOG, @@ -172,8 +170,9 @@ describe('CalibrateDeck', () => { currentStep: Sessions.DECK_STEP_PREPARING_PIPETTE, }, } - const { getByRole } = render({ isJogging: true, session })[0] - getByRole('button', { name: 'forward' }).click() + render({ isJogging: true, session }) + const forwardButton = screen.getByRole('button', { name: 'forward' }) + fireEvent.click(forwardButton) expect(dispatchRequests).not.toHaveBeenCalledWith( Sessions.createSessionCommand('robot-name', session.id, { command: Sessions.sharedCalCommands.JOG, diff --git a/app/src/organisms/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx b/app/src/organisms/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx index 97d2626aa3c..44cdb4f05e9 100644 --- a/app/src/organisms/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx +++ b/app/src/organisms/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx @@ -11,6 +11,7 @@ import { mockPipetteOffsetCalibrationSessionAttributes } from '../../../redux/se import { CalibratePipetteOffset } from '../index' import type { PipetteOffsetCalibrationStep } from '../../../redux/sessions/types' import { DispatchRequestsType } from '../../../redux/robot-api' +import { fireEvent, screen } from '@testing-library/react' jest.mock('@opentrons/components/src/hardware-sim/Deck/getDeckDefinitions') jest.mock('../../../redux/sessions/selectors') @@ -28,9 +29,27 @@ const mockGetDeckDefinitions = getDeckDefinitions as jest.MockedFunction< describe('CalibratePipetteOffset', () => { let dispatchRequests: DispatchRequestsType - let render: ( - props?: Partial> - ) => ReturnType + const render = ( + props: Partial> = {} + ) => { + const { + showSpinner = false, + isJogging = false, + session = mockPipOffsetCalSession, + } = props + return renderWithProviders< + React.ComponentType + >( + , + { i18nInstance: i18n } + ) + } let mockPipOffsetCalSession: Sessions.PipetteOffsetCalibrationSession const SPECS: CalibratePipetteOffsetSpec[] = [ { heading: 'Before you begin', currentStep: 'sessionStarted' }, @@ -60,25 +79,7 @@ describe('CalibratePipetteOffset', () => { ...mockPipetteOffsetCalibrationSessionAttributes, } - render = (props = {}) => { - const { - showSpinner = false, - isJogging = false, - session = mockPipOffsetCalSession, - } = props - return renderWithProviders< - React.ComponentType - >( - , - { i18nInstance: i18n } - ) - } + }) afterEach(() => { @@ -87,7 +88,7 @@ describe('CalibratePipetteOffset', () => { SPECS.forEach(spec => { it(`renders correct contents when currentStep is ${spec.currentStep}`, () => { - const { getByRole, queryByRole } = render({ + render({ session: { ...mockPipOffsetCalSession, details: { @@ -95,38 +96,38 @@ describe('CalibratePipetteOffset', () => { currentStep: spec.currentStep, }, }, - })[0] + }) SPECS.forEach(({ currentStep, heading }) => { if (currentStep === spec.currentStep) { expect( - getByRole('heading', { name: spec.heading }) + screen.getByRole('heading', { name: spec.heading }) ).toBeInTheDocument() } else { - expect(queryByRole('heading', { name: heading })).toBeNull() + expect(screen.queryByRole('heading', { name: heading })).toBeNull() } }) }) }) it('renders confirm exit on exit click', () => { - const { getByRole, queryByRole } = render()[0] - + render() expect( - queryByRole('heading', { + screen.queryByRole('heading', { name: 'Pipette Offset Calibration progress will be lost', }) ).toBeNull() - getByRole('button', { name: 'Exit' }).click() + const exitButton = screen.getByRole('button', { name: 'Exit' }) + fireEvent.click(exitButton) expect( - getByRole('heading', { + screen.getByRole('heading', { name: 'Pipette Offset Calibration progress will be lost', }) ).toBeInTheDocument() }) it('does not render contents when showSpinner is true', () => { - const { queryByRole } = render({ + render({ showSpinner: true, session: { ...mockPipOffsetCalSession, @@ -136,7 +137,7 @@ describe('CalibratePipetteOffset', () => { }, }, })[0] - expect(queryByRole('heading', { name: 'Before you begin' })).toBeNull() + expect(screen.queryByRole('heading', { name: 'Before you begin' })).toBeNull() }) it('does dispatch jog requests when not isJogging', () => { @@ -148,8 +149,9 @@ describe('CalibratePipetteOffset', () => { currentStep: Sessions.PIP_OFFSET_STEP_PREPARING_PIPETTE, }, } - const { getByRole } = render({ isJogging: false, session })[0] - getByRole('button', { name: 'forward' }).click() + render({ isJogging: false, session }) + const forwardButton = screen.getByRole('button', { name: 'forward' }) + fireEvent.click(forwardButton) expect(dispatchRequests).toHaveBeenCalledWith( Sessions.createSessionCommand('robot-name', session.id, { command: Sessions.sharedCalCommands.JOG, @@ -167,8 +169,9 @@ describe('CalibratePipetteOffset', () => { currentStep: Sessions.PIP_OFFSET_STEP_PREPARING_PIPETTE, }, } - const { getByRole } = render({ isJogging: true, session })[0] - getByRole('button', { name: 'forward' }).click() + render({ isJogging: true, session }) + const forwardButton = screen.getByRole('button', { name: 'forward' }) + fireEvent.click(forwardButton) expect(dispatchRequests).not.toHaveBeenCalledWith( Sessions.createSessionCommand('robot-name', session.id, { command: Sessions.sharedCalCommands.JOG, diff --git a/components/src/hooks/__tests__/useSwipe.test.tsx b/components/src/hooks/__tests__/useSwipe.test.tsx index 9e192c04147..21f409ac714 100644 --- a/components/src/hooks/__tests__/useSwipe.test.tsx +++ b/components/src/hooks/__tests__/useSwipe.test.tsx @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react' +import { act, renderHook } from '@testing-library/react' import { useSwipe } from '..' describe('useSwipe hook', () => { @@ -17,7 +17,9 @@ describe('useSwipe hook', () => { it('When calling disable, isEnabled false', () => { const { result } = renderHook(() => useSwipe()) - result.current.disable() + act(() => { + result.current.disable() + }) expect(result.current.isEnabled).toBe(false) }) }) diff --git a/labware-library/src/components/App/__tests__/__snapshots__/App.test.tsx.snap b/labware-library/src/components/App/__tests__/__snapshots__/App.test.tsx.snap deleted file mode 100644 index 1fcce950266..00000000000 --- a/labware-library/src/components/App/__tests__/__snapshots__/App.test.tsx.snap +++ /dev/null @@ -1,83 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`App component renders with definition 1`] = ` -
    -
    -`; - -exports[`App component renders without definition 1`] = ` -
    -
    -`; diff --git a/labware-library/src/components/App/__tests__/__snapshots__/Page.test.tsx.snap b/labware-library/src/components/App/__tests__/__snapshots__/Page.test.tsx.snap deleted file mode 100644 index a4356ec7b9c..00000000000 --- a/labware-library/src/components/App/__tests__/__snapshots__/Page.test.tsx.snap +++ /dev/null @@ -1,51 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Page component renders sidebar and content 1`] = ` -
    -
    -
    -
    - foo -
    -
    - bar -
    -
    -
    -
    -`; - -exports[`Page component renders with detailPage CSS 1`] = ` -
    -
    -
    -
    - foo -
    -
    - bar -
    -
    -
    -
    -`; diff --git a/labware-library/src/components/LabwareList/__tests__/__snapshots__/LabwareList.test.tsx.snap b/labware-library/src/components/LabwareList/__tests__/__snapshots__/LabwareList.test.tsx.snap deleted file mode 100644 index aeb4b5c916d..00000000000 --- a/labware-library/src/components/LabwareList/__tests__/__snapshots__/LabwareList.test.tsx.snap +++ /dev/null @@ -1,12939 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LabwareList component renders 1`] = ` -
      - - - - - - - - - - - - - - - -
    -`; diff --git a/labware-library/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap b/labware-library/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap deleted file mode 100644 index 63d224d2290..00000000000 --- a/labware-library/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap +++ /dev/null @@ -1,28 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Nav component renders 1`] = ` - - - -`; diff --git a/labware-library/src/components/Sidebar/__tests__/__snapshots__/FilterCategory.test.tsx.snap b/labware-library/src/components/Sidebar/__tests__/__snapshots__/FilterCategory.test.tsx.snap deleted file mode 100644 index 2fbe3160dbc..00000000000 --- a/labware-library/src/components/Sidebar/__tests__/__snapshots__/FilterCategory.test.tsx.snap +++ /dev/null @@ -1,81 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FilterCategory component renders 1`] = ` - -

    - category -

    -
      -
    • - - All - -
      • -
    • - - Reservoirs - -
      • -
    • - - Tube Racks - -
      • -
    • - - Well Plates - -
      • -
    • - - Tip Racks - -
      • -
    • - - Adapter - -
      • -
    -     -`; diff --git a/labware-library/src/components/Sidebar/__tests__/__snapshots__/FilterManufacturer.test.tsx.snap b/labware-library/src/components/Sidebar/__tests__/__snapshots__/FilterManufacturer.test.tsx.snap deleted file mode 100644 index 47a30ee4176..00000000000 --- a/labware-library/src/components/Sidebar/__tests__/__snapshots__/FilterManufacturer.test.tsx.snap +++ /dev/null @@ -1,47 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FilterManufacturer component renders 1`] = ` - -`; diff --git a/labware-library/src/components/Sidebar/__tests__/__snapshots__/LabwareGuide.test.tsx.snap b/labware-library/src/components/Sidebar/__tests__/__snapshots__/LabwareGuide.test.tsx.snap deleted file mode 100644 index ac34c70d808..00000000000 --- a/labware-library/src/components/Sidebar/__tests__/__snapshots__/LabwareGuide.test.tsx.snap +++ /dev/null @@ -1,69 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LabwareGuide component renders 1`] = ` -
    -
    -

    - - Labware Guide -

    - -
    -
    -`; diff --git a/labware-library/src/components/Sidebar/__tests__/__snapshots__/Sidebar.test.tsx.snap b/labware-library/src/components/Sidebar/__tests__/__snapshots__/Sidebar.test.tsx.snap deleted file mode 100644 index 6fee43fb6e6..00000000000 --- a/labware-library/src/components/Sidebar/__tests__/__snapshots__/Sidebar.test.tsx.snap +++ /dev/null @@ -1,33 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Sidebar component renders 1`] = ` - -`; diff --git a/package.json b/package.json index 91bd5cd72f8..1666467c565 100755 --- a/package.json +++ b/package.json @@ -101,6 +101,7 @@ "eslint-plugin-react": "^7.22.0", "eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-standard": "^5.0.0", + "eslint-plugin-testing-library": "^6.2.0", "express": "^4.16.4", "file-loader": "^5.0.2", "form-data": "2.5.0", diff --git a/yarn.lock b/yarn.lock index f9fc4dd33cf..73dd3029c31 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1623,6 +1623,13 @@ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== +"@eslint-community/eslint-utils@^4.2.0": + version "4.4.0" + resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59" + integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA== + dependencies: + eslint-visitor-keys "^3.3.0" + "@eslint/eslintrc@^0.4.2": version "0.4.2" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.2.tgz#f63d0ef06f5c0c57d76c4ab5f63d3835c51b0179" @@ -3681,6 +3688,11 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad" integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA== +"@types/json-schema@^7.0.9": + version "7.0.15" + resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841" + integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA== + "@types/json5@^0.0.29": version "0.0.29" resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" @@ -3965,6 +3977,11 @@ resolved "https://registry.yarnpkg.com/@types/semver/-/semver-6.2.3.tgz#5798ecf1bec94eaa64db39ee52808ec0693315aa" integrity sha512-KQf+QAMWKMrtBMsB8/24w53tEsxllMj6TuA80TT/5igJalLI/zm0L3oXRbIAl4Ohfc85gyHX/jhMwsVkmhLU4A== +"@types/semver@^7.3.12": + version "7.5.6" + resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.6.tgz#c65b2bfce1bec346582c07724e3f8c1017a20339" + integrity sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A== + "@types/semver@^7.3.6": version "7.3.6" resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.6.tgz#e9831776f4512a7ba6da53e71c26e5fb67882d63" @@ -4173,11 +4190,24 @@ "@typescript-eslint/types" "4.27.0" "@typescript-eslint/visitor-keys" "4.27.0" +"@typescript-eslint/scope-manager@5.62.0": + version "5.62.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c" + integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w== + dependencies: + "@typescript-eslint/types" "5.62.0" + "@typescript-eslint/visitor-keys" "5.62.0" + "@typescript-eslint/types@4.27.0": version "4.27.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.27.0.tgz#712b408519ed699baff69086bc59cd2fc13df8d8" integrity sha512-I4ps3SCPFCKclRcvnsVA/7sWzh7naaM/b4pBO2hVxnM3wrU51Lveybdw5WoIktU/V4KfXrTt94V9b065b/0+wA== +"@typescript-eslint/types@5.62.0": + version "5.62.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f" + integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ== + "@typescript-eslint/typescript-estree@4.27.0": version "4.27.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.27.0.tgz#189a7b9f1d0717d5cccdcc17247692dedf7a09da" @@ -4191,6 +4221,19 @@ semver "^7.3.5" tsutils "^3.21.0" +"@typescript-eslint/typescript-estree@5.62.0": + version "5.62.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b" + integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA== + dependencies: + "@typescript-eslint/types" "5.62.0" + "@typescript-eslint/visitor-keys" "5.62.0" + debug "^4.3.4" + globby "^11.1.0" + is-glob "^4.0.3" + semver "^7.3.7" + tsutils "^3.21.0" + "@typescript-eslint/typescript-estree@^2.29.0": version "2.34.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.34.0.tgz#14aeb6353b39ef0732cc7f1b8285294937cf37d5" @@ -4204,6 +4247,20 @@ semver "^7.3.2" tsutils "^3.17.1" +"@typescript-eslint/utils@^5.58.0": + version "5.62.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86" + integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ== + dependencies: + "@eslint-community/eslint-utils" "^4.2.0" + "@types/json-schema" "^7.0.9" + "@types/semver" "^7.3.12" + "@typescript-eslint/scope-manager" "5.62.0" + "@typescript-eslint/types" "5.62.0" + "@typescript-eslint/typescript-estree" "5.62.0" + eslint-scope "^5.1.1" + semver "^7.3.7" + "@typescript-eslint/visitor-keys@4.27.0": version "4.27.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.27.0.tgz#f56138b993ec822793e7ebcfac6ffdce0a60cb81" @@ -4212,6 +4269,14 @@ "@typescript-eslint/types" "4.27.0" eslint-visitor-keys "^2.0.0" +"@typescript-eslint/visitor-keys@5.62.0": + version "5.62.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e" + integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw== + dependencies: + "@typescript-eslint/types" "5.62.0" + eslint-visitor-keys "^3.3.0" + "@webassemblyjs/ast@1.11.1": version "1.11.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7" @@ -9188,6 +9253,13 @@ eslint-plugin-standard@^5.0.0: resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-5.0.0.tgz#c43f6925d669f177db46f095ea30be95476b1ee4" integrity sha512-eSIXPc9wBM4BrniMzJRBm2uoVuXz2EPa+NXPk2+itrVt+r5SbKFERx/IgrK/HmfjddyKVz2f+j+7gBRvu19xLg== +eslint-plugin-testing-library@^6.2.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-6.2.0.tgz#af3340b783c881eb19ec5ac6b3a4bfe8ab4a1f74" + integrity sha512-+LCYJU81WF2yQ+Xu4A135CgK8IszcFcyMF4sWkbiu6Oj+Nel0TrkZq/HvDw0/1WuO3dhDQsZA/OpEMGd0NfcUw== + dependencies: + "@typescript-eslint/utils" "^5.58.0" + eslint-scope@5.1.1, eslint-scope@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c" @@ -9228,6 +9300,11 @@ eslint-visitor-keys@^2.0.0, eslint-visitor-keys@^2.1.0: resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303" integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw== +eslint-visitor-keys@^3.3.0: + version "3.4.3" + resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800" + integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag== + eslint@^7.22.0: version "7.28.0" resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.28.0.tgz#435aa17a0b82c13bb2be9d51408b617e49c1e820" @@ -10790,7 +10867,7 @@ globby@^10.0.1: merge2 "^1.2.3" slash "^3.0.0" -globby@^11.0.1, globby@^11.0.2: +globby@^11.0.1, globby@^11.0.2, globby@^11.1.0: version "11.1.0" resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b" integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g== @@ -12302,6 +12379,13 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1: dependencies: is-extglob "^2.1.1" +is-glob@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084" + integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== + dependencies: + is-extglob "^2.1.1" + is-hexadecimal@^1.0.0: version "1.0.4" resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7" @@ -18693,6 +18777,13 @@ semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5: dependencies: lru-cache "^6.0.0" +semver@^7.3.7: + version "7.5.4" + resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e" + integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA== + dependencies: + lru-cache "^6.0.0" + semver@^7.3.8: version "7.3.8" resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798" From 11bc8bc2975dc8bbc3cde173a5a580907541a875 Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Fri, 8 Dec 2023 15:16:41 -0500 Subject: [PATCH 10/31] changes thru choose protocol slideout --- .../AskForCalibrationBlockModal.test.tsx | 42 ++--- .../__tests__/CalibrateTipLength.test.tsx | 86 +++++----- .../__tests__/Introduction.test.tsx | 95 +++++------ .../__tests__/CompleteConfirmation.test.tsx | 52 +++--- .../__tests__/ConfirmCrashRecovery.test.tsx | 40 ++--- .../__tests__/ConfirmExit.test.tsx | 52 +++--- .../__tests__/DeckSetup.test.tsx | 125 +++++++------- .../__tests__/MeasureNozzle.test.tsx | 93 +++++------ .../__tests__/MeasureTip.test.tsx | 93 +++++------ .../__tests__/SaveXYPoint.test.tsx | 153 +++++++++--------- .../__tests__/SaveZPoint.test.tsx | 153 +++++++++--------- .../__tests__/TipConfirmation.test.tsx | 95 +++++------ .../__tests__/TipPickUp.test.tsx | 81 +++++----- .../__tests__/CheckCalibration.test.tsx | 84 +++++----- .../__tests__/ChooseProtocolSlideout.test.tsx | 55 +++---- .../ChooseProtocolSlideout/index.tsx | 23 ++- 16 files changed, 636 insertions(+), 686 deletions(-) diff --git a/app/src/organisms/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx b/app/src/organisms/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx index 194dc35a593..42a665d15eb 100644 --- a/app/src/organisms/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx +++ b/app/src/organisms/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx @@ -4,18 +4,12 @@ import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' import { setUseTrashSurfaceForTipCal } from '../../../redux/calibration' import { AskForCalibrationBlockModal } from '../AskForCalibrationBlockModal' +import { fireEvent, screen } from '@testing-library/react' describe('AskForCalibrationBlockModal', () => { - let onResponse: jest.MockedFunction<() => {}> - - let render: ( - props?: Partial> - ) => ReturnType - - beforeEach(() => { - onResponse = jest.fn() - render = () => - renderWithProviders< + const onResponse = jest.fn() + const render = () => { + return renderWithProviders< React.ComponentProps >( { />, { i18nInstance: i18n } ) - }) + } afterEach(() => { jest.resetAllMocks() }) it('saves preference when not checked and use trash is clicked', () => { - const [{ getByRole }, { dispatch }] = render() - getByRole('checkbox').click() - getByRole('button', { name: 'Use trash bin' }).click() + const {dispatch} = render()[1] + const checkbox = screen.getByRole('checkbox') + fireEvent.click(checkbox) + const button = screen.getByRole('button', { name: 'Use trash bin' }) + fireEvent.click(button) expect(dispatch).not.toHaveBeenCalled() expect(onResponse).toHaveBeenCalledWith(false) }) it('does not save preference when not checked and use trash is clicked', () => { - const [{ getByRole }, { dispatch }] = render() - getByRole('button', { name: 'Use Calibration Block' }).click() + const {dispatch} = render()[1] + const button = screen.getByRole('button', { name: 'Use Calibration Block' }) + fireEvent.click(button) expect(dispatch).toHaveBeenCalledWith(setUseTrashSurfaceForTipCal(false)) expect(onResponse).toHaveBeenCalledWith(true) }) it('saves preference when not checked and use block is clicked', () => { - const [{ getByRole }, { dispatch }] = render() - getByRole('checkbox').click() - getByRole('button', { name: 'Use trash bin' }).click() + const {dispatch} = render()[1] + const checkbox = screen.getByRole('checkbox') + fireEvent.click(checkbox) + const button = screen.getByRole('button', { name: 'Use trash bin' }) + fireEvent.click(button) expect(dispatch).not.toHaveBeenCalled() expect(onResponse).toHaveBeenCalledWith(false) }) it('does not save preference when not checked and use block is clicked', () => { - const [{ getByRole }, { dispatch }] = render() - getByRole('button', { name: 'Use Calibration Block' }).click() + const {dispatch} = render()[1] + const button = screen.getByRole('button', { name: 'Use Calibration Block' }) + fireEvent.click(button) expect(dispatch).toHaveBeenCalledWith(setUseTrashSurfaceForTipCal(false)) expect(onResponse).toHaveBeenCalledWith(true) }) diff --git a/app/src/organisms/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx b/app/src/organisms/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx index a1ce8879ad5..47de12d45a6 100644 --- a/app/src/organisms/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx +++ b/app/src/organisms/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx @@ -10,6 +10,7 @@ import { mockTipLengthCalibrationSessionAttributes } from '../../../redux/sessio import { CalibrateTipLength } from '../index' import type { TipLengthCalibrationStep } from '../../../redux/sessions/types' +import { fireEvent, screen } from '@testing-library/react' jest.mock('@opentrons/components/src/hardware-sim/Deck/getDeckDefinitions') jest.mock('../../../redux/sessions/selectors') @@ -26,14 +27,32 @@ const mockGetDeckDefinitions = getDeckDefinitions as jest.MockedFunction< > describe('CalibrateTipLength', () => { - let render: ( - props?: Partial> - ) => ReturnType - let dispatchRequests: jest.MockedFunction<() => {}> + const dispatchRequests = jest.fn() let mockTipLengthSession: Sessions.TipLengthCalibrationSession = { id: 'fake_session_id', ...mockTipLengthCalibrationSessionAttributes, } + const render = ( + props: Partial> = {} + ) => { + const { + showSpinner = false, + isJogging = false, + session = mockTipLengthSession, + } = props + return renderWithProviders< + React.ComponentType + >( + , + { i18nInstance: i18n } + ) + } const SPECS: CalibrateTipLengthSpec[] = [ { heading: 'Before you begin', currentStep: 'sessionStarted' }, @@ -55,42 +74,17 @@ describe('CalibrateTipLength', () => { ] beforeEach(() => { - dispatchRequests = jest.fn() when(mockGetDeckDefinitions).calledWith().mockReturnValue({}) - - mockTipLengthSession = { - id: 'fake_session_id', - ...mockTipLengthCalibrationSessionAttributes, - } - - render = (props = {}) => { - const { - showSpinner = false, - isJogging = false, - session = mockTipLengthSession, - } = props - return renderWithProviders< - React.ComponentType - >( - , - { i18nInstance: i18n } - ) - } }) afterEach(() => { resetAllWhenMocks() + jest.resetAllMocks() }) SPECS.forEach(spec => { it(`renders correct contents when currentStep is ${spec.currentStep}`, () => { - const { getByRole, queryByRole } = render({ + render({ session: { ...mockTipLengthSession, details: { @@ -98,38 +92,38 @@ describe('CalibrateTipLength', () => { currentStep: spec.currentStep, }, }, - })[0] + }) SPECS.forEach(({ currentStep, heading }) => { if (currentStep === spec.currentStep) { expect( - getByRole('heading', { name: spec.heading }) + screen.getByRole('heading', { name: spec.heading }) ).toBeInTheDocument() } else { - expect(queryByRole('heading', { name: heading })).toBeNull() + expect(screen.queryByRole('heading', { name: heading })).toBeNull() } }) }) }) it('renders confirm exit on exit click', () => { - const { getByRole, queryByRole } = render()[0] - + render() expect( - queryByRole('heading', { + screen.queryByRole('heading', { name: 'Tip Length Calibration progress will be lost', }) ).toBeNull() - getByRole('button', { name: 'Exit' }).click() + const exitButton = screen.getByRole('button', { name: 'Exit' }) + fireEvent.click(exitButton) expect( - getByRole('heading', { + screen.getByRole('heading', { name: 'Tip Length Calibration progress will be lost', }) ).toBeInTheDocument() }) it('does not render contents when showSpinner is true', () => { - const { queryByRole } = render({ + render({ showSpinner: true, session: { ...mockTipLengthSession, @@ -138,8 +132,8 @@ describe('CalibrateTipLength', () => { currentStep: 'sessionStarted', }, }, - })[0] - expect(queryByRole('heading', { name: 'Before you begin' })).toBeNull() + }) + expect(screen.queryByRole('heading', { name: 'Before you begin' })).toBeNull() }) it('does dispatch jog requests when not isJogging', () => { @@ -152,7 +146,8 @@ describe('CalibrateTipLength', () => { }, } const { getByRole } = render({ isJogging: false, session })[0] - getByRole('button', { name: 'forward' }).click() + const forwardButton = getByRole('button', { name: 'forward' }) + fireEvent.click(forwardButton) expect(dispatchRequests).toHaveBeenCalledWith( Sessions.createSessionCommand('robot-name', session.id, { command: Sessions.sharedCalCommands.JOG, @@ -170,8 +165,9 @@ describe('CalibrateTipLength', () => { currentStep: Sessions.DECK_STEP_PREPARING_PIPETTE, }, } - const { getByRole } = render({ isJogging: true, session })[0] - getByRole('button', { name: 'forward' }).click() + render({ isJogging: true, session }) + const forwardButton = screen.getByRole('button', { name: 'forward' }) + fireEvent.click(forwardButton) expect(dispatchRequests).not.toHaveBeenCalledWith( Sessions.createSessionCommand('robot-name', session.id, { command: Sessions.sharedCalCommands.JOG, diff --git a/app/src/organisms/CalibrationPanels/Introduction/__tests__/Introduction.test.tsx b/app/src/organisms/CalibrationPanels/Introduction/__tests__/Introduction.test.tsx index 8b0cb221597..ca3abb9fff1 100644 --- a/app/src/organisms/CalibrationPanels/Introduction/__tests__/Introduction.test.tsx +++ b/app/src/organisms/CalibrationPanels/Introduction/__tests__/Introduction.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { mockCalibrationCheckLabware } from '../../../../redux/sessions/__fixtures__' @@ -15,30 +16,30 @@ const mockChooseTipRack = ChooseTipRack as jest.MockedFunction< const mockCalInvalidationHandler = jest.fn() describe('Introduction', () => { - let render: ( - props?: Partial> - ) => ReturnType const mockSendCommands = jest.fn() const mockCleanUpAndExit = jest.fn() + const render = ( + props: Partial> = {} + ) => { + return renderWithProviders( + , + { + i18nInstance: i18n, + } + ) + } beforeEach(() => { mockChooseTipRack.mockReturnValue(
    mock choose tip rack
    ) - render = (props = {}) => - renderWithProviders( - , - { - i18nInstance: i18n, - } - ) }) afterEach(() => { @@ -46,71 +47,73 @@ describe('Introduction', () => { }) it('renders correct text', () => { - const { getByRole, queryByRole } = render()[0] - getByRole('heading', { name: 'Before you begin' }) - getByRole('button', { name: 'Get started' }) - getByRole('link', { name: 'Need help?' }) - expect(queryByRole('button', { name: 'Change tip rack' })).toBe(null) + render() + screen.getByRole('heading', { name: 'Before you begin' }) + screen.getByRole('button', { name: 'Get started' }) + screen.getByRole('link', { name: 'Need help?' }) + expect(screen.queryByRole('button', { name: 'Change tip rack' })).toBe(null) }) it('renders change tip rack button if allowChangeTipRack', () => { - const { getByRole, getByText, queryByRole } = render({ + render({ sessionType: Sessions.SESSION_TYPE_DECK_CALIBRATION, allowChangeTipRack: true, - })[0] - const button = getByRole('button', { name: 'Change tip rack' }) - button.click() - getByText('mock choose tip rack') - expect(queryByRole('heading', { name: 'Before you begin' })).toBe(null) + }) + const button = screen.getByRole('button', { name: 'Change tip rack' }) + fireEvent.click(button) + screen.getByText('mock choose tip rack') + expect(screen.queryByRole('heading', { name: 'Before you begin' })).toBe(null) }) it('clicking proceed loads alternate tiprack if load labware supported for session', () => { - const { getByRole } = render({ + render({ sessionType: Sessions.SESSION_TYPE_DECK_CALIBRATION, supportedCommands: [Sessions.sharedCalCommands.LOAD_LABWARE], - })[0] - getByRole('button', { name: 'Get started' }).click() + }) + const startButton = screen.getByRole('button', { name: 'Get started' }) + fireEvent.click(startButton) expect(mockSendCommands).toHaveBeenCalledWith({ command: 'calibration.loadLabware', data: { tiprackDefinition: mockCalibrationCheckLabware.definition }, }) }) it('clicking proceed loads default if load labware is not supported for session', () => { - const { getByRole } = render({ - sessionType: Sessions.SESSION_TYPE_DECK_CALIBRATION, - })[0] - getByRole('button', { name: 'Get started' }).click() + render({sessionType: Sessions.SESSION_TYPE_DECK_CALIBRATION}) + const startButton = screen.getByRole('button', { name: 'Get started' }) + fireEvent.click(startButton) expect(mockSendCommands).toHaveBeenCalledWith({ command: 'calibration.loadLabware', }) }) it('displays the InvalidationWarning when necessary - Deck session', () => { - const [{ getByText }] = render({ + render({ sessionType: Sessions.SESSION_TYPE_DECK_CALIBRATION, calInvalidationHandler: mockCalInvalidationHandler, }) - getByText('Recalibrating the deck clears pipette offset data') - getByText('Pipette offsets for both mounts will have to be recalibrated.') + screen.getByText('Recalibrating the deck clears pipette offset data') + screen.getByText('Pipette offsets for both mounts will have to be recalibrated.') }) it('displays the InvalidationWarning when necessary - Tip Length session', () => { - const [{ getByText }] = render({ + render({ sessionType: Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION, calInvalidationHandler: mockCalInvalidationHandler, }) - getByText('Recalibrating tip length will clear pipette offset data.') + screen.getByText('Recalibrating tip length will clear pipette offset data.') }) it('calls the calInvalidationHandler when appropriate', () => { - const [{ getByRole }] = render({ + render({ sessionType: Sessions.SESSION_TYPE_DECK_CALIBRATION, calInvalidationHandler: mockCalInvalidationHandler, }) - getByRole('button', { name: 'Get started' }).click() + const startButton = screen.getByRole('button', { name: 'Get started' }) + fireEvent.click(startButton) expect(mockCalInvalidationHandler).toHaveBeenCalled() }) it('does not call the calInvalidationHandler if not a deck or tip length session', () => { - const [{ getByRole }] = render({ + render({ sessionType: Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION, calInvalidationHandler: mockCalInvalidationHandler, }) - getByRole('button', { name: 'Get started' }).click() + const startButton = screen.getByRole('button', { name: 'Get started' }) + fireEvent.click(startButton) expect(mockCalInvalidationHandler).not.toHaveBeenCalled() }) }) diff --git a/app/src/organisms/CalibrationPanels/__tests__/CompleteConfirmation.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/CompleteConfirmation.test.tsx index 21a8b4ba9f4..4f1258d40a5 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/CompleteConfirmation.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/CompleteConfirmation.test.tsx @@ -1,53 +1,49 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' import { CompleteConfirmation } from '../CompleteConfirmation' describe('CompleteConfirmation', () => { - let render: ( - props?: Partial> - ) => ReturnType - const mockCleanUpAndExit = jest.fn() - - beforeEach(() => { - render = (props = {}) => { - const { proceed = mockCleanUpAndExit, flowName, body, visualAid } = props - return renderWithProviders( - , - { i18nInstance: i18n } - ) - } - }) + const render = ( + props: Partial> = {} + ) => { + const { proceed = mockCleanUpAndExit, flowName, body, visualAid } = props + return renderWithProviders( + , + { i18nInstance: i18n } + ) + } afterEach(() => { jest.resetAllMocks() }) it('clicking continue sends exit command and deletes session', () => { - const { getByRole } = render()[0] - getByRole('button', { name: 'exit' }).click() + render() + const button = screen.getByRole('button', { name: 'exit' }) + fireEvent.click(button) expect(mockCleanUpAndExit).toHaveBeenCalled() }) it('renders heading and body text if present', () => { - const { getByRole, getByText } = render({ + render({ flowName: 'fake flow name', body: 'fake body text', - })[0] - - getByRole('heading', { name: 'fake flow name complete!' }) - getByText('fake body text') + }) + screen.getByRole('heading', { name: 'fake flow name complete!' }) + screen.getByText('fake body text') }) it('renders visual aid in place of icon if present', () => { - const { getByText } = render({ visualAid: 'fake visual aid' })[0] - getByText('fake visual aid') + render({ visualAid: 'fake visual aid' }) + screen.getByText('fake visual aid') }) }) diff --git a/app/src/organisms/CalibrationPanels/__tests__/ConfirmCrashRecovery.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/ConfirmCrashRecovery.test.tsx index 62cda1811bd..0ea1ecd69c7 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/ConfirmCrashRecovery.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/ConfirmCrashRecovery.test.tsx @@ -1,46 +1,46 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' import { ConfirmCrashRecovery } from '../ConfirmCrashRecovery' describe('ConfirmCrashRecovery', () => { - let render: ( - props?: Partial> - ) => ReturnType const mockBack = jest.fn() const mockConfirm = jest.fn() + const render = ( + props: Partial> = {} + ) => { + const { back = mockBack, confirm = mockConfirm } = props + return renderWithProviders( + , + { i18nInstance: i18n } + ) + } - beforeEach(() => { - render = (props = {}) => { - const { back = mockBack, confirm = mockConfirm } = props - return renderWithProviders( - , - { i18nInstance: i18n } - ) - } - }) afterEach(() => { jest.resetAllMocks() }) it('clicking resume goes back', () => { - const { getByRole } = render()[0] - getByRole('button', { name: 'resume' }).click() + render() + const button = screen.getByRole('button', { name: 'resume' }) + fireEvent.click(button) expect(mockBack).toHaveBeenCalled() }) it('clicking start over confirms start over', () => { - const { getByRole } = render()[0] - getByRole('button', { name: 'Start over' }).click() + render() + const button = screen.getByRole('button', { name: 'Start over' }) + fireEvent.click(button) expect(mockConfirm).toHaveBeenCalled() }) it('renders correct copy', () => { - const { getByText, getByRole } = render()[0] - getByRole('heading', { name: 'Start over?' }) - getByText('Starting over will cancel your calibration progress.') - getByText( + render() + screen.getByRole('heading', { name: 'Start over?' }) + screen.getByText('Starting over will cancel your calibration progress.') + screen.getByText( 'If you bent a tip, be sure to replace it with an undamaged tip in position A1 of the tip rack before resuming calibration.' ) }) diff --git a/app/src/organisms/CalibrationPanels/__tests__/ConfirmExit.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/ConfirmExit.test.tsx index b3b87fe60a9..9350ae7415e 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/ConfirmExit.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/ConfirmExit.test.tsx @@ -1,54 +1,52 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' import { ConfirmExit } from '../ConfirmExit' describe('ConfirmExit', () => { - let render: ( - props?: Partial> - ) => ReturnType - const mockBack = jest.fn() const mockExit = jest.fn() - - beforeEach(() => { - render = (props = {}) => { - const { heading, body } = props - return renderWithProviders( - , - { i18nInstance: i18n } - ) - } - }) + const render = ( + props: Partial> = {} + ) => { + const { heading, body } = props + return renderWithProviders( + , + { i18nInstance: i18n } + ) + } afterEach(() => { jest.resetAllMocks() }) it('clicking confirm exit calls exit', () => { - const { getByRole } = render()[0] - getByRole('button', { name: 'exit' }).click() + render() + const button = screen.getByRole('button', { name: 'exit' }) + fireEvent.click(button) expect(mockExit).toHaveBeenCalled() }) it('clicking back calls back', () => { - const { getByRole } = render()[0] - getByRole('button', { name: 'Go back' }).click() + render() + const button = screen.getByRole('button', { name: 'Go back' }) + fireEvent.click(button) expect(mockBack).toHaveBeenCalled() }) it('renders body and heading text if present', () => { - const { getByRole, getByText } = render({ + render({ heading: 'fake heading', body: 'fake body', - })[0] - getByRole('heading', { name: 'fake heading' }) - getByText('fake heading') + }) + screen.getByRole('heading', { name: 'fake heading' }) + screen.getByText('fake heading') }) }) diff --git a/app/src/organisms/CalibrationPanels/__tests__/DeckSetup.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/DeckSetup.test.tsx index fef0d125d7e..7b1e08eeee1 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/DeckSetup.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/DeckSetup.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { getDeckDefinitions } from '@opentrons/components/src/hardware-sim/Deck/getDeckDefinitions' import { i18n } from '../../../i18n' @@ -22,42 +23,43 @@ const mockGetDeckDefinitions = getDeckDefinitions as jest.MockedFunction< > describe('DeckSetup', () => { - let render: ( - props?: Partial> - ) => ReturnType - const mockSendCommands = jest.fn() const mockDeleteSession = jest.fn() + const render = ( + props: Partial> = {} + ) => { + const { + mount = 'left', + isMulti = false, + tipRack = mockDeckCalTipRack, + calBlock = null, + sendCommands = mockSendCommands, + cleanUpAndExit = mockDeleteSession, + currentStep = Sessions.DECK_STEP_LABWARE_LOADED, + sessionType = Sessions.SESSION_TYPE_DECK_CALIBRATION, + activePipette, + } = props + return renderWithProviders( + , + { i18nInstance: i18n } + ) + } + + + beforeEach(() => { mockGetDeckDefinitions.mockReturnValue({}) - render = (props = {}) => { - const { - mount = 'left', - isMulti = false, - tipRack = mockDeckCalTipRack, - calBlock = null, - sendCommands = mockSendCommands, - cleanUpAndExit = mockDeleteSession, - currentStep = Sessions.DECK_STEP_LABWARE_LOADED, - sessionType = Sessions.SESSION_TYPE_DECK_CALIBRATION, - activePipette, - } = props - return renderWithProviders( - , - { i18nInstance: i18n } - ) - } }) afterEach(() => { @@ -65,9 +67,8 @@ describe('DeckSetup', () => { }) it('clicking continue proceeds to next step', () => { - const { getByRole } = render()[0] - - getByRole('button', { name: 'Confirm placement' }).click() + render() + screen.getByRole('button', { name: 'Confirm placement' }).click() expect(mockSendCommands).toHaveBeenCalledWith({ command: Sessions.sharedCalCommands.MOVE_TO_TIP_RACK, @@ -75,60 +76,60 @@ describe('DeckSetup', () => { }) it('copy is correct if cal block present for tlc', () => { - const { getByText, getByRole, queryByText } = render({ + render({ sessionType: Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION, calBlock: mockTipLengthCalBlock, - })[0] + }) - getByRole('heading', { name: 'Prepare the space' }) - getByText('Place a full 300ul Tiprack FIXTURE into slot 8') - getByText("Place the Calibration Block into it's designated slot") - expect(queryByText('To check the left pipette:')).toBeNull() - expect(queryByText('Clear all other deck slots')).toBeNull() + screen.getByRole('heading', { name: 'Prepare the space' }) + screen.getByText('Place a full 300ul Tiprack FIXTURE into slot 8') + screen.getByText("Place the Calibration Block into it's designated slot") + expect(screen.queryByText('To check the left pipette:')).toBeNull() + expect(screen.queryByText('Clear all other deck slots')).toBeNull() }) it('copy is correct if cal block not present for tlc', () => { - const { getByText, getByRole, queryByText } = render({ + render({ sessionType: Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION, calBlock: null, - })[0] + }) - getByRole('heading', { name: 'Prepare the space' }) - getByText('Place a full 300ul Tiprack FIXTURE into slot 8') + screen.getByRole('heading', { name: 'Prepare the space' }) + screen.getByText('Place a full 300ul Tiprack FIXTURE into slot 8') expect( - queryByText("Place the Calibration Block into it's designated slot") + screen.queryByText("Place the Calibration Block into it's designated slot") ).toBeNull() - expect(queryByText('To check the left pipette:')).toBeNull() - expect(queryByText('Clear all other deck slots')).toBeNull() + expect(screen.queryByText('To check the left pipette:')).toBeNull() + expect(screen.queryByText('Clear all other deck slots')).toBeNull() }) it('copy is correct if cal block present for health check', () => { - const { getByText, getByRole } = render({ + render({ sessionType: Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK, calBlock: mockTipLengthCalBlock, activePipette: mockRobotCalibrationCheckSessionDetails.activePipette, - })[0] + }) - getByRole('heading', { name: 'Prepare the space' }) - getByText('Place a full fake tiprack display name into slot 8') - getByText("Place the Calibration Block into it's designated slot") - getByText('To check the left pipette:') - getByText('Clear all other deck slots') + screen.getByRole('heading', { name: 'Prepare the space' }) + screen.getByText('Place a full fake tiprack display name into slot 8') + screen.getByText("Place the Calibration Block into it's designated slot") + screen.getByText('To check the left pipette:') + screen.getByText('Clear all other deck slots') }) it('copy is correct if cal block not present for health check', () => { - const { getByText, getByRole, queryByText } = render({ + render({ sessionType: Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK, calBlock: null, activePipette: mockRobotCalibrationCheckSessionDetails.activePipette, - })[0] + }) - getByRole('heading', { name: 'Prepare the space' }) - getByText('Place a full fake tiprack display name into slot 8') - getByText('To check the left pipette:') - getByText('Clear all other deck slots') + screen.getByRole('heading', { name: 'Prepare the space' }) + screen.getByText('Place a full fake tiprack display name into slot 8') + screen.getByText('To check the left pipette:') + screen.getByText('Clear all other deck slots') expect( - queryByText("Place the Calibration Block into it's designated slot") + screen.queryByText("Place the Calibration Block into it's designated slot") ).toBeNull() }) }) diff --git a/app/src/organisms/CalibrationPanels/__tests__/MeasureNozzle.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/MeasureNozzle.test.tsx index 4b63147a67b..bd3a4026eba 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/MeasureNozzle.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/MeasureNozzle.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' import { @@ -10,63 +11,59 @@ import * as Sessions from '../../../redux/sessions' import { MeasureNozzle } from '../MeasureNozzle' describe('MeasureNozzle', () => { - let render: ( - props?: Partial> - ) => ReturnType - const mockSendCommands = jest.fn() const mockDeleteSession = jest.fn() - - beforeEach(() => { - render = (props = {}) => { - const { - mount = 'left', - isMulti = false, - tipRack = mockTipLengthTipRack, - calBlock = mockTipLengthCalBlock, - sendCommands = mockSendCommands, - cleanUpAndExit = mockDeleteSession, - currentStep = Sessions.TIP_LENGTH_STEP_MEASURING_NOZZLE_OFFSET, - sessionType = Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION, - } = props - return renderWithProviders( - , - { i18nInstance: i18n } - ) - } - }) + const render = ( + props: Partial> = {} + ) => { + const { + mount = 'left', + isMulti = false, + tipRack = mockTipLengthTipRack, + calBlock = mockTipLengthCalBlock, + sendCommands = mockSendCommands, + cleanUpAndExit = mockDeleteSession, + currentStep = Sessions.TIP_LENGTH_STEP_MEASURING_NOZZLE_OFFSET, + sessionType = Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION, + } = props + return renderWithProviders( + , + { i18nInstance: i18n } + ) + } afterEach(() => { jest.resetAllMocks() }) it('renders the confirm crash modal when invoked', () => { - const { getByText, queryByText } = render()[0] + render() expect( - queryByText('Starting over will cancel your calibration progress.') + screen.queryByText('Starting over will cancel your calibration progress.') ).toBeNull() - const crashLink = getByText('Start over') - crashLink.click() - getByText('Starting over will cancel your calibration progress.') + const crashLink = screen.getByText('Start over') + fireEvent.click(crashLink) + screen.getByText('Starting over will cancel your calibration progress.') }) it('renders the need help link', () => { - const { getByRole } = render()[0] - getByRole('link', { name: 'Need help?' }) + render() + screen.getByRole('link', { name: 'Need help?' }) }) it('jogging sends command', () => { - const { getByRole } = render()[0] - getByRole('button', { name: 'forward' }).click() + render() + const button = screen.getByRole('button', { name: 'forward' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith({ command: Sessions.sharedCalCommands.JOG, @@ -75,10 +72,9 @@ describe('MeasureNozzle', () => { }) it('clicking proceed sends save offset and move to tip rack commands for tip length cal', () => { - const { getByRole } = render({ - sessionType: Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION, - })[0] - getByRole('button', { name: 'Confirm placement' }).click() + render({ sessionType: Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION }) + const button = screen.getByRole('button', { name: 'Confirm placement' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith( { command: Sessions.sharedCalCommands.SAVE_OFFSET, @@ -90,10 +86,9 @@ describe('MeasureNozzle', () => { }) it('clicking proceed sends only move to tip rack commands for cal health check', () => { - const { getByRole } = render({ - sessionType: Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK, - })[0] - getByRole('button', { name: 'Confirm placement' }).click() + render({ sessionType: Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK }) + const button = screen.getByRole('button', { name: 'Confirm placement' }) + button.click() expect(mockSendCommands).toHaveBeenCalledWith({ command: Sessions.sharedCalCommands.MOVE_TO_TIP_RACK, }) diff --git a/app/src/organisms/CalibrationPanels/__tests__/MeasureTip.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/MeasureTip.test.tsx index 0ff9f8192c0..1e1b9b2c857 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/MeasureTip.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/MeasureTip.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' import { @@ -10,63 +11,59 @@ import * as Sessions from '../../../redux/sessions' import { MeasureTip } from '../MeasureTip' describe('MeasureTip', () => { - let render: ( - props?: Partial> - ) => ReturnType - const mockSendCommands = jest.fn() const mockDeleteSession = jest.fn() - - beforeEach(() => { - render = (props = {}) => { - const { - mount = 'left', - isMulti = false, - tipRack = mockTipLengthTipRack, - calBlock = mockTipLengthCalBlock, - sendCommands = mockSendCommands, - cleanUpAndExit = mockDeleteSession, - currentStep = Sessions.TIP_LENGTH_STEP_MEASURING_NOZZLE_OFFSET, - sessionType = Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION, - } = props - return renderWithProviders( - , - { i18nInstance: i18n } - ) - } - }) + const render = ( + props: Partial> = {} + ) => { + const { + mount = 'left', + isMulti = false, + tipRack = mockTipLengthTipRack, + calBlock = mockTipLengthCalBlock, + sendCommands = mockSendCommands, + cleanUpAndExit = mockDeleteSession, + currentStep = Sessions.TIP_LENGTH_STEP_MEASURING_NOZZLE_OFFSET, + sessionType = Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION, + } = props + return renderWithProviders( + , + { i18nInstance: i18n } + ) + } afterEach(() => { jest.resetAllMocks() }) it('renders the confirm crash modal when invoked', () => { - const { getByText, queryByText } = render()[0] + render() expect( - queryByText('Starting over will cancel your calibration progress.') + screen.queryByText('Starting over will cancel your calibration progress.') ).toBeNull() - const crashLink = getByText('Start over') - crashLink.click() - getByText('Starting over will cancel your calibration progress.') + const crashLink = screen.getByText('Start over') + fireEvent.click(crashLink) + screen.getByText('Starting over will cancel your calibration progress.') }) it('renders the need help link', () => { - const { getByRole } = render()[0] - getByRole('link', { name: 'Need help?' }) + render() + screen.getByRole('link', { name: 'Need help?' }) }) it('jogging sends command', () => { - const { getByRole } = render()[0] - getByRole('button', { name: 'forward' }).click() + render() + const button = screen.getByRole('button', { name: 'forward' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith({ command: Sessions.sharedCalCommands.JOG, @@ -75,10 +72,9 @@ describe('MeasureTip', () => { }) it('clicking proceed sends save offset and move to tip rack commands for tip length cal', () => { - const { getByRole } = render({ - sessionType: Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION, - })[0] - getByRole('button', { name: 'Confirm placement' }).click() + render({ sessionType: Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION }) + const button = screen.getByRole('button', { name: 'Confirm placement' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith( { command: Sessions.sharedCalCommands.SAVE_OFFSET, @@ -90,10 +86,9 @@ describe('MeasureTip', () => { }) it('clicking proceed sends only move to tip rack commands for cal health check', () => { - const { getByRole } = render({ - sessionType: Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK, - })[0] - getByRole('button', { name: 'Confirm placement' }).click() + render({ sessionType: Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK }) + const button = screen.getByRole('button', { name: 'Confirm placement' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith( { command: Sessions.checkCommands.COMPARE_POINT, diff --git a/app/src/organisms/CalibrationPanels/__tests__/SaveXYPoint.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/SaveXYPoint.test.tsx index 446fb3e3279..7048b03c6ac 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/SaveXYPoint.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/SaveXYPoint.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' @@ -7,144 +8,141 @@ import * as Sessions from '../../../redux/sessions' import { SaveXYPoint } from '../SaveXYPoint' describe('SaveXYPoint', () => { - let render: ( - props?: Partial> - ) => ReturnType - const mockSendCommands = jest.fn() const mockDeleteSession = jest.fn() + const render = ( + props: Partial> = {} + ) => { + const { + mount = 'left', + isMulti = false, + tipRack = mockDeckCalTipRack, + sendCommands = mockSendCommands, + cleanUpAndExit = mockDeleteSession, + currentStep = Sessions.DECK_STEP_SAVING_POINT_ONE, + sessionType = Sessions.SESSION_TYPE_DECK_CALIBRATION, + } = props + return renderWithProviders( + , + { i18nInstance: i18n } + ) + } - beforeEach(() => { - render = (props = {}) => { - const { - mount = 'left', - isMulti = false, - tipRack = mockDeckCalTipRack, - sendCommands = mockSendCommands, - cleanUpAndExit = mockDeleteSession, - currentStep = Sessions.DECK_STEP_SAVING_POINT_ONE, - sessionType = Sessions.SESSION_TYPE_DECK_CALIBRATION, - } = props - return renderWithProviders( - , - { i18nInstance: i18n } - ) - } - }) afterEach(() => { jest.resetAllMocks() }) it('displays proper assets for slot 1 left multi', () => { - const { getByLabelText } = render({ + render({ mount: 'left', isMulti: true, currentStep: Sessions.DECK_STEP_SAVING_POINT_ONE, - })[0] - getByLabelText('left multi channel pipette moving to slot 1') + }) + screen.getByLabelText('left multi channel pipette moving to slot 1') }) it('displays proper asset for slot 1 right multi', () => { - const { getByLabelText } = render({ + render({ mount: 'right', isMulti: true, currentStep: Sessions.DECK_STEP_SAVING_POINT_ONE, - })[0] - getByLabelText('right multi channel pipette moving to slot 1') + }) + screen.getByLabelText('right multi channel pipette moving to slot 1') }) it('displays proper asset for slot 1 left single', () => { - const { getByLabelText } = render({ + render({ mount: 'left', isMulti: false, currentStep: Sessions.DECK_STEP_SAVING_POINT_ONE, - })[0] - getByLabelText('left single channel pipette moving to slot 1') + }) + screen.getByLabelText('left single channel pipette moving to slot 1') }) it('displays proper asset for slot 1 right single', () => { - const { getByLabelText } = render({ + render({ mount: 'right', isMulti: false, currentStep: Sessions.DECK_STEP_SAVING_POINT_ONE, - })[0] - getByLabelText('right single channel pipette moving to slot 1') + }) + screen.getByLabelText('right single channel pipette moving to slot 1') }) it('displays proper asset for slot 3 left multi', () => { - const { getByLabelText } = render({ + render({ mount: 'left', isMulti: true, currentStep: Sessions.DECK_STEP_SAVING_POINT_TWO, - })[0] - getByLabelText('left multi channel pipette moving to slot 3') + }) + screen.getByLabelText('left multi channel pipette moving to slot 3') }) it('displays proper asset for slot 3 right multi', () => { - const { getByLabelText } = render({ + render({ mount: 'right', isMulti: true, currentStep: Sessions.DECK_STEP_SAVING_POINT_TWO, - })[0] - getByLabelText('right multi channel pipette moving to slot 3') + }) + screen.getByLabelText('right multi channel pipette moving to slot 3') }) it('displays proper asset for slot 3 left single', () => { - const { getByLabelText } = render({ + render({ mount: 'left', isMulti: false, currentStep: Sessions.DECK_STEP_SAVING_POINT_TWO, - })[0] - getByLabelText('left single channel pipette moving to slot 3') + }) + screen.getByLabelText('left single channel pipette moving to slot 3') }) it('displays proper asset for slot 3 right single', () => { - const { getByLabelText } = render({ + render({ mount: 'right', isMulti: false, currentStep: Sessions.DECK_STEP_SAVING_POINT_TWO, - })[0] - getByLabelText('right single channel pipette moving to slot 3') + }) + screen.getByLabelText('right single channel pipette moving to slot 3') }) it('displays proper asset for slot 7 left multi', () => { - const { getByLabelText } = render({ + render({ mount: 'left', isMulti: true, currentStep: Sessions.DECK_STEP_SAVING_POINT_THREE, - })[0] - getByLabelText('left multi channel pipette moving to slot 7') + }) + screen.getByLabelText('left multi channel pipette moving to slot 7') }) it('displays proper asset for slot 7 right multi', () => { - const { getByLabelText } = render({ + render({ mount: 'right', isMulti: true, currentStep: Sessions.DECK_STEP_SAVING_POINT_THREE, - })[0] - getByLabelText('right multi channel pipette moving to slot 7') + }) + screen.getByLabelText('right multi channel pipette moving to slot 7') }) it('displays proper asset for slot 7 left single', () => { - const { getByLabelText } = render({ + render({ mount: 'left', isMulti: false, currentStep: Sessions.DECK_STEP_SAVING_POINT_THREE, - })[0] - getByLabelText('left single channel pipette moving to slot 7') + }) + screen.getByLabelText('left single channel pipette moving to slot 7') }) it('displays proper asset for slot 7 right single', () => { - const { getByLabelText } = render({ + render({ mount: 'right', isMulti: false, currentStep: Sessions.DECK_STEP_SAVING_POINT_THREE, - })[0] - getByLabelText('right single channel pipette moving to slot 7') + }) + screen.getByLabelText('right single channel pipette moving to slot 7') }) it('jogging sends command', () => { - const { getByRole } = render()[0] - getByRole('button', { name: 'forward' }).click() + render() + const button = screen.getByRole('button', { name: 'forward' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith({ command: Sessions.sharedCalCommands.JOG, @@ -153,26 +151,27 @@ describe('SaveXYPoint', () => { }) it('renders the confirm crash modal when invoked', () => { - const { getByText, queryByText } = render()[0] + render() expect( - queryByText('Starting over will cancel your calibration progress.') + screen.queryByText('Starting over will cancel your calibration progress.') ).toBeNull() - const crashLink = getByText('Start over') - crashLink.click() - getByText('Starting over will cancel your calibration progress.') + const crashLink = screen.getByText('Start over') + fireEvent.click(crashLink) + screen.getByText('Starting over will cancel your calibration progress.') }) it('renders the need help link', () => { - const { getByRole } = render()[0] - getByRole('link', { name: 'Need help?' }) + render() + screen.getByRole('link', { name: 'Need help?' }) }) it('proceeding in deck cal session sends save offset and move to point two commands when current step is savingPointOne', () => { - const { getByRole } = render({ + render({ sessionType: Sessions.SESSION_TYPE_DECK_CALIBRATION, currentStep: Sessions.DECK_STEP_SAVING_POINT_ONE, - })[0] - getByRole('button', { name: 'Confirm placement' }).click() + }) + const button = screen.getByRole('button', { name: 'Confirm placement' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith( { command: Sessions.sharedCalCommands.SAVE_OFFSET, diff --git a/app/src/organisms/CalibrationPanels/__tests__/SaveZPoint.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/SaveZPoint.test.tsx index ef106ce75bf..04a61fb7de4 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/SaveZPoint.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/SaveZPoint.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' @@ -10,64 +11,63 @@ import * as Sessions from '../../../redux/sessions' import { SaveZPoint } from '../SaveZPoint' describe('SaveZPoint', () => { - let render: ( - props?: Partial> - ) => ReturnType - const mockSendCommands = jest.fn() const mockDeleteSession = jest.fn() - beforeEach(() => { - render = (props = {}) => { - const { - mount = 'left', - isMulti = false, - tipRack = mockDeckCalTipRack, - sendCommands = mockSendCommands, - cleanUpAndExit = mockDeleteSession, - currentStep = Sessions.DECK_STEP_JOGGING_TO_DECK, - sessionType = Sessions.SESSION_TYPE_DECK_CALIBRATION, - calBlock, - } = props - return renderWithProviders( - , - { i18nInstance: i18n } - ) - } - }) + const render = ( + props: Partial> = {} + ) => { + const { + mount = 'left', + isMulti = false, + tipRack = mockDeckCalTipRack, + sendCommands = mockSendCommands, + cleanUpAndExit = mockDeleteSession, + currentStep = Sessions.DECK_STEP_JOGGING_TO_DECK, + sessionType = Sessions.SESSION_TYPE_DECK_CALIBRATION, + calBlock, + } = props + return renderWithProviders( + , + { i18nInstance: i18n } + ) + + } + afterEach(() => { jest.resetAllMocks() }) it('displays proper asset for left multi', () => { - const { getByLabelText } = render({ mount: 'left', isMulti: true })[0] - getByLabelText('left multi channel pipette moving to slot 5') + render({ mount: 'left', isMulti: true }) + screen.getByLabelText('left multi channel pipette moving to slot 5') }) it('displays proper asset for right multi', () => { - const { getByLabelText } = render({ mount: 'right', isMulti: true })[0] - getByLabelText('right multi channel pipette moving to slot 5') + render({ mount: 'right', isMulti: true }) + screen.getByLabelText('right multi channel pipette moving to slot 5') }) it('displays proper asset for left single', () => { - const { getByLabelText } = render({ mount: 'left', isMulti: false })[0] - getByLabelText('left single channel pipette moving to slot 5') + render({ mount: 'left', isMulti: false }) + screen.getByLabelText('left single channel pipette moving to slot 5') }) it('displays proper asset for right single', () => { - const { getByLabelText } = render({ mount: 'right', isMulti: false })[0] - getByLabelText('right single channel pipette moving to slot 5') + render({ mount: 'right', isMulti: false }) + screen.getByLabelText('right single channel pipette moving to slot 5') }) it('jogging sends command', () => { - const { getByRole } = render()[0] - getByRole('button', { name: 'up' }).click() + render() + const button = screen.getByRole('button', { name: 'up' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith({ command: Sessions.sharedCalCommands.JOG, @@ -76,25 +76,24 @@ describe('SaveZPoint', () => { }) it('renders the confirm crash modal when invoked', () => { - const { getByText, queryByText } = render()[0] + render() expect( - queryByText('Starting over will cancel your calibration progress.') + screen.queryByText('Starting over will cancel your calibration progress.') ).toBeNull() - const crashLink = getByText('Start over') - crashLink.click() - getByText('Starting over will cancel your calibration progress.') + const crashLink = screen.getByText('Start over') + fireEvent.click(crashLink) + screen.getByText('Starting over will cancel your calibration progress.') }) it('renders the need help link', () => { - const { getByRole } = render()[0] - getByRole('link', { name: 'Need help?' }) + render() + screen.getByRole('link', { name: 'Need help?' }) }) it('clicking proceed sends save offset and move to point one commands for deck cal', () => { - const { getByRole } = render({ - sessionType: Sessions.SESSION_TYPE_DECK_CALIBRATION, - })[0] - getByRole('button', { name: 'Confirm placement' }).click() + render({ sessionType: Sessions.SESSION_TYPE_DECK_CALIBRATION }) + const button = screen.getByRole('button', { name: 'Confirm placement' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith( { command: Sessions.sharedCalCommands.SAVE_OFFSET, @@ -106,10 +105,9 @@ describe('SaveZPoint', () => { }) it('clicking proceed sends save offset and move to point one commands for pipette offset cal', () => { - const { getByRole } = render({ - sessionType: Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION, - })[0] - getByRole('button', { name: 'Confirm placement' }).click() + render({ sessionType: Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION }) + const button = screen.getByRole('button', { name: 'Confirm placement' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith( { command: Sessions.sharedCalCommands.SAVE_OFFSET, @@ -121,10 +119,9 @@ describe('SaveZPoint', () => { }) it('clicking proceed sends compare point and move to point one commands for health check', () => { - const { getByRole } = render({ - sessionType: Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK, - })[0] - getByRole('button', { name: 'Confirm placement' }).click() + render({ sessionType: Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK }) + const button = screen.getByRole('button', { name: 'Confirm placement' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith( { command: Sessions.checkCommands.COMPARE_POINT, @@ -136,50 +133,44 @@ describe('SaveZPoint', () => { }) it('pip offset cal session type shows correct text', () => { - const { getByText, getByRole } = render({ - sessionType: Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION, - })[0] + render({ sessionType: Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION }) - getByRole('heading', { name: 'Calibrate z-axis in slot 5' }) - getByText( + screen.getByRole('heading', { name: 'Calibrate z-axis in slot 5' }) + screen.getByText( 'Jog the pipette until the tip is barely touching (less than 0.1 mm) the deck in slot 5.' ) - getByText( + screen.getByText( 'If the pipette is over the embossed 5, on the ridge of the slot, or hard to see, switch to the x- and y-axis controls to move the pipette across the deck.' ) }) it('deck cal session type shows correct text', () => { - const { getByText, getByRole } = render({ - sessionType: Sessions.SESSION_TYPE_DECK_CALIBRATION, - })[0] + render({ sessionType: Sessions.SESSION_TYPE_DECK_CALIBRATION }) - getByRole('heading', { name: 'Calibrate z-axis in slot 5' }) - getByText( + screen.getByRole('heading', { name: 'Calibrate z-axis in slot 5' }) + screen.getByText( 'Jog the pipette until the tip is barely touching (less than 0.1 mm) the deck in slot 5.' ) - getByText( + screen.getByText( 'If the pipette is over the embossed 5, on the ridge of the slot, or hard to see, switch to the x- and y-axis controls to move the pipette across the deck.' ) }) it('health check session type shows correct text with block', () => { - const { getByText, getByRole } = render({ + render({ sessionType: Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK, calBlock: mockTipLengthCalBlock, - })[0] - getByRole('heading', { name: 'Check z-axis on slot 5' }) - getByText( + }) + screen.getByRole('heading', { name: 'Check z-axis on slot 5' }) + screen.getByText( 'Jog the pipette until the tip is barely touching (less than 0.1 mm) the deck in slot 5.' ) }) it('health check session type shows correct text without block', () => { - const { getByText, getByRole } = render({ - sessionType: Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK, - })[0] - getByRole('heading', { name: 'Check z-axis on slot 5' }) - getByText( + render({ sessionType: Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK }) + screen.getByRole('heading', { name: 'Check z-axis on slot 5' }) + screen.getByText( 'Jog the pipette until the tip is barely touching (less than 0.1 mm) the deck in slot 5.' ) }) diff --git a/app/src/organisms/CalibrationPanels/__tests__/TipConfirmation.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/TipConfirmation.test.tsx index 98277ba6a0b..270a35eca01 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/TipConfirmation.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/TipConfirmation.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' import { mockDeckCalTipRack } from '../../../redux/sessions/__fixtures__' @@ -7,88 +8,78 @@ import * as Sessions from '../../../redux/sessions' import { TipConfirmation } from '../TipConfirmation' describe('TipConfirmation', () => { - let render: ( - props?: Partial> - ) => ReturnType - const mockSendCommands = jest.fn() const mockDeleteSession = jest.fn() - - beforeEach(() => { - render = (props = {}) => { - const { - mount = 'left', - isMulti = false, - tipRack = mockDeckCalTipRack, - sendCommands = mockSendCommands, - cleanUpAndExit = mockDeleteSession, - currentStep = Sessions.DECK_STEP_INSPECTING_TIP, - sessionType = Sessions.SESSION_TYPE_DECK_CALIBRATION, - } = props - return renderWithProviders( - , - { i18nInstance: i18n } - ) - } - }) + const render = ( + props: Partial> = {} + ) => { + const { + mount = 'left', + isMulti = false, + tipRack = mockDeckCalTipRack, + sendCommands = mockSendCommands, + cleanUpAndExit = mockDeleteSession, + currentStep = Sessions.DECK_STEP_INSPECTING_TIP, + sessionType = Sessions.SESSION_TYPE_DECK_CALIBRATION, + } = props + return renderWithProviders( + , + { i18nInstance: i18n } + ) + } afterEach(() => { jest.resetAllMocks() }) it('renders correct heading', () => { - const { getByRole } = render()[0] - - getByRole('heading', { name: 'Did pipette pick up tip successfully?' }) + render() + screen.getByRole('heading', { name: 'Did pipette pick up tip successfully?' }) }) it('clicking invalidate tip send invalidate tip command', () => { - const { getByRole } = render()[0] - - getByRole('button', { name: 'try again' }).click() + render() + const button = screen.getByRole('button', { name: 'try again' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith({ command: Sessions.sharedCalCommands.INVALIDATE_TIP, }) }) it('proceeds to move to deck for pipette offset calibration', () => { - const { getByRole } = render({ - sessionType: Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION, - })[0] - getByRole('button', { name: 'yes' }).click() + render({ sessionType: Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION }) + const button = screen.getByRole('button', { name: 'yes' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith({ command: Sessions.sharedCalCommands.MOVE_TO_DECK, }) }) it('proceeds to move to deck for deck calibration', () => { - const { getByRole } = render({ - sessionType: Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION, - })[0] - getByRole('button', { name: 'yes' }).click() + render({ sessionType: Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION }) + const button = screen.getByRole('button', { name: 'yes' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith({ command: Sessions.sharedCalCommands.MOVE_TO_DECK, }) }) it('proceeds to move to reference point for tip length calibration', () => { - const { getByRole } = render({ - sessionType: Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION, - })[0] - getByRole('button', { name: 'yes' }).click() + render({ sessionType: Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION }) + const button = screen.getByRole('button', { name: 'yes' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith({ command: Sessions.sharedCalCommands.MOVE_TO_REFERENCE_POINT, }) }) it('proceeds to move to reference point for calibration health check', () => { - const { getByRole } = render({ - sessionType: Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK, - })[0] - getByRole('button', { name: 'yes' }).click() + render({ sessionType: Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK }) + const button = screen.getByRole('button', { name: 'yes' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith({ command: Sessions.sharedCalCommands.MOVE_TO_REFERENCE_POINT, }) diff --git a/app/src/organisms/CalibrationPanels/__tests__/TipPickUp.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/TipPickUp.test.tsx index 528aae5de00..d9ed1ae694c 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/TipPickUp.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/TipPickUp.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' import { mockDeckCalTipRack } from '../../../redux/sessions/__fixtures__' @@ -7,47 +8,42 @@ import * as Sessions from '../../../redux/sessions' import { TipPickUp } from '../TipPickUp' describe('TipPickUp', () => { - let render: ( - props?: Partial> - ) => ReturnType - const mockSendCommands = jest.fn() const mockDeleteSession = jest.fn() - - beforeEach(() => { - render = (props = {}) => { - const { - mount = 'left', - isMulti = false, - tipRack = mockDeckCalTipRack, - sendCommands = mockSendCommands, - cleanUpAndExit = mockDeleteSession, - currentStep = Sessions.DECK_STEP_PREPARING_PIPETTE, - sessionType = Sessions.SESSION_TYPE_DECK_CALIBRATION, - } = props - return renderWithProviders( - , - { i18nInstance: i18n } - ) - } - }) + const render = ( + props: Partial> = {} + ) => { + const { + mount = 'left', + isMulti = false, + tipRack = mockDeckCalTipRack, + sendCommands = mockSendCommands, + cleanUpAndExit = mockDeleteSession, + currentStep = Sessions.DECK_STEP_PREPARING_PIPETTE, + sessionType = Sessions.SESSION_TYPE_DECK_CALIBRATION, + } = props + return renderWithProviders( + , + { i18nInstance: i18n } + ) + } afterEach(() => { jest.resetAllMocks() }) it('jogging sends command', () => { - const { getByRole } = render()[0] - getByRole('button', { name: 'forward' }).click() - + render() + const button = screen.getByRole('button', { name: 'forward' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith({ command: Sessions.sharedCalCommands.JOG, data: { vector: [0, -0.1, 0] }, @@ -55,25 +51,26 @@ describe('TipPickUp', () => { }) it('clicking pick up tip sends pick up tip command', () => { - const { getByRole } = render()[0] - getByRole('button', { name: 'Pick up tip' }).click() + render() + const button = screen.getByRole('button', { name: 'Pick up tip' }) + fireEvent.click(button) expect(mockSendCommands).toHaveBeenCalledWith({ command: Sessions.sharedCalCommands.PICK_UP_TIP, }) }) it('renders the need help link', () => { - const { getByRole } = render()[0] - getByRole('link', { name: 'Need help?' }) + render() + screen.getByRole('link', { name: 'Need help?' }) }) it('renders the confirm crash modal when invoked', () => { - const { getByText, queryByText } = render()[0] + render() expect( - queryByText('Starting over will cancel your calibration progress.') + screen.queryByText('Starting over will cancel your calibration progress.') ).toBeNull() - const crashLink = getByText('Start over') - crashLink.click() - getByText('Starting over will cancel your calibration progress.') + const crashLink = screen.getByText('Start over') + fireEvent.click(crashLink) + screen.getByText('Starting over will cancel your calibration progress.') }) }) diff --git a/app/src/organisms/CheckCalibration/__tests__/CheckCalibration.test.tsx b/app/src/organisms/CheckCalibration/__tests__/CheckCalibration.test.tsx index 8330d215205..f00586d3e7f 100644 --- a/app/src/organisms/CheckCalibration/__tests__/CheckCalibration.test.tsx +++ b/app/src/organisms/CheckCalibration/__tests__/CheckCalibration.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { when, resetAllWhenMocks } from 'jest-when' import { renderWithProviders } from '@opentrons/components' @@ -24,15 +25,33 @@ const mockGetDeckDefinitions = getDeckDefinitions as jest.MockedFunction< > describe('CheckCalibration', () => { - let render: ( - props?: Partial> - ) => ReturnType - let dispatchRequests: jest.MockedFunction + let dispatchRequests = jest.fn() const mockCalibrationCheckSession: Sessions.CalibrationCheckSession = { id: 'fake_check_session_id', ...mockCalibrationCheckSessionAttributes, } + const render = ( + props: Partial> = {} + ) => { + const { + showSpinner = false, + isJogging = false, + session = mockCalibrationCheckSession, + } = props + return renderWithProviders>( + , + { i18nInstance: i18n } + ) + } + const SPECS: CheckCalibrationSpec[] = [ { heading: 'Before you begin', currentStep: 'sessionStarted' }, { heading: 'Prepare the space', currentStep: 'labwareLoaded' }, @@ -66,38 +85,16 @@ describe('CheckCalibration', () => { beforeEach(() => { when(mockGetDeckDefinitions).calledWith().mockReturnValue({}) - - dispatchRequests = jest.fn() - - render = ( - props: Partial> = {} - ) => { - const { - showSpinner = false, - isJogging = false, - session = mockCalibrationCheckSession, - } = props - return renderWithProviders>( - , - { i18nInstance: i18n } - ) - } }) afterEach(() => { resetAllWhenMocks() + jest.resetAllMocks() }) SPECS.forEach(spec => { it(`renders correct contents when currentStep is ${spec.currentStep}`, () => { - const { getByRole, queryByRole } = render({ + render({ session: { ...mockCalibrationCheckSession, details: { @@ -105,38 +102,39 @@ describe('CheckCalibration', () => { currentStep: spec.currentStep, }, }, - })[0] + }) SPECS.forEach(({ currentStep, heading }) => { if (currentStep === spec.currentStep) { expect( - getByRole('heading', { name: spec.heading }) + screen.getByRole('heading', { name: spec.heading }) ).toBeInTheDocument() } else { - expect(queryByRole('heading', { name: heading })).toBeNull() + expect(screen.queryByRole('heading', { name: heading })).toBeNull() } }) }) }) it('renders confirm exit on exit click', () => { - const { getByRole, queryByRole } = render()[0] + render()[0] expect( - queryByRole('heading', { + screen.queryByRole('heading', { name: 'Calibration Health Check progress will be lost', }) ).toBeNull() - getByRole('button', { name: 'Exit' }).click() + const button = screen.getByRole('button', { name: 'Exit' }) + fireEvent.click(button) expect( - getByRole('heading', { + screen.getByRole('heading', { name: 'Calibration Health Check progress will be lost', }) ).toBeInTheDocument() }) it('does not render contents when showSpinner is true', () => { - const { queryByRole } = render({ + render({ showSpinner: true, session: { ...mockCalibrationCheckSession, @@ -145,8 +143,8 @@ describe('CheckCalibration', () => { currentStep: 'sessionStarted', }, }, - })[0] - expect(queryByRole('heading', { name: 'Before you begin' })).toBeNull() + }) + expect(screen.queryByRole('heading', { name: 'Before you begin' })).toBeNull() }) it('does dispatch jog requests when not isJogging', () => { @@ -158,8 +156,9 @@ describe('CheckCalibration', () => { currentStep: Sessions.DECK_STEP_PREPARING_PIPETTE, }, } - const { getByRole } = render({ isJogging: false, session })[0] - getByRole('button', { name: 'forward' }).click() + render({ isJogging: false, session }) + const button = screen.getByRole('button', { name: 'forward' }) + fireEvent.click(button) expect(dispatchRequests).toHaveBeenCalledWith( Sessions.createSessionCommand('robot-name', session.id, { command: Sessions.sharedCalCommands.JOG, @@ -177,8 +176,9 @@ describe('CheckCalibration', () => { currentStep: Sessions.DECK_STEP_PREPARING_PIPETTE, }, } - const { getByRole } = render({ isJogging: true, session })[0] - getByRole('button', { name: 'forward' }).click() + render({ isJogging: true, session }) + const button = screen.getByRole('button', { name: 'forward' }) + fireEvent.click(button) expect(dispatchRequests).not.toHaveBeenCalledWith( Sessions.createSessionCommand('robot-name', session.id, { command: Sessions.sharedCalCommands.JOG, diff --git a/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx b/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx index 68c998dfd4a..2338be01dde 100644 --- a/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx +++ b/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { renderWithProviders } from '@opentrons/components' import { StaticRouter } from 'react-router-dom' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { i18n } from '../../../i18n' import { getStoredProtocols } from '../../../redux/protocol-storage' import { mockConnectableRobot } from '../../../redux/discovery/__fixtures__' @@ -58,53 +58,44 @@ describe('ChooseProtocolSlideout', () => { }) it('renders slideout if showSlideout true', () => { - const [{ queryAllByText }] = render({ + render({ robot: mockConnectableRobot, onCloseClick: jest.fn(), showSlideout: true, }) - expect(queryAllByText('Choose Protocol to Run')).not.toBeFalsy() - expect(queryAllByText(mockConnectableRobot.name)).not.toBeFalsy() - }) - it('does not render slideout if showSlideout false', () => { - const [{ queryAllByText }] = render({ - robot: mockConnectableRobot, - onCloseClick: jest.fn(), - showSlideout: true, - }) - expect(queryAllByText('Choose Protocol to Run').length).toEqual(0) - expect(queryAllByText(mockConnectableRobot.name).length).toEqual(0) + screen.getByText(/choose protocol to run/i) + screen.getByText(/opentrons-robot-name/i) }) it('renders an available protocol option for every stored protocol if any', () => { - const [{ getByText, getByLabelText, queryByRole }] = render({ + render({ robot: mockConnectableRobot, onCloseClick: jest.fn(), showSlideout: true, }) - getByLabelText('protocol deck map') - getByText('fakeSrcFileName') - expect(queryByRole('heading', { name: 'No protocols found' })).toBeNull() + screen.getByLabelText('protocol deck map') + screen.getByText('fakeSrcFileName') + expect(screen.queryByRole('heading', { name: 'No protocols found' })).toBeNull() }) it('renders an empty state if no protocol options', () => { mockGetStoredProtocols.mockReturnValue([]) - const [{ getByRole, queryByText, queryByLabelText }] = render({ + render({ robot: mockConnectableRobot, onCloseClick: jest.fn(), showSlideout: true, }) - expect(queryByLabelText('protocol deck map')).toBeNull() - expect(queryByText('fakeSrcFileName')).toBeNull() + expect(screen.queryByLabelText('protocol deck map')).toBeNull() + expect(screen.queryByText('fakeSrcFileName')).toBeNull() expect( - getByRole('heading', { name: 'No protocols found' }) + screen.getByRole('heading', { name: 'No protocols found' }) ).toBeInTheDocument() }) it('calls createRunFromProtocolSource if CTA clicked', () => { - const [{ getByRole }] = render({ + render({ robot: mockConnectableRobot, onCloseClick: jest.fn(), showSlideout: true, }) - const proceedButton = getByRole('button', { name: 'Proceed to setup' }) + const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) fireEvent.click(proceedButton) expect(mockCreateRunFromProtocol).toHaveBeenCalledWith({ files: [expect.any(File)], @@ -120,19 +111,19 @@ describe('ChooseProtocolSlideout', () => { reset: jest.fn(), runCreationErrorCode: 500, }) - const [{ getByRole, getByText }] = render({ + render({ robot: mockConnectableRobot, onCloseClick: jest.fn(), showSlideout: true, }) - const proceedButton = getByRole('button', { name: 'Proceed to setup' }) - proceedButton.click() + const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) + fireEvent.click(proceedButton) expect(mockCreateRunFromProtocol).toHaveBeenCalledWith({ files: [expect.any(File)], protocolKey: storedProtocolDataFixture.protocolKey, }) expect(mockTrackCreateProtocolRunEvent).toHaveBeenCalled() - expect(getByText('run creation error')).toBeInTheDocument() + expect(screen.getByText('run creation error')).toBeInTheDocument() }) it('renders error state when run creation error code is 409', () => { @@ -143,20 +134,20 @@ describe('ChooseProtocolSlideout', () => { reset: jest.fn(), runCreationErrorCode: 409, }) - const [{ getByRole, getByText }] = render({ + render({ robot: mockConnectableRobot, onCloseClick: jest.fn(), showSlideout: true, }) - const proceedButton = getByRole('button', { name: 'Proceed to setup' }) - proceedButton.click() + const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) + fireEvent.click(proceedButton) expect(mockCreateRunFromProtocol).toHaveBeenCalledWith({ files: [expect.any(File)], protocolKey: storedProtocolDataFixture.protocolKey, }) expect(mockTrackCreateProtocolRunEvent).toHaveBeenCalled() - getByText('This robot is busy and can’t run this protocol right now.') - const link = getByRole('link', { name: 'Go to Robot' }) + screen.getByText('This robot is busy and can’t run this protocol right now.') + const link = screen.getByRole('link', { name: 'Go to Robot' }) fireEvent.click(link) expect(link.getAttribute('href')).toEqual('/devices/opentrons-robot-name') }) diff --git a/app/src/organisms/ChooseProtocolSlideout/index.tsx b/app/src/organisms/ChooseProtocolSlideout/index.tsx index caee791276a..c87485efc53 100644 --- a/app/src/organisms/ChooseProtocolSlideout/index.tsx +++ b/app/src/organisms/ChooseProtocolSlideout/index.tsx @@ -67,9 +67,9 @@ export function ChooseProtocolSlideoutComponent( const srcFileObjects = selectedProtocol != null ? selectedProtocol.srcFiles.map((srcFileBuffer, index) => { - const srcFilePath = selectedProtocol.srcFileNames[index] - return new File([srcFileBuffer], path.basename(srcFilePath)) - }) + const srcFilePath = selectedProtocol.srcFileNames[index] + return new File([srcFileBuffer], path.basename(srcFilePath)) + }) : [] const { trackCreateProtocolRunEvent } = useTrackCreateProtocolRunEvent( @@ -101,10 +101,10 @@ export function ChooseProtocolSlideoutComponent( { hostname: robot.ip }, shouldApplyOffsets ? offsetCandidates.map(({ vector, location, definitionUri }) => ({ - vector, - location, - definitionUri, - })) + vector, + location, + definitionUri, + })) : [] ) const handleProceed: React.MouseEventHandler = () => { @@ -205,11 +205,8 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element { selectedProtocol != null && storedProtocol.protocolKey === selectedProtocol.protocolKey return ( - <> - + + ) : null} - + ) })} From e43cdfe72b45672719d89ed4e5abd0c4f427e68d Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Fri, 8 Dec 2023 18:15:38 -0500 Subject: [PATCH 11/31] react testing library fixes and best practices --- .eslintrc.js | 11 +- .../__tests__/useToggleGroup.test.tsx | 2 +- .../__tests__/ConnectRobotSlideout.test.tsx | 16 +- .../__tests__/CalibratePipetteOffset.test.tsx | 2 +- .../__tests__/CalibrateTipLength.test.tsx | 2 +- .../__tests__/CheckCalibration.test.tsx | 5 +- .../__tests__/ChooseRobotSlideout.test.tsx | 52 +-- .../organisms/ChooseRobotSlideout/index.tsx | 5 +- .../ChooseRobotToRunProtocolSlideout.test.tsx | 91 ++--- .../__tests__/PipetteOverflowMenu.test.tsx | 52 ++- .../PipetteSettingsSlideout.test.tsx | 3 +- .../__tests__/ProtocolRunHeader.test.tsx | 4 +- .../SetupFlexPipetteCalibrationItem.test.tsx | 2 +- .../__tests__/RenameRobotSlideout.test.tsx | 20 +- .../__tests__/OpenJupyterControl.test.tsx | 24 +- .../__tests__/Troubleshooting.test.tsx | 3 +- .../RobotUpdateProgressModal.test.tsx | 49 ++- .../useProtocolRunAnalyticsData.test.tsx | 3 +- .../useTrackCreateProtocolRunEvent.test.tsx | 3 +- .../useTrackProtocolRunEvent.test.tsx | 3 +- .../__tests__/ExitConfirmation.test.tsx | 67 ++-- .../__tests__/MountGripper.test.tsx | 76 ++-- .../__tests__/MovePin.test.tsx | 124 +++--- .../__tests__/Success.test.tsx | 71 ++-- .../__tests__/UnmountGripper.test.tsx | 67 ++-- .../__tests__/LabwareDetails.test.tsx | 20 +- .../__tests__/CheckItem.test.tsx | 47 +-- .../__tests__/PickUpTip.test.tsx | 375 +++++++++--------- .../__tests__/ReturnTip.test.tsx | 30 +- .../ModuleCard/__tests__/ErrorInfo.test.tsx | 46 +-- .../__tests__/TestShakeSlideout.test.tsx | 2 + .../PipetteWizardFlows/ChoosePipette.tsx | 1 + .../__tests__/AttachProbe.test.tsx | 4 + .../__tests__/ChoosePipette.test.tsx | 78 ++-- .../__tests__/ProtocolDetails.test.tsx | 2 +- .../__tests__/EmptyStateLinks.test.tsx | 34 +- .../__tests__/UploadInput.test.tsx | 45 +-- .../__tests__/CalibrationHealthCheck.test.tsx | 38 +- .../SendProtocolToOT3Slideout.test.tsx | 60 +-- .../__tests__/MaintenanceRunTakeover.test.tsx | 19 +- .../__tests__/RobotSettingsDashboard.test.tsx | 2 +- .../__tests__/LongPressModal.test.tsx | 3 +- .../components/__tests__/FormAlerts.test.tsx | 27 +- .../modules/__tests__/TrashModal.test.tsx | 2 + .../useDeleteCalibrationMutation.test.tsx | 2 +- 45 files changed, 777 insertions(+), 817 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 42fa672a061..66b766b2ffc 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -79,7 +79,7 @@ module.exports = { env: { jest: true, }, - extends: ['plugin:jest/recommended', 'plugin:testing-library/react'], + extends: ['plugin:jest/recommended'], rules: { 'jest/expect-expect': 'off', 'jest/no-standalone-expect': 'off', @@ -92,7 +92,14 @@ module.exports = { // TODO(mc, 2021-01-29): fix these and remove warning overrides 'jest/no-deprecated-functions': 'warn', 'jest/valid-title': 'warn', - 'jest/no-conditional-expect': 'warn', + 'jest/no-conditional-expect': 'warn' + }, + }, + { + files: [ '**/__tests__/**test.tsx' ], + env: { jest: true }, + extends: ['plugin:testing-library/react'], + rules: { 'testing-library/prefer-screen-queries': 'warn' }, }, diff --git a/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx b/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx index f8dfa4e763e..46718bf6c4a 100644 --- a/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx +++ b/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { Provider } from 'react-redux' import { createStore } from 'redux' -import { act, renderHook, render, fireEvent } from '@testing-library/react' +import { renderHook, render, fireEvent } from '@testing-library/react' import { useTrackEvent } from '../../../redux/analytics' import { useToggleGroup } from '../useToggleGroup' diff --git a/app/src/organisms/AppSettings/__tests__/ConnectRobotSlideout.test.tsx b/app/src/organisms/AppSettings/__tests__/ConnectRobotSlideout.test.tsx index 6923cd1dc3b..ce943fd953c 100644 --- a/app/src/organisms/AppSettings/__tests__/ConnectRobotSlideout.test.tsx +++ b/app/src/organisms/AppSettings/__tests__/ConnectRobotSlideout.test.tsx @@ -89,8 +89,8 @@ describe('ConnectRobotSlideout', () => { render(props) const targetLink = 'https://support.opentrons.com/s/article/Manually-adding-a-robot-s-IP-address' - const link = screen.getByText('Learn more about connecting a robot manually') - expect(link.closest('a')).toHaveAttribute('href', targetLink) + const link = screen.getByRole('link', {name: 'Learn more about connecting a robot manually'}) + expect(link).toHaveAttribute('href', targetLink) }) it('Clicking Add button without IP address/hostname should display an error message', async () => { @@ -112,7 +112,7 @@ describe('ConnectRobotSlideout', () => { screen.getByText(newIpAddress) screen.getByText('Searching for 30s') - expect(screen.queryByText('Available')).toBeInTheDocument() + screen.getByText('Available') }) it('Clicking Add button with an IP address/hostname should display the IP address/hostname and Available label', async () => { @@ -129,16 +129,16 @@ describe('ConnectRobotSlideout', () => { }) it('Clicking Add button with an IP address/hostname should display the IP address/hostname and Not Found label', async () => { - const { getByRole, findByText } = render(props) + render(props) const notFoundIpAddress = '1.1.1.2' - const inputBox = getByRole('textbox') - const addButton = getByRole('button', { name: 'Add' }) + const inputBox = screen.getByRole('textbox') + const addButton = screen.getByRole('button', { name: 'Add' }) fireEvent.change(inputBox, { target: { value: notFoundIpAddress }, }) fireEvent.click(addButton) - findByText(notFoundIpAddress) - findByText('Not Found') + screen.getByText(notFoundIpAddress) + screen.getByText('Not Found') }) it('Clicking Close button in a row should remove an IP address/hostname', async () => { diff --git a/app/src/organisms/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx b/app/src/organisms/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx index 44cdb4f05e9..7ef8a5b6678 100644 --- a/app/src/organisms/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx +++ b/app/src/organisms/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx @@ -136,7 +136,7 @@ describe('CalibratePipetteOffset', () => { currentStep: 'sessionStarted', }, }, - })[0] + }) expect(screen.queryByRole('heading', { name: 'Before you begin' })).toBeNull() }) diff --git a/app/src/organisms/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx b/app/src/organisms/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx index 47de12d45a6..b3ee7483dfd 100644 --- a/app/src/organisms/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx +++ b/app/src/organisms/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx @@ -28,7 +28,7 @@ const mockGetDeckDefinitions = getDeckDefinitions as jest.MockedFunction< describe('CalibrateTipLength', () => { const dispatchRequests = jest.fn() - let mockTipLengthSession: Sessions.TipLengthCalibrationSession = { + const mockTipLengthSession: Sessions.TipLengthCalibrationSession = { id: 'fake_session_id', ...mockTipLengthCalibrationSessionAttributes, } diff --git a/app/src/organisms/CheckCalibration/__tests__/CheckCalibration.test.tsx b/app/src/organisms/CheckCalibration/__tests__/CheckCalibration.test.tsx index f00586d3e7f..70ead5f175c 100644 --- a/app/src/organisms/CheckCalibration/__tests__/CheckCalibration.test.tsx +++ b/app/src/organisms/CheckCalibration/__tests__/CheckCalibration.test.tsx @@ -25,7 +25,7 @@ const mockGetDeckDefinitions = getDeckDefinitions as jest.MockedFunction< > describe('CheckCalibration', () => { - let dispatchRequests = jest.fn() + const dispatchRequests = jest.fn() const mockCalibrationCheckSession: Sessions.CalibrationCheckSession = { id: 'fake_check_session_id', ...mockCalibrationCheckSessionAttributes, @@ -117,8 +117,7 @@ describe('CheckCalibration', () => { }) it('renders confirm exit on exit click', () => { - render()[0] - + render() expect( screen.queryByRole('heading', { name: 'Calibration Health Check progress will be lost', diff --git a/app/src/organisms/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx b/app/src/organisms/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx index f30fc4e8028..39f9176c737 100644 --- a/app/src/organisms/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx +++ b/app/src/organisms/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { renderWithProviders } from '@opentrons/components' import { StaticRouter } from 'react-router-dom' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { i18n } from '../../../i18n' import { @@ -76,29 +76,17 @@ describe('ChooseRobotSlideout', () => { }) it('renders slideout if isExpanded true', () => { - const [{ queryAllByText }] = render({ + render({ onCloseClick: jest.fn(), isExpanded: true, selectedRobot: null, setSelectedRobot: jest.fn(), title: 'choose robot slideout title', }) - expect(queryAllByText('Choose Robot to Run')).not.toBeFalsy() - expect(queryAllByText('fakeSrcFileName')).not.toBeFalsy() - }) - it('does not render slideout if isExpanded false', () => { - const [{ queryAllByText }] = render({ - onCloseClick: jest.fn(), - isExpanded: true, - selectedRobot: null, - setSelectedRobot: jest.fn(), - title: 'choose robot slideout title', - }) - expect(queryAllByText('Choose Robot to Run').length).toEqual(0) - expect(queryAllByText('fakeSrcFileName').length).toEqual(0) + screen.getByText('choose robot slideout title') }) it('shows a warning if the protocol has failed analysis', () => { - const [{ getByText }] = render({ + render({ onCloseClick: jest.fn(), isExpanded: true, selectedRobot: null, @@ -106,46 +94,44 @@ describe('ChooseRobotSlideout', () => { title: 'choose robot slideout title', isAnalysisError: true, }) - getByText( + screen.getByText( 'This protocol failed in-app analysis. It may be unusable on robots without custom software configurations.' ) }) it('renders an available robot option for every connectable robot, and link for other robots', () => { - const [{ queryByText }] = render({ + render({ onCloseClick: jest.fn(), isExpanded: true, selectedRobot: null, setSelectedRobot: jest.fn(), title: 'choose robot slideout title', }) - expect(queryByText('opentrons-robot-name')).toBeInTheDocument() - expect( - queryByText('2 unavailable robots are not listed.') - ).toBeInTheDocument() + screen.getByText('opentrons-robot-name') + screen.getByText('2 unavailable robots are not listed.') }) it('if scanning, show robots, but do not show link to other devices', () => { mockGetScanning.mockReturnValue(true) - const [{ queryByText }] = render({ + render({ onCloseClick: jest.fn(), isExpanded: true, selectedRobot: null, setSelectedRobot: jest.fn(), title: 'choose robot slideout title', }) - expect(queryByText('opentrons-robot-name')).toBeInTheDocument() + screen.getByText('opentrons-robot-name') expect( - queryByText('2 unavailable robots are not listed.') + screen.queryByText('2 unavailable robots are not listed.') ).not.toBeInTheDocument() }) it('if not scanning, show refresh button, start discovery if clicked', () => { - const [{ getByRole }, { dispatch }] = render({ + const { dispatch } = render({ onCloseClick: jest.fn(), isExpanded: true, selectedRobot: null, setSelectedRobot: mockSetSelectedRobot, title: 'choose robot slideout title', - }) - const refreshButton = getByRole('button', { name: 'refresh' }) + })[1] + const refreshButton = screen.getByRole('button', { name: 'refresh' }) fireEvent.click(refreshButton) expect(mockStartDiscovery).toHaveBeenCalled() expect(dispatch).toHaveBeenCalledWith({ type: 'mockStartDiscovery' }) @@ -155,7 +141,7 @@ describe('ChooseRobotSlideout', () => { { ...mockConnectableRobot, name: 'otherRobot', ip: 'otherIp' }, mockConnectableRobot, ]) - const [{ getByText }] = render({ + render({ onCloseClick: jest.fn(), isExpanded: true, selectedRobot: null, @@ -167,11 +153,11 @@ describe('ChooseRobotSlideout', () => { name: 'otherRobot', ip: 'otherIp', }) - const mockRobot = getByText('opentrons-robot-name') - mockRobot.click() // unselect default robot + const mockRobot = screen.getByText('opentrons-robot-name') + fireEvent.click(mockRobot) // unselect default robot expect(mockSetSelectedRobot).toBeCalledWith(mockConnectableRobot) - const otherRobot = getByText('otherRobot') - otherRobot.click() + const otherRobot = screen.getByText('otherRobot') + fireEvent.click(otherRobot) expect(mockSetSelectedRobot).toBeCalledWith({ ...mockConnectableRobot, name: 'otherRobot', diff --git a/app/src/organisms/ChooseRobotSlideout/index.tsx b/app/src/organisms/ChooseRobotSlideout/index.tsx index e196a8bdcb4..c5dade74a04 100644 --- a/app/src/organisms/ChooseRobotSlideout/index.tsx +++ b/app/src/organisms/ChooseRobotSlideout/index.tsx @@ -222,9 +222,8 @@ export function ChooseRobotSlideout( const isSelected = selectedRobot != null && selectedRobot.ip === robot.ip return ( - <> + { @@ -271,7 +270,7 @@ export function ChooseRobotSlideout( )} )} - + ) }) )} diff --git a/app/src/organisms/ChooseRobotToRunProtocolSlideout/__tests__/ChooseRobotToRunProtocolSlideout.test.tsx b/app/src/organisms/ChooseRobotToRunProtocolSlideout/__tests__/ChooseRobotToRunProtocolSlideout.test.tsx index d8167945e83..3077fc71b36 100644 --- a/app/src/organisms/ChooseRobotToRunProtocolSlideout/__tests__/ChooseRobotToRunProtocolSlideout.test.tsx +++ b/app/src/organisms/ChooseRobotToRunProtocolSlideout/__tests__/ChooseRobotToRunProtocolSlideout.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { renderWithProviders } from '@opentrons/components' import { StaticRouter } from 'react-router-dom' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { when, resetAllWhenMocks } from 'jest-when' import { i18n } from '../../../i18n' @@ -173,53 +173,42 @@ describe('ChooseRobotToRunProtocolSlideout', () => { }) it('renders slideout if showSlideout true', () => { - const [{ queryAllByText }] = render({ + render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), showSlideout: true, }) - expect(queryAllByText('Choose Robot to Run')).not.toBeFalsy() - expect(queryAllByText('fakeSrcFileName')).not.toBeFalsy() - }) - it('does not render slideout if showSlideout false', () => { - const [{ queryAllByText }] = render({ - storedProtocolData: storedProtocolDataFixture, - onCloseClick: jest.fn(), - showSlideout: true, - }) - expect(queryAllByText('Choose Robot to Run').length).toEqual(0) - expect(queryAllByText('fakeSrcFileName').length).toEqual(0) + screen.getByText(/Choose Robot to Run/i) + screen.getByText(/fakeSrcFileName/i) }) it('renders an available robot option for every connectable robot, and link for other robots', () => { - const [{ queryByText }] = render({ + render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), showSlideout: true, }) - expect(queryByText('opentrons-robot-name')).toBeInTheDocument() - expect( - queryByText('2 unavailable robots are not listed.') - ).toBeInTheDocument() + screen.getByText('opentrons-robot-name') + screen.getByText('2 unavailable robots are not listed.') }) it('if scanning, show robots, but do not show link to other devices', () => { mockGetScanning.mockReturnValue(true) - const [{ queryByText }] = render({ + render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), showSlideout: true, }) - expect(queryByText('opentrons-robot-name')).toBeInTheDocument() + screen.getByText('opentrons-robot-name') expect( - queryByText('2 unavailable robots are not listed.') + screen.queryByText('2 unavailable robots are not listed.') ).not.toBeInTheDocument() }) it('if not scanning, show refresh button, start discovery if clicked', () => { - const [{ getByRole }, { dispatch }] = render({ + const { dispatch } = render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), showSlideout: true, - }) - const refreshButton = getByRole('button', { name: 'refresh' }) + })[1] + const refreshButton = screen.getByRole('button', { name: 'refresh' }) fireEvent.click(refreshButton) expect(mockStartDiscovery).toHaveBeenCalled() expect(dispatch).toHaveBeenCalledWith({ type: 'mockStartDiscovery' }) @@ -229,17 +218,17 @@ describe('ChooseRobotToRunProtocolSlideout', () => { { ...mockConnectableRobot, name: 'otherRobot', ip: 'otherIp' }, mockConnectableRobot, ]) - const [{ getByRole, getByText }] = render({ + render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), showSlideout: true, }) - const proceedButton = getByRole('button', { name: 'Proceed to setup' }) + const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) expect(proceedButton).not.toBeDisabled() - const otherRobot = getByText('otherRobot') + const otherRobot = screen.getByText('otherRobot') otherRobot.click() // unselect default robot expect(proceedButton).not.toBeDisabled() - const mockRobot = getByText('opentrons-robot-name') + const mockRobot = screen.getByText('opentrons-robot-name') mockRobot.click() expect(proceedButton).not.toBeDisabled() proceedButton.click() @@ -257,19 +246,17 @@ describe('ChooseRobotToRunProtocolSlideout', () => { autoUpdateDisabledReason: null, updateFromFileDisabledReason: null, }) - const [{ getByRole, getByText }] = render({ + render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), showSlideout: true, }) - const proceedButton = getByRole('button', { name: 'Proceed to setup' }) + const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) expect(proceedButton).toBeDisabled() - expect( - getByText( - 'A robot software update is required to run protocols with this version of the Opentrons App.' - ) - ).toBeInTheDocument() - const linkToRobotDetails = getByText('Go to Robot') + screen.getByText( + 'A robot software update is required to run protocols with this version of the Opentrons App.' + ) + const linkToRobotDetails = screen.getByText('Go to Robot') linkToRobotDetails.click() }) @@ -281,19 +268,19 @@ describe('ChooseRobotToRunProtocolSlideout', () => { reset: jest.fn(), runCreationErrorCode: 500, }) - const [{ getByRole, getByText }] = render({ + render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), showSlideout: true, }) - const proceedButton = getByRole('button', { name: 'Proceed to setup' }) + const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) proceedButton.click() expect(mockCreateRunFromProtocolSource).toHaveBeenCalledWith({ files: [expect.any(File)], protocolKey: storedProtocolDataFixture.protocolKey, }) expect(mockTrackCreateProtocolRunEvent).toHaveBeenCalled() - expect(getByText('run creation error')).toBeInTheDocument() + expect(screen.getByText('run creation error')).toBeInTheDocument() }) it('renders error state when run creation error code is 409', () => { @@ -304,20 +291,20 @@ describe('ChooseRobotToRunProtocolSlideout', () => { reset: jest.fn(), runCreationErrorCode: 409, }) - const [{ getByRole, getByText }] = render({ + render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), showSlideout: true, }) - const proceedButton = getByRole('button', { name: 'Proceed to setup' }) + const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) proceedButton.click() expect(mockCreateRunFromProtocolSource).toHaveBeenCalledWith({ files: [expect.any(File)], protocolKey: storedProtocolDataFixture.protocolKey, }) expect(mockTrackCreateProtocolRunEvent).toHaveBeenCalled() - getByText('This robot is busy and can’t run this protocol right now.') - const link = getByRole('link', { name: 'Go to Robot' }) + screen.getByText('This robot is busy and can’t run this protocol right now.') + const link = screen.getByRole('link', { name: 'Go to Robot' }) fireEvent.click(link) expect(link.getAttribute('href')).toEqual('/devices/opentrons-robot-name') }) @@ -339,7 +326,7 @@ describe('ChooseRobotToRunProtocolSlideout', () => { mockConnectableRobot, { ...mockConnectableRobot, name: 'otherRobot', ip: 'otherIp' }, ]) - const [{ getByRole }] = render({ + render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), showSlideout: true, @@ -355,8 +342,8 @@ describe('ChooseRobotToRunProtocolSlideout', () => { }, ] ) - expect(getByRole('checkbox')).toBeChecked() - const proceedButton = getByRole('button', { name: 'Proceed to setup' }) + expect(screen.getByRole('checkbox')).toBeChecked() + const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) proceedButton.click() expect(mockCreateRunFromProtocolSource).toHaveBeenCalledWith({ files: [expect.any(File)], @@ -384,17 +371,17 @@ describe('ChooseRobotToRunProtocolSlideout', () => { mockConnectableRobot, { ...mockConnectableRobot, name: 'otherRobot', ip: 'otherIp' }, ]) - const [{ getByRole, getByText }] = render({ + render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), showSlideout: true, }) - const otherRobot = getByText('otherRobot') - otherRobot.click() // unselect default robot + const otherRobot = screen.getByText('otherRobot') + fireEvent.click(otherRobot) // unselect default robot - expect(getByRole('checkbox')).toBeChecked() - const proceedButton = getByRole('button', { name: 'Proceed to setup' }) - proceedButton.click() + expect(screen.getByRole('checkbox')).toBeChecked() + const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) + fireEvent.click(proceedButton) expect(mockUseCreateRunFromProtocol).nthCalledWith( 2, expect.any(Object), diff --git a/app/src/organisms/Devices/PipetteCard/__tests__/PipetteOverflowMenu.test.tsx b/app/src/organisms/Devices/PipetteCard/__tests__/PipetteOverflowMenu.test.tsx index 43d516d1ff1..4a383b0779b 100644 --- a/app/src/organisms/Devices/PipetteCard/__tests__/PipetteOverflowMenu.test.tsx +++ b/app/src/organisms/Devices/PipetteCard/__tests__/PipetteOverflowMenu.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { resetAllWhenMocks } from 'jest-when' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../../i18n' @@ -55,11 +55,11 @@ describe('PipetteOverflowMenu', () => { }) it('renders information with a pipette attached', () => { - const { getByRole } = render(props) - const detach = getByRole('button', { name: 'Detach pipette' }) - const settings = getByRole('button', { name: 'Pipette Settings' }) - const about = getByRole('button', { name: 'About pipette' }) - const dropTip = getByRole('button', { name: 'Drop tips' }) + render(props) + const detach = screen.getByRole('button', { name: 'Detach pipette' }) + const settings = screen.getByRole('button', { name: 'Pipette Settings' }) + const about = screen.getByRole('button', { name: 'About pipette' }) + const dropTip = screen.getByRole('button', { name: 'Drop tips' }) fireEvent.click(detach) expect(props.handleChangePipette).toHaveBeenCalled() fireEvent.click(settings) @@ -74,8 +74,8 @@ describe('PipetteOverflowMenu', () => { ...props, pipetteSpecs: null, } - const { getByRole } = render(props) - const btn = getByRole('button', { name: 'Attach pipette' }) + render(props) + const btn = screen.getByRole('button', { name: 'Attach pipette' }) fireEvent.click(btn) expect(props.handleChangePipette).toHaveBeenCalled() }) @@ -85,8 +85,8 @@ describe('PipetteOverflowMenu', () => { ...props, isPipetteCalibrated: true, } - const { getByRole } = render(props) - const recalibrate = getByRole('button', { + render(props) + const recalibrate = screen.getByRole('button', { name: 'Recalibrate pipette', }) fireEvent.click(recalibrate) @@ -99,25 +99,23 @@ describe('PipetteOverflowMenu', () => { ...props, isPipetteCalibrated: true, } - const { queryByRole } = render(props) - expect( - queryByRole('button', { - name: 'Recalibrate pipette', - }) - ).toBeInTheDocument() + render(props) + screen.getByRole('button', { + name: 'Recalibrate pipette', + }) }) it('renders only the about pipette button if FLEX pipette is attached', () => { mockisFlexPipette.mockReturnValue(true) - const { getByRole, queryByRole } = render(props) + render(props) - const calibrate = getByRole('button', { + const calibrate = screen.getByRole('button', { name: 'Calibrate pipette', }) - const detach = getByRole('button', { name: 'Detach pipette' }) - const settings = queryByRole('button', { name: 'Pipette Settings' }) - const about = getByRole('button', { name: 'About pipette' }) + const detach = screen.getByRole('button', { name: 'Detach pipette' }) + const settings = screen.queryByRole('button', { name: 'Pipette Settings' }) + const about = screen.getByRole('button', { name: 'About pipette' }) fireEvent.click(calibrate) expect(props.handleCalibrate).toHaveBeenCalled() @@ -134,8 +132,8 @@ describe('PipetteOverflowMenu', () => { ...props, pipetteSettings: null, } - const { queryByRole } = render(props) - const settings = queryByRole('button', { name: 'Pipette Settings' }) + render(props) + const settings = screen.queryByRole('button', { name: 'Pipette Settings' }) expect(settings).not.toBeInTheDocument() }) @@ -146,19 +144,19 @@ describe('PipetteOverflowMenu', () => { ...props, isRunActive: true, } - const { getByRole } = render(props) + render(props) expect( - getByRole('button', { + screen.getByRole('button', { name: 'Calibrate pipette', }) ).toBeDisabled() expect( - getByRole('button', { + screen.getByRole('button', { name: 'Detach pipette', }) ).toBeDisabled() expect( - getByRole('button', { + screen.getByRole('button', { name: 'Drop tips', }) ).toBeDisabled() diff --git a/app/src/organisms/Devices/PipetteCard/__tests__/PipetteSettingsSlideout.test.tsx b/app/src/organisms/Devices/PipetteCard/__tests__/PipetteSettingsSlideout.test.tsx index 393e1aed586..7a846abfa87 100644 --- a/app/src/organisms/Devices/PipetteCard/__tests__/PipetteSettingsSlideout.test.tsx +++ b/app/src/organisms/Devices/PipetteCard/__tests__/PipetteSettingsSlideout.test.tsx @@ -1,7 +1,6 @@ import * as React from 'react' import { resetAllWhenMocks, when } from 'jest-when' -import { waitFor } from '@testing-library/dom' -import { fireEvent } from '@testing-library/react' +import { fireEvent, waitFor } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { useHost, diff --git a/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunHeader.test.tsx b/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunHeader.test.tsx index f0d0534c583..ecfb90f1d74 100644 --- a/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunHeader.test.tsx +++ b/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunHeader.test.tsx @@ -869,7 +869,7 @@ describe('ProtocolRunHeader', () => { const [{ getByRole, getByText }] = render() const button = getByRole('button', { name: 'Start run' }) fireEvent.click(button) - waitFor(() => { + await waitFor(() => { getByText('Mock HeaterShakerIsRunningModal') }) }) @@ -950,7 +950,7 @@ describe('ProtocolRunHeader', () => { it('renders the devices page when robot is not viewable but protocol is loaded', async () => { mockUseIsRobotViewable.mockReturnValue(false) - waitFor(() => { + await waitFor(() => { expect(mockPush).toHaveBeenCalledWith('/devices') }) }) diff --git a/app/src/organisms/Devices/ProtocolRun/__tests__/SetupFlexPipetteCalibrationItem.test.tsx b/app/src/organisms/Devices/ProtocolRun/__tests__/SetupFlexPipetteCalibrationItem.test.tsx index a59e8622b74..e7f439e2f3b 100644 --- a/app/src/organisms/Devices/ProtocolRun/__tests__/SetupFlexPipetteCalibrationItem.test.tsx +++ b/app/src/organisms/Devices/ProtocolRun/__tests__/SetupFlexPipetteCalibrationItem.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { resetAllWhenMocks } from 'jest-when' import { MemoryRouter } from 'react-router-dom' -import { fireEvent } from '@testing-library/dom' +import { fireEvent } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { useInstrumentsQuery } from '@opentrons/react-api-client' diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/__tests__/RenameRobotSlideout.test.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/__tests__/RenameRobotSlideout.test.tsx index e1feec4533a..8895964a62e 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/__tests__/RenameRobotSlideout.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/__tests__/RenameRobotSlideout.test.tsx @@ -110,9 +110,13 @@ describe('RobotSettings RenameRobotSlideout', () => { await waitFor(() => { expect(input).toHaveValue('mockInput') - const renameButton = getByRole('button', { name: 'Rename robot' }) + }) + const renameButton = getByRole('button', { name: 'Rename robot' }) + await waitFor(() => { expect(renameButton).not.toBeDisabled() - fireEvent.click(renameButton) + }) + fireEvent.click(renameButton) + await waitFor(() => { expect(mockTrackEvent).toHaveBeenCalledWith({ name: ANALYTICS_RENAME_ROBOT, properties: { newRobotName: 'mockInput', previousRobotName: 'otie' }, @@ -131,6 +135,8 @@ describe('RobotSettings RenameRobotSlideout', () => { ) await waitFor(() => { expect(renameButton).toBeDisabled() + }) + await waitFor(() => { expect(error).toBeInTheDocument() }) }) @@ -148,6 +154,8 @@ describe('RobotSettings RenameRobotSlideout', () => { ) await waitFor(() => { expect(renameButton).toBeDisabled() + }) + await waitFor(() => { expect(error).toBeInTheDocument() }) }) @@ -165,6 +173,8 @@ describe('RobotSettings RenameRobotSlideout', () => { ) await waitFor(() => { expect(renameButton).toBeDisabled() + }) + await waitFor(() => { expect(error).toBeInTheDocument() }) }) @@ -182,6 +192,8 @@ describe('RobotSettings RenameRobotSlideout', () => { ) await waitFor(() => { expect(renameButton).toBeDisabled() + }) + await waitFor(() => { expect(error).toBeInTheDocument() }) }) @@ -199,6 +211,8 @@ describe('RobotSettings RenameRobotSlideout', () => { ) await waitFor(() => { expect(renameButton).toBeDisabled() + }) + await waitFor(() => { expect(error).toBeInTheDocument() }) }) @@ -215,6 +229,8 @@ describe('RobotSettings RenameRobotSlideout', () => { ) await waitFor(() => { expect(renameButton).toBeDisabled() + }) + await waitFor(() => { expect(error).toBeInTheDocument() }) }) diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/__tests__/OpenJupyterControl.test.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/__tests__/OpenJupyterControl.test.tsx index 64d7b5a1ddd..76310fc338d 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/__tests__/OpenJupyterControl.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/__tests__/OpenJupyterControl.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../../../i18n' import { @@ -36,24 +36,24 @@ describe('RobotSettings OpenJupyterControl', () => { }) it('should render title, description and button', () => { - const [{ getByText, getByRole }] = render() - getByText('Jupyter Notebook') - getByText( + render() + screen.getByText('Jupyter Notebook') + screen.getByText( 'Open the Jupyter Notebook running on this robot in the web browser. This is an experimental feature.' ) - getByText('Learn more about using Jupyter notebook') - getByText('Launch Jupyter Notebook') + screen.getByText('Learn more about using Jupyter notebook') + screen.getByText('Launch Jupyter Notebook') expect( - getByRole('link', { name: 'Launch Jupyter Notebook' }) + screen.getByRole('link', { name: 'Launch Jupyter Notebook' }) ).toBeInTheDocument() }) it('should render jupyter notebook link', () => { - const [{ getByText }] = render() - const link = getByText('Launch Jupyter Notebook') - expect(link.closest('a')).toHaveAttribute('href', mockLink) - expect(link.closest('a')).toHaveAttribute('target', '_blank') - expect(link.closest('a')).toHaveAttribute('rel', 'noopener noreferrer') + render() + const link = screen.getByRole('link', {name: 'Launch Jupyter Notebook'}) + expect(link).toHaveAttribute('href', mockLink) + expect(link).toHaveAttribute('target', '_blank') + expect(link).toHaveAttribute('rel', 'noopener noreferrer') }) it('should send and analytics event on link click', () => { diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/__tests__/Troubleshooting.test.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/__tests__/Troubleshooting.test.tsx index 700ae868ee7..f084f450714 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/__tests__/Troubleshooting.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/__tests__/Troubleshooting.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' -import { act, cleanup, waitFor } from '@testing-library/react' +import { act, waitFor } from '@testing-library/react' import { resetAllWhenMocks, when } from 'jest-when' import { renderWithProviders } from '@opentrons/components' @@ -55,7 +55,6 @@ describe('RobotSettings Troubleshooting', () => { afterEach(() => { jest.resetAllMocks() resetAllWhenMocks() - cleanup() }) it('should render title, description, and button', () => { const [{ getByText, getByRole, getByTestId }] = render() diff --git a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx index 55793ef48dc..30dbf146860 100644 --- a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { i18n } from '../../../../../i18n' -import { act, fireEvent } from '@testing-library/react' +import { act, fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { useCreateLiveCommandMutation } from '@opentrons/react-api-client' import { @@ -86,15 +86,13 @@ describe('DownloadUpdateModal', () => { it('renders robot update download errors', () => { mockGetRobotUpdateDownloadError.mockReturnValue('test download error') - - const [{ getByText }] = render(props) - getByText('test download error') + render(props) + screen.getByText('test download error') }) it('renders the robot name as a part of the header', () => { - const [{ getByText }] = render(props) - - expect(getByText('Updating testRobot')).toBeInTheDocument() + render(props) + expect(screen.getByText('Updating testRobot')).toBeInTheDocument() }) it('activates the Update animation when first rendered', () => { @@ -103,7 +101,6 @@ describe('DownloadUpdateModal', () => { commandType: 'setStatusBar', params: { animation: 'updating' }, } - expect(mockUseCreateLiveCommandMutation).toBeCalledWith() expect(mockCreateLiveCommand).toBeCalledWith({ command: updatingCommand, @@ -112,13 +109,12 @@ describe('DownloadUpdateModal', () => { }) it('renders the correct text when installing the robot update with no close button', () => { - const [{ queryByRole, getByText }] = render(props) - - expect(getByText('Installing update...')).toBeInTheDocument() + render(props) + expect(screen.getByText('Installing update...')).toBeInTheDocument() expect( - getByText("This could take up to 15 minutes. Don't turn off the robot.") + screen.getByText("This could take up to 15 minutes. Don't turn off the robot.") ).toBeInTheDocument() - expect(queryByRole('button')).not.toBeInTheDocument() + expect(screen.queryByRole('button')).not.toBeInTheDocument() }) it('renders the correct text when finalizing the robot update with no close button', () => { @@ -126,15 +122,15 @@ describe('DownloadUpdateModal', () => { updateStep: 'restart', progressPercent: 100, }) - const [{ queryByRole, getByText }] = render(props) + render(props) expect( - getByText('Install complete, robot restarting...') + screen.getByText('Install complete, robot restarting...') ).toBeInTheDocument() expect( - getByText("This could take up to 15 minutes. Don't turn off the robot.") + screen.getByText("This could take up to 15 minutes. Don't turn off the robot.") ).toBeInTheDocument() - expect(queryByRole('button')).not.toBeInTheDocument() + expect(screen.queryByRole('button')).not.toBeInTheDocument() }) it('renders a success modal and exit button upon finishing the update process', () => { @@ -142,11 +138,11 @@ describe('DownloadUpdateModal', () => { updateStep: 'finished', progressPercent: 100, }) - const [{ getByText }] = render(props) + render(props) - const exitButton = getByText('exit') + const exitButton = screen.getByText('exit') - expect(getByText('Robot software successfully updated')).toBeInTheDocument() + expect(screen.getByText('Robot software successfully updated')).toBeInTheDocument() expect(exitButton).toBeInTheDocument() expect(mockCreateLiveCommand).toBeCalledTimes(1) fireEvent.click(exitButton) @@ -166,10 +162,10 @@ describe('DownloadUpdateModal', () => { params: { animation: 'idle' }, } - const [{ getByText }] = render(props) - const exitButton = getByText('exit') + render(props) + const exitButton = screen.getByText('exit') - expect(getByText('test error')).toBeInTheDocument() + expect(screen.getByText('test error')).toBeInTheDocument() fireEvent.click(exitButton) expect(props.closeUpdateBuildroot).toHaveBeenCalled() @@ -182,13 +178,14 @@ describe('DownloadUpdateModal', () => { }) it('renders alternative text if update takes too long', () => { - const [{ findByText }] = render(props) + jest.useFakeTimers() + render(props) act(() => { jest.advanceTimersByTime(TIME_BEFORE_ALLOWING_EXIT_MS) }) - findByText('Try restarting the update.') - findByText('testRobot restart is taking longer than expected to restart.') + screen.getByText(/Try restarting the update./i) + screen.getByText(/This update is taking longer than usual/i) }) }) diff --git a/app/src/organisms/Devices/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx index f89af6eb18e..e975d182225 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx @@ -1,7 +1,6 @@ import * as React from 'react' import { resetAllWhenMocks, when } from 'jest-when' -import { renderHook } from '@testing-library/react' -import { waitFor } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { createStore, Store } from 'redux' import { Provider } from 'react-redux' import { QueryClient, QueryClientProvider } from 'react-query' diff --git a/app/src/organisms/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx index 1d93851deb4..af9c794ea5f 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx @@ -3,8 +3,7 @@ import { createStore, Store } from 'redux' import { Provider } from 'react-redux' import { QueryClient, QueryClientProvider } from 'react-query' import { resetAllWhenMocks, when } from 'jest-when' -import { waitFor } from '@testing-library/react' -import { renderHook } from '@testing-library/react' +import { waitFor, renderHook } from '@testing-library/react' import { STORED_PROTOCOL_ANALYSIS } from '../__fixtures__/storedProtocolAnalysis' import { useTrackCreateProtocolRunEvent } from '../useTrackCreateProtocolRunEvent' diff --git a/app/src/organisms/Devices/hooks/__tests__/useTrackProtocolRunEvent.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useTrackProtocolRunEvent.test.tsx index 3e814da18fc..5e4c5a882ae 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useTrackProtocolRunEvent.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useTrackProtocolRunEvent.test.tsx @@ -3,8 +3,7 @@ import { createStore, Store } from 'redux' import { Provider } from 'react-redux' import { QueryClient, QueryClientProvider } from 'react-query' import { resetAllWhenMocks, when } from 'jest-when' -import { waitFor } from '@testing-library/react' -import { renderHook } from '@testing-library/react' +import { waitFor, renderHook } from '@testing-library/react' import { useTrackProtocolRunEvent } from '../useTrackProtocolRunEvent' import { useProtocolRunAnalyticsData } from '../useProtocolRunAnalyticsData' diff --git a/app/src/organisms/GripperWizardFlows/__tests__/ExitConfirmation.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/ExitConfirmation.test.tsx index 4cb09a954c0..1ab98b628f3 100644 --- a/app/src/organisms/GripperWizardFlows/__tests__/ExitConfirmation.test.tsx +++ b/app/src/organisms/GripperWizardFlows/__tests__/ExitConfirmation.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' @@ -6,66 +7,58 @@ import { ExitConfirmation } from '../ExitConfirmation' import { GRIPPER_FLOW_TYPES } from '../constants' describe('ExitConfirmation', () => { - let render: ( - props?: Partial> - ) => ReturnType - const mockBack = jest.fn() const mockExit = jest.fn() - beforeEach(() => { - render = (props = {}) => { - return renderWithProviders( - , - { i18nInstance: i18n } - ) - } - }) + const render = ( + props: Partial> = {} + ) => { + return renderWithProviders( + , + { i18nInstance: i18n } + ) + } afterEach(() => { jest.resetAllMocks() }) it('clicking confirm exit calls exit', () => { - const { getByRole } = render()[0] - getByRole('button', { name: 'Exit' }).click() + render() + const button = screen.getByRole('button', { name: 'Exit' }) + fireEvent.click(button) expect(mockExit).toHaveBeenCalled() }) it('clicking back calls back', () => { - const { getByRole } = render()[0] - getByRole('button', { name: 'Go back' }).click() + render() + const button = screen.getByRole('button', { name: 'Go back' }) + fireEvent.click(button) expect(mockBack).toHaveBeenCalled() }) it('renders correct text for attach flow', () => { - const { getByText } = render({ - flowType: GRIPPER_FLOW_TYPES.ATTACH, - })[0] - getByText('Attach Gripper progress will be lost') - getByText('Are you sure you want to exit before completing Attach Gripper?') + render({ flowType: GRIPPER_FLOW_TYPES.ATTACH, }) + screen.getByText('Attach Gripper progress will be lost') + screen.getByText('Are you sure you want to exit before completing Attach Gripper?') }) it('renders correct text for detach flow', () => { - const { getByText } = render({ - flowType: GRIPPER_FLOW_TYPES.DETACH, - })[0] - getByText('Detach Gripper progress will be lost') - getByText('Are you sure you want to exit before completing Detach Gripper?') + render({ flowType: GRIPPER_FLOW_TYPES.DETACH }) + screen.getByText('Detach Gripper progress will be lost') + screen.getByText('Are you sure you want to exit before completing Detach Gripper?') }) it('renders correct text for recalibrate flow', () => { - const { getByText } = render({ - flowType: GRIPPER_FLOW_TYPES.RECALIBRATE, - })[0] - getByText('Gripper Recalibration progress will be lost') - getByText( + render({ flowType: GRIPPER_FLOW_TYPES.RECALIBRATE }) + screen.getByText('Gripper Recalibration progress will be lost') + screen.getByText( 'Are you sure you want to exit before completing Gripper Recalibration?' ) }) diff --git a/app/src/organisms/GripperWizardFlows/__tests__/MountGripper.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/MountGripper.test.tsx index 1fbd96ac02a..39ff553a6ca 100644 --- a/app/src/organisms/GripperWizardFlows/__tests__/MountGripper.test.tsx +++ b/app/src/organisms/GripperWizardFlows/__tests__/MountGripper.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { useInstrumentsQuery } from '@opentrons/react-api-client' import { instrumentsResponseFixture } from '@opentrons/api-client' @@ -16,48 +17,49 @@ const mockUseInstrumentsQuery = useInstrumentsQuery as jest.MockedFunction< const mockRunId = 'fakeRunId' describe('MountGripper', () => { - let render: ( - props?: Partial> - ) => ReturnType let mockRefetch: jest.Mock let mockProceed: jest.Mock let mockChainRunCommands: jest.Mock let mockSetErrorMessage: jest.Mock + const render = ( + props: Partial> = {} + ) => { + return renderWithProviders( + null} + errorMessage={null} + setErrorMessage={mockSetErrorMessage} + {...props} + />, + { i18nInstance: i18n } + ) + } + beforeEach(() => { mockProceed = jest.fn() mockChainRunCommands = jest.fn() mockRefetch = jest.fn(() => Promise.resolve()) - render = (props = {}) => { - return renderWithProviders( - null} - errorMessage={null} - setErrorMessage={mockSetErrorMessage} - {...props} - />, - { i18nInstance: i18n } - ) - } }) afterEach(() => { jest.resetAllMocks() }) - it('clicking confirm calls proceed if attached gripper', async () => { + it('clicking confirm calls proceed if attached gripper', () => { mockUseInstrumentsQuery.mockReturnValue({ refetch: mockRefetch, data: instrumentsResponseFixture, } as any) - const { getByRole } = render()[0] - await getByRole('button', { name: 'Continue' }).click() + render() + const button = screen.getByRole('button', { name: 'Continue' }) + fireEvent.click(button) expect(mockProceed).toHaveBeenCalled() }) @@ -66,18 +68,20 @@ describe('MountGripper', () => { refetch: mockRefetch, data: null, } as any) - const { getByRole, getByText } = render()[0] - await getByRole('button', { name: 'Continue' }).click() + render() + const continueButton = screen.getByRole('button', { name: 'Continue' }) + fireEvent.click(continueButton) expect(mockProceed).not.toHaveBeenCalled() - await getByText('Unable to detect Gripper') - let tryAgainButton = getByRole('button', { name: 'Try again' }) - tryAgainButton.click() + screen.getByText('Unable to detect Gripper') + let tryAgainButton = screen.getByRole('button', { name: 'Try again' }) + fireEvent.click(tryAgainButton) expect(mockProceed).not.toHaveBeenCalled() - tryAgainButton = getByRole('button', { name: 'Try again' }) - tryAgainButton.click() - const goBackButton = await getByRole('button', { name: 'Go back' }) - goBackButton.click() - await getByRole('button', { name: 'Continue' }).click() + tryAgainButton = screen.getByRole('button', { name: 'Try again' }) + fireEvent.click(tryAgainButton) + const goBackButton = screen.getByRole('button', { name: 'Go back' }) + fireEvent.click(goBackButton) + const nextContinue = screen.getByRole('button', { name: 'Continue' }) + fireEvent.click(nextContinue) expect(mockProceed).not.toHaveBeenCalled() }) @@ -86,9 +90,9 @@ describe('MountGripper', () => { refetch: mockRefetch, data: null, } as any) - const { getByText } = render()[0] - getByText('Connect and secure Flex Gripper') - getByText( + render() + screen.getByText('Connect and secure Flex Gripper') + screen.getByText( 'Attach the gripper to the robot by aligning the connector and pressing to ensure a secure connection. Hold the gripper in place. Tighten the top gripper screw first, and the bottom screw second. Then test that the gripper is securely attached by gently pulling it side to side.' ) }) diff --git a/app/src/organisms/GripperWizardFlows/__tests__/MovePin.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/MovePin.test.tsx index e70e260449c..17056a7d6d7 100644 --- a/app/src/organisms/GripperWizardFlows/__tests__/MovePin.test.tsx +++ b/app/src/organisms/GripperWizardFlows/__tests__/MovePin.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { instrumentsResponseFixture } from '@opentrons/api-client' import { i18n } from '../../../i18n' @@ -14,9 +15,6 @@ import { import type { CommandData } from '@opentrons/api-client' describe('MovePin', () => { - let render: ( - props?: Partial> - ) => ReturnType let mockCreateRunCommand: jest.Mock let mockSetErrorMessage: jest.Mock @@ -26,33 +24,36 @@ describe('MovePin', () => { const mockSetFrontJawOffset = jest.fn() const mockRunId = 'fakeRunId' + + const render = ( + props: Partial> = {} + ) => { + return renderWithProviders( + , + { i18nInstance: i18n } + ) + } beforeEach(() => { mockCreateRunCommand = jest.fn(() => { return Promise.resolve({ data: {} } as CommandData) }) - render = (props = {}) => { - return renderWithProviders( - , - { i18nInstance: i18n } - ) - } }) afterEach(() => { @@ -60,8 +61,9 @@ describe('MovePin', () => { }) it('clicking confirm proceed calls proceed with correct callbacks', async () => { - const { getByRole } = render()[0] - await getByRole('button', { name: 'Begin calibration' }).click() + render() + const begin = screen.getByRole('button', { name: 'Begin calibration' }) + fireEvent.click(begin) await expect(mockCreateRunCommand).toHaveBeenNthCalledWith(1, { maintenanceRunId: 'fakeRunId', command: { @@ -98,44 +100,41 @@ describe('MovePin', () => { }) it('clicking go back calls back on moving pin from front to rear jaw', () => { - const { getByLabelText } = render({ - movement: MOVE_PIN_FROM_FRONT_JAW_TO_REAR_JAW, - })[0] - getByLabelText('back').click() + render({ movement: MOVE_PIN_FROM_FRONT_JAW_TO_REAR_JAW }) + const back = screen.getByLabelText('back') + fireEvent.click(back) expect(mockGoBack).toHaveBeenCalled() }) it('clicking go back calls back on removing pin from rear jaw', () => { - const { getByLabelText } = render({ - movement: REMOVE_PIN_FROM_REAR_JAW, - })[0] - getByLabelText('back').click() + render({ movement: REMOVE_PIN_FROM_REAR_JAW }) + const back = screen.getByLabelText('back') + fireEvent.click(back) expect(mockGoBack).toHaveBeenCalled() }) it('renders correct text for move pin to front jaw', () => { - const { getByRole, getByText } = render()[0] - getByText('Insert calibration pin in front jaw') - getByText( + render() + screen.getByText('Insert calibration pin in front jaw') + screen.getByText( 'Take the calibration pin from its storage location. Magnetically attach the pin to the hole on the underside of the front gripper jaw.' ) - getByRole('button', { name: 'Begin calibration' }) + screen.getByRole('button', { name: 'Begin calibration' }) }) it('renders correct loader for move pin to front jaw', () => { - const { getByText } = render({ isRobotMoving: true })[0] - getByText('Stand back, gripper is calibrating') + render({ isRobotMoving: true }) + screen.getByText('Stand back, gripper is calibrating') }) it('renders correct text for move pin from front jaw to rear with correct callbacks', async () => { - const { getByRole, getByText } = render({ - movement: MOVE_PIN_FROM_FRONT_JAW_TO_REAR_JAW, - })[0] - getByText('Insert calibration pin in rear jaw') - getByText( + render({ movement: MOVE_PIN_FROM_FRONT_JAW_TO_REAR_JAW }) + screen.getByText('Insert calibration pin in rear jaw') + screen.getByText( 'Remove the calibration pin from the front jaw and attach it to the rear jaw.' ) - await getByRole('button', { name: 'Continue calibration' }).click() + const continueButton = screen.getByRole('button', { name: 'Continue calibration' }) + fireEvent.click(continueButton) await expect(mockCreateRunCommand).toHaveBeenNthCalledWith(1, { maintenanceRunId: 'fakeRunId', @@ -176,39 +175,38 @@ describe('MovePin', () => { }) it('renders correct loader for move pin from front jaw to rear', () => { - const { getByText } = render({ + render({ isRobotMoving: true, movement: MOVE_PIN_FROM_FRONT_JAW_TO_REAR_JAW, - })[0] - getByText('Stand back, gripper is calibrating') + }) + screen.getByText('Stand back, gripper is calibrating') }) it('renders correct text for remove pin from rear jaw', () => { - const { getByRole, getByText } = render({ - movement: REMOVE_PIN_FROM_REAR_JAW, - })[0] - getByText('Remove calibration pin') - getByText( + render({ movement: REMOVE_PIN_FROM_REAR_JAW }) + screen.getByText('Remove calibration pin') + screen.getByText( 'Take the calibration pin from the rear gripper jaw and return it to its storage location.' ) - getByRole('button', { name: 'Complete calibration' }).click() + const complete = screen.getByRole('button', { name: 'Complete calibration' }) + fireEvent.click(complete) expect(mockProceed).toHaveBeenCalled() }) it('renders correct loader for remove pin from rear jaw', () => { - const { getByText } = render({ + render({ isRobotMoving: true, movement: REMOVE_PIN_FROM_REAR_JAW, - })[0] - getByText('Stand back, robot is in motion') + }) + screen.getByText('Stand back, robot is in motion') }) it('renders correct loader for early exiting', () => { - const { getByText } = render({ + render({ isRobotMoving: true, isExiting: true, movement: MOVE_PIN_FROM_FRONT_JAW_TO_REAR_JAW, - })[0] - getByText('Stand back, robot is in motion') + }) + screen.getByText('Stand back, robot is in motion') }) }) diff --git a/app/src/organisms/GripperWizardFlows/__tests__/Success.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/Success.test.tsx index a0cf645d060..e59a1379ce6 100644 --- a/app/src/organisms/GripperWizardFlows/__tests__/Success.test.tsx +++ b/app/src/organisms/GripperWizardFlows/__tests__/Success.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' @@ -12,66 +13,54 @@ import { } from '../constants' describe('Success', () => { - let render: ( - props?: Partial> - ) => ReturnType - const mockProceed = jest.fn() - - beforeEach(() => { - render = (props = {}) => { - return renderWithProviders( - , - { i18nInstance: i18n } - ) - } - }) + const render = ( + props: Partial> = {} + ) => { + return renderWithProviders( + , + { i18nInstance: i18n } + ) + } afterEach(() => { jest.resetAllMocks() }) it('clicking confirm proceed calls proceed', () => { - const { getByRole } = render()[0] - getByRole('button', { name: 'Exit' }).click() + render() + const exitButton = screen.getByRole('button', { name: 'Exit' }) + fireEvent.click(exitButton) expect(mockProceed).toHaveBeenCalled() }) it('renders correct text for attached and calibrated', () => { - const { getByRole, getByText } = render({ - successfulAction: SUCCESSFULLY_ATTACHED_AND_CALIBRATED, - })[0] - getByText('Flex Gripper successfully attached and calibrated') - getByRole('button', { name: 'Exit' }) + render({ successfulAction: SUCCESSFULLY_ATTACHED_AND_CALIBRATED }) + screen.getByText('Flex Gripper successfully attached and calibrated') + screen.getByRole('button', { name: 'Exit' }) }) it('renders correct text for calibrated', () => { - const { getByRole, getByText } = render({ - successfulAction: SUCCESSFULLY_CALIBRATED, - })[0] - getByText('Flex Gripper successfully calibrated') - getByRole('button', { name: 'Exit' }) + render({ successfulAction: SUCCESSFULLY_CALIBRATED }) + screen.getByText('Flex Gripper successfully calibrated') + screen.getByRole('button', { name: 'Exit' }) }) it('renders correct text for attached', () => { - const { getByRole, getByText } = render({ - successfulAction: SUCCESSFULLY_ATTACHED, - })[0] - getByText('Gripper successfully attached') - getByRole('button', { name: 'Calibrate Gripper' }) + render({ successfulAction: SUCCESSFULLY_ATTACHED }) + screen.getByText('Gripper successfully attached') + screen.getByRole('button', { name: 'Calibrate Gripper' }) }) it('renders correct text for detached', () => { - const { getByText, getByRole } = render({ - successfulAction: SUCCESSFULLY_DETACHED, - })[0] - getByText('Flex Gripper successfully detached') - getByRole('button', { name: 'Exit' }) + render({ successfulAction: SUCCESSFULLY_DETACHED }) + screen.getByText('Flex Gripper successfully detached') + screen.getByRole('button', { name: 'Exit' }) }) }) diff --git a/app/src/organisms/GripperWizardFlows/__tests__/UnmountGripper.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/UnmountGripper.test.tsx index af15977192e..44b31c367cc 100644 --- a/app/src/organisms/GripperWizardFlows/__tests__/UnmountGripper.test.tsx +++ b/app/src/organisms/GripperWizardFlows/__tests__/UnmountGripper.test.tsx @@ -6,6 +6,7 @@ import { i18n } from '../../../i18n' import { UnmountGripper } from '../UnmountGripper' import { GRIPPER_FLOW_TYPES } from '../constants' +import { fireEvent, screen, waitFor } from '@testing-library/react' jest.mock('@opentrons/react-api-client') @@ -15,38 +16,36 @@ const mockUseInstrumentsQuery = useInstrumentsQuery as jest.MockedFunction< const mockRunId = 'fakeRunId' describe('UnmountGripper', () => { - let render: ( - props?: Partial> - ) => ReturnType - let mockRefetch: jest.Mock let mockGoBack: jest.Mock let mockProceed: jest.Mock let mockChainRunCommands: jest.Mock let mockSetErrorMessage: jest.Mock + const render = ( + props: Partial> = {} + ) => { + return renderWithProviders( + , + { i18nInstance: i18n } + ) + } beforeEach(() => { mockGoBack = jest.fn() mockProceed = jest.fn() mockChainRunCommands = jest.fn(() => Promise.resolve()) mockRefetch = jest.fn(() => Promise.resolve()) - render = props => { - return renderWithProviders( - , - { i18nInstance: i18n } - ) - } }) afterEach(() => { @@ -58,12 +57,15 @@ describe('UnmountGripper', () => { refetch: mockRefetch, data: null, } as any) - const { getByRole } = render({ attachedGripper: null })[0] - await getByRole('button', { name: 'Continue' }).click() - await expect(mockChainRunCommands).toHaveBeenCalledWith( - [{ commandType: 'home', params: {} }], - true - ) + render({ attachedGripper: null }) + const continueButton = screen.getByRole('button', { name: 'Continue' }) + fireEvent.click(continueButton) + await waitFor(() => { + expect(mockChainRunCommands).toHaveBeenCalledWith( + [{ commandType: 'home', params: {} }], + true + ) + }) expect(mockProceed).toHaveBeenCalled() }) @@ -72,8 +74,9 @@ describe('UnmountGripper', () => { refetch: mockRefetch, data: instrumentsResponseFixture, } as any) - const { getByLabelText } = render()[0] - getByLabelText('back').click() + render() + const back = screen.getByLabelText('back') + fireEvent.click(back) expect(mockGoBack).toHaveBeenCalled() }) @@ -82,9 +85,9 @@ describe('UnmountGripper', () => { refetch: mockRefetch, data: instrumentsResponseFixture, } as any) - const { getByText } = render()[0] - getByText('Loosen screws and detach Flex Gripper') - getByText( + render() + screen.getByText('Loosen screws and detach Flex Gripper') + screen.getByText( 'Hold the gripper in place and loosen the top gripper screw first. After that move onto the bottom screw. (The screws are captive and will not come apart from the gripper.) Then carefully remove the gripper.' ) }) diff --git a/app/src/organisms/LabwareDetails/__tests__/LabwareDetails.test.tsx b/app/src/organisms/LabwareDetails/__tests__/LabwareDetails.test.tsx index 6f018733665..493f4c09d91 100644 --- a/app/src/organisms/LabwareDetails/__tests__/LabwareDetails.test.tsx +++ b/app/src/organisms/LabwareDetails/__tests__/LabwareDetails.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' @@ -98,26 +98,26 @@ describe('LabwareDetails', () => { it('should no render Mock Well Dimensions, if a labware does not have groupMetaData', () => { props.labware.definition.groups = [] - const [{ queryByText }] = render(props) - expect(queryByText('Mock WellDimensions')).not.toBeInTheDocument() + render(props) + expect(screen.queryByText('Mock WellDimensions')).not.toBeInTheDocument() }) it('should render correct info for custom labware', () => { props.labware.definition.namespace = 'custom' - const [{ queryByText }] = render(props) - expect(queryByText('Opentrons Definition')).not.toBeInTheDocument() + render(props) + expect(screen.queryByText('Opentrons Definition')).not.toBeInTheDocument() }) it('when clicking copy icon, should show tooltip as feedback', () => { - const [{ getByTestId, findByText }] = render(props) - const button = getByTestId('labwareDetails_slideout_close_button') + render(props) + const button = screen.getByTestId('labwareDetails_slideout_close_button') fireEvent.click(button) - findByText('Copied') + screen.getByText('Copied') }) it('should close the slideout when clicking the close button', () => { - const [{ getByTestId }] = render(props) - const closeButton = getByTestId('labwareDetails_slideout_close_button') + render(props) + const closeButton = screen.getByTestId('labwareDetails_slideout_close_button') fireEvent.click(closeButton) expect(props.onClose).toHaveBeenCalled() }) diff --git a/app/src/organisms/LabwarePositionCheck/__tests__/CheckItem.test.tsx b/app/src/organisms/LabwarePositionCheck/__tests__/CheckItem.test.tsx index 97c79b3bf6f..d30ef8b1d3e 100644 --- a/app/src/organisms/LabwarePositionCheck/__tests__/CheckItem.test.tsx +++ b/app/src/organisms/LabwarePositionCheck/__tests__/CheckItem.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { screen } from '@testing-library/react' import { resetAllWhenMocks, when } from 'jest-when' import { renderWithProviders, nestedTextMatcher } from '@opentrons/components' import { @@ -11,7 +12,6 @@ import { i18n } from '../../../i18n' import { CheckItem } from '../CheckItem' import { SECTIONS } from '../constants' import { mockCompletedAnalysis, mockExistingOffsets } from '../__fixtures__' -import type { MatcherFunction } from '@testing-library/react' jest.mock('../../../redux/config') jest.mock('../../Devices/hooks') @@ -19,17 +19,6 @@ jest.mock('../../Devices/hooks') const mockStartPosition = { x: 10, y: 20, z: 30 } const mockEndPosition = { x: 9, y: 19, z: 29 } -const matchTextWithSpans: (text: string) => MatcherFunction = ( - text: string -) => (_content, node) => { - const nodeHasText = node?.textContent === text - const childrenDontHaveText = Array.from(node?.children ?? []).every( - child => child?.textContent !== text - ) - - return nodeHasText && childrenDontHaveText -} - const render = (props: React.ComponentProps) => { return renderWithProviders(, { i18nInstance: i18n, @@ -68,14 +57,15 @@ describe('CheckItem', () => { resetAllWhenMocks() }) it('renders correct copy when preparing space with tip rack', () => { - const { getByText, getByRole } = render(props) - getByRole('heading', { name: 'Prepare tip rack in Slot D1' }) - getByText('Clear all deck slots of labware, leaving modules in place') - getByText( - matchTextWithSpans('Place a full Mock TipRack Definition into Slot D1') - ) - getByRole('link', { name: 'Need help?' }) - getByRole('button', { name: 'Confirm placement' }) + render(props) + screen.getByRole('heading', { name: 'Prepare tip rack in Slot D1' }) + screen.getByText('Clear all deck slots of labware, leaving modules in place') + screen.getAllByText(/Place/i) + screen.getAllByText(/a full Mock TipRack Definition/i) + screen.getAllByText(/into/i) + screen.getAllByText(/Slot D1/i) + screen.getByRole('link', { name: 'Need help?' }) + screen.getByRole('button', { name: 'Confirm placement' }) }) it('renders correct copy when preparing space with non tip rack labware', () => { props = { @@ -84,14 +74,15 @@ describe('CheckItem', () => { location: { slotName: 'D2' }, } - const { getByText, getByRole } = render(props) - getByRole('heading', { name: 'Prepare labware in Slot D2' }) - getByText('Clear all deck slots of labware, leaving modules in place') - getByText( - matchTextWithSpans('Place a Mock Labware Definition into Slot D2') - ) - getByRole('link', { name: 'Need help?' }) - getByRole('button', { name: 'Confirm placement' }) + render(props) + screen.getByRole('heading', { name: 'Prepare labware in Slot D2' }) + screen.getByText('Clear all deck slots of labware, leaving modules in place') + screen.getAllByText(/Place a/i) + screen.getAllByText(/Mock Labware Definition/i) + screen.getAllByText(/into/i) + screen.getAllByText(/Slot D2/i) + screen.getByRole('link', { name: 'Need help?' }) + screen.getByRole('button', { name: 'Confirm placement' }) }) it('executes correct chained commands when confirm placement CTA is clicked then go back', async () => { when(mockChainRunCommands) diff --git a/app/src/organisms/LabwarePositionCheck/__tests__/PickUpTip.test.tsx b/app/src/organisms/LabwarePositionCheck/__tests__/PickUpTip.test.tsx index e253ea86ea3..58f4fd6b379 100644 --- a/app/src/organisms/LabwarePositionCheck/__tests__/PickUpTip.test.tsx +++ b/app/src/organisms/LabwarePositionCheck/__tests__/PickUpTip.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen, waitFor } from '@testing-library/react' import { resetAllWhenMocks, when } from 'jest-when' import { nestedTextMatcher, renderWithProviders } from '@opentrons/components' import { FLEX_ROBOT_TYPE, HEATERSHAKER_MODULE_V1 } from '@opentrons/shared-data' @@ -9,7 +10,6 @@ import { PickUpTip } from '../PickUpTip' import { SECTIONS } from '../constants' import { mockCompletedAnalysis, mockExistingOffsets } from '../__fixtures__' import type { CommandData } from '@opentrons/api-client' -import type { MatcherFunction } from '@testing-library/react' jest.mock('../../Devices/hooks') jest.mock('../../../redux/config') @@ -23,17 +23,6 @@ const mockGetIsOnDevice = getIsOnDevice as jest.MockedFunction< typeof getIsOnDevice > -const matchTextWithSpans: (text: string) => MatcherFunction = ( - text: string -) => (_content, node) => { - const nodeHasText = node?.textContent === text - const childrenDontHaveText = Array.from(node?.children ?? []).every( - child => child?.textContent !== text - ) - - return nodeHasText && childrenDontHaveText -} - const render = (props: React.ComponentProps) => { return renderWithProviders(, { i18nInstance: i18n, @@ -74,46 +63,42 @@ describe('PickUpTip', () => { }) it('renders correct copy when preparing space on desktop if protocol has modules', () => { props.protocolHasModules = true - const { getByText, getByRole } = render(props) - getByRole('heading', { name: 'Prepare tip rack in Slot D1' }) - getByText('Place modules on deck') - getByText('Clear all deck slots of labware, leaving modules in place') - getByText( - matchTextWithSpans('Place a full Mock TipRack Definition into Slot D1') - ) - getByRole('button', { name: 'Confirm placement' }) + render(props) + screen.getByRole('heading', { name: 'Prepare tip rack in Slot D1' }) + screen.getByText('Place modules on deck') + screen.getByText('Clear all deck slots of labware, leaving modules in place') + screen.getByText('a full Mock TipRack Definition') + screen.getByText('Slot D1') + screen.getByRole('button', { name: 'Confirm placement' }) }) it('renders correct copy when preparing space on touchscreen if protocol has modules', () => { mockGetIsOnDevice.mockReturnValue(true) props.protocolHasModules = true - const { getByText, getByRole } = render(props) - getByRole('heading', { name: 'Prepare tip rack in Slot D1' }) - getByText('Place modules on deck') - getByText('Clear all deck slots of labware') - getByText( - matchTextWithSpans('Place a full Mock TipRack Definition into Slot D1') - ) + render(props) + screen.getByRole('heading', { name: 'Prepare tip rack in Slot D1' }) + screen.getByText('Place modules on deck') + screen.getByText('Clear all deck slots of labware') + screen.getByText('a full Mock TipRack Definition') + screen.getByText('Slot D1') }) it('renders correct copy when preparing space on desktop if protocol has no modules', () => { - const { getByText, getByRole } = render(props) - getByRole('heading', { name: 'Prepare tip rack in Slot D1' }) - getByText('Clear all deck slots of labware, leaving modules in place') - getByText( - matchTextWithSpans('Place a full Mock TipRack Definition into Slot D1') - ) - getByRole('button', { name: 'Confirm placement' }) + render(props) + screen.getByRole('heading', { name: 'Prepare tip rack in Slot D1' }) + screen.getByText('Clear all deck slots of labware, leaving modules in place') + screen.getByText('a full Mock TipRack Definition') + screen.getByText('Slot D1') + screen.getByRole('button', { name: 'Confirm placement' }) }) it('renders correct copy when preparing space on touchscreen if protocol has no modules', () => { mockGetIsOnDevice.mockReturnValue(true) - const { getByText, getByRole } = render(props) - getByRole('heading', { name: 'Prepare tip rack in Slot D1' }) - getByText('Clear all deck slots of labware') - getByText( - matchTextWithSpans('Place a full Mock TipRack Definition into Slot D1') - ) + render(props) + screen.getByRole('heading', { name: 'Prepare tip rack in Slot D1' }) + screen.getByText('Clear all deck slots of labware') + screen.getByText('a full Mock TipRack Definition') + screen.getByText('Slot D1') }) it('renders correct copy when confirming position on desktop', () => { - const { getByText, getByRole } = render({ + render({ ...props, workingOffsets: [ { @@ -124,15 +109,15 @@ describe('PickUpTip', () => { }, ], }) - getByRole('heading', { name: 'Pick up tip from tip rack in Slot D1' }) - getByText( + screen.getByRole('heading', { name: 'Pick up tip from tip rack in Slot D1' }) + screen.getByText( "Ensure that the pipette nozzle furthest from you is centered above and level with the top of the tip in the A1 position. If it isn't, use the controls below or your keyboard to jog the pipette until it is properly aligned." ) - getByRole('link', { name: 'Need help?' }) + screen.getByRole('link', { name: 'Need help?' }) }) it('renders correct copy when confirming position on touchscreen', () => { mockGetIsOnDevice.mockReturnValue(true) - const { getByText, getByRole } = render({ + render({ ...props, workingOffsets: [ { @@ -143,23 +128,24 @@ describe('PickUpTip', () => { }, ], }) - getByRole('heading', { name: 'Pick up tip from tip rack in Slot D1' }) - getByText( + screen.getByRole('heading', { name: 'Pick up tip from tip rack in Slot D1' }) + screen.getByText( nestedTextMatcher( "Ensure that the pipette nozzle furthest from you is centered above and level with the top of the tip in the A1 position. If it isn't, tap Move pipette and then jog the pipette until it is properly aligned." ) ) }) - it('executes correct chained commands when confirm placement CTA is clicked', async () => { + it('executes correct chained commands when confirm placement CTA is clicked', () => { when(mockChainRunCommands) .calledWith( [{ commandType: 'savePosition', params: { pipetteId: 'pipetteId1' } }], false ) .mockImplementation(() => Promise.resolve([{} as CommandData])) - const { getByRole } = render(props) - await getByRole('button', { name: 'Confirm placement' }).click() - await expect(props.chainRunCommands).toHaveBeenNthCalledWith( + render(props) + const confirm = screen.getByRole('button', { name: 'Confirm placement' }) + fireEvent.click(confirm) + expect(props.chainRunCommands).toHaveBeenNthCalledWith( 1, [ { @@ -250,7 +236,7 @@ describe('PickUpTip', () => { ]) ) - const { getByRole } = render({ + render({ ...props, workingOffsets: [ { @@ -262,72 +248,87 @@ describe('PickUpTip', () => { ], }) - getByRole('button', { name: 'forward' }).click() + const forward = screen.getByRole('button', { name: 'forward' }) + fireEvent.click(forward) expect(props.handleJog).toHaveBeenCalled() - await getByRole('button', { name: 'Confirm position' }).click() - await expect(props.chainRunCommands).toHaveBeenNthCalledWith( - 1, - [ - { - commandType: 'savePosition', - params: { pipetteId: 'pipetteId1' }, - }, - ], - false - ) - await expect(props.registerPosition).toHaveBeenNthCalledWith(1, { - type: 'finalPosition', - labwareId: 'labwareId1', - location: { slotName: 'D1' }, - position: { x: 10, y: 20, z: 30 }, + const confirm = screen.getByRole('button', { name: 'Confirm position' }) + fireEvent.click(confirm) + await waitFor(() => { + expect(props.chainRunCommands).toHaveBeenNthCalledWith( + 1, + [ + { + commandType: 'savePosition', + params: { pipetteId: 'pipetteId1' }, + }, + ], + false + ) }) - await expect(props.registerPosition).toHaveBeenNthCalledWith(2, { - type: 'tipPickUpOffset', - offset: { x: 9, y: 18, z: 27 }, + await waitFor(() => { + expect(props.registerPosition).toHaveBeenNthCalledWith(1, { + type: 'finalPosition', + labwareId: 'labwareId1', + location: { slotName: 'D1' }, + position: { x: 10, y: 20, z: 30 }, + }) }) - await expect(props.chainRunCommands).toHaveBeenNthCalledWith( - 2, - [ - { - commandType: 'pickUpTip', - params: { - pipetteId: 'pipetteId1', - labwareId: 'labwareId1', - wellName: 'A1', - wellLocation: { origin: 'top', offset: { x: 9, y: 18, z: 27 } }, + await waitFor(() => { + expect(props.registerPosition).toHaveBeenNthCalledWith(2, { + type: 'tipPickUpOffset', + offset: { x: 9, y: 18, z: 27 }, + }) + }) + await waitFor(() => { + expect(props.chainRunCommands).toHaveBeenNthCalledWith( + 2, + [ + { + commandType: 'pickUpTip', + params: { + pipetteId: 'pipetteId1', + labwareId: 'labwareId1', + wellName: 'A1', + wellLocation: { origin: 'top', offset: { x: 9, y: 18, z: 27 } }, + }, }, - }, - ], - false - ) - getByRole('heading', { name: 'Did pipette pick up tip successfully?' }) - getByRole('button', { name: 'Try again' }).click() - await expect(props.chainRunCommands).toHaveBeenNthCalledWith( - 3, - [ - { - commandType: 'dropTip', - params: { - pipetteId: 'pipetteId1', - labwareId: 'labwareId1', - wellName: 'A1', + ], + false + ) + screen.getByRole('heading', { name: 'Did pipette pick up tip successfully?' }) + }) + const tryAgain = screen.getByRole('button', { name: 'Try again' }) + fireEvent.click(tryAgain) + await waitFor(() => { + expect(props.chainRunCommands).toHaveBeenNthCalledWith( + 3, + [ + { + commandType: 'dropTip', + params: { + pipetteId: 'pipetteId1', + labwareId: 'labwareId1', + wellName: 'A1', + }, }, - }, - { - commandType: 'moveToWell', - params: { - pipetteId: 'pipetteId1', - labwareId: 'labwareId1', - wellName: 'A1', - wellLocation: { origin: 'top' }, + { + commandType: 'moveToWell', + params: { + pipetteId: 'pipetteId1', + labwareId: 'labwareId1', + wellName: 'A1', + wellLocation: { origin: 'top' }, + }, }, - }, - ], - false - ) - await expect(props.registerPosition).toHaveBeenNthCalledWith(3, { - type: 'tipPickUpOffset', - offset: null, + ], + false + ) + }) + await waitFor(() => { + expect(props.registerPosition).toHaveBeenNthCalledWith(3, { + type: 'tipPickUpOffset', + offset: null, + }) }) }) it('proceeds after confirm position and pick up tip', async () => { @@ -388,7 +389,7 @@ describe('PickUpTip', () => { {}, ]) ) - const { getByRole } = render({ + render({ ...props, workingOffsets: [ { @@ -400,78 +401,91 @@ describe('PickUpTip', () => { ], }) - await getByRole('button', { name: 'Confirm position' }).click() - await expect(props.chainRunCommands).toHaveBeenNthCalledWith( - 1, - [ - { - commandType: 'savePosition', - params: { pipetteId: 'pipetteId1' }, - }, - ], - false - ) - await expect(props.registerPosition).toHaveBeenNthCalledWith(1, { - type: 'finalPosition', - labwareId: 'labwareId1', - location: { slotName: 'D1' }, - position: { x: 10, y: 20, z: 30 }, + const confirm = screen.getByRole('button', { name: 'Confirm position' }) + fireEvent.click(confirm) + await waitFor(() => { + expect(props.chainRunCommands).toHaveBeenNthCalledWith( + 1, + [ + { + commandType: 'savePosition', + params: { pipetteId: 'pipetteId1' }, + }, + ], + false + ) }) - await expect(props.registerPosition).toHaveBeenNthCalledWith(2, { - type: 'tipPickUpOffset', - offset: { x: 9, y: 18, z: 27 }, + await waitFor(() => { + expect(props.registerPosition).toHaveBeenNthCalledWith(1, { + type: 'finalPosition', + labwareId: 'labwareId1', + location: { slotName: 'D1' }, + position: { x: 10, y: 20, z: 30 }, + }) }) - await expect(props.chainRunCommands).toHaveBeenNthCalledWith( - 2, - [ - { - commandType: 'pickUpTip', - params: { - pipetteId: 'pipetteId1', - labwareId: 'labwareId1', - wellName: 'A1', - wellLocation: { origin: 'top', offset: { x: 9, y: 18, z: 27 } }, + await waitFor(() => { + expect(props.registerPosition).toHaveBeenNthCalledWith(2, { + type: 'tipPickUpOffset', + offset: { x: 9, y: 18, z: 27 }, + }) + }) + await waitFor(() => { + expect(props.chainRunCommands).toHaveBeenNthCalledWith( + 2, + [ + { + commandType: 'pickUpTip', + params: { + pipetteId: 'pipetteId1', + labwareId: 'labwareId1', + wellName: 'A1', + wellLocation: { origin: 'top', offset: { x: 9, y: 18, z: 27 } }, + }, }, - }, - ], - false - ) - getByRole('heading', { name: 'Did pipette pick up tip successfully?' }) - await getByRole('button', { name: 'Yes' }).click() - - await expect(props.chainRunCommands).toHaveBeenNthCalledWith( - 3, - [ - { - commandType: 'retractAxis' as const, - params: { - axis: 'leftZ', + ], + false + ) + screen.getByRole('heading', { name: 'Did pipette pick up tip successfully?' }) + }) + const yesButton = screen.getByRole('button', { name: 'Yes' }) + fireEvent.click(yesButton) + await waitFor(() => { + expect(props.chainRunCommands).toHaveBeenNthCalledWith( + 3, + [ + { + commandType: 'retractAxis' as const, + params: { + axis: 'leftZ', + }, }, - }, - { - commandType: 'retractAxis' as const, - params: { - axis: 'x', + { + commandType: 'retractAxis' as const, + params: { + axis: 'x', + }, }, - }, - { - commandType: 'retractAxis' as const, - params: { - axis: 'y', + { + commandType: 'retractAxis' as const, + params: { + axis: 'y', + }, }, - }, - { - commandType: 'moveLabware', - params: { - labwareId: 'labwareId1', - newLocation: 'offDeck', - strategy: 'manualMoveWithoutPause', + { + commandType: 'moveLabware', + params: { + labwareId: 'labwareId1', + newLocation: 'offDeck', + strategy: 'manualMoveWithoutPause', + }, }, - }, - ], - false - ) - await expect(props.proceed).toHaveBeenCalled() + ], + false + ) + }) + await waitFor(() => { + expect(props.proceed).toHaveBeenCalled() + }) }) it('executes heater shaker closed latch commands for every hs module before other commands', () => { props = { @@ -494,8 +508,9 @@ describe('PickUpTip', () => { ], }, } - const { getByRole } = render(props) - getByRole('button', { name: 'Confirm placement' }).click() + render(props) + const confirm = screen.getByRole('button', { name: 'Confirm placement' }) + fireEvent.click(confirm) expect(props.chainRunCommands).toHaveBeenNthCalledWith( 1, [ diff --git a/app/src/organisms/LabwarePositionCheck/__tests__/ReturnTip.test.tsx b/app/src/organisms/LabwarePositionCheck/__tests__/ReturnTip.test.tsx index 110278841ad..f03618bfe95 100644 --- a/app/src/organisms/LabwarePositionCheck/__tests__/ReturnTip.test.tsx +++ b/app/src/organisms/LabwarePositionCheck/__tests__/ReturnTip.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react' -import type { MatcherFunction } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { FLEX_ROBOT_TYPE, HEATERSHAKER_MODULE_V1 } from '@opentrons/shared-data' import { i18n } from '../../../i18n' @@ -19,17 +18,6 @@ const mockGetIsOnDevice = getIsOnDevice as jest.MockedFunction< typeof getIsOnDevice > -const matchTextWithSpans: (text: string) => MatcherFunction = ( - text: string -) => (_content, node) => { - const nodeHasText = node?.textContent === text - const childrenDontHaveText = Array.from(node?.children ?? []).every( - child => child?.textContent !== text - ) - - return nodeHasText && childrenDontHaveText -} - const render = (props: React.ComponentProps) => { return renderWithProviders(, { i18nInstance: i18n, @@ -66,11 +54,10 @@ describe('ReturnTip', () => { const { getByText, getByRole } = render(props) getByRole('heading', { name: 'Return tip rack to Slot D1' }) getByText('Clear all deck slots of labware, leaving modules in place') - getByText( - matchTextWithSpans( - 'Place the Mock TipRack Definition that you used before back into Slot D1. The pipette will return tips to their original location in the rack.' - ) - ) + getByText(/Mock TipRack Definition/i) + getByText(/that you used before back into/i) + getByText('Slot D1') + getByText(/The pipette will return tips to their original location in the rack./i) getByRole('link', { name: 'Need help?' }) }) it('renders correct copy on device', () => { @@ -78,11 +65,10 @@ describe('ReturnTip', () => { const { getByText, getByRole } = render(props) getByRole('heading', { name: 'Return tip rack to Slot D1' }) getByText('Clear all deck slots of labware') - getByText( - matchTextWithSpans( - 'Place the Mock TipRack Definition that you used before back into Slot D1. The pipette will return tips to their original location in the rack.' - ) - ) + getByText(/Mock TipRack Definition/i) + getByText(/that you used before back into/i) + getByText('Slot D1') + getByText(/The pipette will return tips to their original location in the rack./i) }) it('executes correct chained commands when CTA is clicked', async () => { const { getByRole } = render(props) diff --git a/app/src/organisms/ModuleCard/__tests__/ErrorInfo.test.tsx b/app/src/organisms/ModuleCard/__tests__/ErrorInfo.test.tsx index dd89cfacb6c..bbc98a96098 100644 --- a/app/src/organisms/ModuleCard/__tests__/ErrorInfo.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/ErrorInfo.test.tsx @@ -85,42 +85,42 @@ describe('ErrorInfo', () => { }) it('returns null if attachedModule is not a TC or HS', () => { - const { container } = render(props) - expect(container.firstChild).toBeNull() + render(props) + expect(screen.queryByText('Module error')).toBeNull() }) it('returns null if attachedModule is a HS is not in error', () => { props = { attachedModule: mockHeaterShaker, } - const { container } = render(props) - expect(container.firstChild).toBeNull() + render(props) + expect(screen.queryByText('Module error')).toBeNull() }) it('returns null if attachedModule is a TC is not in error', () => { props = { attachedModule: mockThermocycler, } - const { container } = render(props) - expect(container.firstChild).toBeNull() + render(props) + expect(screen.queryByText('Module error')).toBeNull() }) it('returns correct info for a HS in error', () => { props = { attachedModule: mockErrorHeaterShaker, } - const { getByText, getByRole, getByLabelText } = render(props) - getByText('Module error') - const btn = getByLabelText('view_error_details') - getByText('View') - getByText('error details') + render(props) + screen.getByText('Module error') + const btn = screen.getByLabelText('view_error_details') + screen.getByText('View') + screen.getByText('error details') fireEvent.click(btn) - getByText('Heater-Shaker Module GEN1 error') - getByText('errorDetails') - getByText( + screen.getByText('Heater-Shaker Module GEN1 error') + screen.getByText('errorDetails') + screen.getByText( 'Try powering the module off and on again. If the error persists, contact Opentrons Support.' ) - const close = getByRole('button', { name: 'close' }) + const close = screen.getByRole('button', { name: 'close' }) fireEvent.click(close) expect(screen.queryByText('Heater-Shaker Module GEN1 error')).toBeNull() }) @@ -129,17 +129,17 @@ describe('ErrorInfo', () => { props = { attachedModule: mockErrorThermocycler, } - const { getByText, getByRole, getByLabelText } = render(props) - getByText('Module error') - const btn = getByLabelText('view_error_details') - getByText('View') - getByText('error details') + render(props) + screen.getByText('Module error') + const btn = screen.getByLabelText('view_error_details') + screen.getByText('View') + screen.getByText('error details') fireEvent.click(btn) - getByText('Thermocycler Module GEN1 error') - getByText( + screen.getByText('Thermocycler Module GEN1 error') + screen.getByText( 'Try powering the module off and on again. If the error persists, contact Opentrons Support.' ) - const close = getByRole('button', { name: 'close' }) + const close = screen.getByRole('button', { name: 'close' }) fireEvent.click(close) expect(screen.queryByText('Thermocycler Module GEN1 error')).toBeNull() }) diff --git a/app/src/organisms/ModuleCard/__tests__/TestShakeSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/TestShakeSlideout.test.tsx index b3a8de07e6a..aaca266bce9 100644 --- a/app/src/organisms/ModuleCard/__tests__/TestShakeSlideout.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/TestShakeSlideout.test.tsx @@ -224,6 +224,8 @@ describe('TestShakeSlideout', () => { }, }, }) + }) + await waitFor(() => { expect(mockCreateLiveCommand).toHaveBeenCalledWith({ command: { commandType: 'heaterShaker/setAndWaitForShakeSpeed', diff --git a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx index 9086a684aaa..12ef48c2d3f 100644 --- a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx +++ b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx @@ -289,6 +289,7 @@ function PipetteMountOption(props: PipetteMountOptionProps): JSX.Element { {children} diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx index a2a6d3d01e5..474c5889a84 100644 --- a/app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx +++ b/app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx @@ -105,6 +105,8 @@ describe('AttachProbe', () => { ], false ) + }) + await waitFor(() => { expect(props.proceed).toHaveBeenCalled() }) @@ -221,6 +223,8 @@ describe('AttachProbe', () => { ], false ) + }) + await waitFor(() => { expect(props.proceed).toHaveBeenCalled() }) getByLabelText('back').click() diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx index ae1048b31c5..378c8955a41 100644 --- a/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx +++ b/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx @@ -4,7 +4,7 @@ import { NINETY_SIX_CHANNEL, SINGLE_MOUNT_PIPETTES, } from '@opentrons/shared-data' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { COLORS, renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' import { mockAttachedPipetteInformation } from '../../../redux/pipettes/__fixtures__' @@ -53,21 +53,21 @@ describe('ChoosePipette', () => { jest.resetAllMocks() }) it('returns the correct information, buttons work as expected', () => { - const { getByText, getByAltText, getByRole } = render(props) - getByText('Attach Left Pipette') - getByText('Choose a pipette to attach') - getByText('1- or 8-Channel pipette') - getByText('96-Channel pipette') - getByAltText('1- or 8-Channel pipette') - getByAltText('96-Channel pipette') - const singleMountPipettes = getByText('1- or 8-Channel pipette') - const ninetySixPipette = getByText('96-Channel pipette') + render(props) + screen.getByText('Attach Left Pipette') + screen.getByText('Choose a pipette to attach') + screen.getByText('1- or 8-Channel pipette') + screen.getByText('96-Channel pipette') + screen.getByAltText('1- or 8-Channel pipette') + screen.getByAltText('96-Channel pipette') + const singleMountPipettes = screen.getByRole('radio', {name: '1- or 8-Channel pipette 1- or 8-Channel pipette'}) + const ninetySixPipette = screen.getByRole('radio', {name: '96-Channel pipette 96-Channel pipette'}) // Single and 8-Channel pipettes are selected first by default - expect(singleMountPipettes.parentElement).toHaveStyle( + expect(singleMountPipettes).toHaveStyle( `background-color: ${COLORS.lightBlue}` ) - expect(ninetySixPipette.parentElement).toHaveStyle( + expect(ninetySixPipette).toHaveStyle( `background-color: ${COLORS.white}` ) @@ -79,17 +79,17 @@ describe('ChoosePipette', () => { fireEvent.click(singleMountPipettes) expect(props.setSelectedPipette).toHaveBeenCalled() - const proceedBtn = getByRole('button', { name: 'Continue' }) + const proceedBtn = screen.getByRole('button', { name: 'Continue' }) fireEvent.click(proceedBtn) expect(props.proceed).toHaveBeenCalled() }) it('returns the correct information, buttons work as expected for on device display', () => { mockGetIsOnDevice.mockReturnValue(true) - const { getByText, getByLabelText } = render(props) - getByText('Attach Left Pipette') - getByText('Choose a pipette to attach') - const singleMountPipettes = getByText('1- or 8-Channel pipette') - const ninetySixPipette = getByText('96-Channel pipette') + render(props) + screen.getByText('Attach Left Pipette') + screen.getByText('Choose a pipette to attach') + const singleMountPipettes = screen.getByText('1- or 8-Channel pipette') + const ninetySixPipette = screen.getByText('96-Channel pipette') // Selecting 96-Channel called setSelectedPipette prop fireEvent.click(ninetySixPipette) @@ -99,43 +99,43 @@ describe('ChoosePipette', () => { fireEvent.click(singleMountPipettes) expect(props.setSelectedPipette).toHaveBeenCalled() - const proceedBtn = getByLabelText('SmallButton_primary') + const proceedBtn = screen.getByLabelText('SmallButton_primary') fireEvent.click(proceedBtn) expect(props.proceed).toHaveBeenCalled() }) it('renders exit button and clicking on it renders the exit modal, clicking on back button works', () => { - const { getByText, getByLabelText } = render(props) - const exit = getByLabelText('Exit') + render(props) + const exit = screen.getByLabelText('Exit') fireEvent.click(exit) - getByText('Attaching Pipette progress will be lost') - getByText( + screen.getByText('Attaching Pipette progress will be lost') + screen.getByText( 'Are you sure you want to exit before completing Attaching Pipette?' ) - const goBack = getByText('Go back') + const goBack = screen.getByText('Go back') fireEvent.click(goBack) - getByText('Choose a pipette to attach') + screen.getByText('Choose a pipette to attach') }) it('renders exit button and clicking on it renders the exit modal, clicking on exit button works', () => { - const { getByText, getByRole, getByLabelText } = render(props) - const exit = getByLabelText('Exit') + render(props) + const exit = screen.getByLabelText('Exit') fireEvent.click(exit) - getByText('Attaching Pipette progress will be lost') - getByText( + screen.getByText('Attaching Pipette progress will be lost') + screen.getByText( 'Are you sure you want to exit before completing Attaching Pipette?' ) - const exitButton = getByRole('button', { name: 'exit' }) + const exitButton = screen.getByRole('button', { name: 'exit' }) fireEvent.click(exitButton) expect(props.exit).toHaveBeenCalled() }) it('renders the 96 channel pipette option selected', () => { props = { ...props, selectedPipette: NINETY_SIX_CHANNEL } - const { getByText } = render(props) - const singleMountPipettes = getByText('1- or 8-Channel pipette') - const ninetySixPipette = getByText('96-Channel pipette') - expect(singleMountPipettes.parentElement).toHaveStyle( + render(props) + const singleMountPipettes = screen.getByRole('radio', {name: '1- or 8-Channel pipette 1- or 8-Channel pipette'}) + const ninetySixPipette = screen.getByRole('radio', {name: '96-Channel pipette 96-Channel pipette'}) + expect(singleMountPipettes).toHaveStyle( `background-color: ${COLORS.white}` ) - expect(ninetySixPipette.parentElement).toHaveStyle( + expect(ninetySixPipette).toHaveStyle( `background-color: ${COLORS.lightBlue}` ) }) @@ -146,8 +146,8 @@ describe('ChoosePipette', () => { right: null, }) props = { ...props, selectedPipette: NINETY_SIX_CHANNEL } - const { getByText } = render(props) - getByText('Detach Flex 1-Channel 1000 μL and attach 96-Channel pipette') + render(props) + screen.getByText('Detach Flex 1-Channel 1000 μL and attach 96-Channel pipette') }) it('renders the correct text for the 96 channel button when there is a right pipette attached', () => { mockGetIsGantryEmpty.mockReturnValue(false) @@ -156,7 +156,7 @@ describe('ChoosePipette', () => { right: mockAttachedPipetteInformation, }) props = { ...props, selectedPipette: NINETY_SIX_CHANNEL } - const { getByText } = render(props) - getByText('Detach Flex 1-Channel 1000 μL and attach 96-Channel pipette') + render(props) + screen.getByText('Detach Flex 1-Channel 1000 μL and attach 96-Channel pipette') }) }) diff --git a/app/src/organisms/ProtocolDetails/__tests__/ProtocolDetails.test.tsx b/app/src/organisms/ProtocolDetails/__tests__/ProtocolDetails.test.tsx index 576ff847754..4700231bd4a 100644 --- a/app/src/organisms/ProtocolDetails/__tests__/ProtocolDetails.test.tsx +++ b/app/src/organisms/ProtocolDetails/__tests__/ProtocolDetails.test.tsx @@ -3,7 +3,7 @@ import '@testing-library/jest-dom' import { resetAllWhenMocks, when } from 'jest-when' import { partialComponentPropsMatcher, renderWithProviders } from '@opentrons/components' import { StaticRouter } from 'react-router-dom' -import { act, waitFor } from '@testing-library/react' +import { waitFor } from '@testing-library/react' import { i18n } from '../../../i18n' import { useTrackEvent, diff --git a/app/src/organisms/ProtocolsLanding/__tests__/EmptyStateLinks.test.tsx b/app/src/organisms/ProtocolsLanding/__tests__/EmptyStateLinks.test.tsx index ec68ea7fe0c..d5609846ae5 100644 --- a/app/src/organisms/ProtocolsLanding/__tests__/EmptyStateLinks.test.tsx +++ b/app/src/organisms/ProtocolsLanding/__tests__/EmptyStateLinks.test.tsx @@ -1,37 +1,35 @@ import * as React from 'react' import '@testing-library/jest-dom' +import { screen } from '@testing-library/react' import { BrowserRouter } from 'react-router-dom' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' import { EmptyStateLinks } from '../EmptyStateLinks' describe('EmptyStateLinks', () => { - let render: () => ReturnType[0] + const render = () => { + return renderWithProviders( + + + , + { + i18nInstance: i18n, + } + ) + } - beforeEach(() => { - render = () => { - return renderWithProviders( - - - , - { - i18nInstance: i18n, - } - )[0] - } - }) afterEach(() => { jest.resetAllMocks() }) it('renders correct contents for empty state', () => { - const { getByRole } = render() - expect(getByRole('complementary')).toHaveTextContent( + render() + expect(screen.getByRole('complementary')).toHaveTextContent( /Don't have a protocol yet\?/i ) - getByRole('link', { name: 'Open Protocol Library' }) - getByRole('link', { name: 'Open Protocol Designer' }) - getByRole('link', { name: 'Open Python API Documentation' }) + screen.getByRole('link', { name: 'Open Protocol Library' }) + screen.getByRole('link', { name: 'Open Protocol Designer' }) + screen.getByRole('link', { name: 'Open Python API Documentation' }) }) }) diff --git a/app/src/organisms/ProtocolsLanding/__tests__/UploadInput.test.tsx b/app/src/organisms/ProtocolsLanding/__tests__/UploadInput.test.tsx index c269696c5ce..60be35ee96a 100644 --- a/app/src/organisms/ProtocolsLanding/__tests__/UploadInput.test.tsx +++ b/app/src/organisms/ProtocolsLanding/__tests__/UploadInput.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import '@testing-library/jest-dom' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { BrowserRouter } from 'react-router-dom' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' @@ -17,50 +17,49 @@ const mockUseTrackEvent = useTrackEvent as jest.Mock describe('ProtocolUploadInput', () => { let onUpload: jest.MockedFunction<() => {}> let trackEvent: jest.MockedFunction - let render: () => ReturnType[0] + const render = () => { + return renderWithProviders( + + + , + { + i18nInstance: i18n, + } + ) + } beforeEach(() => { onUpload = jest.fn() trackEvent = jest.fn() mockUseTrackEvent.mockReturnValue(trackEvent) - render = () => { - return renderWithProviders( - - - , - { - i18nInstance: i18n, - } - )[0] - } }) afterEach(() => { jest.resetAllMocks() }) it('renders correct contents for empty state', () => { - const { findByText, getByRole } = render() + render() - getByRole('button', { name: 'Upload' }) - findByText('Drag and drop or') - findByText('your files') - findByText( + screen.getByRole('button', { name: 'Upload' }) + screen.getByText(/Drag and drop or/i) + screen.getByText(/your files/i) + screen.getByText( 'Valid file types: Python files (.py) or Protocol Designer files (.json)' ) - getByRole('button', { name: 'browse' }) + screen.getByRole('button', { name: 'browse' }) }) it('opens file select on button click', () => { - const { getByRole, getByTestId } = render() - const button = getByRole('button', { name: 'Upload' }) - const input = getByTestId('file_input') + render() + const button = screen.getByRole('button', { name: 'Upload' }) + const input = screen.getByTestId('file_input') input.click = jest.fn() fireEvent.click(button) expect(input.click).toHaveBeenCalled() }) it('calls onUpload callback on choose file and trigger analytics event', () => { - const { getByTestId } = render() - const input = getByTestId('file_input') + render() + const input = screen.getByTestId('file_input') fireEvent.change(input, { target: { files: [{ path: 'dummyFile', name: 'dummyName' }] }, }) diff --git a/app/src/organisms/RobotSettingsCalibration/__tests__/CalibrationHealthCheck.test.tsx b/app/src/organisms/RobotSettingsCalibration/__tests__/CalibrationHealthCheck.test.tsx index 8e60e026535..4c9c6432714 100644 --- a/app/src/organisms/RobotSettingsCalibration/__tests__/CalibrationHealthCheck.test.tsx +++ b/app/src/organisms/RobotSettingsCalibration/__tests__/CalibrationHealthCheck.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { fireEvent, waitFor } from '@testing-library/react' +import { fireEvent, waitFor, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' @@ -102,16 +102,16 @@ describe('CalibrationHealthCheck', () => { }) it('renders a title and description - Calibration Health Check section', () => { - const [{ getByText }] = render() - getByText('Calibration Health Check') - getByText( + render() + screen.getByText('Calibration Health Check') + screen.getByText( 'Check the accuracy of key calibration points without recalibrating the robot.' ) }) it('renders a Check health button', () => { - const [{ getByRole }] = render() - const button = getByRole('button', { name: 'Check health' }) + render() + const button = screen.getByRole('button', { name: 'Check health' }) expect(button).not.toBeDisabled() fireEvent.click(button) expect(mockTrackEvent).toHaveBeenCalledWith({ @@ -121,10 +121,10 @@ describe('CalibrationHealthCheck', () => { }) it('Health check button is disabled when a button disabled reason is provided', () => { - const [{ getByRole }] = render({ + render({ buttonDisabledReason: 'otie is unreachable', }) - const button = getByRole('button', { name: 'Check health' }) + const button = screen.getByRole('button', { name: 'Check health' }) expect(button).toBeDisabled() }) @@ -133,27 +133,25 @@ describe('CalibrationHealthCheck', () => { ...RUN_STATUSES, isRunRunning: true, }) - const [{ getByRole }] = render() - const button = getByRole('button', { name: 'Check health' }) + render() + const button = screen.getByRole('button', { name: 'Check health' }) expect(button).toBeDisabled() }) it('Health check button is disabled when pipette are not set', () => { mockUseAttachedPipettes.mockReturnValue({ left: null, right: null }) - const [{ getByRole }] = render() - const button = getByRole('button', { name: 'Check health' }) + render() + const button = screen.getByRole('button', { name: 'Check health' }) expect(button).toBeDisabled() }) it('Health check button shows Tooltip when pipette are not set', async () => { mockUseAttachedPipettes.mockReturnValue({ left: null, right: null }) - const [{ getByRole, findByText }] = render() - const button = getByRole('button', { name: 'Check health' }) + render() + const button = screen.getByRole('button', { name: 'Check health' }) fireEvent.mouseMove(button) - await waitFor(() => { - findByText( - 'Fully calibrate your robot before checking calibration health' - ) + await waitFor(async () => { + await screen.findByText('Fully calibrate your robot before checking calibration health') }) }) @@ -166,8 +164,8 @@ describe('CalibrationHealthCheck', () => { ...RUN_STATUSES, isRunRunning: true, }) - const [{ getByRole }] = render() - const button = getByRole('button', { name: 'Check health' }) + render() + const button = screen.getByRole('button', { name: 'Check health' }) expect(button).toBeDisabled() }) }) diff --git a/app/src/organisms/SendProtocolToOT3Slideout/__tests__/SendProtocolToOT3Slideout.test.tsx b/app/src/organisms/SendProtocolToOT3Slideout/__tests__/SendProtocolToOT3Slideout.test.tsx index 9eaf3cc8024..32efc3252a2 100644 --- a/app/src/organisms/SendProtocolToOT3Slideout/__tests__/SendProtocolToOT3Slideout.test.tsx +++ b/app/src/organisms/SendProtocolToOT3Slideout/__tests__/SendProtocolToOT3Slideout.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { renderWithProviders } from '@opentrons/components' +import { fireEvent, screen } from '@testing-library/react' import { StaticRouter } from 'react-router-dom' import { when, resetAllWhenMocks } from 'jest-when' @@ -160,25 +161,23 @@ describe('SendProtocolToOT3Slideout', () => { }) it('renders slideout title and button', () => { - const [{ getByRole, getByText }] = render({ + render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), isExpanded: true, }) - getByText('Send protocol to Opentrons Flex') - getByRole('button', { name: 'Send' }) + screen.getByText('Send protocol to Opentrons Flex') + screen.getByRole('button', { name: 'Send' }) }) it('renders an available robot option for every connectable OT-3, and link for other robots', () => { - const [{ queryByText }] = render({ + render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), isExpanded: true, }) - expect(queryByText('opentrons-robot-name')).toBeInTheDocument() - expect( - queryByText('2 unavailable or busy robots are not listed.') - ).toBeInTheDocument() + screen.getByText('opentrons-robot-name') + screen.getByText('2 unavailable or busy robots are not listed.') }) it('does not render a robot option for a busy OT-3', () => { when(mockUseAllRunsQuery) @@ -191,12 +190,12 @@ describe('SendProtocolToOT3Slideout', () => { links: { current: { href: 'a current run' } }, }) ) - const [{ queryByText }] = render({ + render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), isExpanded: true, }) - expect(queryByText('opentrons-robot-name')).not.toBeInTheDocument() + expect(screen.queryByText('opentrons-robot-name')).not.toBeInTheDocument() }) it('does not render an available robot option for a connectable OT-2', () => { mockGetConnectableRobots.mockReturnValue([ @@ -207,32 +206,33 @@ describe('SendProtocolToOT3Slideout', () => { robotModel: ROBOT_MODEL_OT2, }, ]) - const [{ queryByText }] = render({ + render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), isExpanded: true, }) - expect(queryByText('ot-2-robot-name')).not.toBeInTheDocument() + expect(screen.queryByText('ot-2-robot-name')).not.toBeInTheDocument() }) it('if scanning, show robots, but do not show link to other devices', () => { mockGetScanning.mockReturnValue(true) - const [{ queryByText }] = render({ + render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), isExpanded: true, }) - expect(queryByText('opentrons-robot-name')).toBeInTheDocument() + screen.getByText('opentrons-robot-name') expect( - queryByText('2 unavailable or busy robots are not listed.') + screen.queryByText('2 unavailable or busy robots are not listed.') ).not.toBeInTheDocument() }) it('if not scanning, show refresh button, start discovery if clicked', () => { - const [{ getByRole }, { dispatch }] = render({ + const { dispatch } = render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), isExpanded: true, - }) - getByRole('button', { name: 'refresh' }).click() + })[1] + const refresh = screen.getByRole('button', { name: 'refresh' }) + fireEvent.click(refresh) expect(mockStartDiscovery).toHaveBeenCalled() expect(dispatch).toHaveBeenCalledWith({ type: 'mockStartDiscovery' }) }) @@ -241,20 +241,20 @@ describe('SendProtocolToOT3Slideout', () => { { ...mockConnectableOT3, name: 'otherRobot', ip: 'otherIp' }, mockConnectableOT3, ]) - const [{ getByRole, getByText }] = render({ + render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), isExpanded: true, }) - const proceedButton = getByRole('button', { name: 'Send' }) + const proceedButton = screen.getByRole('button', { name: 'Send' }) expect(proceedButton).not.toBeDisabled() - const otherRobot = getByText('otherRobot') - otherRobot.click() // unselect default robot + const otherRobot = screen.getByText('otherRobot') + fireEvent.click(otherRobot) // unselect default robot expect(proceedButton).not.toBeDisabled() - const mockRobot = getByText('opentrons-robot-name') - mockRobot.click() + const mockRobot = screen.getByText('opentrons-robot-name') + fireEvent.click(mockRobot) expect(proceedButton).not.toBeDisabled() - proceedButton.click() + fireEvent.click(proceedButton) expect(mockMutateAsync).toBeCalledWith({ files: [expect.any(Object), mockCustomLabwareFile], protocolKey: 'protocolKeyStub', @@ -268,19 +268,19 @@ describe('SendProtocolToOT3Slideout', () => { autoUpdateDisabledReason: null, updateFromFileDisabledReason: null, }) - const [{ getByRole, getByText }] = render({ + render({ storedProtocolData: storedProtocolDataFixture, onCloseClick: jest.fn(), isExpanded: true, }) - const proceedButton = getByRole('button', { name: 'Send' }) + const proceedButton = screen.getByRole('button', { name: 'Send' }) expect(proceedButton).toBeDisabled() expect( - getByText( + screen.getByText( 'A robot software update is required to run protocols with this version of the Opentrons App.' ) ).toBeInTheDocument() - const linkToRobotDetails = getByText('Go to Robot') - linkToRobotDetails.click() + const linkToRobotDetails = screen.getByText('Go to Robot') + fireEvent.click(linkToRobotDetails) }) }) diff --git a/app/src/organisms/TakeoverModal/__tests__/MaintenanceRunTakeover.test.tsx b/app/src/organisms/TakeoverModal/__tests__/MaintenanceRunTakeover.test.tsx index a084925d254..150cd1408eb 100644 --- a/app/src/organisms/TakeoverModal/__tests__/MaintenanceRunTakeover.test.tsx +++ b/app/src/organisms/TakeoverModal/__tests__/MaintenanceRunTakeover.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { screen } from '@testing-library/react' import { i18n } from '../../../i18n' import { when } from 'jest-when' import { renderWithProviders } from '@opentrons/components' @@ -38,14 +39,14 @@ describe('MaintenanceRunTakeover', () => { }) it('renders child components successfuly', () => { - const [{ getByText }] = render(props) - getByText('Test Component') + render(props) + screen.getByText('Test Component') }) it('does not render a takeover modal if no maintenance run has been initiated', () => { - const [{ queryByText }] = render(props) + render(props) - expect(queryByText('Robot is busy')).not.toBeInTheDocument() + expect(screen.queryByText('Robot is busy')).not.toBeInTheDocument() }) it('does not render a takeover modal if a maintenance run has been initiated by the ODD', () => { @@ -59,9 +60,8 @@ describe('MaintenanceRunTakeover', () => { when(useMaintenanceRunTakeover).calledWith().mockReturnValue(MOCK_ODD_RUN) - const [{ queryByText }] = render(props) - - expect(queryByText('Robot is busy')).not.toBeInTheDocument() + render(props) + expect(screen.queryByText('Robot is busy')).not.toBeInTheDocument() }) it('renders a takeover modal if a maintenance run has been initiated by the desktop', () => { @@ -77,8 +77,7 @@ describe('MaintenanceRunTakeover', () => { .calledWith() .mockReturnValue(MOCK_DESKTOP_RUN) - const [{ queryByText }] = render(props) - - expect(queryByText('Robot is busy')).toBeInTheDocument() + render(props) + screen.getByText('Robot is busy') }) }) diff --git a/app/src/pages/OnDeviceDisplay/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx b/app/src/pages/OnDeviceDisplay/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx index f35446c237e..933d096d55b 100644 --- a/app/src/pages/OnDeviceDisplay/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx +++ b/app/src/pages/OnDeviceDisplay/RobotSettingsDashboard/__tests__/RobotSettingsDashboard.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' -import { fireEvent } from '@testing-library/dom' +import { fireEvent } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' diff --git a/app/src/pages/ProtocolDashboard/__tests__/LongPressModal.test.tsx b/app/src/pages/ProtocolDashboard/__tests__/LongPressModal.test.tsx index c0477410551..6a80341ddd8 100644 --- a/app/src/pages/ProtocolDashboard/__tests__/LongPressModal.test.tsx +++ b/app/src/pages/ProtocolDashboard/__tests__/LongPressModal.test.tsx @@ -1,8 +1,7 @@ import * as React from 'react' import { when, resetAllWhenMocks } from 'jest-when' import { MemoryRouter } from 'react-router-dom' -import { fireEvent } from '@testing-library/react' -import { renderHook } from '@testing-library/react' +import { fireEvent, renderHook } from '@testing-library/react' import { renderWithProviders, useLongPress } from '@opentrons/components' import { HostConfig } from '@opentrons/api-client' diff --git a/labware-library/src/labware-creator/components/__tests__/FormAlerts.test.tsx b/labware-library/src/labware-creator/components/__tests__/FormAlerts.test.tsx index 8dd4250c777..15030dc6f98 100644 --- a/labware-library/src/labware-creator/components/__tests__/FormAlerts.test.tsx +++ b/labware-library/src/labware-creator/components/__tests__/FormAlerts.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { render } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import { getIsHidden } from '../../formSelectors' import { IRREGULAR_LABWARE_ERROR, @@ -37,9 +37,8 @@ describe('FormAlerts', () => { }, } - const { container } = render() - const warning = container.querySelector('[class="alert warning"]') - expect(warning?.textContent).toBe('some warning') + render() + screen.getByText('some warning') }) it('should render an incompatible labware error when the labware is not compatible with labware creator', () => { when(getIsHiddenMock) @@ -59,9 +58,8 @@ describe('FormAlerts', () => { }, } - const { container } = render() - const error = container.querySelector('[class="alert error"]') - expect(error?.textContent).toBe( + render() + screen.getByText( 'Your labware is not compatible with the Labware Creator. Please fill out this form to request a custom labware definition.' ) }) @@ -83,9 +81,8 @@ describe('FormAlerts', () => { }, } - const { container } = render() - const error = container.querySelector('[class="alert error"]') - expect(error?.textContent).toBe( + render() + screen.getByText( 'If your tip does not fit when placed by hand then it is not a good candidate for this pipette on the OT-2.' ) }) @@ -107,9 +104,8 @@ describe('FormAlerts', () => { }, } - const { container } = render() - const error = container.querySelector('[class="alert error"]') - expect(error?.textContent).toBe( + render() + screen.getByText( 'Your labware is too small to fit in a slot properly. Please fill out this form to request an adapter.' ) }) @@ -131,9 +127,8 @@ describe('FormAlerts', () => { }, } - const { container } = render() - const error = container.querySelector('[class="alert error"]') - expect(error?.textContent).toBe( + render() + screen.getByText( 'Your labware is too large to fit in a single slot properly. Please fill out this form to request a custom labware definition.' ) }) diff --git a/protocol-designer/src/components/modules/__tests__/TrashModal.test.tsx b/protocol-designer/src/components/modules/__tests__/TrashModal.test.tsx index 71e3521c85b..1f55242c8d5 100644 --- a/protocol-designer/src/components/modules/__tests__/TrashModal.test.tsx +++ b/protocol-designer/src/components/modules/__tests__/TrashModal.test.tsx @@ -79,6 +79,8 @@ describe('TrashModal ', () => { getByRole('button', { name: 'save' }).click() await waitFor(() => { expect(mockDeleteDeckFixture).toHaveBeenCalledWith(mockId) + }) + await waitFor(() => { expect(mockCreateDeckFixture).toHaveBeenCalledWith('trashBin', 'cutoutA3') }) }) diff --git a/react-api-client/src/calibration/__tests__/useDeleteCalibrationMutation.test.tsx b/react-api-client/src/calibration/__tests__/useDeleteCalibrationMutation.test.tsx index 2e45cf033ce..1a153dc7dd4 100644 --- a/react-api-client/src/calibration/__tests__/useDeleteCalibrationMutation.test.tsx +++ b/react-api-client/src/calibration/__tests__/useDeleteCalibrationMutation.test.tsx @@ -72,7 +72,7 @@ describe('useDeleteCalibrationMutation hook', () => { data: DELETE_CAL_DATA_RESPONSE, } as Response) - const { result, rerender } = renderHook( + const { result } = renderHook( () => useDeleteCalibrationMutation(), { wrapper, From 3f7a8c10a01389e1209ca9d020d318fd5907ef9a Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Mon, 11 Dec 2023 17:13:35 -0500 Subject: [PATCH 12/31] chunk of tests passing --- .eslintrc.js | 6 +- .../OnDeviceDisplayAppFallback.test.tsx | 13 +- app/src/App/__tests__/hooks.test.tsx | 2 +- .../__tests__/CustomKeyboard.test.tsx | 2 +- .../__tests__/NormalKeyboard.test.tsx | 2 +- .../Numpad/__tests__/Numpad.test.tsx | 2 +- .../buttons/__tests__/BackButton.test.tsx | 25 +- .../buttons/__tests__/LargeButton.test.tsx | 19 +- .../buttons/__tests__/MediumButton.test.tsx | 35 +-- .../__tests__/useToggleGroup.test.tsx | 18 +- .../__tests__/ConnectRobotSlideout.test.tsx | 26 +- .../__tests__/ApplyHistoricOffsets.test.tsx | 4 +- .../__tests__/LabwareOffsetTable.test.tsx | 1 - .../__tests__/useHistoricRunDetails.test.tsx | 12 +- .../useOffsetCandidatesForAnalysis.test.tsx | 18 +- .../__tests__/CalibrateDeck.test.tsx | 9 +- .../__tests__/CalibratePipetteOffset.test.tsx | 6 +- .../AskForCalibrationBlockModal.test.tsx | 28 +-- .../__tests__/CalibrateTipLength.test.tsx | 8 +- .../__tests__/Introduction.test.tsx | 10 +- .../__tests__/DeckSetup.test.tsx | 10 +- .../__tests__/SaveZPoint.test.tsx | 1 - .../__tests__/TipConfirmation.test.tsx | 4 +- .../__tests__/CalibrationTaskList.test.tsx | 29 +-- .../__tests__/CheckCalibration.test.tsx | 4 +- .../__tests__/ChooseProtocolSlideout.test.tsx | 20 +- .../ChooseProtocolSlideout/index.tsx | 18 +- .../ChooseRobotToRunProtocolSlideout.test.tsx | 42 ++-- .../__tests__/AddFixtureModal.test.tsx | 90 +++---- .../__tests__/hooks.test.tsx | 12 +- .../__tests__/LocationConflictModal.test.tsx | 49 ++-- .../__tests__/OpenJupyterControl.test.tsx | 2 +- .../RobotUpdateProgressModal.test.tsx | 12 +- .../__tests__/useRobotUpdateInfo.test.tsx | 2 +- .../__tests__/useAttachedModules.test.tsx | 2 +- .../useAttachedPipetteCalibrations.test.tsx | 2 +- .../__tests__/useAttachedPipettes.test.tsx | 2 +- ...tachedPipettesFromInstrumentsQuery.test.ts | 2 +- .../__tests__/useCalibrationTaskList.test.tsx | 2 +- .../__tests__/useDeckCalibrationData.test.tsx | 2 +- .../useDeckCalibrationStatus.test.tsx | 2 +- .../hooks/__tests__/useIsFlex.test.tsx | 2 +- .../__tests__/useIsRobotViewable.test.tsx | 2 +- .../__tests__/useLPCDisabledReason.test.tsx | 4 +- .../hooks/__tests__/useLights.test.tsx | 2 +- .../useModuleCalibrationStatus.test.tsx | 2 +- .../usePipetteOffsetCalibration.test.tsx | 2 +- .../usePipetteOffsetCalibrations.test.tsx | 2 +- .../__tests__/useProtocolMetadata.test.tsx | 6 +- .../useProtocolRunAnalyticsData.test.tsx | 4 +- .../Devices/hooks/__tests__/useRobot.test.tsx | 2 +- .../__tests__/useRobotAnalyticsData.test.tsx | 2 +- .../useRunCalibrationStatus.test.tsx | 2 +- .../useStoredProtocolAnalysis.test.tsx | 2 +- .../__tests__/useSyncRobotClock.test.tsx | 2 +- .../useTipLengthCalibrations.test.tsx | 2 +- .../useTrackCreateProtocolRunEvent.test.tsx | 2 +- .../useTrackProtocolRunEvent.test.tsx | 4 +- .../__tests__/GripperCard.test.tsx | 82 +++--- .../__tests__/ExitConfirmation.test.tsx | 10 +- .../__tests__/MovePin.test.tsx | 9 +- .../__tests__/LabwareDetails.test.tsx | 27 +- app/src/organisms/LabwareDetails/index.tsx | 3 +- .../__tests__/LabwareOffsetTabs.test.tsx | 17 +- .../__tests__/CheckItem.test.tsx | 28 ++- .../__tests__/PickUpTip.test.tsx | 24 +- .../__tests__/ReturnTip.test.tsx | 8 +- .../__tests__/useLaunchLPC.test.tsx | 2 +- .../ModuleCard/__tests__/hooks.test.tsx | 60 +++-- .../__tests__/useHardwareStatusText.test.tsx | 2 +- .../__tests__/ChoosePipette.test.tsx | 32 ++- .../__tests__/Results.test.tsx | 140 +++++------ .../__tests__/hooks.test.tsx | 2 +- .../__tests__/ProtocolDetails.test.tsx | 6 +- .../__tests__/ProtocolSetupLabware.test.tsx | 44 ++-- .../hooks/__tests__/useCloneRun.test.tsx | 6 +- .../ProtocolsLanding/__tests__/hooks.test.tsx | 36 +-- .../ModuleCalibrationOverflowMenu.test.tsx | 70 +++--- .../__tests__/CalibrationHealthCheck.test.tsx | 10 +- .../NetworkSettings/__tests__/hooks.test.tsx | 2 +- .../useDashboardCalibrateDeck.test.tsx | 139 +---------- .../useDashboardCalibratePipOffset.test.tsx | 160 +----------- .../useDashboardCalibrateTipLength.test.tsx | 234 +----------------- .../pages/Labware/__tests__/hooks.test.tsx | 52 ++-- .../__tests__/ProtocolDetails.test.tsx | 71 +++--- .../__tests__/ConnectViaWifi.test.tsx | 61 ++--- .../__tests__/InstrumentsDashboard.test.tsx | 79 +++--- .../__tests__/NameRobot.test.tsx | 72 +++--- .../__tests__/useNetworkConnection.test.tsx | 2 +- .../Protocols/hooks/__tests__/hooks.test.tsx | 2 +- .../redux/robot-api/__tests__/hooks.test.tsx | 166 +------------ .../__tests__/useCanDisconnect.test.tsx | 6 +- components/src/alerts/AlertItem.tsx | 5 +- .../hardware-sim/Pipette/EmanatingNozzle.tsx | 4 +- .../__tests__/EmanatingNozzle.test.tsx | 6 +- .../src/hooks/__tests__/useLongPress.test.ts | 14 +- .../src/interaction-enhancers/useHover.ts | 31 +-- components/src/tooltips/useTooltip.ts | 26 +- .../components/__tests__/FormAlerts.test.tsx | 15 +- package.json | 1 + .../__tests__/SlotControls.test.tsx | 2 +- .../__tests__/LabwareSelectionModal.test.tsx | 4 - .../__tests__/AdditionalItemsRow.test.tsx | 7 - .../__tests__/StagingAreasRow.test.tsx | 6 - .../src/api/__tests__/useHost.test.tsx | 20 +- .../useDeleteCalibrationMutation.test.tsx | 24 +- .../src/health/__tests__/useHealth.test.tsx | 4 +- ...eCreateMaintenanceCommandMutation.test.tsx | 24 +- .../useCreateMaintenanceRunMutation.test.tsx | 13 +- .../useDeleteMaintenanceRunMutation.test.tsx | 22 +- .../__tests__/useMaintenanceRunQuery.test.tsx | 4 +- .../usePlayMaintenanceRunMutation.test.tsx | 8 +- .../__tests__/useModulesQuery.test.tsx | 8 +- .../__tests__/usePipettesQuery.test.tsx | 15 +- .../usePipettesSettingsQuery.test.tsx | 8 +- .../__tests__/useAllProtocolsQuery.test.tsx | 6 +- .../useCreateProtocolMutation.test.tsx | 4 +- .../__tests__/useDeleteProtocol.test.tsx | 22 +- .../__tests__/useProtocolQuery.test.tsx | 13 +- ...AcknowledgeEstopDisengageMutation.test.tsx | 4 +- .../src/robot/__tests__/useDoorQuery.test.tsx | 8 +- .../robot/__tests__/useEstopQuery.test.tsx | 8 +- .../robot/__tests__/useLightsQuery.test.tsx | 8 +- react-api-client/src/robot/useDoorQuery.ts | 5 +- react-api-client/src/robot/useEstopQuery.ts | 6 +- react-api-client/src/robot/useLightsQuery.ts | 5 +- .../__tests__/useAllCommandsQuery.test.tsx | 4 +- .../runs/__tests__/useAllRunsQuery.test.tsx | 22 +- .../runs/__tests__/useCommandQuery.test.tsx | 13 +- .../useCreateCommandMutation.test.tsx | 6 +- ...seCreateLabwareDefinitionMutation.test.tsx | 6 +- .../useCreateLabwareOffsetsMutation.test.tsx | 6 +- .../useCreateLiveCommandMutation.test.tsx | 24 +- .../__tests__/useCreateRunMutation.test.tsx | 4 +- .../useDismissCurrentRunMutation.test.tsx | 15 +- .../__tests__/usePauseRunMutation.test.tsx | 8 +- .../__tests__/usePlayRunMutation.test.tsx | 8 +- .../__tests__/useRunActionMutations.test.tsx | 6 +- .../src/runs/__tests__/useRunQuery.test.tsx | 6 +- .../__tests__/useStopRunMutation.test.tsx | 4 +- .../useUpdateRobotNameMutation.test.tsx | 5 +- .../__tests__/useAllSessionsQuery.test.tsx | 9 +- .../useCreateSessionMutation.test.tsx | 4 +- .../__tests__/useSessionQuery.test.tsx | 4 +- .../__tests__/useSessionsByTypeQuery.test.tsx | 4 +- ...useAllCurrentSubsystemUpdateQuery.test.tsx | 13 +- .../useCurrentSubsystemUpdateQuery.test.tsx | 4 +- .../useSubsystemUpdateQuery.test.tsx | 13 +- .../useUpdateSubsystemMutation.test.tsx | 4 +- yarn.lock | 5 + 150 files changed, 1179 insertions(+), 1641 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 66b766b2ffc..a5a2562625e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -92,15 +92,15 @@ module.exports = { // TODO(mc, 2021-01-29): fix these and remove warning overrides 'jest/no-deprecated-functions': 'warn', 'jest/valid-title': 'warn', - 'jest/no-conditional-expect': 'warn' + 'jest/no-conditional-expect': 'warn', }, }, { - files: [ '**/__tests__/**test.tsx' ], + files: ['**/__tests__/**test.tsx'], env: { jest: true }, extends: ['plugin:testing-library/react'], rules: { - 'testing-library/prefer-screen-queries': 'warn' + 'testing-library/prefer-screen-queries': 'warn', }, }, { diff --git a/app/src/App/__tests__/OnDeviceDisplayAppFallback.test.tsx b/app/src/App/__tests__/OnDeviceDisplayAppFallback.test.tsx index aaa8f1f1d8d..fe5a7c6c16f 100644 --- a/app/src/App/__tests__/OnDeviceDisplayAppFallback.test.tsx +++ b/app/src/App/__tests__/OnDeviceDisplayAppFallback.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { when } from 'jest-when' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../i18n' @@ -41,17 +42,17 @@ describe('OnDeviceDisplayAppFallback', () => { }) it('should render text and button', () => { - const [{ getByText }] = render(props) - getByText('An unknown error has occurred') - getByText( + render(props) + screen.getByText('An unknown error has occurred') + screen.getByText( 'You need to restart the touchscreen. Then download the robot logs from the Opentrons App and send them to support@opentrons.com for assistance.' ) - getByText('Restart touchscreen') + screen.getByText('Restart touchscreen') }) it('should call a mock function when tapping reload button', () => { - const [{ getByText }] = render(props) - getByText('Restart touchscreen').click() + render(props) + fireEvent.click(screen.getByText('Restart touchscreen')) expect(mockTrackEvent).toHaveBeenCalledWith({ name: ANALYTICS_ODD_APP_ERROR, properties: { errorMessage: 'mock error' }, diff --git a/app/src/App/__tests__/hooks.test.tsx b/app/src/App/__tests__/hooks.test.tsx index 56181df226b..afe3cab6af7 100644 --- a/app/src/App/__tests__/hooks.test.tsx +++ b/app/src/App/__tests__/hooks.test.tsx @@ -12,7 +12,7 @@ import type { Store } from 'redux' import type { State } from '../../redux/types' describe('useSoftwareUpdatePoll', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> let store: Store beforeEach(() => { jest.useFakeTimers() diff --git a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx index aa64a347c24..65bb2b7d827 100644 --- a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { fireEvent, renderHook } from '@testing-library/react' +import { fireEvent, renderHook } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { CustomKeyboard } from '..' diff --git a/app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx index 061e9bdd810..e578584ad11 100644 --- a/app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { fireEvent, renderHook } from '@testing-library/react' +import { fireEvent, renderHook } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { NormalKeyboard } from '..' diff --git a/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx b/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx index aaf43b64e84..7ef05d582ca 100644 --- a/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { fireEvent, renderHook } from '@testing-library/react' +import { fireEvent, renderHook } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { Numpad } from '..' diff --git a/app/src/atoms/buttons/__tests__/BackButton.test.tsx b/app/src/atoms/buttons/__tests__/BackButton.test.tsx index d230971b7ae..64f61ff6205 100644 --- a/app/src/atoms/buttons/__tests__/BackButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/BackButton.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { MemoryRouter, Route, Switch } from 'react-router-dom' import { renderWithProviders } from '@opentrons/components' @@ -38,24 +39,24 @@ describe('BackButton', () => { it('calls provided on click handler and does not go back one page', () => { const mockOnClick = jest.fn() - const { getByText, queryByText } = render({ onClick: mockOnClick }) + render({ onClick: mockOnClick }) expect(mockOnClick).toBeCalledTimes(0) - getByText('this is the current page') - expect(queryByText('this is the previous page')).toBeNull() - getByText('Back').click() + screen.getByText('this is the current page') + expect(screen.queryByText('this is the previous page')).toBeNull() + fireEvent.click(screen.getByText('Back')) expect(mockOnClick).toBeCalledTimes(1) - getByText('this is the current page') - expect(queryByText('this is the previous page')).toBeNull() + screen.getByText('this is the current page') + expect(screen.queryByText('this is the previous page')).toBeNull() }) it('goes back one page in history on click if no on click handler provided', () => { - const { getByText, queryByText } = render() + render() - getByText('this is the current page') - expect(queryByText('this is the previous page')).toBeNull() - getByText('Back').click() - getByText('this is the previous page') - expect(queryByText('this is the current page')).toBeNull() + screen.getByText('this is the current page') + expect(screen.queryByText('this is the previous page')).toBeNull() + fireEvent.click(screen.getByText('Back')) + screen.getByText('this is the previous page') + expect(screen.queryByText('this is the current page')).toBeNull() }) }) diff --git a/app/src/atoms/buttons/__tests__/LargeButton.test.tsx b/app/src/atoms/buttons/__tests__/LargeButton.test.tsx index 432101a2c5d..4c4dcb72262 100644 --- a/app/src/atoms/buttons/__tests__/LargeButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/LargeButton.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders, COLORS } from '@opentrons/components' import { LargeButton } from '../LargeButton' @@ -17,10 +18,10 @@ describe('LargeButton', () => { } }) it('renders the default button and it works as expected', () => { - const { getByText, getByRole } = render(props) - getByText('large button').click() + render(props) + fireEvent.click(screen.getByText('large button')) expect(props.onClick).toHaveBeenCalled() - expect(getByRole('button')).toHaveStyle( + expect(screen.getByRole('button')).toHaveStyle( `background-color: ${COLORS.blueEnabled}` ) }) @@ -29,16 +30,16 @@ describe('LargeButton', () => { ...props, buttonType: 'alert', } - const { getByRole } = render(props) - expect(getByRole('button')).toHaveStyle(`background-color: ${COLORS.red3}`) + render(props) + expect(screen.getByRole('button')).toHaveStyle(`background-color: ${COLORS.red3}`) }) it('renders the secondary button', () => { props = { ...props, buttonType: 'secondary', } - const { getByRole } = render(props) - expect(getByRole('button')).toHaveStyle( + render(props) + expect(screen.getByRole('button')).toHaveStyle( `background-color: ${COLORS.mediumBlueEnabled}` ) }) @@ -47,7 +48,7 @@ describe('LargeButton', () => { ...props, disabled: true, } - const { getByRole } = render(props) - expect(getByRole('button')).toBeDisabled() + render(props) + expect(screen.getByRole('button')).toBeDisabled() }) }) diff --git a/app/src/atoms/buttons/__tests__/MediumButton.test.tsx b/app/src/atoms/buttons/__tests__/MediumButton.test.tsx index 9718cd8b821..70dd32ece5e 100644 --- a/app/src/atoms/buttons/__tests__/MediumButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/MediumButton.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders, COLORS, BORDERS } from '@opentrons/components' import { MediumButton } from '../MediumButton' @@ -17,10 +18,10 @@ describe('MediumButton', () => { } }) it('renders the default button and it works as expected', () => { - const { getByText, getByRole } = render(props) - getByText('Medium button').click() + render(props) + fireEvent.click(screen.getByText('Medium button')) expect(props.onClick).toHaveBeenCalled() - expect(getByRole('button')).toHaveStyle( + expect(screen.getByRole('button')).toHaveStyle( `background-color: ${COLORS.blueEnabled}` ) }) @@ -29,16 +30,16 @@ describe('MediumButton', () => { ...props, buttonType: 'alert', } - const { getByRole } = render(props) - expect(getByRole('button')).toHaveStyle(`background-color: ${COLORS.red2}`) + render(props) + expect(screen.getByRole('button')).toHaveStyle(`background-color: ${COLORS.red2}`) }) it('renders the secondary button', () => { props = { ...props, buttonType: 'secondary', } - const { getByRole } = render(props) - expect(getByRole('button')).toHaveStyle( + render(props) + expect(screen.getByRole('button')).toHaveStyle( `background-color: ${COLORS.mediumBlueEnabled}` ) }) @@ -47,32 +48,32 @@ describe('MediumButton', () => { ...props, buttonType: 'alertSecondary', } - const { getByRole } = render(props) - expect(getByRole('button')).toHaveStyle(`background-color: ${COLORS.red3}`) + render(props) + expect(screen.getByRole('button')).toHaveStyle(`background-color: ${COLORS.red3}`) }) it('renders the tertiary high button', () => { props = { ...props, buttonType: 'tertiaryHigh', } - const { getByRole } = render(props) - expect(getByRole('button')).toHaveStyle(`background-color: ${COLORS.white}`) + render(props) + expect(screen.getByRole('button')).toHaveStyle(`background-color: ${COLORS.white}`) }) it('renders the tertiary low light button', () => { props = { ...props, buttonType: 'tertiaryLowLight', } - const { getByRole } = render(props) - expect(getByRole('button')).toHaveStyle(`background-color: ${COLORS.white}`) + render(props) + expect(screen.getByRole('button')).toHaveStyle(`background-color: ${COLORS.white}`) }) it('renders the button as disabled', () => { props = { ...props, disabled: true, } - const { getByRole } = render(props) - expect(getByRole('button')).toBeDisabled() + render(props) + expect(screen.getByRole('button')).toBeDisabled() }) it('renders custom icon in the button', () => { props = { @@ -87,8 +88,8 @@ describe('MediumButton', () => { ...props, buttonCategory: 'rounded', } - const { getByRole } = render(props) - expect(getByRole('button')).toHaveStyle( + render(props) + expect(screen.getByRole('button')).toHaveStyle( `border-radius: ${BORDERS.borderRadiusSize5}` ) }) diff --git a/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx b/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx index 46718bf6c4a..ab91cf3fd7f 100644 --- a/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx +++ b/app/src/molecules/ToggleGroup/__tests__/useToggleGroup.test.tsx @@ -27,9 +27,9 @@ describe('useToggleGroup', () => { }) it('should return default selectedValue and toggle buttons', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook( () => useToggleGroup('List View', 'Map View'), @@ -39,9 +39,9 @@ describe('useToggleGroup', () => { expect(result.current[0]).toBe('List View') }) it('should record an analytics event for list view', async () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook( () => useToggleGroup('List View', 'Map View', 'fake event'), @@ -57,9 +57,9 @@ describe('useToggleGroup', () => { }) }) it('should record an analytics event for map view', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook( () => useToggleGroup('List View', 'Map View', 'fake event'), diff --git a/app/src/organisms/AppSettings/__tests__/ConnectRobotSlideout.test.tsx b/app/src/organisms/AppSettings/__tests__/ConnectRobotSlideout.test.tsx index ce943fd953c..53a7ee6a969 100644 --- a/app/src/organisms/AppSettings/__tests__/ConnectRobotSlideout.test.tsx +++ b/app/src/organisms/AppSettings/__tests__/ConnectRobotSlideout.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' -import { fireEvent, screen } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import { fireEvent, screen, waitFor } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' @@ -89,7 +90,9 @@ describe('ConnectRobotSlideout', () => { render(props) const targetLink = 'https://support.opentrons.com/s/article/Manually-adding-a-robot-s-IP-address' - const link = screen.getByRole('link', {name: 'Learn more about connecting a robot manually'}) + const link = screen.getByRole('link', { + name: 'Learn more about connecting a robot manually', + }) expect(link).toHaveAttribute('href', targetLink) }) @@ -98,7 +101,9 @@ describe('ConnectRobotSlideout', () => { const addButton = screen.getByRole('button', { name: 'Add' }) expect(addButton).toBeEnabled() fireEvent.click(addButton) - const errorMessage = await screen.findByText('Enter an IP Address or Hostname') + const errorMessage = await screen.findByText( + 'Enter an IP Address or Hostname' + ) expect(errorMessage).toBeInTheDocument() }) @@ -129,15 +134,16 @@ describe('ConnectRobotSlideout', () => { }) it('Clicking Add button with an IP address/hostname should display the IP address/hostname and Not Found label', async () => { + mockGetConfig.mockReturnValue({ discovery: { candidates: ['1.1.1.2'] } } as any) + mockGetViewableRobots.mockReturnValue([] as any[]) render(props) + const user = userEvent.setup() const notFoundIpAddress = '1.1.1.2' - const inputBox = screen.getByRole('textbox') - const addButton = screen.getByRole('button', { name: 'Add' }) - fireEvent.change(inputBox, { - target: { value: notFoundIpAddress }, - }) - fireEvent.click(addButton) - screen.getByText(notFoundIpAddress) + await user.type(screen.getByRole('textbox'), notFoundIpAddress) + await user.click(screen.getByRole('button', { name: 'Add' })) + await waitFor(() => + expect(screen.getByText(notFoundIpAddress)) + ) screen.getByText('Not Found') }) diff --git a/app/src/organisms/ApplyHistoricOffsets/__tests__/ApplyHistoricOffsets.test.tsx b/app/src/organisms/ApplyHistoricOffsets/__tests__/ApplyHistoricOffsets.test.tsx index 2f31cf0f266..ab637f9b5b8 100644 --- a/app/src/organisms/ApplyHistoricOffsets/__tests__/ApplyHistoricOffsets.test.tsx +++ b/app/src/organisms/ApplyHistoricOffsets/__tests__/ApplyHistoricOffsets.test.tsx @@ -66,7 +66,9 @@ const mockFourthCandidate: OffsetCandidate = { describe('ApplyHistoricOffsets', () => { const mockSetShouldApplyOffsets = jest.fn() - const render = (props?: Partial>) => + const render = ( + props?: Partial> + ) => renderWithProviders>( { i18nInstance: i18n } ) - describe('LabwareOffsetTable', () => { afterEach(() => { jest.resetAllMocks() diff --git a/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx b/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx index 5b2325886bf..354f407002e 100644 --- a/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx +++ b/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useHistoricRunDetails.test.tsx @@ -42,9 +42,9 @@ describe('useHistoricRunDetails', () => { ) it('returns historical run details with newest first', async () => { - const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( -
    {children}
    - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) =>
    {children}
    const { result } = renderHook(useHistoricRunDetails, { wrapper }) await waitFor(() => { expect(result.current).toEqual([MOCK_RUN_LATER, MOCK_RUN_EARLIER]) @@ -59,9 +59,9 @@ describe('useHistoricRunDetails', () => { links: {}, }) ) - const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( -
    {children}
    - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) =>
    {children}
    const { result } = renderHook( () => useHistoricRunDetails({ hostname: 'fakeIp' }), { wrapper } diff --git a/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx b/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx index 5c7c2d81b0f..47696eec10f 100644 --- a/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx +++ b/app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/useOffsetCandidatesForAnalysis.test.tsx @@ -111,9 +111,9 @@ describe('useOffsetCandidatesForAnalysis', () => { }) it('returns an empty array if robot ip but no analysis output', async () => { - const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( -
    {children}
    - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) =>
    {children}
    const { result } = renderHook( () => useOffsetCandidatesForAnalysis(null, mockRobotIp), { wrapper } @@ -124,9 +124,9 @@ describe('useOffsetCandidatesForAnalysis', () => { }) it('returns an empty array if no robot ip', async () => { - const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( -
    {children}
    - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) =>
    {children}
    const { result } = renderHook( () => useOffsetCandidatesForAnalysis( @@ -140,9 +140,9 @@ describe('useOffsetCandidatesForAnalysis', () => { }) }) it('returns candidates for each first match with newest first', async () => { - const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( -
    {children}
    - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) =>
    {children}
    const { result } = renderHook( () => useOffsetCandidatesForAnalysis( diff --git a/app/src/organisms/CalibrateDeck/__tests__/CalibrateDeck.test.tsx b/app/src/organisms/CalibrateDeck/__tests__/CalibrateDeck.test.tsx index d782e68dc7b..c6d4d57634f 100644 --- a/app/src/organisms/CalibrateDeck/__tests__/CalibrateDeck.test.tsx +++ b/app/src/organisms/CalibrateDeck/__tests__/CalibrateDeck.test.tsx @@ -27,14 +27,15 @@ const mockGetDeckDefinitions = getDeckDefinitions as jest.MockedFunction< typeof getDeckDefinitions > - describe('CalibrateDeck', () => { let dispatchRequests: DispatchRequestsType const mockDeckCalSession: Sessions.DeckCalibrationSession = { id: 'fake_session_id', ...mockDeckCalibrationSessionAttributes, } - const render = (props: Partial> = {}) => { + const render = ( + props: Partial> = {} + ) => { const { showSpinner = false, isJogging = false, @@ -138,7 +139,9 @@ describe('CalibrateDeck', () => { }, }, }) - expect(screen.queryByRole('heading', { name: 'Before you begin' })).toBeNull() + expect( + screen.queryByRole('heading', { name: 'Before you begin' }) + ).toBeNull() }) it('does dispatch jog requests when not isJogging', () => { diff --git a/app/src/organisms/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx b/app/src/organisms/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx index 7ef8a5b6678..61206b154e4 100644 --- a/app/src/organisms/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx +++ b/app/src/organisms/CalibratePipetteOffset/__tests__/CalibratePipetteOffset.test.tsx @@ -78,8 +78,6 @@ describe('CalibratePipetteOffset', () => { id: 'fake_session_id', ...mockPipetteOffsetCalibrationSessionAttributes, } - - }) afterEach(() => { @@ -137,7 +135,9 @@ describe('CalibratePipetteOffset', () => { }, }, }) - expect(screen.queryByRole('heading', { name: 'Before you begin' })).toBeNull() + expect( + screen.queryByRole('heading', { name: 'Before you begin' }) + ).toBeNull() }) it('does dispatch jog requests when not isJogging', () => { diff --git a/app/src/organisms/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx b/app/src/organisms/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx index 42a665d15eb..2a5197c3c09 100644 --- a/app/src/organisms/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx +++ b/app/src/organisms/CalibrateTipLength/__tests__/AskForCalibrationBlockModal.test.tsx @@ -9,16 +9,16 @@ import { fireEvent, screen } from '@testing-library/react' describe('AskForCalibrationBlockModal', () => { const onResponse = jest.fn() const render = () => { - return renderWithProviders< - React.ComponentProps - >( - , - { i18nInstance: i18n } - ) + return renderWithProviders< + React.ComponentProps + >( + , + { i18nInstance: i18n } + ) } afterEach(() => { @@ -26,7 +26,7 @@ describe('AskForCalibrationBlockModal', () => { }) it('saves preference when not checked and use trash is clicked', () => { - const {dispatch} = render()[1] + const { dispatch } = render()[1] const checkbox = screen.getByRole('checkbox') fireEvent.click(checkbox) const button = screen.getByRole('button', { name: 'Use trash bin' }) @@ -35,14 +35,14 @@ describe('AskForCalibrationBlockModal', () => { expect(onResponse).toHaveBeenCalledWith(false) }) it('does not save preference when not checked and use trash is clicked', () => { - const {dispatch} = render()[1] + const { dispatch } = render()[1] const button = screen.getByRole('button', { name: 'Use Calibration Block' }) fireEvent.click(button) expect(dispatch).toHaveBeenCalledWith(setUseTrashSurfaceForTipCal(false)) expect(onResponse).toHaveBeenCalledWith(true) }) it('saves preference when not checked and use block is clicked', () => { - const {dispatch} = render()[1] + const { dispatch } = render()[1] const checkbox = screen.getByRole('checkbox') fireEvent.click(checkbox) const button = screen.getByRole('button', { name: 'Use trash bin' }) @@ -51,7 +51,7 @@ describe('AskForCalibrationBlockModal', () => { expect(onResponse).toHaveBeenCalledWith(false) }) it('does not save preference when not checked and use block is clicked', () => { - const {dispatch} = render()[1] + const { dispatch } = render()[1] const button = screen.getByRole('button', { name: 'Use Calibration Block' }) fireEvent.click(button) expect(dispatch).toHaveBeenCalledWith(setUseTrashSurfaceForTipCal(false)) diff --git a/app/src/organisms/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx b/app/src/organisms/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx index b3ee7483dfd..3fdb0926203 100644 --- a/app/src/organisms/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx +++ b/app/src/organisms/CalibrateTipLength/__tests__/CalibrateTipLength.test.tsx @@ -40,9 +40,7 @@ describe('CalibrateTipLength', () => { isJogging = false, session = mockTipLengthSession, } = props - return renderWithProviders< - React.ComponentType - >( + return renderWithProviders>( { }, }, }) - expect(screen.queryByRole('heading', { name: 'Before you begin' })).toBeNull() + expect( + screen.queryByRole('heading', { name: 'Before you begin' }) + ).toBeNull() }) it('does dispatch jog requests when not isJogging', () => { diff --git a/app/src/organisms/CalibrationPanels/Introduction/__tests__/Introduction.test.tsx b/app/src/organisms/CalibrationPanels/Introduction/__tests__/Introduction.test.tsx index ca3abb9fff1..9043aaea665 100644 --- a/app/src/organisms/CalibrationPanels/Introduction/__tests__/Introduction.test.tsx +++ b/app/src/organisms/CalibrationPanels/Introduction/__tests__/Introduction.test.tsx @@ -61,7 +61,9 @@ describe('Introduction', () => { const button = screen.getByRole('button', { name: 'Change tip rack' }) fireEvent.click(button) screen.getByText('mock choose tip rack') - expect(screen.queryByRole('heading', { name: 'Before you begin' })).toBe(null) + expect(screen.queryByRole('heading', { name: 'Before you begin' })).toBe( + null + ) }) it('clicking proceed loads alternate tiprack if load labware supported for session', () => { render({ @@ -76,7 +78,7 @@ describe('Introduction', () => { }) }) it('clicking proceed loads default if load labware is not supported for session', () => { - render({sessionType: Sessions.SESSION_TYPE_DECK_CALIBRATION}) + render({ sessionType: Sessions.SESSION_TYPE_DECK_CALIBRATION }) const startButton = screen.getByRole('button', { name: 'Get started' }) fireEvent.click(startButton) expect(mockSendCommands).toHaveBeenCalledWith({ @@ -89,7 +91,9 @@ describe('Introduction', () => { calInvalidationHandler: mockCalInvalidationHandler, }) screen.getByText('Recalibrating the deck clears pipette offset data') - screen.getByText('Pipette offsets for both mounts will have to be recalibrated.') + screen.getByText( + 'Pipette offsets for both mounts will have to be recalibrated.' + ) }) it('displays the InvalidationWarning when necessary - Tip Length session', () => { render({ diff --git a/app/src/organisms/CalibrationPanels/__tests__/DeckSetup.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/DeckSetup.test.tsx index 7b1e08eeee1..8acb8442c30 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/DeckSetup.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/DeckSetup.test.tsx @@ -56,8 +56,6 @@ describe('DeckSetup', () => { ) } - - beforeEach(() => { mockGetDeckDefinitions.mockReturnValue({}) }) @@ -97,7 +95,9 @@ describe('DeckSetup', () => { screen.getByRole('heading', { name: 'Prepare the space' }) screen.getByText('Place a full 300ul Tiprack FIXTURE into slot 8') expect( - screen.queryByText("Place the Calibration Block into it's designated slot") + screen.queryByText( + "Place the Calibration Block into it's designated slot" + ) ).toBeNull() expect(screen.queryByText('To check the left pipette:')).toBeNull() expect(screen.queryByText('Clear all other deck slots')).toBeNull() @@ -129,7 +129,9 @@ describe('DeckSetup', () => { screen.getByText('To check the left pipette:') screen.getByText('Clear all other deck slots') expect( - screen.queryByText("Place the Calibration Block into it's designated slot") + screen.queryByText( + "Place the Calibration Block into it's designated slot" + ) ).toBeNull() }) }) diff --git a/app/src/organisms/CalibrationPanels/__tests__/SaveZPoint.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/SaveZPoint.test.tsx index 04a61fb7de4..67ea6a9be10 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/SaveZPoint.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/SaveZPoint.test.tsx @@ -40,7 +40,6 @@ describe('SaveZPoint', () => { />, { i18nInstance: i18n } ) - } afterEach(() => { diff --git a/app/src/organisms/CalibrationPanels/__tests__/TipConfirmation.test.tsx b/app/src/organisms/CalibrationPanels/__tests__/TipConfirmation.test.tsx index 270a35eca01..6a7c03f3037 100644 --- a/app/src/organisms/CalibrationPanels/__tests__/TipConfirmation.test.tsx +++ b/app/src/organisms/CalibrationPanels/__tests__/TipConfirmation.test.tsx @@ -42,7 +42,9 @@ describe('TipConfirmation', () => { it('renders correct heading', () => { render() - screen.getByRole('heading', { name: 'Did pipette pick up tip successfully?' }) + screen.getByRole('heading', { + name: 'Did pipette pick up tip successfully?', + }) }) it('clicking invalidate tip send invalidate tip command', () => { render() diff --git a/app/src/organisms/CalibrationTaskList/__tests__/CalibrationTaskList.test.tsx b/app/src/organisms/CalibrationTaskList/__tests__/CalibrationTaskList.test.tsx index 9942ca681b3..75aed8b1fc9 100644 --- a/app/src/organisms/CalibrationTaskList/__tests__/CalibrationTaskList.test.tsx +++ b/app/src/organisms/CalibrationTaskList/__tests__/CalibrationTaskList.test.tsx @@ -21,6 +21,7 @@ import { useAttachedPipettes, } from '../../Devices/hooks' import { mockLeftProtoPipette } from '../../../redux/pipettes/__fixtures__' +import { fireEvent } from '@testing-library/react' jest.mock('../../Devices/hooks') jest.mock('../../ProtocolUpload/hooks') @@ -86,7 +87,7 @@ describe('CalibrationTaskList', () => { const [{ getByText, rerender }] = render() expect(getByText('Calibrate')).toBeTruthy() // Complete screen will only render if a wizard has been launched - getByText('Calibrate').click() + fireEvent.click(getByText('Calibrate')) rerender( { expect(getAllByText('Calibration recommended')).toHaveLength(3) expect(getByRole('button', { name: 'Calibrate' })).toBeTruthy() getByText('Right Mount') - getByText('Calibrate').click() + fireEvent.click(getByText('Calibrate')) rerender( { expect(getByRole('button', { name: 'Calibrate' })).toBeTruthy() getByText('Left Mount') getByText('Right Mount') - getByText('Calibrate').click() + fireEvent.click(getByText('Calibrate')) rerender( { expect(getByRole('button', { name: 'Calibrate' })).toBeTruthy() getByText('Left Mount') getByText('Right Mount') - getByText('Calibrate').click() + fireEvent.click(getByText('Calibrate')) rerender( { ) const [{ getAllByText, getByText, rerender }] = render() - getByText('Left Mount').click() + fireEvent.click(getByText('Left Mount')) const recalibrateLinks = getAllByText('Recalibrate') // this includes the deck and Left Mount subtasks CTAs expect(recalibrateLinks).toHaveLength(3) - recalibrateLinks[2].click() + fireEvent.click(recalibrateLinks[2]) rerender( { ) const [{ getAllByText, getByText, rerender }] = render() - getByText('Left Mount').click() + fireEvent.click(getByText('Left Mount')) const recalibrateLinks = getAllByText('Recalibrate') expect(recalibrateLinks).toHaveLength(3) - recalibrateLinks[0].click() + fireEvent.click(recalibrateLinks[0]) rerender( { const [{ getByText, rerender }] = render() const recalibrateLink = getByText('Recalibrate') - recalibrateLink.click() + fireEvent.click(recalibrateLink) rerender( { const [{ getAllByText, rerender }] = render() const calibrateButtons = getAllByText('Calibrate') expect(calibrateButtons).toHaveLength(1) // only deck's calibration button should be shown - calibrateButtons[0].click() + fireEvent.click(calibrateButtons[0]) expect(mockDeckCalLauncher).not.toHaveBeenCalled() rerender( @@ -271,7 +272,7 @@ describe('CalibrationTaskList', () => { ) const recalibrateLinks = getAllByText('Recalibrate') expect(recalibrateLinks).toHaveLength(1) // only deck's recalibration link should be shown - recalibrateLinks[0].click() + fireEvent.click(recalibrateLinks[0]) expect(mockDeckCalLauncher).not.toHaveBeenCalled() }) @@ -284,7 +285,7 @@ describe('CalibrationTaskList', () => { const [{ getAllByText, getByText, rerender }] = render() const calibrateButtons = getAllByText('Calibrate') expect(calibrateButtons).toHaveLength(1) // only the left mounts tip length button should show - calibrateButtons[0].click() + fireEvent.click(calibrateButtons[0]) expect(mockTipLengthCalLauncher).not.toHaveBeenCalled() rerender( @@ -297,10 +298,10 @@ describe('CalibrationTaskList', () => { /> ) - getByText('Left Mount').click() + fireEvent.click(getByText('Left Mount')) const recalibrateLinks = getAllByText('Recalibrate') expect(recalibrateLinks).toHaveLength(3) // deck and left mounts links are showing - recalibrateLinks[1].click() + fireEvent.click(recalibrateLinks[1]) expect(mockTipLengthCalLauncher).not.toHaveBeenCalled() }) }) diff --git a/app/src/organisms/CheckCalibration/__tests__/CheckCalibration.test.tsx b/app/src/organisms/CheckCalibration/__tests__/CheckCalibration.test.tsx index 70ead5f175c..98cb02cbfbc 100644 --- a/app/src/organisms/CheckCalibration/__tests__/CheckCalibration.test.tsx +++ b/app/src/organisms/CheckCalibration/__tests__/CheckCalibration.test.tsx @@ -143,7 +143,9 @@ describe('CheckCalibration', () => { }, }, }) - expect(screen.queryByRole('heading', { name: 'Before you begin' })).toBeNull() + expect( + screen.queryByRole('heading', { name: 'Before you begin' }) + ).toBeNull() }) it('does dispatch jog requests when not isJogging', () => { diff --git a/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx b/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx index 2338be01dde..2c841e4f91d 100644 --- a/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx +++ b/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx @@ -74,7 +74,9 @@ describe('ChooseProtocolSlideout', () => { }) screen.getByLabelText('protocol deck map') screen.getByText('fakeSrcFileName') - expect(screen.queryByRole('heading', { name: 'No protocols found' })).toBeNull() + expect( + screen.queryByRole('heading', { name: 'No protocols found' }) + ).toBeNull() }) it('renders an empty state if no protocol options', () => { mockGetStoredProtocols.mockReturnValue([]) @@ -95,7 +97,9 @@ describe('ChooseProtocolSlideout', () => { onCloseClick: jest.fn(), showSlideout: true, }) - const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) + const proceedButton = screen.getByRole('button', { + name: 'Proceed to setup', + }) fireEvent.click(proceedButton) expect(mockCreateRunFromProtocol).toHaveBeenCalledWith({ files: [expect.any(File)], @@ -116,7 +120,9 @@ describe('ChooseProtocolSlideout', () => { onCloseClick: jest.fn(), showSlideout: true, }) - const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) + const proceedButton = screen.getByRole('button', { + name: 'Proceed to setup', + }) fireEvent.click(proceedButton) expect(mockCreateRunFromProtocol).toHaveBeenCalledWith({ files: [expect.any(File)], @@ -139,14 +145,18 @@ describe('ChooseProtocolSlideout', () => { onCloseClick: jest.fn(), showSlideout: true, }) - const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) + const proceedButton = screen.getByRole('button', { + name: 'Proceed to setup', + }) fireEvent.click(proceedButton) expect(mockCreateRunFromProtocol).toHaveBeenCalledWith({ files: [expect.any(File)], protocolKey: storedProtocolDataFixture.protocolKey, }) expect(mockTrackCreateProtocolRunEvent).toHaveBeenCalled() - screen.getByText('This robot is busy and can’t run this protocol right now.') + screen.getByText( + 'This robot is busy and can’t run this protocol right now.' + ) const link = screen.getByRole('link', { name: 'Go to Robot' }) fireEvent.click(link) expect(link.getAttribute('href')).toEqual('/devices/opentrons-robot-name') diff --git a/app/src/organisms/ChooseProtocolSlideout/index.tsx b/app/src/organisms/ChooseProtocolSlideout/index.tsx index c87485efc53..db6a00c9345 100644 --- a/app/src/organisms/ChooseProtocolSlideout/index.tsx +++ b/app/src/organisms/ChooseProtocolSlideout/index.tsx @@ -67,9 +67,9 @@ export function ChooseProtocolSlideoutComponent( const srcFileObjects = selectedProtocol != null ? selectedProtocol.srcFiles.map((srcFileBuffer, index) => { - const srcFilePath = selectedProtocol.srcFileNames[index] - return new File([srcFileBuffer], path.basename(srcFilePath)) - }) + const srcFilePath = selectedProtocol.srcFileNames[index] + return new File([srcFileBuffer], path.basename(srcFilePath)) + }) : [] const { trackCreateProtocolRunEvent } = useTrackCreateProtocolRunEvent( @@ -101,10 +101,10 @@ export function ChooseProtocolSlideoutComponent( { hostname: robot.ip }, shouldApplyOffsets ? offsetCandidates.map(({ vector, location, definitionUri }) => ({ - vector, - location, - definitionUri, - })) + vector, + location, + definitionUri, + })) : [] ) const handleProceed: React.MouseEventHandler = () => { @@ -205,8 +205,8 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element { selectedProtocol != null && storedProtocol.protocolKey === selectedProtocol.protocolKey return ( - - + + { onCloseClick: jest.fn(), showSlideout: true, }) - const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) + const proceedButton = screen.getByRole('button', { + name: 'Proceed to setup', + }) expect(proceedButton).not.toBeDisabled() const otherRobot = screen.getByText('otherRobot') - otherRobot.click() // unselect default robot + fireEvent.click(otherRobot) // unselect default robot expect(proceedButton).not.toBeDisabled() const mockRobot = screen.getByText('opentrons-robot-name') - mockRobot.click() + fireEvent.click(mockRobot) expect(proceedButton).not.toBeDisabled() - proceedButton.click() + fireEvent.click(proceedButton) expect(mockCreateRunFromProtocolSource).toHaveBeenCalledWith({ files: [expect.any(File)], protocolKey: storedProtocolDataFixture.protocolKey, @@ -251,13 +253,15 @@ describe('ChooseRobotToRunProtocolSlideout', () => { onCloseClick: jest.fn(), showSlideout: true, }) - const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) + const proceedButton = screen.getByRole('button', { + name: 'Proceed to setup', + }) expect(proceedButton).toBeDisabled() screen.getByText( 'A robot software update is required to run protocols with this version of the Opentrons App.' ) const linkToRobotDetails = screen.getByText('Go to Robot') - linkToRobotDetails.click() + fireEvent.click(linkToRobotDetails) }) it('renders error state when there is a run creation error', () => { @@ -273,8 +277,10 @@ describe('ChooseRobotToRunProtocolSlideout', () => { onCloseClick: jest.fn(), showSlideout: true, }) - const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) - proceedButton.click() + const proceedButton = screen.getByRole('button', { + name: 'Proceed to setup', + }) + fireEvent.click(proceedButton) expect(mockCreateRunFromProtocolSource).toHaveBeenCalledWith({ files: [expect.any(File)], protocolKey: storedProtocolDataFixture.protocolKey, @@ -296,14 +302,18 @@ describe('ChooseRobotToRunProtocolSlideout', () => { onCloseClick: jest.fn(), showSlideout: true, }) - const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) - proceedButton.click() + const proceedButton = screen.getByRole('button', { + name: 'Proceed to setup', + }) + fireEvent.click(proceedButton) expect(mockCreateRunFromProtocolSource).toHaveBeenCalledWith({ files: [expect.any(File)], protocolKey: storedProtocolDataFixture.protocolKey, }) expect(mockTrackCreateProtocolRunEvent).toHaveBeenCalled() - screen.getByText('This robot is busy and can’t run this protocol right now.') + screen.getByText( + 'This robot is busy and can’t run this protocol right now.' + ) const link = screen.getByRole('link', { name: 'Go to Robot' }) fireEvent.click(link) expect(link.getAttribute('href')).toEqual('/devices/opentrons-robot-name') @@ -343,8 +353,10 @@ describe('ChooseRobotToRunProtocolSlideout', () => { ] ) expect(screen.getByRole('checkbox')).toBeChecked() - const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) - proceedButton.click() + const proceedButton = screen.getByRole('button', { + name: 'Proceed to setup', + }) + fireEvent.click(proceedButton) expect(mockCreateRunFromProtocolSource).toHaveBeenCalledWith({ files: [expect.any(File)], protocolKey: storedProtocolDataFixture.protocolKey, @@ -380,7 +392,9 @@ describe('ChooseRobotToRunProtocolSlideout', () => { fireEvent.click(otherRobot) // unselect default robot expect(screen.getByRole('checkbox')).toBeChecked() - const proceedButton = screen.getByRole('button', { name: 'Proceed to setup' }) + const proceedButton = screen.getByRole('button', { + name: 'Proceed to setup', + }) fireEvent.click(proceedButton) expect(mockUseCreateRunFromProtocol).nthCalledWith( 2, diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/AddFixtureModal.test.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/AddFixtureModal.test.tsx index a83e151844c..c384411b836 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/AddFixtureModal.test.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/AddFixtureModal.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' - +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { useDeckConfigurationQuery, @@ -53,21 +53,21 @@ describe('Touchscreen AddFixtureModal', () => { }) it('should render text and buttons', () => { - const [{ getByText, getAllByText }] = render(props) - getByText('Add to slot D3') - getByText( + render(props) + screen.getByText('Add to slot D3') + screen.getByText( 'Choose a fixture below to add to your deck configuration. It will be referenced during protocol analysis.' ) - getByText('Staging area slot') - getByText('Trash bin') - getByText('Waste chute') - expect(getAllByText('Add').length).toBe(2) - expect(getAllByText('Select options').length).toBe(1) + screen.getByText('Staging area slot') + screen.getByText('Trash bin') + screen.getByText('Waste chute') + expect(screen.getAllByText('Add').length).toBe(2) + expect(screen.getAllByText('Select options').length).toBe(1) }) it('should a mock function when tapping app button', () => { - const [{ getAllByText }] = render(props) - getAllByText('Add')[0].click() + render(props) + fireEvent.click(screen.getAllByText('Add')[0]) expect(mockSetCurrentDeckConfig).toHaveBeenCalled() }) }) @@ -90,70 +90,70 @@ describe('Desktop AddFixtureModal', () => { }) it('should render text and buttons slot D3', () => { - const [{ getByText, getAllByRole }] = render(props) - getByText('Add to slot D3') - getByText( + render(props) + screen.getByText('Add to slot D3') + screen.getByText( 'Add this fixture to your deck configuration. It will be referenced during protocol analysis.' ) - getByText('Staging area slot') - getByText('Trash bin') - getByText('Waste chute') - expect(getAllByRole('button', { name: 'Add' }).length).toBe(2) - expect(getAllByRole('button', { name: 'Select options' }).length).toBe(1) + screen.getByText('Staging area slot') + screen.getByText('Trash bin') + screen.getByText('Waste chute') + expect(screen.getAllByRole('button', { name: 'Add' }).length).toBe(2) + expect(screen.getAllByRole('button', { name: 'Select options' }).length).toBe(1) }) it('should render text and buttons slot A1', () => { props = { ...props, cutoutId: 'cutoutA1' } - const [{ getByText, getByRole }] = render(props) - getByText('Add to slot A1') - getByText( + render(props) + screen.getByText('Add to slot A1') + screen.getByText( 'Add this fixture to your deck configuration. It will be referenced during protocol analysis.' ) - getByText('Trash bin') - getByRole('button', { name: 'Add' }) + screen.getByText('Trash bin') + screen.getByRole('button', { name: 'Add' }) }) it('should render text and buttons slot B3', () => { props = { ...props, cutoutId: 'cutoutB3' } - const [{ getByText, getAllByRole }] = render(props) - getByText('Add to slot B3') - getByText( + render(props) + screen.getByText('Add to slot B3') + screen.getByText( 'Add this fixture to your deck configuration. It will be referenced during protocol analysis.' ) - getByText('Staging area slot') - getByText('Trash bin') - expect(getAllByRole('button', { name: 'Add' }).length).toBe(2) + screen.getByText('Staging area slot') + screen.getByText('Trash bin') + expect(screen.getAllByRole('button', { name: 'Add' }).length).toBe(2) }) it('should call a mock function when clicking add button', () => { props = { ...props, cutoutId: 'cutoutA1' } - const [{ getByRole }] = render(props) - getByRole('button', { name: 'Add' }).click() + render(props) + fireEvent.click(screen.getByRole('button', { name: 'Add' })) expect(mockUpdateDeckConfiguration).toHaveBeenCalled() }) it('should display appropriate Waste Chute options when the generic Waste Chute button is clicked', () => { - const [{ getByText, getByRole, getAllByRole }] = render(props) - getByRole('button', { name: 'Select options' }).click() - expect(getAllByRole('button', { name: 'Add' }).length).toBe( + render(props) + fireEvent.click(screen.getByRole('button', { name: 'Select options' })) + expect(screen.getAllByRole('button', { name: 'Add' }).length).toBe( WASTE_CHUTE_FIXTURES.length ) WASTE_CHUTE_FIXTURES.forEach(cutoutId => { const displayText = getFixtureDisplayName(cutoutId) - getByText(displayText) + screen.getByText(displayText) }) }) it('should allow a user to exit the Waste Chute submenu by clicking "go back"', () => { - const [{ getByText, getByRole, getAllByRole }] = render(props) - getByRole('button', { name: 'Select options' }).click() - - getByText('Go back').click() - getByText('Staging area slot') - getByText('Trash bin') - getByText('Waste chute') - expect(getAllByRole('button', { name: 'Add' }).length).toBe(2) - expect(getAllByRole('button', { name: 'Select options' }).length).toBe(1) + render(props) + fireEvent.click(screen.getByRole('button', { name: 'Select options' })) + + fireEvent.click(screen.getByText('Go back')) + screen.getByText('Staging area slot') + screen.getByText('Trash bin') + screen.getByText('Waste chute') + expect(screen.getAllByRole('button', { name: 'Add' }).length).toBe(2) + expect(screen.getAllByRole('button', { name: 'Select options' }).length).toBe(1) }) }) diff --git a/app/src/organisms/Devices/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx b/app/src/organisms/Devices/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx index 6048263ca89..41d17b30ccf 100644 --- a/app/src/organisms/Devices/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx +++ b/app/src/organisms/Devices/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx @@ -63,9 +63,9 @@ describe('useHeaterShakerModuleIdsFromRun', () => { }, ], } as any) - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook( () => useHeaterShakerModuleIdsFromRun(RUN_ID_1), { wrapper } @@ -133,9 +133,9 @@ describe('useHeaterShakerModuleIdsFromRun', () => { ], } as any) - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook( () => useHeaterShakerModuleIdsFromRun(RUN_ID_1), { wrapper } diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/LocationConflictModal.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/LocationConflictModal.test.tsx index 882ece03a2c..3bd30fa1bd7 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/LocationConflictModal.test.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/LocationConflictModal.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { UseQueryResult } from 'react-query' +import { screen, fireEvent } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { STAGING_AREA_RIGHT_SLOT_FIXTURE, @@ -51,16 +52,16 @@ describe('LocationConflictModal', () => { } as any) }) it('should render the modal information for a fixture conflict', () => { - const { getByText, getAllByText, getByRole } = render(props) - getByText('Deck location conflict') - getByText('Slot B3') - getByText('Protocol specifies') - getByText('Currently configured') - getAllByText('Staging area slot') - getByText('Trash bin') - getByRole('button', { name: 'Cancel' }).click() + render(props) + screen.getByText('Deck location conflict') + screen.getByText('Slot B3') + screen.getByText('Protocol specifies') + screen.getByText('Currently configured') + screen.getAllByText('Staging area slot') + screen.getByText('Trash bin') + fireEvent.click(screen.getByRole('button', { name: 'Cancel' })) expect(props.onCloseClick).toHaveBeenCalled() - getByRole('button', { name: 'Update deck' }).click() + fireEvent.click(screen.getByRole('button', { name: 'Update deck' })) expect(mockUpdate).toHaveBeenCalled() }) it('should render the modal information for a module fixture conflict', () => { @@ -69,13 +70,13 @@ describe('LocationConflictModal', () => { cutoutId: 'cutoutB3', requiredModule: 'heaterShakerModuleV1', } - const { getByText, getByRole } = render(props) - getByText('Protocol specifies') - getByText('Currently configured') - getByText('Heater-Shaker Module GEN1') - getByRole('button', { name: 'Cancel' }).click() + render(props) + screen.getByText('Protocol specifies') + screen.getByText('Currently configured') + screen.getByText('Heater-Shaker Module GEN1') + fireEvent.click(screen.getByRole('button', { name: 'Cancel' })) expect(props.onCloseClick).toHaveBeenCalled() - getByRole('button', { name: 'Confirm removal' }).click() + fireEvent.click(screen.getByRole('button', { name: 'Confirm removal' })) expect(mockUpdate).toHaveBeenCalled() }) it('should render correct info for a odd', () => { @@ -83,16 +84,16 @@ describe('LocationConflictModal', () => { ...props, isOnDevice: true, } - const { getByText, getAllByText } = render(props) - getByText('Deck location conflict') - getByText('Slot B3') - getByText('Protocol specifies') - getByText('Currently configured') - getAllByText('Staging area slot') - getByText('Trash bin') - getByText('Cancel').click() + render(props) + screen.getByText('Deck location conflict') + screen.getByText('Slot B3') + screen.getByText('Protocol specifies') + screen.getByText('Currently configured') + screen.getAllByText('Staging area slot') + screen.getByText('Trash bin') + fireEvent.click(screen.getByText('Cancel')) expect(props.onCloseClick).toHaveBeenCalled() - getByText('Confirm removal').click() + fireEvent.click(screen.getByText('Confirm removal')) expect(mockUpdate).toHaveBeenCalled() }) }) diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/__tests__/OpenJupyterControl.test.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/__tests__/OpenJupyterControl.test.tsx index 76310fc338d..d0d01efe775 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/__tests__/OpenJupyterControl.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/__tests__/OpenJupyterControl.test.tsx @@ -50,7 +50,7 @@ describe('RobotSettings OpenJupyterControl', () => { it('should render jupyter notebook link', () => { render() - const link = screen.getByRole('link', {name: 'Launch Jupyter Notebook'}) + const link = screen.getByRole('link', { name: 'Launch Jupyter Notebook' }) expect(link).toHaveAttribute('href', mockLink) expect(link).toHaveAttribute('target', '_blank') expect(link).toHaveAttribute('rel', 'noopener noreferrer') diff --git a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx index 30dbf146860..f91d5dea975 100644 --- a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/RobotUpdateProgressModal.test.tsx @@ -112,7 +112,9 @@ describe('DownloadUpdateModal', () => { render(props) expect(screen.getByText('Installing update...')).toBeInTheDocument() expect( - screen.getByText("This could take up to 15 minutes. Don't turn off the robot.") + screen.getByText( + "This could take up to 15 minutes. Don't turn off the robot." + ) ).toBeInTheDocument() expect(screen.queryByRole('button')).not.toBeInTheDocument() }) @@ -128,7 +130,9 @@ describe('DownloadUpdateModal', () => { screen.getByText('Install complete, robot restarting...') ).toBeInTheDocument() expect( - screen.getByText("This could take up to 15 minutes. Don't turn off the robot.") + screen.getByText( + "This could take up to 15 minutes. Don't turn off the robot." + ) ).toBeInTheDocument() expect(screen.queryByRole('button')).not.toBeInTheDocument() }) @@ -142,7 +146,9 @@ describe('DownloadUpdateModal', () => { const exitButton = screen.getByText('exit') - expect(screen.getByText('Robot software successfully updated')).toBeInTheDocument() + expect( + screen.getByText('Robot software successfully updated') + ).toBeInTheDocument() expect(exitButton).toBeInTheDocument() expect(mockCreateLiveCommand).toBeCalledTimes(1) fireEvent.click(exitButton) diff --git a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/useRobotUpdateInfo.test.tsx b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/useRobotUpdateInfo.test.tsx index db7cca239ab..5684ece0d3c 100644 --- a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/useRobotUpdateInfo.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/useRobotUpdateInfo.test.tsx @@ -24,7 +24,7 @@ const mockGetRobotUpdateDownloadProgress = getRobotUpdateDownloadProgress as jes describe('useRobotUpdateInfo', () => { let store: Store - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> const MOCK_ROBOT_NAME = 'testRobot' const mockRobotUpdateSession: RobotUpdateSession | null = { diff --git a/app/src/organisms/Devices/hooks/__tests__/useAttachedModules.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useAttachedModules.test.tsx index b105dfbf8ae..ec8420edf6b 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useAttachedModules.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useAttachedModules.test.tsx @@ -14,7 +14,7 @@ const mockUseModulesQuery = useModulesQuery as jest.MockedFunction< > describe('useAttachedModules hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> afterEach(() => { resetAllWhenMocks() jest.resetAllMocks() diff --git a/app/src/organisms/Devices/hooks/__tests__/useAttachedPipetteCalibrations.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useAttachedPipetteCalibrations.test.tsx index a4c4fe989ba..d2643cbacba 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useAttachedPipetteCalibrations.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useAttachedPipetteCalibrations.test.tsx @@ -50,7 +50,7 @@ const PIPETTE_CALIBRATIONS = { } describe('useAttachedPipetteCalibrations hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() wrapper = ({ children }) => ( diff --git a/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettes.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettes.test.tsx index 264ef56cf5b..c4fe96474cb 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettes.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettes.test.tsx @@ -22,7 +22,7 @@ const mockGetPipetteModelSpecs = getPipetteModelSpecs as jest.MockedFunction< > describe('useAttachedPipettes hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { mockGetPipetteModelSpecs.mockReturnValue({ name: 'mockName', diff --git a/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts b/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts index 201fe145a2d..4d169ce9330 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts +++ b/app/src/organisms/Devices/hooks/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts @@ -13,7 +13,7 @@ const mockUseInstrumentsQuery = useInstrumentsQuery as jest.MockedFunction< typeof useInstrumentsQuery > describe('useAttachedPipettesFromInstrumentsQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> it('returns attached pipettes', () => { mockUseInstrumentsQuery.mockReturnValue({ data: { diff --git a/app/src/organisms/Devices/hooks/__tests__/useCalibrationTaskList.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useCalibrationTaskList.test.tsx index 4a4a4ebd7e8..60f59f0e2b9 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useCalibrationTaskList.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useCalibrationTaskList.test.tsx @@ -56,7 +56,7 @@ const mockTipLengthCalLauncher = jest.fn() const mockDeckCalLauncher = jest.fn() describe('useCalibrationTaskList hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> let store: Store const mockDeleteCalibration = jest.fn() diff --git a/app/src/organisms/Devices/hooks/__tests__/useDeckCalibrationData.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useDeckCalibrationData.test.tsx index 462b414882a..439e645b316 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useDeckCalibrationData.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useDeckCalibrationData.test.tsx @@ -40,7 +40,7 @@ const store: Store = createStore(jest.fn(), {}) describe('useDeckCalibrationData hook', () => { let dispatchApiRequest: DispatchApiRequestType - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { dispatchApiRequest = jest.fn() const queryClient = new QueryClient() diff --git a/app/src/organisms/Devices/hooks/__tests__/useDeckCalibrationStatus.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useDeckCalibrationStatus.test.tsx index f7d3d5d6765..6549f430682 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useDeckCalibrationStatus.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useDeckCalibrationStatus.test.tsx @@ -26,7 +26,7 @@ const mockUseCalibrationStatusQuery = useCalibrationStatusQuery as jest.MockedFu const store: Store = createStore(jest.fn(), {}) describe('useDeckCalibrationStatus hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() wrapper = ({ children }) => ( diff --git a/app/src/organisms/Devices/hooks/__tests__/useIsFlex.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useIsFlex.test.tsx index 9b68a67e3b8..776d65b99cb 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useIsFlex.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useIsFlex.test.tsx @@ -18,7 +18,7 @@ const mockGetRobotModelByName = getRobotModelByName as jest.MockedFunction< const store: Store = createStore(jest.fn(), {}) describe('useIsFlex hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() wrapper = ({ children }) => ( diff --git a/app/src/organisms/Devices/hooks/__tests__/useIsRobotViewable.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useIsRobotViewable.test.tsx index b63b5ae39e7..df86235c9e7 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useIsRobotViewable.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useIsRobotViewable.test.tsx @@ -23,7 +23,7 @@ const mockGetDiscoverableRobotByName = getDiscoverableRobotByName as jest.Mocked const store: Store = createStore(jest.fn(), {}) describe('useIsRobotViewable hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() wrapper = ({ children }) => ( diff --git a/app/src/organisms/Devices/hooks/__tests__/useLPCDisabledReason.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useLPCDisabledReason.test.tsx index ef29096de57..bfc2ed3200e 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useLPCDisabledReason.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useLPCDisabledReason.test.tsx @@ -51,7 +51,9 @@ const simpleV6Protocol = (_uncastedSimpleV6Protocol as unknown) as ProtocolAnaly describe('useLPCDisabledReason', () => { const store: Store = createStore(jest.fn(), {}) - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} diff --git a/app/src/organisms/Devices/hooks/__tests__/useLights.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useLights.test.tsx index 0e729100e76..29c59e6f515 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useLights.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useLights.test.tsx @@ -23,7 +23,7 @@ const mockUseSetLightsMutation = useSetLightsMutation as jest.MockedFunction< const store: Store = createStore(jest.fn(), {}) describe('useLights hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> let setLights: jest.Mock beforeEach(() => { diff --git a/app/src/organisms/Devices/hooks/__tests__/useModuleCalibrationStatus.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useModuleCalibrationStatus.test.tsx index 829e624e0b8..8fbc1162e7b 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useModuleCalibrationStatus.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useModuleCalibrationStatus.test.tsx @@ -23,7 +23,7 @@ const mockUseIsFlex = useIsFlex as jest.MockedFunction const mockUseModuleRenderInfoForProtocolById = useModuleRenderInfoForProtocolById as jest.MockedFunction< typeof useModuleRenderInfoForProtocolById > -let wrapper: React.FunctionComponent<{children: React.ReactNode}> +let wrapper: React.FunctionComponent<{ children: React.ReactNode }> const mockMagneticModuleDefinition = { moduleId: 'someMagneticModule', diff --git a/app/src/organisms/Devices/hooks/__tests__/usePipetteOffsetCalibration.test.tsx b/app/src/organisms/Devices/hooks/__tests__/usePipetteOffsetCalibration.test.tsx index a6cfa0ff2ff..a30a036529b 100644 --- a/app/src/organisms/Devices/hooks/__tests__/usePipetteOffsetCalibration.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/usePipetteOffsetCalibration.test.tsx @@ -41,7 +41,7 @@ const MOUNT = 'left' as Mount describe('usePipetteOffsetCalibration hook', () => { let dispatchApiRequest: DispatchApiRequestType - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { dispatchApiRequest = jest.fn() const queryClient = new QueryClient() diff --git a/app/src/organisms/Devices/hooks/__tests__/usePipetteOffsetCalibrations.test.tsx b/app/src/organisms/Devices/hooks/__tests__/usePipetteOffsetCalibrations.test.tsx index 59bf766bc8d..755503279ca 100644 --- a/app/src/organisms/Devices/hooks/__tests__/usePipetteOffsetCalibrations.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/usePipetteOffsetCalibrations.test.tsx @@ -19,7 +19,7 @@ const mockUseAllPipetteOffsetCalibrationsQuery = useAllPipetteOffsetCalibrations const CALIBRATION_DATA_POLL_MS = 5000 describe('usePipetteOffsetCalibrations hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() wrapper = ({ children }) => ( diff --git a/app/src/organisms/Devices/hooks/__tests__/useProtocolMetadata.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useProtocolMetadata.test.tsx index 0a7dbaf3daa..8ed6189c5d0 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useProtocolMetadata.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useProtocolMetadata.test.tsx @@ -42,9 +42,9 @@ describe('useProtocolMetadata', () => { }) it('should return author, lastUpdated, method, description, and robot type', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook(useProtocolMetadata, { wrapper }) const { author, diff --git a/app/src/organisms/Devices/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx index e975d182225..0cfbb7fce93 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useProtocolRunAnalyticsData.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { resetAllWhenMocks, when } from 'jest-when' -import { renderHook, waitFor } from '@testing-library/react' +import { renderHook, waitFor } from '@testing-library/react' import { createStore, Store } from 'redux' import { Provider } from 'react-redux' import { QueryClient, QueryClientProvider } from 'react-query' @@ -40,7 +40,7 @@ const mockFormatInterval = formatInterval as jest.MockedFunction< typeof formatInterval > -let wrapper: React.FunctionComponent<{children: React.ReactNode}> +let wrapper: React.FunctionComponent<{ children: React.ReactNode }> let store: Store = createStore(jest.fn(), {}) const RUN_ID = '1' diff --git a/app/src/organisms/Devices/hooks/__tests__/useRobot.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useRobot.test.tsx index d020699c1e8..5f3320d2ea2 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useRobot.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useRobot.test.tsx @@ -19,7 +19,7 @@ const mockGetDiscoverableRobotByName = getDiscoverableRobotByName as jest.Mocked const store: Store = createStore(jest.fn(), {}) describe('useRobot hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() wrapper = ({ children }) => ( diff --git a/app/src/organisms/Devices/hooks/__tests__/useRobotAnalyticsData.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useRobotAnalyticsData.test.tsx index 730873b07c1..9719675a9f4 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useRobotAnalyticsData.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useRobotAnalyticsData.test.tsx @@ -48,7 +48,7 @@ const ATTACHED_PIPETTES = { right: { id: '2', model: 'testModelRight' }, } -let wrapper: React.FunctionComponent<{children: React.ReactNode}> +let wrapper: React.FunctionComponent<{ children: React.ReactNode }> let store: Store = createStore(jest.fn(), {}) describe('useProtocolAnalysisErrors hook', () => { diff --git a/app/src/organisms/Devices/hooks/__tests__/useRunCalibrationStatus.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useRunCalibrationStatus.test.tsx index 3d990442ff0..606bf409f89 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useRunCalibrationStatus.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useRunCalibrationStatus.test.tsx @@ -26,7 +26,7 @@ const mockUseIsFlex = useIsFlex as jest.MockedFunction const mockUseRunPipetteInfoByMount = useRunPipetteInfoByMount as jest.MockedFunction< typeof useRunPipetteInfoByMount > -let wrapper: React.FunctionComponent<{children: React.ReactNode}> +let wrapper: React.FunctionComponent<{ children: React.ReactNode }> describe('useRunCalibrationStatus hook', () => { beforeEach(() => { diff --git a/app/src/organisms/Devices/hooks/__tests__/useStoredProtocolAnalysis.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useStoredProtocolAnalysis.test.tsx index 8c0c507216a..c850e9c696c 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useStoredProtocolAnalysis.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useStoredProtocolAnalysis.test.tsx @@ -64,7 +64,7 @@ const PROTOCOL_ID = 'the_protocol_id' const PROTOCOL_KEY = 'the_protocol_key' describe('useStoredProtocolAnalysis hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() wrapper = ({ children }) => ( diff --git a/app/src/organisms/Devices/hooks/__tests__/useSyncRobotClock.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useSyncRobotClock.test.tsx index 0de1377c0fb..e8ec95a4a78 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useSyncRobotClock.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useSyncRobotClock.test.tsx @@ -13,7 +13,7 @@ jest.mock('../../../../redux/discovery') const store: Store = createStore(jest.fn(), {}) describe('useSyncRobotClock hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { store.dispatch = jest.fn() const queryClient = new QueryClient() diff --git a/app/src/organisms/Devices/hooks/__tests__/useTipLengthCalibrations.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useTipLengthCalibrations.test.tsx index de88f7ae51a..7934ce0f652 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useTipLengthCalibrations.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useTipLengthCalibrations.test.tsx @@ -19,7 +19,7 @@ const mockUseAllTipLengthCalibrationsQuery = useAllTipLengthCalibrationsQuery as const CALIBRATIONS_FETCH_MS = 5000 describe('useTipLengthCalibrations hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() wrapper = ({ children }) => ( diff --git a/app/src/organisms/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx index af9c794ea5f..de223800946 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useTrackCreateProtocolRunEvent.test.tsx @@ -36,7 +36,7 @@ const PROTOCOL_PROPERTIES = { protocolType: 'python' } as ProtocolAnalyticsData let mockTrackEvent: jest.Mock let mockGetProtocolRunAnalyticsData: jest.Mock -let wrapper: React.FunctionComponent<{children: React.ReactNode}> +let wrapper: React.FunctionComponent<{ children: React.ReactNode }> let store: Store = createStore(jest.fn(), {}) describe('useTrackCreateProtocolRunEvent hook', () => { diff --git a/app/src/organisms/Devices/hooks/__tests__/useTrackProtocolRunEvent.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useTrackProtocolRunEvent.test.tsx index 5e4c5a882ae..5dfff1c91b4 100644 --- a/app/src/organisms/Devices/hooks/__tests__/useTrackProtocolRunEvent.test.tsx +++ b/app/src/organisms/Devices/hooks/__tests__/useTrackProtocolRunEvent.test.tsx @@ -3,7 +3,7 @@ import { createStore, Store } from 'redux' import { Provider } from 'react-redux' import { QueryClient, QueryClientProvider } from 'react-query' import { resetAllWhenMocks, when } from 'jest-when' -import { waitFor, renderHook } from '@testing-library/react' +import { waitFor, renderHook } from '@testing-library/react' import { useTrackProtocolRunEvent } from '../useTrackProtocolRunEvent' import { useProtocolRunAnalyticsData } from '../useProtocolRunAnalyticsData' @@ -31,7 +31,7 @@ const PROTOCOL_PROPERTIES = { protocolType: 'python' } let mockTrackEvent: jest.Mock let mockGetProtocolRunAnalyticsData: jest.Mock -let wrapper: React.FunctionComponent<{children: React.ReactNode}> +let wrapper: React.FunctionComponent<{ children: React.ReactNode }> let store: Store = createStore(jest.fn(), {}) describe('useTrackProtocolRunEvent hook', () => { diff --git a/app/src/organisms/GripperCard/__tests__/GripperCard.test.tsx b/app/src/organisms/GripperCard/__tests__/GripperCard.test.tsx index aa3229b8537..152347006a4 100644 --- a/app/src/organisms/GripperCard/__tests__/GripperCard.test.tsx +++ b/app/src/organisms/GripperCard/__tests__/GripperCard.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { resetAllWhenMocks } from 'jest-when' import { renderWithProviders } from '@opentrons/components' import { useCurrentSubsystemUpdateQuery } from '@opentrons/react-api-client' -import { fireEvent } from '@testing-library/react' import { i18n } from '../../../i18n' import { GripperWizardFlows } from '../../GripperWizardFlows' import { AboutGripperSlideout } from '../AboutGripperSlideout' @@ -60,18 +60,18 @@ describe('GripperCard', () => { }) it('renders correct info when gripper is attached', () => { - const { getByText, getByRole } = render(props) - const image = getByRole('img', { name: 'Flex Gripper' }) + render(props) + const image = screen.getByRole('img', { name: 'Flex Gripper' }) expect(image.getAttribute('src')).toEqual('flex_gripper.png') - getByText('extension mount') - getByText('Flex Gripper') - const overflowButton = getByRole('button', { + screen.getByText('extension mount') + screen.getByText('Flex Gripper') + const overflowButton = screen.getByRole('button', { name: /overflow/i, }) fireEvent.click(overflowButton) - getByText('Recalibrate gripper') - getByText('Detach gripper') - getByText('About gripper') + screen.getByText('Recalibrate gripper') + screen.getByText('Detach gripper') + screen.getByText('About gripper') }) it('renders recalibrate banner when no calibration data is present', () => { props = props = { @@ -91,38 +91,38 @@ describe('GripperCard', () => { isRunActive: false, } - const { getByText } = render(props) - getByText('Calibration needed.') + render(props) + screen.getByText('Calibration needed.') }) it('opens the about gripper slideout when button is pressed', () => { - const { getByText, getByRole } = render(props) - const overflowButton = getByRole('button', { + render(props) + const overflowButton = screen.getByRole('button', { name: /overflow/i, }) - overflowButton.click() - const aboutGripperButton = getByText('About gripper') - aboutGripperButton.click() - getByText('about gripper') + fireEvent.click(overflowButton) + const aboutGripperButton = screen.getByText('About gripper') + fireEvent.click(aboutGripperButton) + screen.getByText('about gripper') }) it('renders wizard flow when recalibrate button is pressed', () => { - const { getByText, getByRole } = render(props) - const overflowButton = getByRole('button', { + render(props) + const overflowButton = screen.getByRole('button', { name: /overflow/i, }) - overflowButton.click() - const recalibrateGripperButton = getByText('Recalibrate gripper') + fireEvent.click(overflowButton) + const recalibrateGripperButton = screen.getByText('Recalibrate gripper') recalibrateGripperButton.click() - getByText('wizard flow launched') + screen.getByText('wizard flow launched') }) it('renders wizard flow when detach button is pressed', () => { - const { getByText, getByRole } = render(props) - const overflowButton = getByRole('button', { + render(props) + const overflowButton = screen.getByRole('button', { name: /InstrumentCard_overflowMenu/i, }) - overflowButton.click() - const detachGripperButton = getByText('Detach gripper') + fireEvent.click(overflowButton) + const detachGripperButton = screen.getByText('Detach gripper') detachGripperButton.click() - getByText('wizard flow launched') + screen.getByText('wizard flow launched') }) it('renders wizard flow when attach button is pressed', () => { props = { @@ -131,14 +131,14 @@ describe('GripperCard', () => { setSubsystemToUpdate: jest.fn(), isRunActive: false, } - const { getByText, getByRole } = render(props) - const overflowButton = getByRole('button', { + render(props) + const overflowButton = screen.getByRole('button', { name: /overflow/i, }) - overflowButton.click() - const attachGripperButton = getByText('Attach gripper') + fireEvent.click(overflowButton) + const attachGripperButton = screen.getByText('Attach gripper') attachGripperButton.click() - getByText('wizard flow launched') + screen.getByText('wizard flow launched') }) it('renders firmware update needed state if gripper is bad', () => { props = { @@ -149,11 +149,11 @@ describe('GripperCard', () => { setSubsystemToUpdate: jest.fn(), isRunActive: false, } - const { getByText } = render(props) - getByText('Extension mount') - getByText('Instrument attached') - getByText('Firmware update available.') - getByText('Update now').click() + render(props) + screen.getByText('Extension mount') + screen.getByText('Instrument attached') + screen.getByText('Firmware update available.') + screen.getByText('Update now').click() expect(props.setSubsystemToUpdate).toHaveBeenCalledWith('gripper') }) it('renders firmware update in progress state if gripper is bad and update in progress', () => { @@ -168,9 +168,9 @@ describe('GripperCard', () => { setSubsystemToUpdate: jest.fn(), isRunActive: false, } - const { getByText } = render(props) - getByText('Extension mount') - getByText('Instrument attached') - getByText('Firmware update in progress...') + render(props) + screen.getByText('Extension mount') + screen.getByText('Instrument attached') + screen.getByText('Firmware update in progress...') }) }) diff --git a/app/src/organisms/GripperWizardFlows/__tests__/ExitConfirmation.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/ExitConfirmation.test.tsx index 1ab98b628f3..acc0ec95572 100644 --- a/app/src/organisms/GripperWizardFlows/__tests__/ExitConfirmation.test.tsx +++ b/app/src/organisms/GripperWizardFlows/__tests__/ExitConfirmation.test.tsx @@ -44,15 +44,19 @@ describe('ExitConfirmation', () => { }) it('renders correct text for attach flow', () => { - render({ flowType: GRIPPER_FLOW_TYPES.ATTACH, }) + render({ flowType: GRIPPER_FLOW_TYPES.ATTACH }) screen.getByText('Attach Gripper progress will be lost') - screen.getByText('Are you sure you want to exit before completing Attach Gripper?') + screen.getByText( + 'Are you sure you want to exit before completing Attach Gripper?' + ) }) it('renders correct text for detach flow', () => { render({ flowType: GRIPPER_FLOW_TYPES.DETACH }) screen.getByText('Detach Gripper progress will be lost') - screen.getByText('Are you sure you want to exit before completing Detach Gripper?') + screen.getByText( + 'Are you sure you want to exit before completing Detach Gripper?' + ) }) it('renders correct text for recalibrate flow', () => { diff --git a/app/src/organisms/GripperWizardFlows/__tests__/MovePin.test.tsx b/app/src/organisms/GripperWizardFlows/__tests__/MovePin.test.tsx index 17056a7d6d7..8e50185a79a 100644 --- a/app/src/organisms/GripperWizardFlows/__tests__/MovePin.test.tsx +++ b/app/src/organisms/GripperWizardFlows/__tests__/MovePin.test.tsx @@ -24,7 +24,6 @@ describe('MovePin', () => { const mockSetFrontJawOffset = jest.fn() const mockRunId = 'fakeRunId' - const render = ( props: Partial> = {} ) => { @@ -133,7 +132,9 @@ describe('MovePin', () => { screen.getByText( 'Remove the calibration pin from the front jaw and attach it to the rear jaw.' ) - const continueButton = screen.getByRole('button', { name: 'Continue calibration' }) + const continueButton = screen.getByRole('button', { + name: 'Continue calibration', + }) fireEvent.click(continueButton) await expect(mockCreateRunCommand).toHaveBeenNthCalledWith(1, { @@ -188,7 +189,9 @@ describe('MovePin', () => { screen.getByText( 'Take the calibration pin from the rear gripper jaw and return it to its storage location.' ) - const complete = screen.getByRole('button', { name: 'Complete calibration' }) + const complete = screen.getByRole('button', { + name: 'Complete calibration', + }) fireEvent.click(complete) expect(mockProceed).toHaveBeenCalled() }) diff --git a/app/src/organisms/LabwareDetails/__tests__/LabwareDetails.test.tsx b/app/src/organisms/LabwareDetails/__tests__/LabwareDetails.test.tsx index 493f4c09d91..63fba6a150a 100644 --- a/app/src/organisms/LabwareDetails/__tests__/LabwareDetails.test.tsx +++ b/app/src/organisms/LabwareDetails/__tests__/LabwareDetails.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' -import { fireEvent, screen } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import { fireEvent, screen, waitFor } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' @@ -15,6 +16,7 @@ import { WellDimensions } from '../WellDimensions' import { WellSpacing } from '../WellSpacing' import { LabwareDetails } from '..' +import { act } from 'react-dom/test-utils' jest.mock('../../../pages/Labware/hooks') jest.mock('../../LabwareCard/CustomLabwareOverflowMenu') @@ -108,16 +110,25 @@ describe('LabwareDetails', () => { expect(screen.queryByText('Opentrons Definition')).not.toBeInTheDocument() }) - it('when clicking copy icon, should show tooltip as feedback', () => { - render(props) - const button = screen.getByTestId('labwareDetails_slideout_close_button') - fireEvent.click(button) - screen.getByText('Copied') - }) + it.todo('when clicking copy icon, should show tooltip as feedback') + // NOTE: popper updates internally async so item is not visible, + // it might be worth mocking it's implementation + // + // , async () => { + // const user = userEvent.setup() + // render(props) + // const button = screen.getByRole('button', { name: 'copy' }) + // user.click(button) + // await waitFor(() => { + // expect(screen.queryByText(/Copied!/i)).not.toBeNull() + // }) + // }) it('should close the slideout when clicking the close button', () => { render(props) - const closeButton = screen.getByTestId('labwareDetails_slideout_close_button') + const closeButton = screen.getByTestId( + 'labwareDetails_slideout_close_button' + ) fireEvent.click(closeButton) expect(props.onClose).toHaveBeenCalled() }) diff --git a/app/src/organisms/LabwareDetails/index.tsx b/app/src/organisms/LabwareDetails/index.tsx index 014832ac9b0..f366a530eed 100644 --- a/app/src/organisms/LabwareDetails/index.tsx +++ b/app/src/organisms/LabwareDetails/index.tsx @@ -168,7 +168,7 @@ export function LabwareDetails(props: LabwareDetailsProps): JSX.Element { marginBottom={SPACING.spacing24} > {t('api_name')} - + {apiName} @@ -178,6 +178,7 @@ export function LabwareDetails(props: LabwareDetailsProps): JSX.Element { {showToolTip && ( + {t('copied')} diff --git a/app/src/organisms/LabwareOffsetTabs/__tests__/LabwareOffsetTabs.test.tsx b/app/src/organisms/LabwareOffsetTabs/__tests__/LabwareOffsetTabs.test.tsx index 9e110336f46..bb871b98c56 100644 --- a/app/src/organisms/LabwareOffsetTabs/__tests__/LabwareOffsetTabs.test.tsx +++ b/app/src/organisms/LabwareOffsetTabs/__tests__/LabwareOffsetTabs.test.tsx @@ -2,6 +2,7 @@ import * as React from 'react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' import { LabwareOffsetTabs } from '..' +import { fireEvent, screen } from '@testing-library/react' const mockTableComponent =
    Table Component
    const mockJupyterComponent =
    Jupyter Component
    @@ -22,19 +23,19 @@ const render = () => { describe('LabwareOffsetTabs', () => { it('renders the TableComponent by default', () => { - const { getByText } = render() - expect(getByText('Table Component')).toBeVisible() + render() + expect(screen.getByText('Table Component')).toBeVisible() }) it('renders the JupyterComponent when Juypter Notebook tab is clicked', () => { - const { getByText } = render() - getByText('Jupyter Notebook').click() - expect(getByText('Jupyter Component')).toBeVisible() + render() + fireEvent.click(screen.getByText('Jupyter Notebook')) + expect(screen.getByText('Jupyter Component')).toBeVisible() }) it('renders the CommandLineComponent when Command Line Interface tab is clicked', () => { - const { getByText } = render() - getByText('Command Line Interface (SSH)').click() - expect(getByText('CLI Component')).toBeVisible() + render() + fireEvent.click(screen.getByText('Command Line Interface (SSH)')) + expect(screen.getByText('CLI Component')).toBeVisible() }) }) diff --git a/app/src/organisms/LabwarePositionCheck/__tests__/CheckItem.test.tsx b/app/src/organisms/LabwarePositionCheck/__tests__/CheckItem.test.tsx index d30ef8b1d3e..9035c87e627 100644 --- a/app/src/organisms/LabwarePositionCheck/__tests__/CheckItem.test.tsx +++ b/app/src/organisms/LabwarePositionCheck/__tests__/CheckItem.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { screen } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { resetAllWhenMocks, when } from 'jest-when' import { renderWithProviders, nestedTextMatcher } from '@opentrons/components' import { @@ -59,7 +59,9 @@ describe('CheckItem', () => { it('renders correct copy when preparing space with tip rack', () => { render(props) screen.getByRole('heading', { name: 'Prepare tip rack in Slot D1' }) - screen.getByText('Clear all deck slots of labware, leaving modules in place') + screen.getByText( + 'Clear all deck slots of labware, leaving modules in place' + ) screen.getAllByText(/Place/i) screen.getAllByText(/a full Mock TipRack Definition/i) screen.getAllByText(/into/i) @@ -76,7 +78,9 @@ describe('CheckItem', () => { render(props) screen.getByRole('heading', { name: 'Prepare labware in Slot D2' }) - screen.getByText('Clear all deck slots of labware, leaving modules in place') + screen.getByText( + 'Clear all deck slots of labware, leaving modules in place' + ) screen.getAllByText(/Place a/i) screen.getAllByText(/Mock Labware Definition/i) screen.getAllByText(/into/i) @@ -122,7 +126,7 @@ describe('CheckItem', () => { ]) ) const { getByRole } = render(props) - await getByRole('button', { name: 'Confirm placement' }).click() + await fireEvent.click(getByRole('button', { name: 'Confirm placement' })) await expect(props.chainRunCommands).toHaveBeenNthCalledWith( 1, [ @@ -200,7 +204,7 @@ describe('CheckItem', () => { ]) ) const { getByRole } = render(props) - await getByRole('button', { name: 'Confirm placement' }).click() + await fireEvent.click(getByRole('button', { name: 'Confirm placement' })) await expect(props.chainRunCommands).toHaveBeenNthCalledWith( 1, [ @@ -275,7 +279,7 @@ describe('CheckItem', () => { ]) ) const { getByRole } = render(props) - await getByRole('button', { name: 'Confirm placement' }).click() + await fireEvent.click(getByRole('button', { name: 'Confirm placement' })) await expect(props.chainRunCommands).toHaveBeenNthCalledWith( 1, [ @@ -375,7 +379,7 @@ describe('CheckItem', () => { ]) ) const { getByRole } = render(props) - await getByRole('button', { name: 'Confirm placement' }).click() + await fireEvent.click(getByRole('button', { name: 'Confirm placement' })) await expect(props.chainRunCommands).toHaveBeenNthCalledWith( 1, [ @@ -431,7 +435,7 @@ describe('CheckItem', () => { ], } const { getByRole } = render(props) - await getByRole('button', { name: 'Go back' }).click() + await fireEvent.click(getByRole('button', { name: 'Go back' })) await expect(props.chainRunCommands).toHaveBeenNthCalledWith( 1, @@ -516,7 +520,7 @@ describe('CheckItem', () => { ], } const { getByRole } = render(props) - await getByRole('button', { name: 'Confirm position' }).click() + await fireEvent.click(getByRole('button', { name: 'Confirm position' })) await expect(props.chainRunCommands).toHaveBeenNthCalledWith( 1, @@ -601,7 +605,7 @@ describe('CheckItem', () => { ], false ) - await getByRole('button', { name: 'Confirm placement' }).click() + await fireEvent.click(getByRole('button', { name: 'Confirm placement' })) await expect(props.chainRunCommands).toHaveBeenNthCalledWith( 2, @@ -732,7 +736,7 @@ describe('CheckItem', () => { ) const { getByRole } = render(props) - await getByRole('button', { name: 'Confirm position' }).click() + await fireEvent.click(getByRole('button', { name: 'Confirm position' })) await expect(props.chainRunCommands).toHaveBeenNthCalledWith( 1, @@ -857,7 +861,7 @@ describe('CheckItem', () => { ]) ) const { getByRole } = render(props) - await getByRole('button', { name: 'Confirm placement' }).click() + await fireEvent.click(getByRole('button', { name: 'Confirm placement' })) await expect(props.chainRunCommands).toHaveBeenNthCalledWith( 1, [ diff --git a/app/src/organisms/LabwarePositionCheck/__tests__/PickUpTip.test.tsx b/app/src/organisms/LabwarePositionCheck/__tests__/PickUpTip.test.tsx index 58f4fd6b379..8f46768b82d 100644 --- a/app/src/organisms/LabwarePositionCheck/__tests__/PickUpTip.test.tsx +++ b/app/src/organisms/LabwarePositionCheck/__tests__/PickUpTip.test.tsx @@ -66,7 +66,9 @@ describe('PickUpTip', () => { render(props) screen.getByRole('heading', { name: 'Prepare tip rack in Slot D1' }) screen.getByText('Place modules on deck') - screen.getByText('Clear all deck slots of labware, leaving modules in place') + screen.getByText( + 'Clear all deck slots of labware, leaving modules in place' + ) screen.getByText('a full Mock TipRack Definition') screen.getByText('Slot D1') screen.getByRole('button', { name: 'Confirm placement' }) @@ -84,7 +86,9 @@ describe('PickUpTip', () => { it('renders correct copy when preparing space on desktop if protocol has no modules', () => { render(props) screen.getByRole('heading', { name: 'Prepare tip rack in Slot D1' }) - screen.getByText('Clear all deck slots of labware, leaving modules in place') + screen.getByText( + 'Clear all deck slots of labware, leaving modules in place' + ) screen.getByText('a full Mock TipRack Definition') screen.getByText('Slot D1') screen.getByRole('button', { name: 'Confirm placement' }) @@ -109,7 +113,9 @@ describe('PickUpTip', () => { }, ], }) - screen.getByRole('heading', { name: 'Pick up tip from tip rack in Slot D1' }) + screen.getByRole('heading', { + name: 'Pick up tip from tip rack in Slot D1', + }) screen.getByText( "Ensure that the pipette nozzle furthest from you is centered above and level with the top of the tip in the A1 position. If it isn't, use the controls below or your keyboard to jog the pipette until it is properly aligned." ) @@ -128,7 +134,9 @@ describe('PickUpTip', () => { }, ], }) - screen.getByRole('heading', { name: 'Pick up tip from tip rack in Slot D1' }) + screen.getByRole('heading', { + name: 'Pick up tip from tip rack in Slot D1', + }) screen.getByText( nestedTextMatcher( "Ensure that the pipette nozzle furthest from you is centered above and level with the top of the tip in the A1 position. If it isn't, tap Move pipette and then jog the pipette until it is properly aligned." @@ -295,7 +303,9 @@ describe('PickUpTip', () => { ], false ) - screen.getByRole('heading', { name: 'Did pipette pick up tip successfully?' }) + screen.getByRole('heading', { + name: 'Did pipette pick up tip successfully?', + }) }) const tryAgain = screen.getByRole('button', { name: 'Try again' }) fireEvent.click(tryAgain) @@ -445,7 +455,9 @@ describe('PickUpTip', () => { ], false ) - screen.getByRole('heading', { name: 'Did pipette pick up tip successfully?' }) + screen.getByRole('heading', { + name: 'Did pipette pick up tip successfully?', + }) }) const yesButton = screen.getByRole('button', { name: 'Yes' }) fireEvent.click(yesButton) diff --git a/app/src/organisms/LabwarePositionCheck/__tests__/ReturnTip.test.tsx b/app/src/organisms/LabwarePositionCheck/__tests__/ReturnTip.test.tsx index f03618bfe95..be355741516 100644 --- a/app/src/organisms/LabwarePositionCheck/__tests__/ReturnTip.test.tsx +++ b/app/src/organisms/LabwarePositionCheck/__tests__/ReturnTip.test.tsx @@ -57,7 +57,9 @@ describe('ReturnTip', () => { getByText(/Mock TipRack Definition/i) getByText(/that you used before back into/i) getByText('Slot D1') - getByText(/The pipette will return tips to their original location in the rack./i) + getByText( + /The pipette will return tips to their original location in the rack./i + ) getByRole('link', { name: 'Need help?' }) }) it('renders correct copy on device', () => { @@ -68,7 +70,9 @@ describe('ReturnTip', () => { getByText(/Mock TipRack Definition/i) getByText(/that you used before back into/i) getByText('Slot D1') - getByText(/The pipette will return tips to their original location in the rack./i) + getByText( + /The pipette will return tips to their original location in the rack./i + ) }) it('executes correct chained commands when CTA is clicked', async () => { const { getByRole } = render(props) diff --git a/app/src/organisms/LabwarePositionCheck/__tests__/useLaunchLPC.test.tsx b/app/src/organisms/LabwarePositionCheck/__tests__/useLaunchLPC.test.tsx index 006bc3a184d..50eeda7b12e 100644 --- a/app/src/organisms/LabwarePositionCheck/__tests__/useLaunchLPC.test.tsx +++ b/app/src/organisms/LabwarePositionCheck/__tests__/useLaunchLPC.test.tsx @@ -63,7 +63,7 @@ const mockCurrentOffsets: LabwareOffset[] = [ const mockLabwareDef = fixture_tiprack_300_ul as LabwareDefinition2 describe('useLaunchLPC hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> let mockCreateMaintenanceRun: jest.Mock let mockCreateLabwareDefinition: jest.Mock let mockDeleteMaintenanceRun: jest.Mock diff --git a/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx b/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx index 1ea389ba6be..5a8c655cb7f 100644 --- a/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx +++ b/app/src/organisms/ModuleCard/__tests__/hooks.test.tsx @@ -200,7 +200,9 @@ describe('useLatchControls', () => { }) it('should return latch is open and handle latch function and command to close latch', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -222,7 +224,9 @@ describe('useLatchControls', () => { }) }) it('should return if latch is closed and handle latch function opens latch', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -271,7 +275,9 @@ describe('useModuleOverflowMenu', () => { jest.restoreAllMocks() }) it('should return everything for menuItemsByModuleType and create deactive heater command', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -310,7 +316,9 @@ describe('useModuleOverflowMenu', () => { const mockAboutClick = jest.fn() const mockTestShakeClick = jest.fn() const mockHandleWizard = jest.fn() - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -340,7 +348,9 @@ describe('useModuleOverflowMenu', () => { it('should return only 1 menu button when module is a magnetic module and calls handleClick when module is disengaged', () => { const mockHandleClick = jest.fn() - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -368,7 +378,9 @@ describe('useModuleOverflowMenu', () => { }) it('should render magnetic module and create disengage command', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -404,7 +416,9 @@ describe('useModuleOverflowMenu', () => { it('should render temperature module and call handleClick when module is idle', () => { const mockHandleClick = jest.fn() - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -431,7 +445,9 @@ describe('useModuleOverflowMenu', () => { }) it('should render temp module and create deactivate temp command', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -466,7 +482,9 @@ describe('useModuleOverflowMenu', () => { it('should render TC module and call handleClick when module is idle', () => { const mockHandleClick = jest.fn() - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -493,7 +511,9 @@ describe('useModuleOverflowMenu', () => { }) it('should render TC module and create open lid command', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -529,7 +549,9 @@ describe('useModuleOverflowMenu', () => { }) it('should render TC module and create deactivate lid command', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -565,7 +587,9 @@ describe('useModuleOverflowMenu', () => { }) it('should render TC module gen 2 and create a close lid command', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -638,9 +662,9 @@ describe('useIsHeaterShakerInProtocol', () => { }) it('should return true when a heater shaker is in the protocol', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook(useIsHeaterShakerInProtocol, { wrapper }) const isHeaterShakerInProtocol = result.current @@ -662,9 +686,9 @@ describe('useIsHeaterShakerInProtocol', () => { }) ), } as any) - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook(useIsHeaterShakerInProtocol, { wrapper }) const isHeaterShakerInProtocol = result.current diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx index bdeda2789fc..1c68a52555d 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/hooks/__tests__/useHardwareStatusText.test.tsx @@ -12,7 +12,7 @@ const mockUseFeatureFlag = useFeatureFlag as jest.MockedFunction< > describe('useHardwareStatusText', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { wrapper = ({ children }) => ( {children} diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx index 378c8955a41..131a9e57fca 100644 --- a/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx +++ b/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx @@ -60,16 +60,18 @@ describe('ChoosePipette', () => { screen.getByText('96-Channel pipette') screen.getByAltText('1- or 8-Channel pipette') screen.getByAltText('96-Channel pipette') - const singleMountPipettes = screen.getByRole('radio', {name: '1- or 8-Channel pipette 1- or 8-Channel pipette'}) - const ninetySixPipette = screen.getByRole('radio', {name: '96-Channel pipette 96-Channel pipette'}) + const singleMountPipettes = screen.getByRole('radio', { + name: '1- or 8-Channel pipette 1- or 8-Channel pipette', + }) + const ninetySixPipette = screen.getByRole('radio', { + name: '96-Channel pipette 96-Channel pipette', + }) // Single and 8-Channel pipettes are selected first by default expect(singleMountPipettes).toHaveStyle( `background-color: ${COLORS.lightBlue}` ) - expect(ninetySixPipette).toHaveStyle( - `background-color: ${COLORS.white}` - ) + expect(ninetySixPipette).toHaveStyle(`background-color: ${COLORS.white}`) // Selecting 96-Channel called setSelectedPipette prop fireEvent.click(ninetySixPipette) @@ -130,11 +132,13 @@ describe('ChoosePipette', () => { it('renders the 96 channel pipette option selected', () => { props = { ...props, selectedPipette: NINETY_SIX_CHANNEL } render(props) - const singleMountPipettes = screen.getByRole('radio', {name: '1- or 8-Channel pipette 1- or 8-Channel pipette'}) - const ninetySixPipette = screen.getByRole('radio', {name: '96-Channel pipette 96-Channel pipette'}) - expect(singleMountPipettes).toHaveStyle( - `background-color: ${COLORS.white}` - ) + const singleMountPipettes = screen.getByRole('radio', { + name: '1- or 8-Channel pipette 1- or 8-Channel pipette', + }) + const ninetySixPipette = screen.getByRole('radio', { + name: '96-Channel pipette 96-Channel pipette', + }) + expect(singleMountPipettes).toHaveStyle(`background-color: ${COLORS.white}`) expect(ninetySixPipette).toHaveStyle( `background-color: ${COLORS.lightBlue}` ) @@ -147,7 +151,9 @@ describe('ChoosePipette', () => { }) props = { ...props, selectedPipette: NINETY_SIX_CHANNEL } render(props) - screen.getByText('Detach Flex 1-Channel 1000 μL and attach 96-Channel pipette') + screen.getByText( + 'Detach Flex 1-Channel 1000 μL and attach 96-Channel pipette' + ) }) it('renders the correct text for the 96 channel button when there is a right pipette attached', () => { mockGetIsGantryEmpty.mockReturnValue(false) @@ -157,6 +163,8 @@ describe('ChoosePipette', () => { }) props = { ...props, selectedPipette: NINETY_SIX_CHANNEL } render(props) - screen.getByText('Detach Flex 1-Channel 1000 μL and attach 96-Channel pipette') + screen.getByText( + 'Detach Flex 1-Channel 1000 μL and attach 96-Channel pipette' + ) }) }) diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx index 5721fdd539c..f44332e5fe9 100644 --- a/app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx +++ b/app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx @@ -65,13 +65,13 @@ describe('Results', () => { totalStepCount: 6, hasCalData: true, } - const { getByText, getByRole } = render(props) - getByText('Flex 1-Channel 1000 μL successfully recalibrated') - const image = getByRole('img', { name: 'Success Icon' }) + render(props) + screen.getByText('Flex 1-Channel 1000 μL successfully recalibrated') + const image = screen.getByRole('img', { name: 'Success Icon' }) expect(image.getAttribute('src')).toEqual('icon_success.png') - getByText('Exit') - const exit = getByRole('button', { name: 'Results_exit' }) + screen.getByText('Exit') + const exit = screen.getByRole('button', { name: 'Results_exit' }) fireEvent.click(exit) expect(props.handleCleanUpAndClose).toHaveBeenCalled() }) @@ -81,13 +81,13 @@ describe('Results', () => { ...props, flowType: FLOWS.ATTACH, } - const { getByText, getByRole } = render(props) - getByText('Flex 1-Channel 1000 μL successfully attached') - const image = getByRole('img', { name: 'Success Icon' }) + render(props) + screen.getByText('Flex 1-Channel 1000 μL successfully attached') + const image = screen.getByRole('img', { name: 'Success Icon' }) expect(image.getAttribute('src')).toEqual('icon_success.png') - getByRole('img', { name: 'Success Icon' }) - getByRole('button', { name: 'Results_exit' }) - fireEvent.click(getByText('Calibrate pipette')) + screen.getByRole('img', { name: 'Success Icon' }) + screen.getByRole('button', { name: 'Results_exit' }) + fireEvent.click(screen.getByText('Calibrate pipette')) expect(props.chainRunCommands).toHaveBeenCalledWith( [ { @@ -117,8 +117,8 @@ describe('Results', () => { .mockImplementationOnce(() => Promise.reject(new Error('error'))), flowType: FLOWS.ATTACH, } - const { getByRole } = render(props) - const exit = getByRole('button', { name: 'Results_exit' }) + render(props) + const exit = screen.getByRole('button', { name: 'Results_exit' }) fireEvent.click(exit) expect(props.chainRunCommands).toHaveBeenCalledWith( [ @@ -147,12 +147,12 @@ describe('Results', () => { attachedPipettes: { left: null, right: null }, flowType: FLOWS.ATTACH, } - const { getByText, getByRole, getByLabelText } = render(props) - getByText('Unable to detect pipette') - expect(getByLabelText('ot-alert')).toHaveStyle( + render(props) + screen.getByText('Unable to detect pipette') + expect(screen.getByLabelText('ot-alert')).toHaveStyle( `color: ${String(COLORS.errorEnabled)}` ) - getByRole('button', { name: 'Try again' }).click() + fireEvent.click(screen.getByRole('button', { name: 'Try again' })) await act(() => pipettePromise) expect(mockRefetchInstruments).toHaveBeenCalled() }) @@ -163,12 +163,12 @@ describe('Results', () => { currentStepIndex: 6, flowType: FLOWS.DETACH, } - const { getByText, getByRole } = render(props) - getByText('Pipette successfully detached') - const image = getByRole('img', { name: 'Success Icon' }) + render(props) + screen.getByText('Pipette successfully detached') + const image = screen.getByRole('img', { name: 'Success Icon' }) expect(image.getAttribute('src')).toEqual('icon_success.png') - getByRole('img', { name: 'Success Icon' }) - const exit = getByRole('button', { name: 'Results_exit' }) + screen.getByRole('img', { name: 'Success Icon' }) + const exit = screen.getByRole('button', { name: 'Results_exit' }) fireEvent.click(exit) expect(props.handleCleanUpAndClose).toHaveBeenCalled() }) @@ -177,12 +177,12 @@ describe('Results', () => { ...props, flowType: FLOWS.DETACH, } - const { getByText, getByRole, getByLabelText } = render(props) - getByText('Flex 1-Channel 1000 μL still attached') - expect(getByLabelText('ot-alert')).toHaveStyle( + render(props) + screen.getByText('Flex 1-Channel 1000 μL still attached') + expect(screen.getByLabelText('ot-alert')).toHaveStyle( `color: ${String(COLORS.errorEnabled)}` ) - getByRole('button', { name: 'Try again' }) + screen.getByRole('button', { name: 'Try again' }) }) it('renders the error exit as disabled when is Fetching is true', () => { props = { @@ -190,8 +190,8 @@ describe('Results', () => { flowType: FLOWS.DETACH, isFetching: true, } - const { getByRole } = render(props) - expect(getByRole('button', { name: 'Results_errorExit' })).toBeDisabled() + render(props) + expect(screen.getByRole('button', { name: 'Results_errorExit' })).toBeDisabled() }) it('does not render error exit when is on device', () => { props = { @@ -210,12 +210,12 @@ describe('Results', () => { flowType: FLOWS.DETACH, selectedPipette: NINETY_SIX_CHANNEL, } - const { getByText, getByRole, getByLabelText } = render(props) - getByText('Flex 1-Channel 1000 μL still attached') - expect(getByLabelText('ot-alert')).toHaveStyle( + render(props) + screen.getByText('Flex 1-Channel 1000 μL still attached') + expect(screen.getByLabelText('ot-alert')).toHaveStyle( `color: ${String(COLORS.errorEnabled)}` ) - getByRole('button', { name: 'Try again' }).click() + fireEvent.click(screen.getByRole('button', { name: 'Try again' })) await act(() => pipettePromise) }) it('renders the correct information when pipette wizard is a success for detaching before 96 channel attach flow', () => { @@ -225,13 +225,13 @@ describe('Results', () => { attachedPipettes: { left: null, right: null }, selectedPipette: NINETY_SIX_CHANNEL, } - const { getByText, getByRole } = render(props) - getByText('All pipettes successfully detached') - const image = getByRole('img', { name: 'Success Icon' }) + render(props) + screen.getByText('All pipettes successfully detached') + const image = screen.getByRole('img', { name: 'Success Icon' }) expect(image.getAttribute('src')).toEqual('icon_success.png') - getByRole('img', { name: 'Success Icon' }) - getByText('attach pipette') - const exit = getByRole('button', { name: 'Results_exit' }) + screen.getByRole('img', { name: 'Success Icon' }) + screen.getByText('attach pipette') + const exit = screen.getByRole('button', { name: 'Results_exit' }) fireEvent.click(exit) expect(props.proceed).toHaveBeenCalled() }) @@ -240,12 +240,12 @@ describe('Results', () => { ...props, flowType: FLOWS.CALIBRATE, } - const { getByText, getByRole } = render(props) - getByText('Flex 1-Channel 1000 μL successfully attached and calibrated') - const image = getByRole('img', { name: 'Success Icon' }) + render(props) + screen.getByText('Flex 1-Channel 1000 μL successfully attached and calibrated') + const image = screen.getByRole('img', { name: 'Success Icon' }) expect(image.getAttribute('src')).toEqual('icon_success.png') - getByRole('img', { name: 'Success Icon' }) - getByRole('button', { name: 'Results_exit' }).click() + screen.getByRole('img', { name: 'Success Icon' }) + fireEvent.click(screen.getByRole('button', { name: 'Results_exit' })) expect(props.proceed).toHaveBeenCalled() }) it('renders the correct information when pipette wizard succeeds to calibrate in attach flow 96-channel with pipette attached initially ', () => { @@ -255,12 +255,12 @@ describe('Results', () => { currentStepIndex: 9, totalStepCount: 9, } - const { getByText, getByRole } = render(props) - getByText('Flex 1-Channel 1000 μL successfully attached and calibrated') - const image = getByRole('img', { name: 'Success Icon' }) + render(props) + screen.getByText('Flex 1-Channel 1000 μL successfully attached and calibrated') + const image = screen.getByRole('img', { name: 'Success Icon' }) expect(image.getAttribute('src')).toEqual('icon_success.png') - getByRole('img', { name: 'Success Icon' }) - getByRole('button', { name: 'Results_exit' }).click() + screen.getByRole('img', { name: 'Success Icon' }) + fireEvent.click(screen.getByRole('button', { name: 'Results_exit' })) expect(props.handleCleanUpAndClose).toHaveBeenCalled() }) it('renders the correct information when pipette wizard succeeds to calibrate in attach flow single mount', () => { @@ -270,12 +270,12 @@ describe('Results', () => { currentStepIndex: 5, totalStepCount: 5, } - const { getByText, getByRole } = render(props) - getByText('Flex 1-Channel 1000 μL successfully attached and calibrated') - const image = getByRole('img', { name: 'Success Icon' }) + render(props) + screen.getByText('Flex 1-Channel 1000 μL successfully attached and calibrated') + const image = screen.getByRole('img', { name: 'Success Icon' }) expect(image.getAttribute('src')).toEqual('icon_success.png') - getByRole('img', { name: 'Success Icon' }) - getByRole('button', { name: 'Results_exit' }).click() + screen.getByRole('img', { name: 'Success Icon' }) + fireEvent.click(screen.getByRole('button', { name: 'Results_exit' })) expect(props.handleCleanUpAndClose).toHaveBeenCalled() }) it('renders the correct information for success pipette cal on ODD', () => { @@ -284,12 +284,12 @@ describe('Results', () => { isOnDevice: true, hasCalData: true, } - const { getByText, getByRole } = render(props) - getByText('Flex 1-Channel 1000 μL successfully recalibrated') - const image = getByRole('img', { name: 'Success Icon' }) + render(props) + screen.getByText('Flex 1-Channel 1000 μL successfully recalibrated') + const image = screen.getByRole('img', { name: 'Success Icon' }) expect(image.getAttribute('src')).toEqual('icon_success.png') - getByRole('img', { name: 'Success Icon' }) - getByRole('button', { name: 'SmallButton_primary' }).click() + screen.getByRole('img', { name: 'Success Icon' }) + fireEvent.click(screen.getByRole('button', { name: 'SmallButton_primary' })) expect(props.proceed).toHaveBeenCalled() }) it('renders the correct information when pipette wizard is a fail for attach flow on ODD', async () => { @@ -299,12 +299,12 @@ describe('Results', () => { flowType: FLOWS.ATTACH, isOnDevice: true, } - const { getByText, getByRole, getByLabelText } = render(props) - getByText('Unable to detect pipette') - expect(getByLabelText('ot-alert')).toHaveStyle( + render(props) + screen.getByText('Unable to detect pipette') + expect(screen.getByLabelText('ot-alert')).toHaveStyle( `color: ${String(COLORS.errorEnabled)}` ) - getByRole('button', { name: 'SmallButton_primary' }).click() + fireEvent.click(screen.getByRole('button', { name: 'SmallButton_primary' })) await act(() => pipettePromise) expect(mockRefetchInstruments).toHaveBeenCalled() }) @@ -318,11 +318,11 @@ describe('Results', () => { mount: LEFT, }, } - const { getByText, getByRole } = render(props) - getByText('Flex 1-Channel 1000 μL successfully attached') - const image = getByRole('img', { name: 'Success Icon' }) + render(props) + screen.getByText('Flex 1-Channel 1000 μL successfully attached') + const image = screen.getByRole('img', { name: 'Success Icon' }) expect(image.getAttribute('src')).toEqual('icon_success.png') - getByRole('img', { name: 'Success Icon' }) + screen.getByRole('img', { name: 'Success Icon' }) }) it('renders the correct information when attaching wrong pipette for run setup', async () => { props = { @@ -334,10 +334,10 @@ describe('Results', () => { mount: LEFT, }, } - const { getByText, getByRole } = render(props) - getByText('Wrong instrument installed') - getByText('Install Flex 8-Channel 50 μL instead') - getByRole('button', { name: 'Detach and retry' }).click() + render(props) + screen.getByText('Wrong instrument installed') + screen.getByText('Install Flex 8-Channel 50 μL instead') + fireEvent.click(screen.getByRole('button', { name: 'Detach and retry' })) await act(() => pipettePromise) expect(mockRefetchInstruments).toHaveBeenCalled() }) diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/hooks.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/hooks.test.tsx index 8352f0dd1c8..62f6c281aae 100644 --- a/app/src/organisms/PipetteWizardFlows/__tests__/hooks.test.tsx +++ b/app/src/organisms/PipetteWizardFlows/__tests__/hooks.test.tsx @@ -22,7 +22,7 @@ const BASE_PROPS_FOR_RUN_SETUP = { } describe('usePipetteFlowWizardHeaderText', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { wrapper = ({ children }) => ( {children} diff --git a/app/src/organisms/ProtocolDetails/__tests__/ProtocolDetails.test.tsx b/app/src/organisms/ProtocolDetails/__tests__/ProtocolDetails.test.tsx index 4700231bd4a..bd15f2226bb 100644 --- a/app/src/organisms/ProtocolDetails/__tests__/ProtocolDetails.test.tsx +++ b/app/src/organisms/ProtocolDetails/__tests__/ProtocolDetails.test.tsx @@ -1,7 +1,10 @@ import * as React from 'react' import '@testing-library/jest-dom' import { resetAllWhenMocks, when } from 'jest-when' -import { partialComponentPropsMatcher, renderWithProviders } from '@opentrons/components' +import { + partialComponentPropsMatcher, + renderWithProviders, +} from '@opentrons/components' import { StaticRouter } from 'react-router-dom' import { waitFor } from '@testing-library/react' import { i18n } from '../../../i18n' @@ -28,7 +31,6 @@ import { ChooseRobotToRunProtocolSlideout } from '../../ChooseRobotToRunProtocol import type { ProtocolAnalysisOutput } from '@opentrons/shared-data' - jest.mock('../../../redux/analytics') jest.mock('../../../redux/custom-labware/selectors') jest.mock('../../../redux/discovery/selectors') diff --git a/app/src/organisms/ProtocolSetupLabware/__tests__/ProtocolSetupLabware.test.tsx b/app/src/organisms/ProtocolSetupLabware/__tests__/ProtocolSetupLabware.test.tsx index 29d134884b9..ef360bf6dec 100644 --- a/app/src/organisms/ProtocolSetupLabware/__tests__/ProtocolSetupLabware.test.tsx +++ b/app/src/organisms/ProtocolSetupLabware/__tests__/ProtocolSetupLabware.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { when, resetAllWhenMocks } from 'jest-when' import { MemoryRouter } from 'react-router-dom' @@ -84,30 +85,29 @@ describe('ProtocolSetupLabware', () => { }) it('renders the Labware Setup page', () => { - const [{ getByText, getByRole }] = render() - getByText('Labware') - getByText('Labware name') - getByText('Location') - getByRole('button', { name: 'Map View' }) + render() + screen.getByText('Labware') + screen.getByText('Labware name') + screen.getByText('Location') + screen.getByRole('button', { name: 'Map View' }) }) it('correctly navigates with the nav button', () => { - const [{ getAllByRole }] = render() - getAllByRole('button')[0].click() + render() + screen.getAllByRole('button')[0].click() expect(mockSetSetupScreen).toHaveBeenCalledWith('prepare to run') }) it('should launch and close the deck map', () => { - const [{ getByRole, getByText, getByLabelText }] = render() - - getByRole('button', { name: 'Map View' }).click() - getByLabelText('closeIcon').click() - getByText('Labware') + render() + screen.getByRole('button', { name: 'Map View' }).click() + screen.getByLabelText('closeIcon').click() + screen.getByText('Labware') }) it('sends a latch-close command when the labware latch is open and the button is clicked', () => { - const [{ getByText }] = render() - getByText('Labware Latch').click() + render() + fireEvent.click(screen.getByText('Labware Latch')) expect(mockCreateLiveCommand).toHaveBeenCalledWith({ command: { commandType: 'heaterShaker/closeLabwareLatch', @@ -124,8 +124,8 @@ describe('ProtocolSetupLabware', () => { ...mockUseModulesQueryClosed, refetch: mockRefetch, } as any) - const [{ getByText }] = render() - getByText('Labware Latch').click() + render() + fireEvent.click(screen.getByText('Labware Latch')) expect(mockCreateLiveCommand).toHaveBeenCalledWith({ command: { commandType: 'heaterShaker/openLabwareLatch', @@ -140,21 +140,21 @@ describe('ProtocolSetupLabware', () => { it('shows opening transition states of the labware latch button', () => { mockUseModulesQuery.mockReturnValue(mockUseModulesQueryOpening as any) - const [{ getByText }] = render() - getByText('Opening...') + render() + screen.getByText('Opening...') }) it('shows closing transition state of the labware latch button', () => { mockUseModulesQuery.mockReturnValue(mockUseModulesQueryClosing as any) - const [{ getByText }] = render() - getByText('Closing...') + render() + screen.getByText('Closing...') }) it('defaults to open when latch status is unknown', () => { mockUseModulesQuery.mockReturnValue(mockUseModulesQueryUnknown as any) - const [{ getByText }] = render() - getByText('Open') + render() + screen.getByText('Open') }) }) diff --git a/app/src/organisms/ProtocolUpload/hooks/__tests__/useCloneRun.test.tsx b/app/src/organisms/ProtocolUpload/hooks/__tests__/useCloneRun.test.tsx index 151f9a126a7..dac795f678c 100644 --- a/app/src/organisms/ProtocolUpload/hooks/__tests__/useCloneRun.test.tsx +++ b/app/src/organisms/ProtocolUpload/hooks/__tests__/useCloneRun.test.tsx @@ -23,7 +23,7 @@ const HOST_CONFIG: HostConfig = { hostname: 'localhost' } const RUN_ID: string = 'run_id' describe('useCloneRun hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { when(mockUseHost).calledWith().mockReturnValue(HOST_CONFIG) @@ -43,7 +43,9 @@ describe('useCloneRun hook', () => { .mockReturnValue({ createRun: jest.fn() } as any) const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/app/src/organisms/ProtocolsLanding/__tests__/hooks.test.tsx b/app/src/organisms/ProtocolsLanding/__tests__/hooks.test.tsx index 1b4d5560c9a..dc9e5c0b01a 100644 --- a/app/src/organisms/ProtocolsLanding/__tests__/hooks.test.tsx +++ b/app/src/organisms/ProtocolsLanding/__tests__/hooks.test.tsx @@ -286,9 +286,9 @@ describe('useSortedProtocols', () => { }) it('should return an object with protocols sorted alphabetically', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook( () => useSortedProtocols('alphabetical', mockStoredProtocolData), @@ -310,9 +310,9 @@ describe('useSortedProtocols', () => { }) it('should return an object with protocols sorted reverse alphabetically', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook( () => useSortedProtocols('reverse', mockStoredProtocolData), @@ -334,9 +334,9 @@ describe('useSortedProtocols', () => { }) it('should return an object with protocols sorted by most recent modified data', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook( () => useSortedProtocols('recent', mockStoredProtocolData), @@ -358,9 +358,9 @@ describe('useSortedProtocols', () => { }) it('should return an object with protocols sorted by oldest modified data', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook( () => useSortedProtocols('oldest', mockStoredProtocolData), @@ -382,9 +382,9 @@ describe('useSortedProtocols', () => { }) it('should return an object with protocols sorted by flex then ot-2', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook( () => useSortedProtocols('flex', mockStoredProtocolData), @@ -405,9 +405,9 @@ describe('useSortedProtocols', () => { ) }) it('should return an object with protocols sorted by ot-2 then flex', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook( () => useSortedProtocols('ot2', mockStoredProtocolData), diff --git a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx index 1687b533f69..72e116b90e4 100644 --- a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx +++ b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/__tests__/ModuleCalibrationOverflowMenu.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { waitFor } from '@testing-library/react' +import { fireEvent, screen, waitFor } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../../i18n' @@ -131,24 +131,24 @@ describe('ModuleCalibrationOverflowMenu', () => { }) it('should render overflow menu buttons - not calibrated', () => { - const [{ getByText, getByLabelText }] = render(props) - getByLabelText('ModuleCalibrationOverflowMenu').click() - getByText('Calibrate module') + render(props) + fireEvent.click(screen.getByLabelText('ModuleCalibrationOverflowMenu')) + screen.getByText('Calibrate module') }) it('should render overflow menu buttons - calibrated', () => { props = { ...props, isCalibrated: true } - const [{ getByText, getByLabelText }] = render(props) - getByLabelText('ModuleCalibrationOverflowMenu').click() - getByText('Recalibrate module') + render(props) + fireEvent.click(screen.getByLabelText('ModuleCalibrationOverflowMenu')) + screen.getByText('Recalibrate module') }) it('should call a mock function when clicking calibrate button', async () => { - const [{ getByText, getByLabelText }] = render(props) - getByLabelText('ModuleCalibrationOverflowMenu').click() - getByText('Calibrate module').click() + render(props) + fireEvent.click(screen.getByLabelText('ModuleCalibrationOverflowMenu')) + fireEvent.click(screen.getByText('Calibrate module')) await waitFor(() => { - getByText('module wizard flows') + screen.getByText('module wizard flows') }) }) @@ -157,9 +157,9 @@ describe('ModuleCalibrationOverflowMenu', () => { ...props, attachedModule: mockHotHeaterShaker, } - const [{ getByText, getByLabelText }] = render(props) - getByLabelText('ModuleCalibrationOverflowMenu').click() - expect(getByText('Calibrate module')).toBeDisabled() + render(props) + fireEvent.click(screen.getByLabelText('ModuleCalibrationOverflowMenu')) + expect(screen.getByText('Calibrate module')).toBeDisabled() }) it('should call a mock function when clicking calibrate button for moving heater-shaker calling stop shaking and open latch command', async () => { @@ -167,9 +167,9 @@ describe('ModuleCalibrationOverflowMenu', () => { ...props, attachedModule: mockMovingHeaterShaker, } - const [{ getByText, getByLabelText }] = render(props) - getByLabelText('ModuleCalibrationOverflowMenu').click() - getByText('Calibrate module').click() + render(props) + fireEvent.click(screen.getByLabelText('ModuleCalibrationOverflowMenu')) + fireEvent.click(screen.getByText('Calibrate module')) await waitFor(() => { expect(mockChainLiveCommands).toHaveBeenCalledWith( [ @@ -201,7 +201,7 @@ describe('ModuleCalibrationOverflowMenu', () => { false ) }) - getByText('module wizard flows') + screen.getByText('module wizard flows') }) it('should call a mock function when clicking calibrate button for heated temp module', async () => { @@ -209,9 +209,9 @@ describe('ModuleCalibrationOverflowMenu', () => { ...props, attachedModule: mockTemperatureModuleHeating, } - const [{ getByText, getByLabelText }] = render(props) - getByLabelText('ModuleCalibrationOverflowMenu').click() - getByText('Calibrate module').click() + render(props) + fireEvent.click(screen.getByLabelText('ModuleCalibrationOverflowMenu')) + fireEvent.click(screen.getByText('Calibrate module')) await waitFor(() => { expect(mockChainLiveCommands).toHaveBeenCalledWith( [ @@ -225,7 +225,7 @@ describe('ModuleCalibrationOverflowMenu', () => { false ) }) - getByText('module wizard flows') + screen.getByText('module wizard flows') }) it('should call a mock function when clicking calibrate button for heated TC module with lid closed', async () => { @@ -233,9 +233,9 @@ describe('ModuleCalibrationOverflowMenu', () => { ...props, attachedModule: mockTCHeating, } - const [{ getByText, getByLabelText }] = render(props) - getByLabelText('ModuleCalibrationOverflowMenu').click() - getByText('Calibrate module').click() + render(props) + fireEvent.click(screen.getByLabelText('ModuleCalibrationOverflowMenu')) + fireEvent.click(screen.getByText('Calibrate module')) await waitFor(() => { expect(mockChainLiveCommands).toHaveBeenCalledWith( [ @@ -261,22 +261,22 @@ describe('ModuleCalibrationOverflowMenu', () => { false ) }) - getByText('module wizard flows') + screen.getByText('module wizard flows') }) it('should be disabled when not calibrated module and pipette is not attached', () => { props.formattedPipetteOffsetCalibrations = [] as any - const [{ getByText, getByLabelText }] = render(props) - getByLabelText('ModuleCalibrationOverflowMenu').click() - expect(getByText('Calibrate module')).toBeDisabled() + render(props) + fireEvent.click(screen.getByLabelText('ModuleCalibrationOverflowMenu')) + expect(screen.getByText('Calibrate module')).toBeDisabled() }) it('should be disabled when not calibrated module and pipette is not calibrated', () => { props.formattedPipetteOffsetCalibrations[0].lastCalibrated = undefined props.formattedPipetteOffsetCalibrations[1].lastCalibrated = undefined - const [{ getByText, getByLabelText }] = render(props) - getByLabelText('ModuleCalibrationOverflowMenu').click() - expect(getByText('Calibrate module')).toBeDisabled() + render(props) + fireEvent.click(screen.getByLabelText('ModuleCalibrationOverflowMenu')) + expect(screen.getByText('Calibrate module')).toBeDisabled() }) it('should be disabled when running', () => { @@ -286,8 +286,8 @@ describe('ModuleCalibrationOverflowMenu', () => { isRunIdle: false, isRunTerminal: false, }) - const [{ getByText, getByLabelText }] = render(props) - getByLabelText('ModuleCalibrationOverflowMenu').click() - expect(getByText('Calibrate module')).toBeDisabled() + render(props) + fireEvent.click(screen.getByLabelText('ModuleCalibrationOverflowMenu')) + expect(screen.getByText('Calibrate module')).toBeDisabled() }) }) diff --git a/app/src/organisms/RobotSettingsCalibration/__tests__/CalibrationHealthCheck.test.tsx b/app/src/organisms/RobotSettingsCalibration/__tests__/CalibrationHealthCheck.test.tsx index 4c9c6432714..821f6e8796f 100644 --- a/app/src/organisms/RobotSettingsCalibration/__tests__/CalibrationHealthCheck.test.tsx +++ b/app/src/organisms/RobotSettingsCalibration/__tests__/CalibrationHealthCheck.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' -import { fireEvent, waitFor, screen } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import { fireEvent, screen, waitFor } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' @@ -146,12 +147,13 @@ describe('CalibrationHealthCheck', () => { }) it('Health check button shows Tooltip when pipette are not set', async () => { + const user = userEvent.setup() mockUseAttachedPipettes.mockReturnValue({ left: null, right: null }) render() const button = screen.getByRole('button', { name: 'Check health' }) - fireEvent.mouseMove(button) - await waitFor(async () => { - await screen.findByText('Fully calibrate your robot before checking calibration health') + user.hover(button) + await waitFor(() => { + expect(screen.getByText('Fully calibrate your robot before checking calibration health')).toBeInTheDocument() }) }) diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/__tests__/hooks.test.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/__tests__/hooks.test.tsx index 9e83149087d..2f9cacd205c 100644 --- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/__tests__/hooks.test.tsx +++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/__tests__/hooks.test.tsx @@ -32,7 +32,7 @@ const mockDisplaySettings = { } describe('useIsUnboxingFlowOngoing', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { wrapper = ({ children }) => {children} mockGetOnDeviceDisplaySettings.mockReturnValue(mockDisplaySettings) diff --git a/app/src/pages/Devices/CalibrationDashboard/hooks/__tests__/useDashboardCalibrateDeck.test.tsx b/app/src/pages/Devices/CalibrationDashboard/hooks/__tests__/useDashboardCalibrateDeck.test.tsx index ef13a93a0c3..dfb51cd673d 100644 --- a/app/src/pages/Devices/CalibrationDashboard/hooks/__tests__/useDashboardCalibrateDeck.test.tsx +++ b/app/src/pages/Devices/CalibrationDashboard/hooks/__tests__/useDashboardCalibrateDeck.test.tsx @@ -1,140 +1,3 @@ -import * as React from 'react' -import uniqueId from 'lodash/uniqueId' -import { mountWithStore, renderWithProviders } from '@opentrons/components' -import { act } from 'react-dom/test-utils' - -import { LoadingState } from '../../../../../organisms/CalibrationPanels' -import * as RobotApi from '../../../../../redux/robot-api' -import * as Sessions from '../../../../../redux/sessions' -import { i18n } from '../../../../../i18n' -import { mockDeckCalibrationSessionAttributes } from '../../../../../redux/sessions/__fixtures__' - -import { useDashboardCalibrateDeck } from '../useDashboardCalibrateDeck' - -import type { DashboardCalDeckInvoker } from '../useDashboardCalibrateDeck' - -jest.mock('../../../../../redux/sessions/selectors') -jest.mock('../../../../../redux/robot-api/selectors') -jest.mock('lodash/uniqueId') - -const mockUniqueId = uniqueId as jest.MockedFunction -const mockGetRobotSessionOfType = Sessions.getRobotSessionOfType as jest.MockedFunction< - typeof Sessions.getRobotSessionOfType -> -const mockGetRequestById = RobotApi.getRequestById as jest.MockedFunction< - typeof RobotApi.getRequestById -> - describe('useDashboardCalibrateDeck hook', () => { - let startCalibration: DashboardCalDeckInvoker - let CalWizardComponent: JSX.Element | null - const robotName = 'robotName' - - const TestUseDashboardCalibrateDeck = (): JSX.Element => { - const [_startCalibration, _CalWizardComponent] = useDashboardCalibrateDeck( - robotName - ) - React.useEffect(() => { - startCalibration = _startCalibration - CalWizardComponent = _CalWizardComponent - }) - return <>{CalWizardComponent} - } - - beforeEach(() => { - let mockIdCounter = 0 - mockUniqueId.mockImplementation(() => `mockId_${mockIdCounter++}`) - }) - - afterEach(() => { - jest.resetAllMocks() - }) - - it('returns start callback, and no wizard if session not present', () => { - const [, store] = renderWithProviders(, { - initialState: { robotApi: {}, sessions: {} }, - i18nInstance: i18n, - }) - expect(typeof startCalibration).toBe('function') - expect(CalWizardComponent).toBe(null) - - act(() => startCalibration()) - - expect(store.dispatch).toHaveBeenCalledWith({ - ...Sessions.ensureSession( - robotName, - Sessions.SESSION_TYPE_DECK_CALIBRATION - ), - meta: { requestId: expect.any(String) }, - }) - }) - - it('wizard should appear after create request succeeds with session and close on closeWizard', () => { - const seshId = 'fake-session-id' - const mockDeckCalSession = { - id: seshId, - ...mockDeckCalibrationSessionAttributes, - details: { - ...mockDeckCalibrationSessionAttributes.details, - currentStep: Sessions.DECK_STEP_CALIBRATION_COMPLETE, - }, - } - const { store, wrapper } = mountWithStore( - , - { - initialState: { robotApi: {} }, - } - ) - mockGetRobotSessionOfType.mockReturnValue(mockDeckCalSession) - mockGetRequestById.mockReturnValue({ - status: RobotApi.SUCCESS, - response: { - method: 'POST', - ok: true, - path: '/', - status: 200, - }, - }) - act(() => startCalibration()) - wrapper.setProps({}) - expect(CalWizardComponent).not.toBe(null) - - wrapper.find('button[aria-label="Exit"]').invoke('onClick')?.( - {} as React.MouseEvent - ) - wrapper.find('button[aria-label="Exit"]').invoke('onClick')?.( - {} as React.MouseEvent - ) - wrapper.setProps({}) - expect(store.dispatch).toHaveBeenCalledWith({ - ...Sessions.deleteSession(robotName, seshId), - meta: { requestId: expect.any(String) }, - }) - mockGetRobotSessionOfType.mockReturnValue(null) - wrapper.setProps({}) - expect(CalWizardComponent).toBe(null) - }) - - it('loading state modal should appear while session is being created', () => { - const seshId = 'fake-session-id' - const mockDeckCalSession = { - id: seshId, - ...mockDeckCalibrationSessionAttributes, - details: { - ...mockDeckCalibrationSessionAttributes.details, - currentStep: Sessions.DECK_STEP_SESSION_STARTED, - }, - } - const { wrapper } = mountWithStore(, { - initialState: { robotApi: {} }, - }) - mockGetRobotSessionOfType.mockReturnValue(mockDeckCalSession) - mockGetRequestById.mockReturnValue({ - status: RobotApi.PENDING, - }) - act(() => startCalibration()) - wrapper.setProps({}) - expect(CalWizardComponent).not.toBe(null) - expect(LoadingState).not.toBe(null) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/pages/Devices/CalibrationDashboard/hooks/__tests__/useDashboardCalibratePipOffset.test.tsx b/app/src/pages/Devices/CalibrationDashboard/hooks/__tests__/useDashboardCalibratePipOffset.test.tsx index 3107bb05c53..81141777be9 100644 --- a/app/src/pages/Devices/CalibrationDashboard/hooks/__tests__/useDashboardCalibratePipOffset.test.tsx +++ b/app/src/pages/Devices/CalibrationDashboard/hooks/__tests__/useDashboardCalibratePipOffset.test.tsx @@ -1,161 +1,3 @@ -import * as React from 'react' -import uniqueId from 'lodash/uniqueId' -import { mountWithStore, renderWithProviders } from '@opentrons/components' -import { act } from 'react-dom/test-utils' - -import { LoadingState } from '../../../../../organisms/CalibrationPanels' -import * as RobotApi from '../../../../../redux/robot-api' -import * as Sessions from '../../../../../redux/sessions' -import { mockPipetteOffsetCalibrationSessionAttributes } from '../../../../../redux/sessions/__fixtures__' - -import { useDashboardCalibratePipOffset } from '../useDashboardCalibratePipOffset' -import { pipetteOffsetCalibrationStarted } from '../../../../../redux/analytics' - -import type { DashboardCalOffsetInvoker } from '../useDashboardCalibratePipOffset' -import { i18n } from '../../../../../i18n' - -jest.mock('../../../../../redux/sessions/selectors') -jest.mock('../../../../../redux/robot-api/selectors') -jest.mock('lodash/uniqueId') - -const mockUniqueId = uniqueId as jest.MockedFunction -const mockGetRobotSessionOfType = Sessions.getRobotSessionOfType as jest.MockedFunction< - typeof Sessions.getRobotSessionOfType -> -const mockGetRequestById = RobotApi.getRequestById as jest.MockedFunction< - typeof RobotApi.getRequestById -> - describe('useDashboardCalibratePipOffset hook', () => { - let startCalibration: DashboardCalOffsetInvoker - let CalWizardComponent: JSX.Element | null - const robotName = 'robotName' - const mountString = 'left' - const onComplete = jest.fn() - - const TestUseDashboardCalibratePipOffset = (): JSX.Element => { - const [ - _startCalibration, - _CalWizardComponent, - ] = useDashboardCalibratePipOffset(robotName, onComplete) - React.useEffect(() => { - startCalibration = _startCalibration - CalWizardComponent = _CalWizardComponent - }) - return <>{CalWizardComponent} - } - - beforeEach(() => { - let mockIdCounter = 0 - mockUniqueId.mockImplementation(() => `mockId_${mockIdCounter++}`) - }) - - afterEach(() => { - jest.resetAllMocks() - }) - - it('returns start callback, and no wizard if session not present', () => { - const [, store] = renderWithProviders( - , - { - initialState: { robotApi: {}, sessions: {} }, - i18nInstance: i18n, - } - ) - expect(typeof startCalibration).toBe('function') - expect(CalWizardComponent).toBe(null) - - act(() => - startCalibration({ - params: { mount: mountString }, - }) - ) - - expect(store.dispatch).toHaveBeenCalledWith({ - ...Sessions.ensureSession( - robotName, - Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION, - { - mount: mountString, - shouldRecalibrateTipLength: false, - hasCalibrationBlock: false, - tipRackDefinition: null, - } - ), - meta: { requestId: expect.any(String) }, - }) - expect(store.dispatch).toHaveBeenCalledWith( - pipetteOffsetCalibrationStarted(mountString, false, false, null) - ) - }) - - it('wizard should appear after create request succeeds with session and close on closeWizard', () => { - const seshId = 'fake-session-id' - const mockPipOffsetCalSession = { - id: seshId, - ...mockPipetteOffsetCalibrationSessionAttributes, - details: { - ...mockPipetteOffsetCalibrationSessionAttributes.details, - currentStep: Sessions.PIP_OFFSET_STEP_CALIBRATION_COMPLETE, - }, - } - const { store, wrapper } = mountWithStore( - , - { - initialState: { robotApi: {} }, - } - ) - mockGetRobotSessionOfType.mockReturnValue(mockPipOffsetCalSession) - mockGetRequestById.mockReturnValue({ - status: RobotApi.SUCCESS, - response: { - method: 'POST', - ok: true, - path: '/', - status: 200, - }, - }) - act(() => startCalibration({ params: { mount: mountString } })) - wrapper.setProps({}) - expect(CalWizardComponent).not.toBe(null) - - wrapper.find('button[aria-label="Exit"]').invoke('onClick')?.( - {} as React.MouseEvent - ) - wrapper.find('button[aria-label="Exit"]').invoke('onClick')?.( - {} as React.MouseEvent - ) - wrapper.setProps({}) - expect(store.dispatch).toHaveBeenCalledWith({ - ...Sessions.deleteSession(robotName, seshId), - meta: { requestId: expect.any(String) }, - }) - mockGetRobotSessionOfType.mockReturnValue(null) - wrapper.setProps({}) - expect(CalWizardComponent).toBe(null) - expect(onComplete).toHaveBeenCalled() - }) - - it('loading state modal should appear while session is being created', () => { - const seshId = 'fake-session-id' - const mockDeckCalSession = { - id: seshId, - ...mockPipetteOffsetCalibrationSessionAttributes, - details: { - ...mockPipetteOffsetCalibrationSessionAttributes.details, - currentStep: Sessions.PIP_OFFSET_STEP_SESSION_STARTED, - }, - } - const { wrapper } = mountWithStore(, { - initialState: { robotApi: {} }, - }) - mockGetRobotSessionOfType.mockReturnValue(mockDeckCalSession) - mockGetRequestById.mockReturnValue({ - status: RobotApi.PENDING, - }) - act(() => startCalibration({ params: { mount: mountString } })) - wrapper.setProps({}) - expect(CalWizardComponent).not.toBe(null) - expect(LoadingState).not.toBe(null) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/pages/Devices/CalibrationDashboard/hooks/__tests__/useDashboardCalibrateTipLength.test.tsx b/app/src/pages/Devices/CalibrationDashboard/hooks/__tests__/useDashboardCalibrateTipLength.test.tsx index e9fbd1adf85..9241c7f69a6 100644 --- a/app/src/pages/Devices/CalibrationDashboard/hooks/__tests__/useDashboardCalibrateTipLength.test.tsx +++ b/app/src/pages/Devices/CalibrationDashboard/hooks/__tests__/useDashboardCalibrateTipLength.test.tsx @@ -1,235 +1,3 @@ -import * as React from 'react' -import uniqueId from 'lodash/uniqueId' -import { mountWithStore, renderWithProviders } from '@opentrons/components' -import { act } from 'react-dom/test-utils' - -import { LoadingState } from '../../../../../organisms/CalibrationPanels' -import * as RobotApi from '../../../../../redux/robot-api' -import * as Sessions from '../../../../../redux/sessions' -import { mockTipLengthCalibrationSessionAttributes } from '../../../../../redux/sessions/__fixtures__' - -import { useDashboardCalibrateTipLength } from '../useDashboardCalibrateTipLength' -import { tipLengthCalibrationStarted } from '../../../../../redux/analytics' -import { i18n } from '../../../../../i18n' - -import type { DashboardCalTipLengthInvoker } from '../useDashboardCalibrateTipLength' - -jest.mock('../../../../../redux/sessions/selectors') -jest.mock('../../../../../redux/robot-api/selectors') -jest.mock('lodash/uniqueId') - -const mockUniqueId = uniqueId as jest.MockedFunction -const mockGetRobotSessionOfType = Sessions.getRobotSessionOfType as jest.MockedFunction< - typeof Sessions.getRobotSessionOfType -> -const mockGetRequestById = RobotApi.getRequestById as jest.MockedFunction< - typeof RobotApi.getRequestById -> - describe('useDashboardCalibrateTipLength hook', () => { - let startCalibration: DashboardCalTipLengthInvoker - let CalWizardComponent: JSX.Element | null - const robotName = 'robotName' - const mountString = 'left' - - const TestUseDashboardCalibrateTipLength = (): JSX.Element => { - const [ - _startCalibration, - _CalWizardComponent, - ] = useDashboardCalibrateTipLength(robotName) - React.useEffect(() => { - startCalibration = _startCalibration - CalWizardComponent = _CalWizardComponent - }) - return <>{CalWizardComponent} - } - - beforeEach(() => { - let mockIdCounter = 0 - mockUniqueId.mockImplementation(() => `mockId_${mockIdCounter++}`) - }) - - afterEach(() => { - jest.resetAllMocks() - }) - - it('returns start callback, and no wizard if session not present', () => { - const [, store] = renderWithProviders( - , - { - initialState: { robotApi: {}, sessions: {} }, - i18nInstance: i18n, - } - ) - expect(typeof startCalibration).toBe('function') - expect(CalWizardComponent).toBe(null) - - act(() => - startCalibration({ - params: { mount: mountString }, - hasBlockModalResponse: true, - }) - ) - - expect(store.dispatch).toHaveBeenCalledWith({ - ...Sessions.ensureSession( - robotName, - Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION, - { - mount: mountString, - hasCalibrationBlock: true, - tipRackDefinition: null, - } - ), - meta: { requestId: expect.any(String) }, - }) - expect(store.dispatch).toHaveBeenCalledWith( - tipLengthCalibrationStarted( - mountString, - true, - 'default Opentrons tip rack for pipette on mount' - ) - ) - }) - - it('shows AskForCalibrationBlockModal when required', () => { - const { wrapper } = mountWithStore(, { - initialState: { robotApi: {} }, - }) - act(() => - startCalibration({ - params: { mount: mountString }, - hasBlockModalResponse: null, - }) - ) - - wrapper.setProps({}) - expect(CalWizardComponent).not.toBe(null) - expect( - wrapper.containsMatchingElement() - ).toBeTruthy() - expect( - wrapper.containsMatchingElement() - ).toBeTruthy() - const useBlockButton = wrapper.findWhere( - n => n.type() === 'button' && n.text() === 'Use Calibration Block' - ) - useBlockButton.simulate('click') - - wrapper.setProps({}) - expect( - wrapper.containsMatchingElement() - ).toBeFalsy() - expect( - wrapper.containsMatchingElement() - ).toBeFalsy() - }) - - it('closes AskForCalibrationBlockModal when exit is clicked', () => { - const { wrapper } = mountWithStore(, { - initialState: { robotApi: {} }, - }) - act(() => - startCalibration({ - params: { mount: mountString }, - hasBlockModalResponse: null, - }) - ) - - wrapper.setProps({}) - expect(CalWizardComponent).not.toBe(null) - expect( - wrapper.containsMatchingElement() - ).toBeTruthy() - expect( - wrapper.containsMatchingElement() - ).toBeTruthy() - - wrapper.find('button[aria-label="Exit"]').invoke('onClick')?.( - {} as React.MouseEvent - ) - wrapper.setProps({}) - expect( - wrapper.containsMatchingElement() - ).toBeFalsy() - expect( - wrapper.containsMatchingElement() - ).toBeFalsy() - }) - - it('wizard should appear after create request succeeds with session and close on closeWizard', () => { - const seshId = 'fake-session-id' - const mockTipLengthCalSession = { - id: seshId, - ...mockTipLengthCalibrationSessionAttributes, - details: { - ...mockTipLengthCalibrationSessionAttributes.details, - currentStep: Sessions.TIP_LENGTH_STEP_CALIBRATION_COMPLETE, - }, - } - const { store, wrapper } = mountWithStore( - , - { - initialState: { robotApi: {} }, - } - ) - mockGetRobotSessionOfType.mockReturnValue(mockTipLengthCalSession) - mockGetRequestById.mockReturnValue({ - status: RobotApi.SUCCESS, - response: { - method: 'POST', - ok: true, - path: '/', - status: 200, - }, - }) - act(() => - startCalibration({ - params: { mount: mountString }, - hasBlockModalResponse: true, - }) - ) - wrapper.setProps({}) - expect(CalWizardComponent).not.toBe(null) - - wrapper.find('button[aria-label="Exit"]').invoke('onClick')?.( - {} as React.MouseEvent - ) - wrapper.find('button[aria-label="Exit"]').invoke('onClick')?.( - {} as React.MouseEvent - ) - wrapper.setProps({}) - expect(store.dispatch).toHaveBeenCalledWith({ - ...Sessions.deleteSession(robotName, seshId), - meta: { requestId: expect.any(String) }, - }) - }) - - it('loading state modal should appear while session is being created', () => { - const seshId = 'fake-session-id' - const mockDeckCalSession = { - id: seshId, - ...mockTipLengthCalibrationSessionAttributes, - details: { - ...mockTipLengthCalibrationSessionAttributes.details, - currentStep: Sessions.TIP_LENGTH_STEP_SESSION_STARTED, - }, - } - const { wrapper } = mountWithStore(, { - initialState: { robotApi: {} }, - }) - mockGetRobotSessionOfType.mockReturnValue(mockDeckCalSession) - mockGetRequestById.mockReturnValue({ - status: RobotApi.PENDING, - }) - act(() => - startCalibration({ - params: { mount: mountString }, - hasBlockModalResponse: null, - }) - ) - wrapper.setProps({}) - expect(CalWizardComponent).not.toBe(null) - expect(LoadingState).not.toBe(null) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/pages/Labware/__tests__/hooks.test.tsx b/app/src/pages/Labware/__tests__/hooks.test.tsx index 1df4c6116a3..65a8f3a4195 100644 --- a/app/src/pages/Labware/__tests__/hooks.test.tsx +++ b/app/src/pages/Labware/__tests__/hooks.test.tsx @@ -48,9 +48,9 @@ describe('useAllLabware hook', () => { }) it('should return object with only definition and modified date', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook(() => useAllLabware('reverse', 'all'), { wrapper, }) @@ -62,9 +62,9 @@ describe('useAllLabware hook', () => { expect(labware2.definition).toBe(mockValidLabware.definition) }) it('should return alphabetically sorted list', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook(() => useAllLabware('alphabetical', 'all'), { wrapper, }) @@ -76,9 +76,9 @@ describe('useAllLabware hook', () => { expect(labware1.definition).toBe(mockValidLabware.definition) }) it('should return no labware if not the right filter', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook(() => useAllLabware('reverse', 'reservoir'), { wrapper, }) @@ -89,9 +89,9 @@ describe('useAllLabware hook', () => { expect(labware2).toBe(undefined) }) it('should return labware with wellPlate filter', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook(() => useAllLabware('reverse', 'wellPlate'), { wrapper, }) @@ -103,9 +103,9 @@ describe('useAllLabware hook', () => { expect(labware2.definition).toBe(mockValidLabware.definition) }) it('should return custom labware with customLabware filter', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook( () => useAllLabware('alphabetical', 'customLabware'), { @@ -136,7 +136,9 @@ describe('useLabwareFailure hook', () => { jest.restoreAllMocks() }) it('should return invalid labware definition', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -154,7 +156,9 @@ describe('useLabwareFailure hook', () => { errorMessage: null, }) - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -175,7 +179,9 @@ describe('useLabwareFailure hook', () => { errorMessage: null, }) - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -193,7 +199,9 @@ describe('useLabwareFailure hook', () => { errorMessage: 'error', }) - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -216,9 +224,9 @@ describe('useNewLabwareName hook', () => { }) it('should return filename as a string', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook(useNewLabwareName, { wrapper }) const filename = result.current.newLabwareName expect(filename).toBe('mock_filename') diff --git a/app/src/pages/OnDeviceDisplay/ProtocolDetails/__tests__/ProtocolDetails.test.tsx b/app/src/pages/OnDeviceDisplay/ProtocolDetails/__tests__/ProtocolDetails.test.tsx index e6fa3ee072a..29ad9ca6fa2 100644 --- a/app/src/pages/OnDeviceDisplay/ProtocolDetails/__tests__/ProtocolDetails.test.tsx +++ b/app/src/pages/OnDeviceDisplay/ProtocolDetails/__tests__/ProtocolDetails.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { fireEvent, screen } from '@testing-library/react' import { when, resetAllWhenMocks } from 'jest-when' import { Route } from 'react-router' import { MemoryRouter } from 'react-router-dom' @@ -142,38 +143,38 @@ describe('ODDProtocolDetails', () => { }) it('renders protocol truncated name that expands when clicked', () => { - const [{ getByText }] = render() - const name = getByText( + render() + const name = screen.getByText( 'Nextera XT DNA Library Prep Kit Protocol: Part 1/4 - Tagment...Amplify Libraries' ) - name.click() - getByText( + fireEvent.click(name) + screen.getByText( 'Nextera XT DNA Library Prep Kit Protocol: Part 1/4 - Tagment Genomic DNA and Amplify Libraries' ) }) it('renders the start setup button', () => { - const [{ getByText }] = render() - getByText('Start setup') + render() + screen.getByText('Start setup') }) it('renders the protocol author', () => { - const [{ getByText }] = render() - getByText('engineering testing division') + render() + screen.getByText('engineering testing division') }) it('renders the protocol description', () => { - const [{ getByText }] = render() - getByText('A short mock protocol') + render() + screen.getByText('A short mock protocol') }) it('renders the protocol date added', () => { - const [{ getByText }] = render() - getByText( + render() + screen.getByText( `Date Added: ${formatTimeWithUtcLabel( '2022-05-03T21:36:12.494778+00:00' )}` ) }) it('renders the pin protocol button', () => { - const [{ getByText }] = render() - getByText('Pin protocol') + render() + screen.getByText('Pin protocol') }) it('renders the delete protocol button', async () => { when(mockGetProtocol) @@ -181,11 +182,11 @@ describe('ODDProtocolDetails', () => { .mockResolvedValue({ data: { links: { referencingRuns: [{ id: '1' }, { id: '2' }] } }, } as any) - const [{ getByText }] = render() - const deleteButton = getByText('Delete protocol').closest('button') - deleteButton?.click() - const confirmDeleteButton = getByText('Delete') - confirmDeleteButton.click() + render() + const deleteButton = screen.getByRole('button', { name: 'Delete' }) + fireEvent.click(deleteButton) + const confirmDeleteButton = screen.getByText('Delete') + fireEvent.click(confirmDeleteButton) // flush promises and then make assertions await new Promise(setImmediate) expect(mockDeleteRun).toHaveBeenCalledWith(MOCK_HOST_CONFIG, '1') @@ -199,28 +200,28 @@ describe('ODDProtocolDetails', () => { mockHardware.mockReturnValue(
    Mock Hardware
    ) mockLabware.mockReturnValue(
    Mock Labware
    ) mockDeck.mockReturnValue(
    Mock Initial Deck Layout
    ) - const [{ getByRole, getByText }] = render() - const hardwareButton = getByRole('button', { name: 'Hardware' }) - hardwareButton.click() - getByText('Mock Hardware') - const labwareButton = getByRole('button', { name: 'Labware' }) - labwareButton.click() - getByText('Mock Labware') + render() + const hardwareButton = screen.getByRole('button', { name: 'Hardware' }) + fireEvent.click(hardwareButton) + screen.getByText('Mock Hardware') + const labwareButton = screen.getByRole('button', { name: 'Labware' }) + fireEvent.click(labwareButton) + screen.getByText('Mock Labware') // Can't test this until liquids section exists - getByRole('button', { name: 'Liquids' }) - const deckButton = getByRole('button', { name: 'Deck' }) - deckButton.click() - getByText('Mock Initial Deck Layout') - const summaryButton = getByRole('button', { name: 'Summary' }) - summaryButton.click() - getByText('A short mock protocol') + screen.getByRole('button', { name: 'Liquids' }) + const deckButton = screen.getByRole('button', { name: 'Deck' }) + fireEvent.click(deckButton) + screen.getByText('Mock Initial Deck Layout') + const summaryButton = screen.getByRole('button', { name: 'Summary' }) + fireEvent.click(summaryButton) + screen.getByText('A short mock protocol') }) it('should render a loading skeleton while awaiting a response from the server', () => { mockUseProtocolQuery.mockReturnValue({ data: MOCK_DATA, isLoading: true, } as any) - const [{ getAllByTestId }] = render() - expect(getAllByTestId('Skeleton').length).toBeGreaterThan(0) + render() + expect(screen.getAllByTestId('Skeleton').length).toBeGreaterThan(0) }) }) diff --git a/app/src/pages/OnDeviceDisplay/__tests__/ConnectViaWifi.test.tsx b/app/src/pages/OnDeviceDisplay/__tests__/ConnectViaWifi.test.tsx index c2c5755c17a..795799a099e 100644 --- a/app/src/pages/OnDeviceDisplay/__tests__/ConnectViaWifi.test.tsx +++ b/app/src/pages/OnDeviceDisplay/__tests__/ConnectViaWifi.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' +import { fireEvent, screen } from '@testing-library/react' import { renderWithProviders } from '@opentrons/components' import { i18n } from '../../../i18n' @@ -62,23 +63,23 @@ describe('ConnectViaWifi', () => { }) it('should render step meter 2/5 (width:40%)', () => { - const [{ getByTestId }] = render() - getByTestId('StepMeter_StepMeterContainer') - const bar = getByTestId('StepMeter_StepMeterBar') + render() + screen.getByTestId('StepMeter_StepMeterContainer') + const bar = screen.getByTestId('StepMeter_StepMeterBar') expect(bar).toHaveStyle('width: 33.33333333333333%') }) it('should render Searching for networks', () => { - const [{ getByText }] = render() - getByText('Searching for networks...') + render() + screen.getByText('Searching for networks...') }) it('should render DisplayWifiList', () => { mockUseWifiList.mockReturnValue(mockWifiList) - const [{ getByText }] = render() - getByText('foo') - getByText('bar') - getByText('baz') + render() + screen.getByText('foo') + screen.getByText('bar') + screen.getByText('baz') }) it('should render SelectAuthenticationType', () => { @@ -87,9 +88,9 @@ describe('ConnectViaWifi', () => { wifi: initialMockWifi, ethernet: null, }) - const [{ getByRole, getByText }] = render() - getByRole('button', { name: 'foo' }).click() - getByText('WPA2 Personal') + render() + fireEvent.click(screen.getByRole('button', { name: 'foo' })) + screen.getByText('WPA2 Personal') }) it('should render SetWifiCred', () => { @@ -98,10 +99,10 @@ describe('ConnectViaWifi', () => { wifi: initialMockWifi, ethernet: null, }) - const [{ getByRole, getByText }] = render() - getByRole('button', { name: 'foo' }).click() - getByText('Continue').click() - getByText('Enter password') + render() + fireEvent.click(screen.getByRole('button', { name: 'foo' })) + fireEvent.click(screen.getByText('Continue')) + screen.getByText('Enter password') }) it('should render ConnectingNetwork', () => { @@ -113,10 +114,10 @@ describe('ConnectViaWifi', () => { mockGetRequestById.mockReturnValue({ status: RobotApi.PENDING, }) - const [{ getByRole, getByText }] = render() - getByRole('button', { name: 'foo' }).click() - getByText('Continue').click() - getByText('Connect').click() + render() + fireEvent.click(screen.getByRole('button', { name: 'foo' })) + fireEvent.click(screen.getByText('Continue')) + screen.getByText('Connect').click() }) /* @@ -131,11 +132,11 @@ describe('ConnectViaWifi', () => { status: RobotApi.SUCCESS, response: {} as any, }) - const [{ getByRole, getByText }] = render() - getByRole('button', { name: 'foo' }).click() - getByText('Continue').click() - getByText('Connect').click() - getByText('Successfully connected to foo!') + render() + fireEvent.click(screen.getByRole('button', { name: 'foo' })) + fireEvent.click(screen.getByText('Continue')) + screen.getByText('Connect').click() + screen.getByText('Successfully connected to foo!') }) it('should render FailedToConnect', () => { @@ -149,11 +150,11 @@ describe('ConnectViaWifi', () => { response: {} as any, error: { message: 'mock error' }, }) - const [{ getByRole, getByText }] = render() - getByRole('button', { name: 'foo' }).click() - getByText('Continue').click() - getByText('Connect').click() - getByText('Oops! Incorrect password for foo') + render() + fireEvent.click(screen.getByRole('button', { name: 'foo' })) + fireEvent.click(screen.getByText('Continue')) + screen.getByText('Connect').click() + screen.getByText('Oops! Incorrect password for foo') }) */ }) diff --git a/app/src/pages/OnDeviceDisplay/__tests__/InstrumentsDashboard.test.tsx b/app/src/pages/OnDeviceDisplay/__tests__/InstrumentsDashboard.test.tsx index c2723236ba5..552b868e985 100644 --- a/app/src/pages/OnDeviceDisplay/__tests__/InstrumentsDashboard.test.tsx +++ b/app/src/pages/OnDeviceDisplay/__tests__/InstrumentsDashboard.test.tsx @@ -12,6 +12,7 @@ import { GripperWizardFlows } from '../../../organisms/GripperWizardFlows' import { InstrumentsDashboard } from '../InstrumentsDashboard' import { formatTimeWithUtcLabel } from '../../../resources/runs/utils' import { InstrumentDetail } from '../InstrumentDetail' +import { fireEvent, screen } from '@testing-library/react' jest.mock('@opentrons/react-api-client') jest.mock('../../../organisms/GripperWizardFlows') @@ -126,59 +127,59 @@ describe('InstrumentsDashboard', () => { jest.resetAllMocks() }) it('should render mount info for all attached mounts', () => { - const [{ getByText }] = render() - getByText('left Mount') - getByText('Flex 1-Channel 1000 μL') - getByText('right Mount') - getByText('Flex 1-Channel 50 μL') - getByText('extension Mount') - getByText('Flex Gripper') + render() + screen.getByText('left Mount') + screen.getByText('Flex 1-Channel 1000 μL') + screen.getByText('right Mount') + screen.getByText('Flex 1-Channel 50 μL') + screen.getByText('extension Mount') + screen.getByText('Flex Gripper') }) - it('should route to left mount detail when instrument attached and clicked', async () => { - const [{ getByText }] = render() - await getByText('left Mount').click() - getByText('serial number') - getByText(mockLeftPipetteData.serialNumber) - getByText( + it('should route to left mount detail when instrument attached and clicked', () => { + render() + fireEvent.click(screen.getByText('left Mount')) + screen.getByText('serial number') + screen.getByText(mockLeftPipetteData.serialNumber) + screen.getByText( formatTimeWithUtcLabel( mockLeftPipetteData.data.calibratedOffset.last_modified ) ) }) - it('should route to right mount detail when instrument attached and clicked', async () => { - const [{ getByText }] = render() - await getByText('right Mount').click() - getByText('serial number') - getByText(mockRightPipetteData.serialNumber) - getByText( + it('should route to right mount detail when instrument attached and clicked', () => { + render() + fireEvent.click(screen.getByText('right Mount')) + screen.getByText('serial number') + screen.getByText(mockRightPipetteData.serialNumber) + screen.getByText( formatTimeWithUtcLabel( mockRightPipetteData.data.calibratedOffset.last_modified ) ) }) - it('should route to extension mount detail when instrument attached and clicked', async () => { - const [{ getByText }] = render() - await getByText('extension Mount').click() - getByText('serial number') - getByText(mockGripperData.serialNumber) + it('should route to extension mount detail when instrument attached and clicked', () => { + render() + fireEvent.click(screen.getByText('extension Mount')) + screen.getByText('serial number') + screen.getByText(mockGripperData.serialNumber) }) - it('should open choose pipette to attach to left mount when empty and clicked', async () => { + it('should open choose pipette to attach to left mount when empty and clicked', () => { mockUseInstrumentsQuery.mockReturnValue({ data: { data: [] } } as any) - const [{ getByText }] = render() - await getByText('left Mount').click() - getByText('mock choose pipette') + render() + fireEvent.click(screen.getByText('left Mount')) + screen.getByText('mock choose pipette') }) - it('should open choose pipette to attach to right mount when empty and clicked', async () => { + it('should open choose pipette to attach to right mount when empty and clicked', () => { mockUseInstrumentsQuery.mockReturnValue({ data: { data: [] } } as any) - const [{ getByText }] = render() - await getByText('right Mount').click() - getByText('mock choose pipette') + render() + fireEvent.click(screen.getByText('right Mount')) + screen.getByText('mock choose pipette') }) - it('should open attach gripper wizard when extension mount item empty and clicked', async () => { + it('should open attach gripper wizard when extension mount item empty and clicked', () => { mockUseInstrumentsQuery.mockReturnValue({ data: { data: [] } } as any) - const [{ getByText }] = render() - await getByText('extension Mount').click() - getByText('mock gripper wizard flows') + render() + fireEvent.click(screen.getByText('extension Mount')) + screen.getByText('mock gripper wizard flows') }) it('should render the correct info for 96 channel attached', async () => { mockUseInstrumentsQuery.mockReturnValue({ @@ -186,8 +187,8 @@ describe('InstrumentsDashboard', () => { data: [mock96ChannelData, mockGripperData], }, } as any) - const [{ getByText }] = render() - getByText('Left+Right Mounts') - getByText('extension Mount') + render() + screen.getByText('Left+Right Mounts') + screen.getByText('extension Mount') }) }) diff --git a/app/src/pages/OnDeviceDisplay/__tests__/NameRobot.test.tsx b/app/src/pages/OnDeviceDisplay/__tests__/NameRobot.test.tsx index 5524c927ed9..95a52a17a38 100644 --- a/app/src/pages/OnDeviceDisplay/__tests__/NameRobot.test.tsx +++ b/app/src/pages/OnDeviceDisplay/__tests__/NameRobot.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' -import { fireEvent, waitFor } from '@testing-library/react' +import { fireEvent, screen, waitFor } from '@testing-library/react' import { i18n } from '../../../i18n' import { renderWithProviders } from '@opentrons/components' @@ -67,29 +67,29 @@ describe('NameRobot', () => { }) it('should render text, button and keyboard', () => { - const [{ getByText, getByRole }] = render() - getByText('Name your robot') - getByText('Don’t worry, you can always change this in your settings.') - getByText('Enter up to 17 characters (letters and numbers only)') - getByRole('textbox') - getByText('Confirm') + render() + screen.getByText('Name your robot') + screen.getByText('Don’t worry, you can always change this in your settings.') + screen.getByText('Enter up to 17 characters (letters and numbers only)') + screen.getByRole('textbox') + screen.getByText('Confirm') // keyboard - getByRole('button', { name: 'a' }) + screen.getByRole('button', { name: 'a' }) }) it('should display a letter when typing a letter', () => { - const [{ getByRole }] = render() - const input = getByRole('textbox') - getByRole('button', { name: 'a' }).click() - getByRole('button', { name: 'b' }).click() - getByRole('button', { name: 'c' }).click() + render() + const input = screen.getByRole('textbox') + fireEvent.click(screen.getByRole('button', { name: 'a' })) + fireEvent.click(screen.getByRole('button', { name: 'b' })) + fireEvent.click(screen.getByRole('button', { name: 'c' })) expect(input).toHaveValue('abc') }) it('should show an error message when tapping confirm without typing anything', async () => { - const [{ findByText, getByLabelText }] = render() - getByLabelText('SmallButton_primary').click() - const error = await findByText( + render() + fireEvent.click(screen.getByLabelText('SmallButton_primary')) + const error = await screen.findByText( 'Oops! Robot name must follow the character count and limitations.' ) await waitFor(() => { @@ -98,13 +98,13 @@ describe('NameRobot', () => { }) it('should show an error message when typing an existing name - connectable robot', async () => { - const [{ getByRole, findByText, getByLabelText }] = render() - const input = getByRole('textbox') + render() + const input = screen.getByRole('textbox') fireEvent.change(input, { target: { value: 'connectableOtie' }, }) - getByLabelText('SmallButton_primary').click() - const error = await findByText( + fireEvent.click(screen.getByLabelText('SmallButton_primary')) + const error = await screen.findByText( 'Oops! Name is already in use. Choose a different name.' ) await waitFor(() => { @@ -113,13 +113,13 @@ describe('NameRobot', () => { }) it('should show an error message when typing an existing name - reachable robot', async () => { - const [{ getByRole, findByText, getByLabelText }] = render() - const input = getByRole('textbox') + render() + const input = screen.getByRole('textbox') fireEvent.change(input, { target: { value: 'reachableOtie' }, }) - getByLabelText('SmallButton_primary').click() - const error = await findByText( + fireEvent.click(screen.getByLabelText('SmallButton_primary')) + const error = await screen.findByText( 'Oops! Name is already in use. Choose a different name.' ) await waitFor(() => { @@ -128,29 +128,29 @@ describe('NameRobot', () => { }) it('should call a mock function when tapping the confirm button', () => { - const [{ getByRole, getByLabelText }] = render() - getByRole('button', { name: 'a' }).click() - getByRole('button', { name: 'b' }).click() - getByRole('button', { name: 'c' }).click() - getByLabelText('SmallButton_primary').click() + render() + fireEvent.click(screen.getByRole('button', { name: 'a' })) + fireEvent.click(screen.getByRole('button', { name: 'b' })) + fireEvent.click(screen.getByRole('button', { name: 'c' })) + fireEvent.click(screen.getByLabelText('SmallButton_primary')) expect(mockTrackEvent).toHaveBeenCalled() }) it('should render text and button when coming from robot settings', () => { mockuseIsUnboxingFlowOngoing.mockReturnValue(false) - const [{ getByText, queryByText }] = render() - getByText('Rename robot') + render() + screen.getByText('Rename robot') expect( - queryByText('Don’t worry, you can always change this in your settings.') + screen.queryByText('Don’t worry, you can always change this in your settings.') ).not.toBeInTheDocument() - getByText('Enter up to 17 characters (letters and numbers only)') - getByText('Confirm') + screen.getByText('Enter up to 17 characters (letters and numbers only)') + screen.getByText('Confirm') }) it('should call a mock function when tapping back button', () => { mockuseIsUnboxingFlowOngoing.mockReturnValue(false) - const [{ getByTestId }] = render() - getByTestId('name_back_button').click() + render() + screen.getByTestId('name_back_button').click() expect(mockPush).toHaveBeenCalledWith('/robot-settings') }) }) diff --git a/app/src/pages/OnDeviceDisplay/hooks/__tests__/useNetworkConnection.test.tsx b/app/src/pages/OnDeviceDisplay/hooks/__tests__/useNetworkConnection.test.tsx index c08ad1472f1..a7ccf0fba86 100644 --- a/app/src/pages/OnDeviceDisplay/hooks/__tests__/useNetworkConnection.test.tsx +++ b/app/src/pages/OnDeviceDisplay/hooks/__tests__/useNetworkConnection.test.tsx @@ -50,7 +50,7 @@ const store: Store = createStore(jest.fn(), {}) // ToDo (kj:0202/2023) USB test cases will be added when USB is out describe('useNetworkConnection', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { wrapper = ({ children }) => ( diff --git a/app/src/pages/Protocols/hooks/__tests__/hooks.test.tsx b/app/src/pages/Protocols/hooks/__tests__/hooks.test.tsx index 7927e0a353b..dad134575ef 100644 --- a/app/src/pages/Protocols/hooks/__tests__/hooks.test.tsx +++ b/app/src/pages/Protocols/hooks/__tests__/hooks.test.tsx @@ -173,7 +173,7 @@ describe('useRequiredProtocolLabware', () => { }) describe('useMissingProtocolHardware', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { mockUseInstrumentsQuery.mockReturnValue({ data: { data: [] }, diff --git a/app/src/redux/robot-api/__tests__/hooks.test.tsx b/app/src/redux/robot-api/__tests__/hooks.test.tsx index bc6a9ee9023..351a34b5898 100644 --- a/app/src/redux/robot-api/__tests__/hooks.test.tsx +++ b/app/src/redux/robot-api/__tests__/hooks.test.tsx @@ -1,167 +1,3 @@ -import * as React from 'react' -import uniqueId from 'lodash/uniqueId' -import { mountWithStore } from '@opentrons/components' -import { PENDING, SUCCESS } from '../constants' -import { useDispatchApiRequest, useDispatchApiRequests } from '../hooks' - -jest.mock('lodash/uniqueId') - -const mockUniqueId = uniqueId as jest.MockedFunction - describe('useDispatchApiRequest', () => { - let render: () => ReturnType - - const TestUseDispatchApiRequest = () => { - const mockAction: any = { type: 'mockAction', meta: {} } - const [dispatch, requestIds] = useDispatchApiRequest() - - return ( - - ) - } - - beforeEach(() => { - let mockIdCounter = 0 - mockUniqueId.mockImplementation(() => `mockId_${mockIdCounter++}`) - - render = () => mountWithStore() - }) - - afterEach(() => { - jest.resetAllMocks() - }) - - it('adds meta.requestId to action and dispatches it', () => { - const { wrapper, store } = render() - expect(store.dispatch).toHaveBeenCalledTimes(0) - - wrapper.find('button').invoke('onClick')?.({} as React.MouseEvent) - wrapper.update() - - expect(store.dispatch).toHaveBeenCalledWith({ - type: 'mockAction', - meta: { requestId: 'mockId_0' } as any, - }) - }) - - it('adds requestId to requestIds list', () => { - const { wrapper } = render() - wrapper.find('button').invoke('onClick')?.({} as React.MouseEvent) - wrapper.update() - - expect(wrapper.text()).toEqual('mockId_0') - }) - - it('can dispatch multiple requests', () => { - const { wrapper, store } = render() - wrapper.find('button').invoke('onClick')?.({} as React.MouseEvent) - wrapper.update() - wrapper.find('button').invoke('onClick')?.({} as React.MouseEvent) - wrapper.update() - - expect(store.dispatch).toHaveBeenCalledTimes(2) - expect(wrapper.text()).toEqual('mockId_0 mockId_1') - }) -}) - -describe('useDispatchApiRequests', () => { - let render: () => ReturnType - - const TestUseDispatchApiRequests = (): JSX.Element => { - const mockAction: any = { type: 'mockAction', meta: {} } - const mockOtherAction: any = { type: 'mockOtherAction', meta: {} } - const [dispatchRequests] = useDispatchApiRequests() - - return ( - - ) - } - - beforeEach(() => { - let mockIdCounter = 0 - mockUniqueId.mockImplementation(() => `mockId_${mockIdCounter++}`) - - render = () => - mountWithStore(, { - initialState: { - robotApi: {}, - }, - } as any) - }) - - afterEach(() => { - jest.resetAllMocks() - }) - - it('dispatches first request first', () => { - const { store, wrapper } = render() - store.getState.mockReturnValue({ - robotApi: { - mockId_0: { - status: PENDING, - }, - }, - }) - wrapper.find('button').invoke('onClick')?.({} as React.MouseEvent) - wrapper.update() - - expect(store.dispatch).toHaveBeenCalledTimes(1) - expect(store.dispatch).toHaveBeenCalledWith({ - type: 'mockAction', - meta: { requestId: 'mockId_0' } as any, - }) - }) - - it('dispatches second if first not pending', () => { - const { store, wrapper } = render() - store.getState.mockReturnValue({ - robotApi: { - mockId_0: { - status: SUCCESS, - response: { method: 'GET', ok: true, path: '/test', status: 200 }, - }, - }, - }) - wrapper.find('button').invoke('onClick')?.({} as React.MouseEvent) - wrapper.update() - - expect(store.dispatch).toHaveBeenCalledTimes(2) - expect(store.dispatch).toHaveBeenCalledWith({ - type: 'mockAction', - meta: { requestId: 'mockId_0' } as any, - }) - expect(store.dispatch).toHaveBeenCalledWith({ - type: 'mockOtherAction', - meta: { requestId: 'mockId_1' } as any, - }) - }) - - it('dispatches first and second, but waits for third if second is pending', () => { - const { store, wrapper } = render() - store.getState.mockReturnValue({ - robotApi: { - mockId_0: { - status: SUCCESS, - response: { method: 'GET', ok: true, path: '/test', status: 200 }, - }, - mockId_1: { status: PENDING }, - }, - }) - wrapper.find('button').invoke('onClick')?.({} as React.MouseEvent) - wrapper.update() - - expect(store.dispatch).toHaveBeenCalledTimes(2) - expect(store.dispatch).toHaveBeenCalledWith({ - type: 'mockAction', - meta: { requestId: 'mockId_0' } as any, - }) - expect(store.dispatch).toHaveBeenCalledWith({ - type: 'mockOtherAction', - meta: { requestId: 'mockId_1' } as any, - }) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/resources/networking/__tests__/useCanDisconnect.test.tsx b/app/src/resources/networking/__tests__/useCanDisconnect.test.tsx index 0874bcac927..c0c3abedb1f 100644 --- a/app/src/resources/networking/__tests__/useCanDisconnect.test.tsx +++ b/app/src/resources/networking/__tests__/useCanDisconnect.test.tsx @@ -24,9 +24,9 @@ const mockUseIsFlex = useIsFlex as jest.MockedFunction const store: Store = createStore(state => state, {}) -const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} -) +const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, +}) => {children} const mockWifiNetwork: WifiNetwork = { ssid: 'linksys', diff --git a/components/src/alerts/AlertItem.tsx b/components/src/alerts/AlertItem.tsx index 0a39a28dbbf..1d062d28b97 100644 --- a/components/src/alerts/AlertItem.tsx +++ b/components/src/alerts/AlertItem.tsx @@ -68,7 +68,10 @@ export function AlertItem(props: AlertItemProps): JSX.Element {
    - {props.title} + {props.title} {props.onCloseClick && ( { ) - const animations = getByTestId('emanating_circle').children - const radiusAnimation = animations[0] + const radiusAnimation = getByTestId('radius_animation') expect(radiusAnimation).toHaveAttribute('attributeName', 'r') expect(radiusAnimation).toHaveAttribute('from', '5') expect(radiusAnimation).toHaveAttribute( @@ -56,8 +55,7 @@ describe('EmanatingNozzle', () => { ) - const animations = getByTestId('emanating_circle').children - const opacityAnimation = animations[1] + const opacityAnimation = getByTestId('opacity_animation') expect(opacityAnimation).toHaveAttribute('attributeName', 'opacity') expect(opacityAnimation).toHaveAttribute('from', '0.7') expect(opacityAnimation).toHaveAttribute('to', '0') diff --git a/components/src/hooks/__tests__/useLongPress.test.ts b/components/src/hooks/__tests__/useLongPress.test.ts index 0661b90f1c6..6c0bd4592a4 100644 --- a/components/src/hooks/__tests__/useLongPress.test.ts +++ b/components/src/hooks/__tests__/useLongPress.test.ts @@ -1,4 +1,4 @@ -import { renderHook } from '@testing-library/react' +import { act, renderHook, waitFor } from '@testing-library/react' import { useLongPress } from '../useLongPress' describe('useLongPress', () => { @@ -12,13 +12,17 @@ describe('useLongPress', () => { it('when callling disable, isEnabled true', () => { const { result } = renderHook(() => useLongPress()) - result.current.enable() - expect(result.current.isEnabled).toBe(true) + act(() => result.current.enable()) + waitFor(() => ( + expect(result.current.isEnabled).toBe(true) + )) }) it('when callling disable, isEnabled false', () => { const { result } = renderHook(() => useLongPress()) - result.current.disable() - expect(result.current.isEnabled).toBe(false) + act(() => result.current.disable()) + waitFor(() => ( + expect(result.current.isEnabled).toBe(false) + )) }) }) diff --git a/components/src/interaction-enhancers/useHover.ts b/components/src/interaction-enhancers/useHover.ts index a576180d7c9..6c303dd4ccb 100644 --- a/components/src/interaction-enhancers/useHover.ts +++ b/components/src/interaction-enhancers/useHover.ts @@ -40,20 +40,23 @@ export function useHover(options: UseHoverOptions = {}): UseHoverResult { const [hovered, setHovered] = useState(false) const timeoutRef = useRef() - const handleHoverChange = useCallback((value: boolean, delay: number | undefined) => { - clearTimeout(timeoutRef.current) - if (delay) { - timeoutRef.current = setTimeout( - // TODO(mc, 2021-03-08): use window.setTimeout or a separate const - // for the handler to tell TS that we're using DOM setTimeout, not Node.js - // eslint-disable-next-line @typescript-eslint/no-implied-eval - (() => setHovered(value)) as TimerHandler, - delay - ) - } else { - setHovered(value) - } - }, []) + const handleHoverChange = useCallback( + (value: boolean, delay: number | undefined) => { + clearTimeout(timeoutRef.current) + if (delay) { + timeoutRef.current = setTimeout( + // TODO(mc, 2021-03-08): use window.setTimeout or a separate const + // for the handler to tell TS that we're using DOM setTimeout, not Node.js + // eslint-disable-next-line @typescript-eslint/no-implied-eval + (() => setHovered(value)) as TimerHandler, + delay + ) + } else { + setHovered(value) + } + }, + [] + ) const handlers = useMemo( () => ({ diff --git a/components/src/tooltips/useTooltip.ts b/components/src/tooltips/useTooltip.ts index cc34c5dd256..967b0cb3253 100644 --- a/components/src/tooltips/useTooltip.ts +++ b/components/src/tooltips/useTooltip.ts @@ -55,16 +55,22 @@ export function useTooltip(options: UseTooltipOptions = {}): UseTooltipResult { arrowStyle: Styles.INITIAL_ARROW_STYLE, }) - const onStateUpdate = useCallback((placement: Placement | null, styles: { - popper?: CSSProperties - arrow?: CSSProperties - }) => { - setTooltipState({ - placement, - tooltipStyle: styles.popper ?? Styles.INITIAL_TOOLTIP_STYLE, - arrowStyle: styles.arrow ?? Styles.INITIAL_ARROW_STYLE, - }) - }, []) + const onStateUpdate = useCallback( + ( + placement: Placement | null, + styles: { + popper?: CSSProperties + arrow?: CSSProperties + } + ) => { + setTooltipState({ + placement, + tooltipStyle: styles.popper ?? Styles.INITIAL_TOOLTIP_STYLE, + arrowStyle: styles.arrow ?? Styles.INITIAL_ARROW_STYLE, + }) + }, + [] + ) usePopper({ target, diff --git a/labware-library/src/labware-creator/components/__tests__/FormAlerts.test.tsx b/labware-library/src/labware-creator/components/__tests__/FormAlerts.test.tsx index 15030dc6f98..cfd6eea119d 100644 --- a/labware-library/src/labware-creator/components/__tests__/FormAlerts.test.tsx +++ b/labware-library/src/labware-creator/components/__tests__/FormAlerts.test.tsx @@ -38,7 +38,8 @@ describe('FormAlerts', () => { } render() - screen.getByText('some warning') + const alertItem = screen.getByTestId('alert_item_title') + expect(alertItem).toHaveTextContent('some warning') }) it('should render an incompatible labware error when the labware is not compatible with labware creator', () => { when(getIsHiddenMock) @@ -59,7 +60,8 @@ describe('FormAlerts', () => { } render() - screen.getByText( + const alertItem = screen.getByTestId('alert_item_title') + expect(alertItem).toHaveTextContent( 'Your labware is not compatible with the Labware Creator. Please fill out this form to request a custom labware definition.' ) }) @@ -82,7 +84,8 @@ describe('FormAlerts', () => { } render() - screen.getByText( + const alertItem = screen.getByTestId('alert_item_title') + expect(alertItem).toHaveTextContent( 'If your tip does not fit when placed by hand then it is not a good candidate for this pipette on the OT-2.' ) }) @@ -105,7 +108,8 @@ describe('FormAlerts', () => { } render() - screen.getByText( + const alertItem = screen.getByTestId('alert_item_title') + expect(alertItem).toHaveTextContent( 'Your labware is too small to fit in a slot properly. Please fill out this form to request an adapter.' ) }) @@ -128,7 +132,8 @@ describe('FormAlerts', () => { } render() - screen.getByText( + const alertItem = screen.getByTestId('alert_item_title') + expect(alertItem).toHaveTextContent( 'Your labware is too large to fit in a single slot properly. Please fill out this form to request a custom labware definition.' ) }) diff --git a/package.json b/package.json index 1666467c565..b1f26bd12d6 100755 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "@storybook/react": "^6.5.12", "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "13.4.0", + "@testing-library/user-event": "14.5.1", "@types/express": "^4.17.11", "@types/jest": "^26.0.20", "@types/jest-when": "^2.7.2", diff --git a/protocol-designer/src/components/DeckSetup/LabwareOverlays/__tests__/SlotControls.test.tsx b/protocol-designer/src/components/DeckSetup/LabwareOverlays/__tests__/SlotControls.test.tsx index 45e0b7e5aa3..bb77fef96c5 100644 --- a/protocol-designer/src/components/DeckSetup/LabwareOverlays/__tests__/SlotControls.test.tsx +++ b/protocol-designer/src/components/DeckSetup/LabwareOverlays/__tests__/SlotControls.test.tsx @@ -1,3 +1,3 @@ describe('SlotControlsComponent', () => { it.todo('replace deprecated enzyme test') -}) +}) diff --git a/protocol-designer/src/components/LabwareSelectionModal/__tests__/LabwareSelectionModal.test.tsx b/protocol-designer/src/components/LabwareSelectionModal/__tests__/LabwareSelectionModal.test.tsx index a545c56b970..0ddbc34a130 100644 --- a/protocol-designer/src/components/LabwareSelectionModal/__tests__/LabwareSelectionModal.test.tsx +++ b/protocol-designer/src/components/LabwareSelectionModal/__tests__/LabwareSelectionModal.test.tsx @@ -9,11 +9,9 @@ import { ADAPTER_96_CHANNEL, getLabwareCompatibleWithAdapter, } from '../../../utils/labwareModuleCompatibility' -import { Portal } from '../../portals/TopPortal' import { LabwareSelectionModal } from '../LabwareSelectionModal' jest.mock('../../../utils/labwareModuleCompatibility') -jest.mock('../../portals/TopPortal') jest.mock('../../Hints/useBlockingHint') jest.mock('@opentrons/shared-data', () => { const actualSharedData = jest.requireActual('@opentrons/shared-data') @@ -26,7 +24,6 @@ jest.mock('@opentrons/shared-data', () => { const mockGetIsLabwareAboveHeight = getIsLabwareAboveHeight as jest.MockedFunction< typeof getIsLabwareAboveHeight > -const mockPortal = Portal as jest.MockedFunction const mockGetLabwareCompatibleWithAdapter = getLabwareCompatibleWithAdapter as jest.MockedFunction< typeof getLabwareCompatibleWithAdapter > @@ -48,7 +45,6 @@ describe('LabwareSelectionModal', () => { isNextToHeaterShaker: false, has96Channel: false, } - mockPortal.mockReturnValue(
    mock portal
    ) mockGetLabwareCompatibleWithAdapter.mockReturnValue([]) }) it('should NOT filter out labware above 57 mm when the slot is NOT next to a heater shaker', () => { diff --git a/protocol-designer/src/components/modules/__tests__/AdditionalItemsRow.test.tsx b/protocol-designer/src/components/modules/__tests__/AdditionalItemsRow.test.tsx index 19801fbd4e2..975342fbd35 100644 --- a/protocol-designer/src/components/modules/__tests__/AdditionalItemsRow.test.tsx +++ b/protocol-designer/src/components/modules/__tests__/AdditionalItemsRow.test.tsx @@ -2,15 +2,12 @@ import * as React from 'react' import i18n from 'i18next' import { renderWithProviders } from '@opentrons/components' -import { Portal } from '../../portals/TopPortal' import { AdditionalItemsRow } from '../AdditionalItemsRow' import { FlexSlotMap } from '../FlexSlotMap' jest.mock('../FlexSlotMap') -jest.mock('../../portals/TopPortal') const mockFlexSlotMap = FlexSlotMap as jest.MockedFunction -const mockPortal = Portal as jest.MockedFunction const render = (props: React.ComponentProps) => { return renderWithProviders(, { @@ -27,7 +24,6 @@ describe('AdditionalItemsRow', () => { name: 'gripper', } mockFlexSlotMap.mockReturnValue(
    mock slot map
    ) - mockPortal.mockReturnValue(
    mock portal
    ) }) it('renders no gripper', () => { const { getByRole, getByText } = render(props) @@ -56,7 +52,6 @@ describe('AdditionalItemsRow', () => { const { getByRole, getByText } = render(props) getByText('Waste Chute') getByRole('button', { name: 'add' }).click() - getByText('mock portal') }) it('renders a waste chute', () => { props = { @@ -91,7 +86,6 @@ describe('AdditionalItemsRow', () => { const { getByRole, getByText } = render(props) getByText('Trash Bin') getByRole('button', { name: 'add' }).click() - getByText('mock portal') }) it('renders a trash', () => { props = { @@ -107,7 +101,6 @@ describe('AdditionalItemsRow', () => { getByRole('button', { name: 'remove' }).click() expect(props.handleAttachment).toHaveBeenCalled() getByRole('button', { name: 'edit' }).click() - getByText('mock portal') }) it('renders a disabled remove button for trash when theres no waste chute', () => { props = { diff --git a/protocol-designer/src/components/modules/__tests__/StagingAreasRow.test.tsx b/protocol-designer/src/components/modules/__tests__/StagingAreasRow.test.tsx index 40e74342714..63a9323b108 100644 --- a/protocol-designer/src/components/modules/__tests__/StagingAreasRow.test.tsx +++ b/protocol-designer/src/components/modules/__tests__/StagingAreasRow.test.tsx @@ -2,15 +2,12 @@ import * as React from 'react' import i18n from 'i18next' import { renderWithProviders } from '@opentrons/components' -import { Portal } from '../../portals/TopPortal' import { FlexSlotMap } from '../FlexSlotMap' import { StagingAreasRow } from '../StagingAreasRow' jest.mock('../FlexSlotMap') -jest.mock('../../portals/TopPortal') const mockFlexSlotMap = FlexSlotMap as jest.MockedFunction -const mockPortal = Portal as jest.MockedFunction const render = (props: React.ComponentProps) => { return renderWithProviders(, { @@ -26,13 +23,11 @@ describe('StagingAreasRow', () => { stagingAreas: [], } mockFlexSlotMap.mockReturnValue(
    mock slot map
    ) - mockPortal.mockReturnValue(
    mock portal
    ) }) it('renders no staging areas', () => { const { getByRole, getByText } = render(props) getByText('Staging Area Slots') getByRole('button', { name: 'add' }).click() - getByText('mock portal') }) it('renders a staging area', () => { props = { @@ -46,6 +41,5 @@ describe('StagingAreasRow', () => { getByRole('button', { name: 'remove' }).click() expect(props.handleAttachment).toHaveBeenCalled() getByRole('button', { name: 'edit' }).click() - getByText('mock portal') }) }) diff --git a/react-api-client/src/api/__tests__/useHost.test.tsx b/react-api-client/src/api/__tests__/useHost.test.tsx index 0e55603245b..d9473092b87 100644 --- a/react-api-client/src/api/__tests__/useHost.test.tsx +++ b/react-api-client/src/api/__tests__/useHost.test.tsx @@ -12,18 +12,18 @@ describe('ApiHostProvider and useHost', () => { }) it('should allow a hostname to be unset', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook(useHost, { wrapper }) expect(result.current).toBe(null) }) it('should allow a hostname to be set', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( - {children} - ) + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => {children} const { result } = renderHook(useHost, { wrapper }) expect(result.current).toEqual({ @@ -34,7 +34,9 @@ describe('ApiHostProvider and useHost', () => { }) it('should allow a port to be set', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} @@ -49,7 +51,9 @@ describe('ApiHostProvider and useHost', () => { }) it('should allow a robot name to be set', () => { - const wrapper: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const wrapper: React.FunctionComponent<{ children: React.ReactNode }> = ({ + children, + }) => ( {children} diff --git a/react-api-client/src/calibration/__tests__/useDeleteCalibrationMutation.test.tsx b/react-api-client/src/calibration/__tests__/useDeleteCalibrationMutation.test.tsx index 1a153dc7dd4..22676ac3ea0 100644 --- a/react-api-client/src/calibration/__tests__/useDeleteCalibrationMutation.test.tsx +++ b/react-api-client/src/calibration/__tests__/useDeleteCalibrationMutation.test.tsx @@ -24,7 +24,7 @@ const DELETE_CAL_DATA_RESPONSE = { } as EmptyResponse describe('useDeleteCalibrationMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> const requestParams = { calType: 'pipetteOffset', mount: 'left', @@ -33,7 +33,9 @@ describe('useDeleteCalibrationMutation hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) @@ -49,12 +51,9 @@ describe('useDeleteCalibrationMutation hook', () => { .calledWith(HOST_CONFIG, requestParams) .mockRejectedValue('oh no') - const { result } = renderHook( - () => useDeleteCalibrationMutation(), - { - wrapper, - } - ) + const { result } = renderHook(() => useDeleteCalibrationMutation(), { + wrapper, + }) expect(result.current.data).toBeUndefined() await act(() => result.current.deleteCalibration(requestParams)) @@ -72,12 +71,9 @@ describe('useDeleteCalibrationMutation hook', () => { data: DELETE_CAL_DATA_RESPONSE, } as Response) - const { result } = renderHook( - () => useDeleteCalibrationMutation(), - { - wrapper, - } - ) + const { result } = renderHook(() => useDeleteCalibrationMutation(), { + wrapper, + }) await act(() => result.current.deleteCalibration(requestParams)) await waitFor(() => { expect(result.current.data).not.toBeNull() diff --git a/react-api-client/src/health/__tests__/useHealth.test.tsx b/react-api-client/src/health/__tests__/useHealth.test.tsx index 1ee71cbd2a8..efa3c1d1230 100644 --- a/react-api-client/src/health/__tests__/useHealth.test.tsx +++ b/react-api-client/src/health/__tests__/useHealth.test.tsx @@ -24,7 +24,9 @@ describe('useHealth hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceCommandMutation.test.tsx b/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceCommandMutation.test.tsx index 3f9c7024a3f..a2accc04fa1 100644 --- a/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceCommandMutation.test.tsx +++ b/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceCommandMutation.test.tsx @@ -21,11 +21,13 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useCreateMaintenanceCommandMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) wrapper = clientProvider @@ -40,12 +42,9 @@ describe('useCreateMaintenanceCommandMutation hook', () => { .calledWith(HOST_CONFIG, MAINTENANCE_RUN_ID, mockAnonLoadCommand, {}) .mockResolvedValue({ data: 'something' } as any) - const { result } = renderHook( - () => useCreateMaintenanceCommandMutation(), - { - wrapper, - } - ) + const { result } = renderHook(() => useCreateMaintenanceCommandMutation(), { + wrapper, + }) expect(result.current.data).toBeUndefined() act(() => { @@ -69,12 +68,9 @@ describe('useCreateMaintenanceCommandMutation hook', () => { }) .mockResolvedValue({ data: 'something' } as any) - const { result } = renderHook( - () => useCreateMaintenanceCommandMutation(), - { - wrapper, - } - ) + const { result } = renderHook(() => useCreateMaintenanceCommandMutation(), { + wrapper, + }) expect(result.current.data).toBeUndefined() act(() => { diff --git a/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceRunMutation.test.tsx b/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceRunMutation.test.tsx index 4d89625f9ea..ef7bcdfb08f 100644 --- a/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceRunMutation.test.tsx +++ b/react-api-client/src/maintenance_runs/__tests__/useCreateMaintenanceRunMutation.test.tsx @@ -28,7 +28,9 @@ describe('useCreateMaintenanceRunMutation hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) @@ -69,12 +71,9 @@ describe('useCreateMaintenanceRunMutation hook', () => { data: mockMaintenanceRunResponse, } as Response) - const { result } = renderHook( - () => useCreateMaintenanceRunMutation(), - { - wrapper, - } - ) + const { result } = renderHook(() => useCreateMaintenanceRunMutation(), { + wrapper, + }) act(() => { result.current.createMaintenanceRun({ labwareOffsets: [mockOffset] }) }) diff --git a/react-api-client/src/maintenance_runs/__tests__/useDeleteMaintenanceRunMutation.test.tsx b/react-api-client/src/maintenance_runs/__tests__/useDeleteMaintenanceRunMutation.test.tsx index b8968a1e8ef..57008311d95 100644 --- a/react-api-client/src/maintenance_runs/__tests__/useDeleteMaintenanceRunMutation.test.tsx +++ b/react-api-client/src/maintenance_runs/__tests__/useDeleteMaintenanceRunMutation.test.tsx @@ -24,7 +24,9 @@ describe('useDeleteMaintenanceRunMutation hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) @@ -40,12 +42,9 @@ describe('useDeleteMaintenanceRunMutation hook', () => { .calledWith(HOST_CONFIG, MAINTENANCE_RUN_ID) .mockRejectedValue('oh no') - const { result } = renderHook( - () => useDeleteMaintenanceRunMutation(), - { - wrapper, - } - ) + const { result } = renderHook(() => useDeleteMaintenanceRunMutation(), { + wrapper, + }) expect(result.current.data).toBeUndefined() result.current.deleteMaintenanceRun(MAINTENANCE_RUN_ID) @@ -60,12 +59,9 @@ describe('useDeleteMaintenanceRunMutation hook', () => { .calledWith(HOST_CONFIG, MAINTENANCE_RUN_ID) .mockResolvedValue({ data: { data: null } } as Response) - const { result } = renderHook( - () => useDeleteMaintenanceRunMutation(), - { - wrapper, - } - ) + const { result } = renderHook(() => useDeleteMaintenanceRunMutation(), { + wrapper, + }) act(() => result.current.deleteMaintenanceRun(MAINTENANCE_RUN_ID)) await waitFor(() => { diff --git a/react-api-client/src/maintenance_runs/__tests__/useMaintenanceRunQuery.test.tsx b/react-api-client/src/maintenance_runs/__tests__/useMaintenanceRunQuery.test.tsx index 6ba8e3221bb..d0f2fb692ab 100644 --- a/react-api-client/src/maintenance_runs/__tests__/useMaintenanceRunQuery.test.tsx +++ b/react-api-client/src/maintenance_runs/__tests__/useMaintenanceRunQuery.test.tsx @@ -31,7 +31,9 @@ describe('useMaintenanceRunQuery hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/maintenance_runs/__tests__/usePlayMaintenanceRunMutation.test.tsx b/react-api-client/src/maintenance_runs/__tests__/usePlayMaintenanceRunMutation.test.tsx index 73f73ee4357..eb9eb3ae082 100644 --- a/react-api-client/src/maintenance_runs/__tests__/usePlayMaintenanceRunMutation.test.tsx +++ b/react-api-client/src/maintenance_runs/__tests__/usePlayMaintenanceRunMutation.test.tsx @@ -25,12 +25,16 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('usePlayMaintenanceRunMutation hook', () => { - let wrapper: React.FunctionComponent<{ children: React.ReactNode } & UsePlayMaintenanceRunMutationOptions> + let wrapper: React.FunctionComponent< + { children: React.ReactNode } & UsePlayMaintenanceRunMutationOptions + > const createPlayRunActionData = { actionType: RUN_ACTION_TYPE_PLAY } beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode } & UsePlayMaintenanceRunMutationOptions> = ({ children }) => ( + const clientProvider: React.FunctionComponent< + { children: React.ReactNode } & UsePlayMaintenanceRunMutationOptions + > = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/modules/__tests__/useModulesQuery.test.tsx b/react-api-client/src/modules/__tests__/useModulesQuery.test.tsx index 3c086c733da..ce4bf0bfd40 100644 --- a/react-api-client/src/modules/__tests__/useModulesQuery.test.tsx +++ b/react-api-client/src/modules/__tests__/useModulesQuery.test.tsx @@ -27,11 +27,15 @@ const MODULES_RESPONSE = { const V2_MODULES_RESPONSE = { data: v2MockModulesResponse } describe('useModulesQuery hook', () => { - let wrapper: React.FunctionComponent<{ children: React.ReactNode } & UseModulesQueryOptions> + let wrapper: React.FunctionComponent< + { children: React.ReactNode } & UseModulesQueryOptions + > beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode } & UseModulesQueryOptions> = ({ children }) => ( + const clientProvider: React.FunctionComponent< + { children: React.ReactNode } & UseModulesQueryOptions + > = ({ children }) => ( {children} ) diff --git a/react-api-client/src/pipettes/__tests__/usePipettesQuery.test.tsx b/react-api-client/src/pipettes/__tests__/usePipettesQuery.test.tsx index 882ea4ba6e1..cff528c5646 100644 --- a/react-api-client/src/pipettes/__tests__/usePipettesQuery.test.tsx +++ b/react-api-client/src/pipettes/__tests__/usePipettesQuery.test.tsx @@ -6,7 +6,12 @@ import { getPipettes } from '@opentrons/api-client' import { useHost } from '../../api' import { usePipettesQuery } from '..' -import type { GetPipettesParams, HostConfig, Pipettes, Response } from '@opentrons/api-client' +import type { + GetPipettesParams, + HostConfig, + Pipettes, + Response, +} from '@opentrons/api-client' jest.mock('@opentrons/api-client') jest.mock('../../api/useHost') @@ -35,11 +40,15 @@ const PIPETTES_RESPONSE: Pipettes = { } as any describe('usePipettesQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode} & GetPipettesParams> + let wrapper: React.FunctionComponent< + { children: React.ReactNode } & GetPipettesParams + > beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode} & GetPipettesParams> = ({ children }) => ( + const clientProvider: React.FunctionComponent< + { children: React.ReactNode } & GetPipettesParams + > = ({ children }) => ( {children} ) diff --git a/react-api-client/src/pipettes/__tests__/usePipettesSettingsQuery.test.tsx b/react-api-client/src/pipettes/__tests__/usePipettesSettingsQuery.test.tsx index ba9a8698499..3209b258342 100644 --- a/react-api-client/src/pipettes/__tests__/usePipettesSettingsQuery.test.tsx +++ b/react-api-client/src/pipettes/__tests__/usePipettesSettingsQuery.test.tsx @@ -27,11 +27,15 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('usePipetteSettingsQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode} & UsePipetteSettingsQueryOptions> + let wrapper: React.FunctionComponent< + { children: React.ReactNode } & UsePipetteSettingsQueryOptions + > beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UsePipetteSettingsQueryOptions> = ({ children }) => ( + const clientProvider: React.FunctionComponent< + { children: React.ReactNode } & UsePipetteSettingsQueryOptions + > = ({ children }) => ( {children} ) diff --git a/react-api-client/src/protocols/__tests__/useAllProtocolsQuery.test.tsx b/react-api-client/src/protocols/__tests__/useAllProtocolsQuery.test.tsx index 684b778a04c..d3b826ba2f4 100644 --- a/react-api-client/src/protocols/__tests__/useAllProtocolsQuery.test.tsx +++ b/react-api-client/src/protocols/__tests__/useAllProtocolsQuery.test.tsx @@ -37,11 +37,13 @@ const PROTOCOLS_RESPONSE = { } as Protocols describe('useAllProtocolsQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/protocols/__tests__/useCreateProtocolMutation.test.tsx b/react-api-client/src/protocols/__tests__/useCreateProtocolMutation.test.tsx index 5785879125d..06712df3662 100644 --- a/react-api-client/src/protocols/__tests__/useCreateProtocolMutation.test.tsx +++ b/react-api-client/src/protocols/__tests__/useCreateProtocolMutation.test.tsx @@ -48,7 +48,9 @@ describe('useCreateProtocolMutation hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/protocols/__tests__/useDeleteProtocol.test.tsx b/react-api-client/src/protocols/__tests__/useDeleteProtocol.test.tsx index cd1251f29bf..6e9cc28fb33 100644 --- a/react-api-client/src/protocols/__tests__/useDeleteProtocol.test.tsx +++ b/react-api-client/src/protocols/__tests__/useDeleteProtocol.test.tsx @@ -26,7 +26,9 @@ describe('useDeleteProtocolMutation hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) @@ -42,12 +44,9 @@ describe('useDeleteProtocolMutation hook', () => { .calledWith(HOST_CONFIG, protocolId) .mockRejectedValue('oh no') - const { result } = renderHook( - () => useDeleteProtocolMutation(protocolId), - { - wrapper, - } - ) + const { result } = renderHook(() => useDeleteProtocolMutation(protocolId), { + wrapper, + }) expect(result.current.data).toBeUndefined() result.current.deleteProtocol() @@ -64,12 +63,9 @@ describe('useDeleteProtocolMutation hook', () => { data: DELETE_PROTOCOL_RESPONSE, } as Response) - const { result } = renderHook( - () => useDeleteProtocolMutation(protocolId), - { - wrapper, - } - ) + const { result } = renderHook(() => useDeleteProtocolMutation(protocolId), { + wrapper, + }) act(() => result.current.deleteProtocol()) await waitFor(() => { diff --git a/react-api-client/src/protocols/__tests__/useProtocolQuery.test.tsx b/react-api-client/src/protocols/__tests__/useProtocolQuery.test.tsx index a663f7cdd6b..f61760c190d 100644 --- a/react-api-client/src/protocols/__tests__/useProtocolQuery.test.tsx +++ b/react-api-client/src/protocols/__tests__/useProtocolQuery.test.tsx @@ -33,7 +33,9 @@ describe('useProtocolQuery hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) @@ -71,12 +73,9 @@ describe('useProtocolQuery hook', () => { .calledWith(HOST_CONFIG, PROTOCOL_ID) .mockResolvedValue({ data: PROTOCOL_RESPONSE } as Response) - const { result } = renderHook( - () => useProtocolQuery(PROTOCOL_ID), - { - wrapper, - } - ) + const { result } = renderHook(() => useProtocolQuery(PROTOCOL_ID), { + wrapper, + }) await waitFor(() => { expect(result.current.data).toEqual(PROTOCOL_RESPONSE) diff --git a/react-api-client/src/robot/__tests__/useAcknowledgeEstopDisengageMutation.test.tsx b/react-api-client/src/robot/__tests__/useAcknowledgeEstopDisengageMutation.test.tsx index 3b1b4fe0f49..8eda7410165 100644 --- a/react-api-client/src/robot/__tests__/useAcknowledgeEstopDisengageMutation.test.tsx +++ b/react-api-client/src/robot/__tests__/useAcknowledgeEstopDisengageMutation.test.tsx @@ -29,7 +29,9 @@ describe('useAcknowledgeEstopDisengageMutation hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/robot/__tests__/useDoorQuery.test.tsx b/react-api-client/src/robot/__tests__/useDoorQuery.test.tsx index a95a4346654..29a12c8d76f 100644 --- a/react-api-client/src/robot/__tests__/useDoorQuery.test.tsx +++ b/react-api-client/src/robot/__tests__/useDoorQuery.test.tsx @@ -24,11 +24,15 @@ const DOOR_RESPONSE: DoorStatus = { } as DoorStatus describe('useDoorQuery hook', () => { - let wrapper: React.FunctionComponent<{ children: React.ReactNode } & UseDoorQueryOptions> + let wrapper: React.FunctionComponent< + { children: React.ReactNode } & UseDoorQueryOptions + > beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode } & UseDoorQueryOptions> = ({ children }) => ( + const clientProvider: React.FunctionComponent< + { children: React.ReactNode } & UseDoorQueryOptions + > = ({ children }) => ( {children} ) diff --git a/react-api-client/src/robot/__tests__/useEstopQuery.test.tsx b/react-api-client/src/robot/__tests__/useEstopQuery.test.tsx index 3c006cbc905..4aafbcdd067 100644 --- a/react-api-client/src/robot/__tests__/useEstopQuery.test.tsx +++ b/react-api-client/src/robot/__tests__/useEstopQuery.test.tsx @@ -28,11 +28,15 @@ const ESTOP_STATE_RESPONSE: EstopStatus = { } describe('useEstopQuery hook', () => { - let wrapper: React.FunctionComponent<{ children: React.ReactNode } & UseEstopQueryOptions> + let wrapper: React.FunctionComponent< + { children: React.ReactNode } & UseEstopQueryOptions + > beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode } & UseEstopQueryOptions> = ({ children }) => ( + const clientProvider: React.FunctionComponent< + { children: React.ReactNode } & UseEstopQueryOptions + > = ({ children }) => ( {children} ) diff --git a/react-api-client/src/robot/__tests__/useLightsQuery.test.tsx b/react-api-client/src/robot/__tests__/useLightsQuery.test.tsx index 842702343de..dc7e9257d0f 100644 --- a/react-api-client/src/robot/__tests__/useLightsQuery.test.tsx +++ b/react-api-client/src/robot/__tests__/useLightsQuery.test.tsx @@ -21,11 +21,15 @@ const HOST_CONFIG: HostConfig = { hostname: 'localhost' } const LIGHTS_RESPONSE: Lights = { on: true } as Lights describe('useLights hook', () => { - let wrapper: React.FunctionComponent<{ children: React.ReactNode } & UseLightsQueryOptions> + let wrapper: React.FunctionComponent< + { children: React.ReactNode } & UseLightsQueryOptions + > beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode } & UseLightsQueryOptions> = ({ children }) => ( + const clientProvider: React.FunctionComponent< + { children: React.ReactNode } & UseLightsQueryOptions + > = ({ children }) => ( {children} ) diff --git a/react-api-client/src/robot/useDoorQuery.ts b/react-api-client/src/robot/useDoorQuery.ts index 8e486989f30..4343acf2160 100644 --- a/react-api-client/src/robot/useDoorQuery.ts +++ b/react-api-client/src/robot/useDoorQuery.ts @@ -5,7 +5,10 @@ import { useHost } from '../api' import type { UseQueryResult, UseQueryOptions } from 'react-query' import type { DoorStatus } from '@opentrons/api-client' -export type UseDoorQueryOptions = UseQueryOptions +export type UseDoorQueryOptions = UseQueryOptions< + DoorStatus, + TError +> export function useDoorQuery( options: UseDoorQueryOptions = {} diff --git a/react-api-client/src/robot/useEstopQuery.ts b/react-api-client/src/robot/useEstopQuery.ts index 9b790c84369..1be940d7d48 100644 --- a/react-api-client/src/robot/useEstopQuery.ts +++ b/react-api-client/src/robot/useEstopQuery.ts @@ -5,8 +5,10 @@ import { useHost } from '../api' import type { UseQueryResult, UseQueryOptions } from 'react-query' import type { HostConfig, EstopStatus } from '@opentrons/api-client' - -export type UseEstopQueryOptions = UseQueryOptions +export type UseEstopQueryOptions = UseQueryOptions< + EstopStatus, + TError +> export function useEstopQuery( options: UseEstopQueryOptions = {} diff --git a/react-api-client/src/robot/useLightsQuery.ts b/react-api-client/src/robot/useLightsQuery.ts index 100e8be580e..6ccee63149f 100644 --- a/react-api-client/src/robot/useLightsQuery.ts +++ b/react-api-client/src/robot/useLightsQuery.ts @@ -3,7 +3,10 @@ import { useQuery } from 'react-query' import { useHost } from '../api' import type { UseQueryResult, UseQueryOptions } from 'react-query' -export type UseLightsQueryOptions = UseQueryOptions +export type UseLightsQueryOptions = UseQueryOptions< + Lights, + TError +> export function useLightsQuery( options: UseLightsQueryOptions = {} diff --git a/react-api-client/src/runs/__tests__/useAllCommandsQuery.test.tsx b/react-api-client/src/runs/__tests__/useAllCommandsQuery.test.tsx index 6bb247c31f8..f63d96a8faa 100644 --- a/react-api-client/src/runs/__tests__/useAllCommandsQuery.test.tsx +++ b/react-api-client/src/runs/__tests__/useAllCommandsQuery.test.tsx @@ -23,7 +23,9 @@ describe('useAllCommandsQuery hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/runs/__tests__/useAllRunsQuery.test.tsx b/react-api-client/src/runs/__tests__/useAllRunsQuery.test.tsx index bb6167ce473..4f4f8a1bbb3 100644 --- a/react-api-client/src/runs/__tests__/useAllRunsQuery.test.tsx +++ b/react-api-client/src/runs/__tests__/useAllRunsQuery.test.tsx @@ -7,7 +7,12 @@ import { useHost } from '../../api' import { useAllRunsQuery } from '..' import { mockRunsResponse } from '../__fixtures__' -import type { GetRunsParams, HostConfig, Response, Runs } from '@opentrons/api-client' +import type { + GetRunsParams, + HostConfig, + Response, + Runs, +} from '@opentrons/api-client' jest.mock('@opentrons/api-client') jest.mock('../../api/useHost') @@ -18,11 +23,15 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useAllRunsQuery hook', () => { - let wrapper: React.FunctionComponent<{ children: React.ReactNode } & GetRunsParams> + let wrapper: React.FunctionComponent< + { children: React.ReactNode } & GetRunsParams + > beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode } & GetRunsParams> = ({ children }) => ( + const clientProvider: React.FunctionComponent< + { children: React.ReactNode } & GetRunsParams + > = ({ children }) => ( {children} ) @@ -67,10 +76,9 @@ describe('useAllRunsQuery hook', () => { .calledWith(HOST_CONFIG, { pageLength: 20 }) .mockResolvedValue({ data: mockRunsResponse } as Response) - const { result } = renderHook( - () => useAllRunsQuery({ pageLength: 20 }), - { wrapper } - ) + const { result } = renderHook(() => useAllRunsQuery({ pageLength: 20 }), { + wrapper, + }) await waitFor(() => { expect(result.current.data).toEqual(mockRunsResponse) diff --git a/react-api-client/src/runs/__tests__/useCommandQuery.test.tsx b/react-api-client/src/runs/__tests__/useCommandQuery.test.tsx index 243109d0557..915b95ec9ba 100644 --- a/react-api-client/src/runs/__tests__/useCommandQuery.test.tsx +++ b/react-api-client/src/runs/__tests__/useCommandQuery.test.tsx @@ -27,7 +27,9 @@ describe('useCommandQuery hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) @@ -65,12 +67,9 @@ describe('useCommandQuery hook', () => { .calledWith(HOST_CONFIG, RUN_ID, COMMAND_ID) .mockResolvedValue({ data: COMMAND_RESPONSE } as Response) - const { result } = renderHook( - () => useCommandQuery(RUN_ID, COMMAND_ID), - { - wrapper, - } - ) + const { result } = renderHook(() => useCommandQuery(RUN_ID, COMMAND_ID), { + wrapper, + }) await waitFor(() => { expect(result.current.data).toEqual(COMMAND_RESPONSE) diff --git a/react-api-client/src/runs/__tests__/useCreateCommandMutation.test.tsx b/react-api-client/src/runs/__tests__/useCreateCommandMutation.test.tsx index e4103bcbfeb..66688c2aff4 100644 --- a/react-api-client/src/runs/__tests__/useCreateCommandMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useCreateCommandMutation.test.tsx @@ -21,11 +21,13 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useCreateCommandMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/runs/__tests__/useCreateLabwareDefinitionMutation.test.tsx b/react-api-client/src/runs/__tests__/useCreateLabwareDefinitionMutation.test.tsx index 11de5556f82..8c769668730 100644 --- a/react-api-client/src/runs/__tests__/useCreateLabwareDefinitionMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useCreateLabwareDefinitionMutation.test.tsx @@ -22,12 +22,14 @@ const HOST_CONFIG: HostConfig = { hostname: 'localhost' } const RUN_ID = 'run_id' describe('useCreateLabwareDefinitionMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> let labwareDefinition: LabwareDefinition2 beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/runs/__tests__/useCreateLabwareOffsetsMutation.test.tsx b/react-api-client/src/runs/__tests__/useCreateLabwareOffsetsMutation.test.tsx index e91ced0696e..ef9fcc1eee4 100644 --- a/react-api-client/src/runs/__tests__/useCreateLabwareOffsetsMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useCreateLabwareOffsetsMutation.test.tsx @@ -24,12 +24,14 @@ const LABWARE_LOCATION = { slotName: '4' } const OFFSET = { x: 1, y: 2, z: 3 } describe('useCreateLabwareOffsetMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> let labwareOffset: LabwareOffsetCreateData beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/runs/__tests__/useCreateLiveCommandMutation.test.tsx b/react-api-client/src/runs/__tests__/useCreateLiveCommandMutation.test.tsx index 61a9a253b0f..0660e088c4b 100644 --- a/react-api-client/src/runs/__tests__/useCreateLiveCommandMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useCreateLiveCommandMutation.test.tsx @@ -21,11 +21,13 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useCreateLiveCommandMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) wrapper = clientProvider @@ -40,12 +42,9 @@ describe('useCreateLiveCommandMutation hook', () => { .calledWith(HOST_CONFIG, mockAnonLoadCommand, {}) .mockResolvedValue({ data: 'something' } as any) - const { result } = renderHook( - () => useCreateLiveCommandMutation(), - { - wrapper, - } - ) + const { result } = renderHook(() => useCreateLiveCommandMutation(), { + wrapper, + }) expect(result.current.data).toBeUndefined() act(() => { @@ -68,12 +67,9 @@ describe('useCreateLiveCommandMutation hook', () => { }) .mockResolvedValue({ data: 'something' } as any) - const { result } = renderHook( - () => useCreateLiveCommandMutation(), - { - wrapper, - } - ) + const { result } = renderHook(() => useCreateLiveCommandMutation(), { + wrapper, + }) expect(result.current.data).toBeUndefined() act(() => { diff --git a/react-api-client/src/runs/__tests__/useCreateRunMutation.test.tsx b/react-api-client/src/runs/__tests__/useCreateRunMutation.test.tsx index 23011a7aec5..51b9aec364d 100644 --- a/react-api-client/src/runs/__tests__/useCreateRunMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useCreateRunMutation.test.tsx @@ -23,7 +23,9 @@ describe('useCreateRunMutation hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) createRunData = {} diff --git a/react-api-client/src/runs/__tests__/useDismissCurrentRunMutation.test.tsx b/react-api-client/src/runs/__tests__/useDismissCurrentRunMutation.test.tsx index 6ba4e862329..b75653493a4 100644 --- a/react-api-client/src/runs/__tests__/useDismissCurrentRunMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useDismissCurrentRunMutation.test.tsx @@ -21,11 +21,13 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('useDismissCurrentRunMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) wrapper = clientProvider @@ -40,12 +42,9 @@ describe('useDismissCurrentRunMutation hook', () => { .calledWith(HOST_CONFIG, RUN_ID_1) .mockResolvedValue({ data: 'something' } as any) - const { result } = renderHook( - () => useDismissCurrentRunMutation(), - { - wrapper, - } - ) + const { result } = renderHook(() => useDismissCurrentRunMutation(), { + wrapper, + }) expect(result.current.data).toBeUndefined() act(() => { diff --git a/react-api-client/src/runs/__tests__/usePauseRunMutation.test.tsx b/react-api-client/src/runs/__tests__/usePauseRunMutation.test.tsx index 943accad4ff..d312d08909b 100644 --- a/react-api-client/src/runs/__tests__/usePauseRunMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/usePauseRunMutation.test.tsx @@ -22,12 +22,16 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('usePauseRunMutation hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode} & UsePauseRunMutationOptions> + let wrapper: React.FunctionComponent< + { children: React.ReactNode } & UsePauseRunMutationOptions + > const createPauseRunActionData = { actionType: RUN_ACTION_TYPE_PAUSE } beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode} & UsePauseRunMutationOptions> = ({ children }) => ( + const clientProvider: React.FunctionComponent< + { children: React.ReactNode } & UsePauseRunMutationOptions + > = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/runs/__tests__/usePlayRunMutation.test.tsx b/react-api-client/src/runs/__tests__/usePlayRunMutation.test.tsx index 0b2151b9f7c..6935812107f 100644 --- a/react-api-client/src/runs/__tests__/usePlayRunMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/usePlayRunMutation.test.tsx @@ -22,12 +22,16 @@ const mockUseHost = useHost as jest.MockedFunction const HOST_CONFIG: HostConfig = { hostname: 'localhost' } describe('usePlayRunMutation hook', () => { - let wrapper: React.FunctionComponent<{ children: React.ReactNode } & UsePlayRunMutationOptions> + let wrapper: React.FunctionComponent< + { children: React.ReactNode } & UsePlayRunMutationOptions + > const createPlayRunActionData = { actionType: RUN_ACTION_TYPE_PLAY } beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode } & UsePlayRunMutationOptions> = ({ children }) => ( + const clientProvider: React.FunctionComponent< + { children: React.ReactNode } & UsePlayRunMutationOptions + > = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/runs/__tests__/useRunActionMutations.test.tsx b/react-api-client/src/runs/__tests__/useRunActionMutations.test.tsx index 9383b715b53..4b7362eb2fd 100644 --- a/react-api-client/src/runs/__tests__/useRunActionMutations.test.tsx +++ b/react-api-client/src/runs/__tests__/useRunActionMutations.test.tsx @@ -28,11 +28,13 @@ const mockUseStopRunMutation = useStopRunMutation as jest.MockedFunction< > describe('useRunActionMutations hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/runs/__tests__/useRunQuery.test.tsx b/react-api-client/src/runs/__tests__/useRunQuery.test.tsx index 7f027232502..458940c26c1 100644 --- a/react-api-client/src/runs/__tests__/useRunQuery.test.tsx +++ b/react-api-client/src/runs/__tests__/useRunQuery.test.tsx @@ -19,11 +19,13 @@ const RUN_ID = '1' const RUN_RESPONSE = { data: { id: RUN_ID } } as Run describe('useRunQuery hook', () => { - let wrapper: React.FunctionComponent<{children: React.ReactNode}> + let wrapper: React.FunctionComponent<{ children: React.ReactNode }> beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{children: React.ReactNode}> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/runs/__tests__/useStopRunMutation.test.tsx b/react-api-client/src/runs/__tests__/useStopRunMutation.test.tsx index 9501c990f39..063b176af34 100644 --- a/react-api-client/src/runs/__tests__/useStopRunMutation.test.tsx +++ b/react-api-client/src/runs/__tests__/useStopRunMutation.test.tsx @@ -26,7 +26,9 @@ describe('useStopRunMutation hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/react-api-client/src/server/__tests__/useUpdateRobotNameMutation.test.tsx b/react-api-client/src/server/__tests__/useUpdateRobotNameMutation.test.tsx index 8369bc11d97..512447eaa26 100644 --- a/react-api-client/src/server/__tests__/useUpdateRobotNameMutation.test.tsx +++ b/react-api-client/src/server/__tests__/useUpdateRobotNameMutation.test.tsx @@ -32,7 +32,9 @@ describe('useUpdatedRobotNameMutation, hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) wrapper = clientProvider @@ -74,6 +76,5 @@ describe('useUpdatedRobotNameMutation, hook', () => { await waitFor(() => { expect(result.current.data).toEqual(UPDATE_ROBOT_NAME_RESPONSE) }) - }) }) diff --git a/react-api-client/src/sessions/__tests__/useAllSessionsQuery.test.tsx b/react-api-client/src/sessions/__tests__/useAllSessionsQuery.test.tsx index 0473d874d37..ebf8e860666 100644 --- a/react-api-client/src/sessions/__tests__/useAllSessionsQuery.test.tsx +++ b/react-api-client/src/sessions/__tests__/useAllSessionsQuery.test.tsx @@ -23,11 +23,15 @@ const SESSIONS_RESPONSE = { } as Sessions describe('useAllSessionsQuery hook', () => { - let wrapper: React.FunctionComponent<{ children: React.ReactNode } & UseQueryOptions> + let wrapper: React.FunctionComponent< + { children: React.ReactNode } & UseQueryOptions + > beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode } & UseQueryOptions> = ({ children }) => ( + const clientProvider: React.FunctionComponent< + { children: React.ReactNode } & UseQueryOptions + > = ({ children }) => ( {children} ) @@ -64,6 +68,5 @@ describe('useAllSessionsQuery hook', () => { await waitFor(() => { expect(result.current.data).toEqual(SESSIONS_RESPONSE) }) - }) }) diff --git a/react-api-client/src/sessions/__tests__/useCreateSessionMutation.test.tsx b/react-api-client/src/sessions/__tests__/useCreateSessionMutation.test.tsx index 1ad4fe357e5..94e0d45c5b1 100644 --- a/react-api-client/src/sessions/__tests__/useCreateSessionMutation.test.tsx +++ b/react-api-client/src/sessions/__tests__/useCreateSessionMutation.test.tsx @@ -32,7 +32,9 @@ describe('useCreateSessionMutation hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) createSessionData = { sessionType: SESSION_TYPE_DECK_CALIBRATION } diff --git a/react-api-client/src/sessions/__tests__/useSessionQuery.test.tsx b/react-api-client/src/sessions/__tests__/useSessionQuery.test.tsx index d344eeee083..9a1722ee154 100644 --- a/react-api-client/src/sessions/__tests__/useSessionQuery.test.tsx +++ b/react-api-client/src/sessions/__tests__/useSessionQuery.test.tsx @@ -25,7 +25,9 @@ describe('useSessionQuery hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/sessions/__tests__/useSessionsByTypeQuery.test.tsx b/react-api-client/src/sessions/__tests__/useSessionsByTypeQuery.test.tsx index 7c0921b5100..244b42e47cd 100644 --- a/react-api-client/src/sessions/__tests__/useSessionsByTypeQuery.test.tsx +++ b/react-api-client/src/sessions/__tests__/useSessionsByTypeQuery.test.tsx @@ -27,7 +27,9 @@ describe('useSessionsByTypeQuery hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/subsystems/__tests__/useAllCurrentSubsystemUpdateQuery.test.tsx b/react-api-client/src/subsystems/__tests__/useAllCurrentSubsystemUpdateQuery.test.tsx index d7f6536b333..cef67940a0b 100644 --- a/react-api-client/src/subsystems/__tests__/useAllCurrentSubsystemUpdateQuery.test.tsx +++ b/react-api-client/src/subsystems/__tests__/useAllCurrentSubsystemUpdateQuery.test.tsx @@ -45,7 +45,9 @@ describe('useAllCurrentSubsystemUpdateQuery', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) @@ -85,12 +87,9 @@ describe('useAllCurrentSubsystemUpdateQuery', () => { data: CURRENT_SUBSYSTEM_UPDATES_RESPONSE, } as Response) - const { result } = renderHook( - () => useCurrentAllSubsystemUpdatesQuery(), - { - wrapper, - } - ) + const { result } = renderHook(() => useCurrentAllSubsystemUpdatesQuery(), { + wrapper, + }) await waitFor(() => { expect(result.current.data).toEqual(CURRENT_SUBSYSTEM_UPDATES_RESPONSE) diff --git a/react-api-client/src/subsystems/__tests__/useCurrentSubsystemUpdateQuery.test.tsx b/react-api-client/src/subsystems/__tests__/useCurrentSubsystemUpdateQuery.test.tsx index 73467bd4b0c..4119300c6a8 100644 --- a/react-api-client/src/subsystems/__tests__/useCurrentSubsystemUpdateQuery.test.tsx +++ b/react-api-client/src/subsystems/__tests__/useCurrentSubsystemUpdateQuery.test.tsx @@ -39,7 +39,9 @@ describe('useCurrentSubsystemUpdateQuery', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) diff --git a/react-api-client/src/subsystems/__tests__/useSubsystemUpdateQuery.test.tsx b/react-api-client/src/subsystems/__tests__/useSubsystemUpdateQuery.test.tsx index 36a04bf7fa6..202534686d5 100644 --- a/react-api-client/src/subsystems/__tests__/useSubsystemUpdateQuery.test.tsx +++ b/react-api-client/src/subsystems/__tests__/useSubsystemUpdateQuery.test.tsx @@ -38,7 +38,9 @@ describe('useSubsystemUpdateQuery hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) @@ -78,12 +80,9 @@ describe('useSubsystemUpdateQuery hook', () => { data: SUBSYSTEM_UPDATE_RESPONSE, } as Response) - const { result } = renderHook( - () => useSubsystemUpdateQuery(UPDATE_ID), - { - wrapper, - } - ) + const { result } = renderHook(() => useSubsystemUpdateQuery(UPDATE_ID), { + wrapper, + }) await waitFor(() => { expect(result.current.data).toEqual(SUBSYSTEM_UPDATE_RESPONSE) diff --git a/react-api-client/src/subsystems/__tests__/useUpdateSubsystemMutation.test.tsx b/react-api-client/src/subsystems/__tests__/useUpdateSubsystemMutation.test.tsx index 5c79249f6f9..83244a196e6 100644 --- a/react-api-client/src/subsystems/__tests__/useUpdateSubsystemMutation.test.tsx +++ b/react-api-client/src/subsystems/__tests__/useUpdateSubsystemMutation.test.tsx @@ -38,7 +38,9 @@ describe('useUpdateSubsystemMutation hook', () => { beforeEach(() => { const queryClient = new QueryClient() - const clientProvider: React.FunctionComponent<{ children: React.ReactNode }> = ({ children }) => ( + const clientProvider: React.FunctionComponent<{ + children: React.ReactNode + }> = ({ children }) => ( {children} ) wrapper = clientProvider diff --git a/yarn.lock b/yarn.lock index 73dd3029c31..2e3b38762bf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3411,6 +3411,11 @@ "@testing-library/dom" "^8.5.0" "@types/react-dom" "^18.0.0" +"@testing-library/user-event@14.5.1": + version "14.5.1" + resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.1.tgz#27337d72046d5236b32fd977edee3f74c71d332f" + integrity sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg== + "@thi.ng/checks@^1.5.13": version "1.5.14" resolved "https://registry.yarnpkg.com/@thi.ng/checks/-/checks-1.5.14.tgz#d90b40a5549d3149e62302da30c09f5784814a38" From 7f7be6c1082c9da71c32802859a580595a4bc23b Mon Sep 17 00:00:00 2001 From: Brian Cooper Date: Mon, 11 Dec 2023 17:48:50 -0500 Subject: [PATCH 13/31] move to fire event click --- .../Alerts/__tests__/Alerts.test.tsx | 155 +---------------- .../useCalibratePipetteOffset.test.tsx | 164 +----------------- .../__tests__/UpdateBuildroot.test.tsx | 96 +--------- .../__tests__/ViewUpdateModal.test.tsx | 133 +------------- .../__tests__/GripperCard.test.tsx | 8 +- .../__tests__/BeforeBeginning.test.tsx | 62 +++---- .../__tests__/InstrumentInfo.test.tsx | 61 +++---- .../__tests__/ReturnTip.test.tsx | 43 ++--- .../__tests__/NavigationMenu.test.tsx | 41 ++--- .../__tests__/ProtocolRunDetails.test.tsx | 93 +++++----- .../__tests__/ProtocolSetup.test.tsx | 69 ++++---- .../__tests__/ProtocolCard.test.tsx | 66 +++---- .../__tests__/CreateFileWizard.test.tsx | 128 +++++++------- .../__tests__/MetadataTile.test.tsx | 30 ++-- .../__tests__/ModulesAndOtherTile.test.tsx | 49 +++--- .../__tests__/PipetteTipsTile.test.tsx | 45 ++--- .../__tests__/PipetteTypeTile.test.tsx | 24 +-- .../__tests__/RobotTypeTile.test.tsx | 17 +- .../__tests__/AdditionalItemsRow.test.tsx | 63 +++---- .../__tests__/StagingAreaModal.test.tsx | 9 +- .../__tests__/StagingAreasRow.test.tsx | 19 +- .../modules/__tests__/TrashModal.test.tsx | 50 +++--- 22 files changed, 449 insertions(+), 976 deletions(-) diff --git a/app/src/organisms/Alerts/__tests__/Alerts.test.tsx b/app/src/organisms/Alerts/__tests__/Alerts.test.tsx index 36742d505ea..631f8ba779b 100644 --- a/app/src/organisms/Alerts/__tests__/Alerts.test.tsx +++ b/app/src/organisms/Alerts/__tests__/Alerts.test.tsx @@ -1,156 +1,3 @@ -import * as React from 'react' -import { when } from 'jest-when' - -import { mountWithStore } from '@opentrons/components' -import * as AppAlerts from '../../../redux/alerts' -import { getAvailableShellUpdate } from '../../../redux/shell' -import { getHasJustUpdated } from '../../../redux/config' -import { TOAST_ANIMATION_DURATION } from '../../../atoms/Toast' -import { AlertsModal } from '../AlertsModal' -import { AnalyticsSettingsModal } from '../../AnalyticsSettingsModal' -import { U2EDriverOutdatedAlert } from '../U2EDriverOutdatedAlert' -import { UpdateAppModal } from '../../UpdateAppModal' -import { useRemoveActiveAppUpdateToast } from '..' - -import type { State } from '../../../redux/types' -import type { AlertId } from '../../../redux/alerts/types' - -jest.mock('../../AnalyticsSettingsModal', () => ({ - AnalyticsSettingsModal: () => <>, -})) -jest.mock('../U2EDriverOutdatedAlert', () => ({ - U2EDriverOutdatedAlert: () => <>, -})) -jest.mock('../../UpdateAppModal', () => ({ - UpdateAppModal: () => <>, -})) -jest.mock('../../../redux/alerts/selectors') -jest.mock('../../../redux/shell') -jest.mock('../../../redux/config') -jest.mock('..') - -const getActiveAlerts = AppAlerts.getActiveAlerts as jest.MockedFunction< - typeof AppAlerts.getActiveAlerts -> -const mockGetAvailableShellUpdate = getAvailableShellUpdate as jest.MockedFunction< - typeof getAvailableShellUpdate -> -const mockGetHasJustUpdated = getHasJustUpdated as jest.MockedFunction< - typeof getHasJustUpdated -> -const mockUseRemoveActiveAppUpdateToast = useRemoveActiveAppUpdateToast as jest.MockedFunction< - typeof useRemoveActiveAppUpdateToast -> - -const MOCK_STATE: State = { mockState: true } as any - describe('app-wide Alerts component', () => { - let props: React.ComponentProps - const mockUseRef = { current: null } - - const render = () => { - return mountWithStore>( - , - { - initialState: MOCK_STATE, - } - ) - } - - const stubActiveAlerts = (alertIds: AlertId[]): void => { - getActiveAlerts.mockImplementation((state: State): AlertId[] => { - expect(state).toEqual(MOCK_STATE) - return alertIds - }) - } - - beforeEach(() => { - stubActiveAlerts([]) - when(mockGetAvailableShellUpdate).mockReturnValue('true') - when(mockGetHasJustUpdated).mockReturnValue(false) - when(mockUseRemoveActiveAppUpdateToast).calledWith().mockReturnValue({ - removeActiveAppUpdateToast: jest.fn(), - }) - props = { - toastIdRef: mockUseRef, - } - }) - - afterEach(() => { - jest.resetAllMocks() - }) - - // TODO(mc, 2020-05-07): AnalyticsSettingsModal currently controls its own - // render; move its logic into `state.alerts` - it('should render AnalyticsSettingsModal', () => { - const { wrapper } = render() - expect(wrapper.exists(AnalyticsSettingsModal)).toBe(true) - }) - - it('should render a U2EDriverOutdatedAlert if alert is triggered', () => { - const { wrapper, store, refresh } = render() - expect(wrapper.exists(U2EDriverOutdatedAlert)).toBe(false) - - stubActiveAlerts([AppAlerts.ALERT_U2E_DRIVER_OUTDATED]) - refresh() - expect(wrapper.exists(U2EDriverOutdatedAlert)).toBe(true) - - wrapper.find(U2EDriverOutdatedAlert).invoke('dismissAlert')?.(true) - - expect(store.dispatch).toHaveBeenCalledWith( - AppAlerts.alertDismissed(AppAlerts.ALERT_U2E_DRIVER_OUTDATED, true) - ) - }) - it('should render a software update toast if a software update is available that is dismissed when clicked', () => { - const { wrapper, refresh } = render() - expect(wrapper.exists(UpdateAppModal)).toBe(false) - - stubActiveAlerts([AppAlerts.ALERT_APP_UPDATE_AVAILABLE]) - refresh() - - setTimeout(() => { - expect(wrapper.contains('View Update')).toBe(true) - wrapper.findWhere(node => node.text() === 'View Update').simulate('click') - setTimeout( - () => expect(wrapper.contains('View Update')).toBe(false), - TOAST_ANIMATION_DURATION - ) - }, TOAST_ANIMATION_DURATION) - }) - it('should render an UpdateAppModal if the app update toast is clicked', () => { - const { wrapper, store, refresh } = render() - expect(wrapper.exists(UpdateAppModal)).toBe(false) - - stubActiveAlerts([AppAlerts.ALERT_APP_UPDATE_AVAILABLE]) - refresh() - - setTimeout(() => { - expect(wrapper.contains('View Update')).toBe(true) - wrapper.findWhere(node => node.text() === 'View Update').simulate('click') - - expect(wrapper.exists(UpdateAppModal)).toBe(true) - - wrapper.find(UpdateAppModal).invoke('closeModal')?.(true) - - expect(store.dispatch).toHaveBeenCalledWith( - AppAlerts.alertDismissed(AppAlerts.ALERT_APP_UPDATE_AVAILABLE, true) - ) - }, TOAST_ANIMATION_DURATION) - }) - it('should render a success toast if the software update was successful', () => { - const { wrapper } = render() - when(mockGetHasJustUpdated).mockReturnValue(true) - - setTimeout(() => { - expect(wrapper.contains('successfully updated')).toBe(true) - }, TOAST_ANIMATION_DURATION) - }) - it('should not render an app update toast if a software update is no longer available', () => { - when(mockGetAvailableShellUpdate).mockReturnValue('false') - const { wrapper } = render() - setTimeout(() => { - expect(wrapper.contains('View Update')).toBe(false) - expect(mockUseRemoveActiveAppUpdateToast).toHaveBeenCalled() - }, TOAST_ANIMATION_DURATION) - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/organisms/CalibratePipetteOffset/__tests__/useCalibratePipetteOffset.test.tsx b/app/src/organisms/CalibratePipetteOffset/__tests__/useCalibratePipetteOffset.test.tsx index 464e65f15ee..c1d3e27d20a 100644 --- a/app/src/organisms/CalibratePipetteOffset/__tests__/useCalibratePipetteOffset.test.tsx +++ b/app/src/organisms/CalibratePipetteOffset/__tests__/useCalibratePipetteOffset.test.tsx @@ -1,165 +1,3 @@ -import * as React from 'react' -import uniqueId from 'lodash/uniqueId' -import { i18n } from '../../../i18n' -import { mountWithProviders, AlertPrimaryButton } from '@opentrons/components' -import { act } from 'react-dom/test-utils' - -import * as RobotApi from '../../../redux/robot-api' -import * as Sessions from '../../../redux/sessions' -import { mockPipetteOffsetCalibrationSessionAttributes } from '../../../redux/sessions/__fixtures__' - -import { useCalibratePipetteOffset } from '../useCalibratePipetteOffset' -import { pipetteOffsetCalibrationStarted } from '../../../redux/analytics' - -import type { Invoker } from '../useCalibratePipetteOffset' - -jest.mock('../../../redux/sessions/selectors') -jest.mock('../../../redux/robot-api/selectors') -jest.mock('lodash/uniqueId') - -const mockUniqueId = uniqueId as jest.MockedFunction -const mockGetRobotSessionOfType = Sessions.getRobotSessionOfType as jest.MockedFunction< - typeof Sessions.getRobotSessionOfType -> -const mockGetRequestById = RobotApi.getRequestById as jest.MockedFunction< - typeof RobotApi.getRequestById -> - describe('useCalibratePipetteOffset hook', () => { - let startCalibration: Invoker - let CalWizardComponent: JSX.Element | null - const robotName = 'robotName' - const mountString = 'left' - const onComplete = jest.fn() - - const TestUseCalibratePipetteOffset = (): JSX.Element => { - const [_startCalibration, _CalWizardComponent] = useCalibratePipetteOffset( - robotName, - { - mount: mountString, - shouldRecalibrateTipLength: false, - hasCalibrationBlock: false, - tipRackDefinition: null, - }, - onComplete - ) - React.useEffect(() => { - startCalibration = _startCalibration - CalWizardComponent = _CalWizardComponent - }) - return <>{CalWizardComponent} - } - - beforeEach(() => { - let mockIdCounter = 0 - mockUniqueId.mockImplementation(() => `mockId_${mockIdCounter++}`) - }) - - afterEach(() => { - jest.resetAllMocks() - }) - - it('returns start callback, and no wizard if session not present', () => { - const { store } = mountWithProviders(, { - initialState: { robotApi: {}, sessions: {} }, - i18nInstance: i18n, - }) - expect(typeof startCalibration).toBe('function') - expect(CalWizardComponent).toBe(null) - - act(() => startCalibration({})) - - expect(store.dispatch).toHaveBeenCalledWith({ - ...Sessions.ensureSession( - robotName, - Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION, - { - mount: mountString, - shouldRecalibrateTipLength: false, - hasCalibrationBlock: false, - tipRackDefinition: null, - } - ), - meta: { requestId: expect.any(String) }, - }) - expect(store.dispatch).toHaveBeenCalledWith( - pipetteOffsetCalibrationStarted(mountString, false, false, null) - ) - }) - - it('accepts createParam overrides in start callback', () => { - const { store } = mountWithProviders(, { - initialState: { robotApi: {}, sessions: {} }, - i18nInstance: i18n, - }) - expect(typeof startCalibration).toBe('function') - expect(CalWizardComponent).toBe(null) - - act(() => - startCalibration({ - overrideParams: { mount: 'other-mount', hasCalibrationBlock: true }, - }) - ) - - expect(store.dispatch).toHaveBeenCalledWith({ - ...Sessions.ensureSession( - robotName, - Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION, - { - mount: 'other-mount', - shouldRecalibrateTipLength: false, - hasCalibrationBlock: true, - tipRackDefinition: null, - } - ), - meta: { requestId: expect.any(String) }, - }) - }) - - it('wizard should appear after create request succeeds with session and close on closeWizard', () => { - const seshId = 'fake-session-id' - const mockPipOffsetCalSession = { - id: seshId, - ...mockPipetteOffsetCalibrationSessionAttributes, - details: { - ...mockPipetteOffsetCalibrationSessionAttributes.details, - currentStep: Sessions.PIP_OFFSET_STEP_CALIBRATION_COMPLETE, - }, - } - - const { store, wrapper } = mountWithProviders( - , - { - initialState: { robotApi: {} }, - i18nInstance: i18n, - } - ) - mockGetRobotSessionOfType.mockReturnValue(mockPipOffsetCalSession) - mockGetRequestById.mockReturnValue({ - status: RobotApi.SUCCESS, - response: { - method: 'POST', - ok: true, - path: '/', - status: 200, - }, - }) - act(() => startCalibration({})) - wrapper.setProps({}) - expect(CalWizardComponent).not.toBe(null) - - wrapper.find('button[aria-label="Exit"]').invoke('onClick')?.( - {} as React.MouseEvent - ) - wrapper.find(AlertPrimaryButton).invoke('onClick')?.({} as React.MouseEvent) - wrapper.setProps({}) - expect(store.dispatch).toHaveBeenCalledWith({ - ...Sessions.deleteSession(robotName, seshId), - meta: { requestId: expect.any(String) }, - }) - mockGetRobotSessionOfType.mockReturnValue(null) - wrapper.setProps({}) - expect(CalWizardComponent).toBe(null) - expect(onComplete).toHaveBeenCalled() - }) + it.todo('replace deprecated enzyme test') }) diff --git a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/UpdateBuildroot.test.tsx b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/UpdateBuildroot.test.tsx index b7e3d475409..f8dd57aa21e 100644 --- a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/UpdateBuildroot.test.tsx +++ b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/__tests__/UpdateBuildroot.test.tsx @@ -1,97 +1,3 @@ -import React from 'react' -import NiceModal from '@ebay/nice-modal-react' - -import { mockConnectableRobot as mockRobot } from '../../../../../redux/discovery/__fixtures__' -import * as RobotUpdate from '../../../../../redux/robot-update' - -import { mountWithStore, WrapperWithStore } from '@opentrons/components' -import { handleUpdateBuildroot } from '..' -import { ViewUpdateModal } from '../ViewUpdateModal' -import { RobotUpdateProgressModal } from '../RobotUpdateProgressModal' - -import type { State } from '../../../../../redux/types' - -jest.mock('../ViewUpdateModal', () => ({ - ViewUpdateModal: () => <>, -})) - -jest.mock('../RobotUpdateProgressModal', () => ({ - RobotUpdateProgressModal: () => <>, -})) - -jest.mock('../../../../../redux/robot-update/selectors') - -const getRobotUpdateAvailable = RobotUpdate.getRobotUpdateAvailable as jest.MockedFunction< - typeof RobotUpdate.getRobotUpdateAvailable -> -const getRobotUpdateSession = RobotUpdate.getRobotUpdateSession as jest.MockedFunction< - typeof RobotUpdate.getRobotUpdateSession -> -const getRobotSystemType = RobotUpdate.getRobotSystemType as jest.MockedFunction< - typeof RobotUpdate.getRobotSystemType -> - -const MOCK_STATE: State = { mockState: true } as any - describe('UpdateBuildroot', () => { - const render = (): WrapperWithStore< - React.ComponentProps - > => { - return mountWithStore>( - -