Unverified Commit 4e2d472f authored by Andrey Azov's avatar Andrey Azov Committed by GitHub
Browse files

Add ADR for moving to React testing library, and migrate several test files from Enzyme (#407)

parent 53b8086d
Pipeline #113763 passed with stages
in 4 minutes and 38 seconds
# 4. Unit Tests
Date: 2018-08-30
Date: 2018-08-30; Last update date: 2019-04-09
## Status
Accepted
Accepted.
See [0016-react-testing-library](0016-react-testing-library.md) for updated discussion of choosing a library for unit-testing React components.
## Context
......
......@@ -4,7 +4,7 @@ Date: 2019-03-15
## Status
Pending
Accepted
## Context
......
# 16. React testing library for unit testing React components
Date: 2020-11-28
## Status
Accepted
## Related ADR(s)
- [0004-unit-tests](0004-unit-tests.md)
## Context
In [0004-unit-tests](0004-unit-tests.md), we considered two alternative libraries for testing React components: `enzyme` and `react-testing-library`. By that time, we had already been using `enzyme` in `ensembl-client`, and we liked the convenience of selecting components and, if needed, inspecting their props that `enzyme` provided. We therefore decided to stick with `enzyme`. We agreed, however, that our tests would follow the same philosophy as was advocated by the creator of `react-testing-library`, namely that we would never attempt to test implementation details of a component, but would only test component's public API, the html output of a component, and side effects that a component can cause. We thus decided not to use shallow rendering or snapshot testing of serialized components; but rather to test components' behaviour by rendering them fully to the DOM.
Over a year and a half later, it has become clear that the extensive and elegant API of `enzyme`, with its multiple convenience functions for selecting and inspecting components, comes at a significant cost. In order to provide this API, `enzyme` relies on the knowledge of React's internals, which can, and do, change between releases. Every time this happens, `enzyme` has to catch up, and projects relying on `enzyme` need to wait until `enzyme` becomes capable of supporting the latest version of React before being able to update to this version.
Several developments have made us reconsider our choice:
1. React core team members have strongly voiced their concern about the testing methodology that requires knowledge of React's internals:
- Sebastian Markbage [writes](https://twitter.com/sebmarkbage/status/1214325736867160064): "I'm getting pretty convinced that testing that relies on asserting on implementation details like what `react-test-renderer`, `react-test-renderer/shallow` and `enzyme` does breaks the notion of semver. They mean that every change to the internals of a component is a breaking change. That in turn effectively makes everything a breaking change, and as a result, makes the notion of semver useless... Therefore, I think the ecosystem should move away from those testing techniques and opt for things like react-testing-library."
- Dan Abramov [writes](https://github.com/enzymejs/enzyme/issues/2358) in a github issue for `enzyme`: "Please note that in longer term, this isn't really going to be sustainable. We are planning bigger refactors which will change the internal data structure. I wonder if it would be better if Enzyme just shipped with its own copy of React that may lag behind in features. In our experience, Enzyme lagging behind due to its invasive reliance on internals has been the biggest factor in moving away from it."
2. On October 20, 2020, React v17 was released. Despite the fact that the public API of v17 has not changed compared to v16, its internals have changed sufficiently for `enzyme` to become incompatible with it. As of the time of this writing, over a month later, the `enzyme` team still has not released their adaptor for React v17. Meanwhile, `react-testing-library` has been compatible with React v17 from day one. This means that using `enzyme` puts us in an unfortunate position where our ability to update to the latest version of React becomes dependent on how fast the `enzyme` team can release a new adaptor, and there is no way of predicting how long this delay will take.
3. There seem to be problems with the development of the `enzyme` library:
- The project lacks clarity of vision. The maintainer is involved in numerous other projects and is [overworked](https://github.com/enzymejs/enzyme/issues/2429#issuecomment-733995565).
- An intention has been expressed to rely less on React internals in future versions ([see this issue](https://github.com/enzymejs/enzyme/issues/1648) and the discussion in [this issue](https://github.com/enzymejs/enzyme/issues/2358)); but there has been no concrete progress in this direction over the last years.
- Some parts of `enzyme`'s api no longer even work properly since the release of React fiber and React hooks; while other parts are about to be deprecated. For example, the maintainer feels strongly that the `simulate` method is an unfortunate misnomer, because it does not really simulate DOM events, and plans to remove it from the future major version — if one ever comes out. This makes the api unstable and unreliable.
There are also some additional signals from the community suggesting that it is strongly favouring `react-testing-library`:
- React's documentation site recommends React testing library over Enzyme:
> We recommend using React Testing Library which is designed to enable and encourage writing tests that use your components as the end users do.
- An influential consultancy _Thoughtworks_, in the Nov 2019 edition of their _Technology Radar_ periodical, [removed](https://www.thoughtworks.com/radar/languages-and-frameworks/enzyme) `enzyme` from the list of their recommended technologies in favour of `react-testing-library`.
- In September 2020, `react-testing-library` has overtaken `enzyme` in popularity, according to the number of NPM downloads.
## Decision
While it is still possible that at some indeterminate point in the future, a new version of `enzyme` will come out that will combine a powerful and elegant api with complete agnosticism about the React internals, it is a safer bet to switch to `react-testing-library` now, and to prefer the seamlessness of React upgrades that it offers to a slightly more convenient component selection api of `enzyme`.
## Consequences
Going forward, all new tests for React components will be written using `react-testing-library` and utility libraries from the same family (such as `@testing-library/user-event`). The existing tests that are based on `enzyme` will be migrated over to `react-testing-library`. The migration is expected to proceed smoothly, because our tests have been written in a style very close to what is expected when using `react-testing-library`.
......@@ -1262,6 +1262,16 @@
"regenerator-runtime": "^0.13.4"
}
},
"@babel/runtime-corejs3": {
"version": "7.12.5",
"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.12.5.tgz",
"integrity": "sha512-roGr54CsTmNPPzZoCP1AmDXuBoNao7tnSA83TXTwt+UK5QVyh1DIJnrgYRPWKCF2flqZQXwa7Yr8v7VmLzF0YQ==",
"dev": true,
"requires": {
"core-js-pure": "^3.0.0",
"regenerator-runtime": "^0.13.4"
}
},
"@babel/template": {
"version": "7.10.4",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
......@@ -3550,12 +3560,238 @@
"loader-utils": "^2.0.0"
}
},
"@testing-library/dom": {
"version": "7.28.1",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.28.1.tgz",
"integrity": "sha512-acv3l6kDwZkQif/YqJjstT3ks5aaI33uxGNVIQmdKzbZ2eMKgg3EV2tB84GDdc72k3Kjhl6mO8yUt6StVIdRDg==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.10.4",
"@babel/runtime": "^7.12.5",
"@types/aria-query": "^4.2.0",
"aria-query": "^4.2.2",
"chalk": "^4.1.0",
"dom-accessibility-api": "^0.5.4",
"lz-string": "^1.4.4",
"pretty-format": "^26.6.2"
},
"dependencies": {
"@babel/runtime": {
"version": "7.12.5",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
"integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
"dev": true,
"requires": {
"regenerator-runtime": "^0.13.4"
}
},
"@jest/types": {
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
"integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
"dev": true,
"requires": {
"@types/istanbul-lib-coverage": "^2.0.0",
"@types/istanbul-reports": "^3.0.0",
"@types/node": "*",
"@types/yargs": "^15.0.0",
"chalk": "^4.0.0"
}
},
"ansi-regex": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
"dev": true
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true
},
"pretty-format": {
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
"integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
"dev": true,
"requires": {
"@jest/types": "^26.6.2",
"ansi-regex": "^5.0.0",
"ansi-styles": "^4.0.0",
"react-is": "^17.0.1"
}
},
"react-is": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
"integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==",
"dev": true
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"@testing-library/jest-dom": {
"version": "5.11.6",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.11.6.tgz",
"integrity": "sha512-cVZyUNRWwUKI0++yepYpYX7uhrP398I+tGz4zOlLVlUYnZS+Svuxv4fwLeCIy7TnBYKXUaOlQr3vopxL8ZfEnA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.9.2",
"@types/testing-library__jest-dom": "^5.9.1",
"aria-query": "^4.2.2",
"chalk": "^3.0.0",
"css": "^3.0.0",
"css.escape": "^1.5.1",
"lodash": "^4.17.15",
"redent": "^3.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
"dev": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true
},
"redent": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
"integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
"dev": true,
"requires": {
"indent-string": "^4.0.0",
"strip-indent": "^3.0.0"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"@testing-library/react": {
"version": "11.2.2",
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.2.tgz",
"integrity": "sha512-jaxm0hwUjv+hzC+UFEywic7buDC9JQ1q3cDsrWVSDAPmLotfA6E6kUHlYm/zOeGCac6g48DR36tFHxl7Zb+N5A==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"@testing-library/dom": "^7.28.1"
},
"dependencies": {
"@babel/runtime": {
"version": "7.12.5",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
"integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
"dev": true,
"requires": {
"regenerator-runtime": "^0.13.4"
}
}
}
},
"@testing-library/user-event": {
"version": "12.2.2",
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.2.2.tgz",
"integrity": "sha512-mTYL9LrwiSeyorStUOMuRGQDn1ca40tIhuv//o/K3lY8wBEp+9Im90MFVx5i3u7zCPmavn3uWZs/10chsbI8Tg==",
"dev": true,
"requires": {
"@babel/runtime": "^7.10.2"
}
},
"@types/anymatch": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
"integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==",
"dev": true
},
"@types/aria-query": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.0.tgz",
"integrity": "sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A==",
"dev": true
},
"@types/babel__core": {
"version": "7.1.10",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.10.tgz",
......@@ -4294,6 +4530,15 @@
"integrity": "sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==",
"dev": true
},
"@types/testing-library__jest-dom": {
"version": "5.9.5",
"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz",
"integrity": "sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==",
"dev": true,
"requires": {
"@types/jest": "*"
}
},
"@types/uglify-js": {
"version": "3.9.3",
"resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.9.3.tgz",
......@@ -5116,6 +5361,16 @@
"sprintf-js": "~1.0.2"
}
},
"aria-query": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
"integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.10.2",
"@babel/runtime-corejs3": "^7.10.2"
}
},
"arr-diff": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
......@@ -8451,6 +8706,29 @@
"integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=",
"dev": true
},
"css": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
"integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
"dev": true,
"requires": {
"inherits": "^2.0.4",
"source-map": "^0.6.1",
"source-map-resolve": "^0.6.0"
},
"dependencies": {
"source-map-resolve": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
"integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
"dev": true,
"requires": {
"atob": "^2.1.2",
"decode-uri-component": "^0.2.0"
}
}
}
},
"css-blank-pseudo": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz",
......@@ -8582,6 +8860,12 @@
"integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
"dev": true
},
"css.escape": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
"dev": true
},
"cssdb": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
......@@ -9664,6 +9948,12 @@
"esutils": "^2.0.2"
}
},
"dom-accessibility-api": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz",
"integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==",
"dev": true
},
"dom-converter": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
......@@ -17676,6 +17966,12 @@
"yallist": "^4.0.0"
}
},
"lz-string": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
"integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
"dev": true
},
"magic-string": {
"version": "0.25.7",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
......@@ -91,6 +91,9 @@
"@storybook/react": "6.0.26",
"@storybook/theming": "6.0.26",
"@svgr/webpack": "5.4.0",
"@testing-library/jest-dom": "5.11.6",
"@testing-library/react": "11.2.2",
"@testing-library/user-event": "12.2.2",
"@types/classnames": "2.2.10",
"@types/d3": "5.16.3",
"@types/enzyme": "3.10.7",
......
......@@ -15,7 +15,8 @@
*/
import React from 'react';
import { mount } from 'enzyme';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import configureMockStore from 'redux-mock-store';
......@@ -35,6 +36,9 @@ jest.mock(
}))
})
);
jest.mock('src/shared/components/slide-toggle/SlideToggle', () =>
jest.fn(() => null)
);
const selectedSpecies = createSelectedSpecies();
const disabledSpecies = {
......@@ -65,7 +69,7 @@ const mockStore = configureMockStore([thunk]);
const wrapInRedux = (
state: typeof stateWithEnabledSpecies = stateWithEnabledSpecies
) => {
return mount(
return render(
<Provider store={mockStore(state)}>
<SpeciesUsageToggle />
</Provider>
......@@ -78,44 +82,40 @@ describe('SpeciesSelectionControls', () => {
});
it('shows correct controls for enabled species', () => {
const wrapper = wrapInRedux();
const slideToggle = wrapper.find(SlideToggle);
const useLabel = wrapper
.find('span')
.filterWhere((wrapper) => wrapper.text() === 'Use')
.first();
const doNotUseLabel = wrapper
.find('span')
.filterWhere((wrapper) => wrapper.text() === "Don't use")
.first();
expect(slideToggle.prop('isOn')).toBe(true);
expect(useLabel.hasClass('clickable')).toBe(false);
expect(doNotUseLabel.hasClass('clickable')).toBe(true);
const { container } = wrapInRedux();
const useLabel = [...container.querySelectorAll('span')].find(
(element) => element.textContent === 'Use'
);
const doNotUseLabel = [...container.querySelectorAll('span')].find(
(element) => element.textContent === "Don't use"
);
expect((SlideToggle as any).mock.calls[0][0]).toMatchObject({ isOn: true });
expect(useLabel?.classList.contains('clickable')).toBe(false);
expect(doNotUseLabel?.classList.contains('clickable')).toBe(true);
});
it('shows correct controls for disabled species', () => {
const wrapper = wrapInRedux(stateWithDisabledSpecies);
const slideToggle = wrapper.find(SlideToggle);
const useLabel = wrapper
.find('span')
.filterWhere((wrapper) => wrapper.text() === 'Use')
.first();
const doNotUseLabel = wrapper
.find('span')
.filterWhere((wrapper) => wrapper.text() === "Don't use")
.first();
expect(slideToggle.prop('isOn')).toBe(false);
expect(useLabel.hasClass('clickable')).toBe(true);
expect(doNotUseLabel.hasClass('clickable')).toBe(false);
const { container } = wrapInRedux(stateWithDisabledSpecies);
const useLabel = [...container.querySelectorAll('span')].find(
(element) => element.textContent === 'Use'
);
const doNotUseLabel = [...container.querySelectorAll('span')].find(
(element) => element.textContent === "Don't use"
);
expect((SlideToggle as any).mock.calls[0][0]).toMatchObject({
isOn: false
});
expect(useLabel?.classList.contains('clickable')).toBe(true);
expect(doNotUseLabel?.classList.contains('clickable')).toBe(false);
});
it('changes species status via the toggle', () => {
const wrapper = wrapInRedux(stateWithDisabledSpecies);
const slideToggle = wrapper.find(SlideToggle);
slideToggle.prop('onChange')(true);
wrapInRedux(stateWithDisabledSpecies);
const { onChange } = (SlideToggle as any).mock.calls[0][0];
onChange(true);
expect(toggleSpeciesUseAndSave).toHaveBeenCalledWith(
disabledSpecies.genome_id
......@@ -123,19 +123,19 @@ describe('SpeciesSelectionControls', () => {
jest.clearAllMocks();
slideToggle.prop('onChange')(false);
onChange(true);
expect(toggleSpeciesUseAndSave).toHaveBeenCalledWith(
disabledSpecies.genome_id
);
});
it('disables species by clicking on label', () => {
const wrapper = wrapInRedux();
const doNotUseLabel = wrapper
.find('span')
.filterWhere((wrapper) => wrapper.text() === "Don't use")
.first();
doNotUseLabel.simulate('click');
const { container } = wrapInRedux();
const doNotUseLabel = [...container.querySelectorAll('span')].find(
(element) => element.textContent === "Don't use"
);
userEvent.click(doNotUseLabel as HTMLSpanElement);
expect(toggleSpeciesUseAndSave).toHaveBeenCalledWith(
selectedSpecies.genome_id
......@@ -143,12 +143,12 @@ describe('SpeciesSelectionControls', () => {
});
it('enables species by clicking on label', () => {
const wrapper = wrapInRedux(stateWithDisabledSpecies);
const useLabel = wrapper
.find('span')
.filterWhere((wrapper) => wrapper.text() === 'Use')
.first();
useLabel.simulate('click');
const { container } = wrapInRedux(stateWithDisabledSpecies);
const useLabel = [...container.querySelectorAll('span')].find(
(element) => element.textContent === 'Use'
);
userEvent.click(useLabel as HTMLSpanElement);
expect(toggleSpeciesUseAndSave).toHaveBeenCalledWith(
selectedSpecies.genome_id
......
......@@ -15,24 +15,28 @@
*/
import React from 'react';
import { mount, render } from 'enzyme';
import { fireEvent, render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Input from './Input';
import Input, { Props as InputProps } from './Input';
describe('<Input />', () => {
const commonInputProps = {
value: '',
id: 'testId',