diff --git a/client/package-lock.json b/client/package-lock.json index 51c85f2438..1f79a3fd02 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1188,6 +1188,12 @@ } } }, + "@sheerun/mutationobserver-shim": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz", + "integrity": "sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==", + "dev": true + }, "@types/configstore": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@types/configstore/-/configstore-2.1.1.tgz", @@ -3903,6 +3909,12 @@ "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz", "integrity": "sha1-lGfQMsOM+u+58teVASUwYvh/ob0=" }, + "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 + }, "cssesc": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz", @@ -4377,6 +4389,12 @@ "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==", "dev": true }, + "diff-sequences": { + "version": "24.0.0", + "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.0.0.tgz", + "integrity": "sha512-46OkIuVGBBnrC0soO/4LHu5LHGHx0uhP65OVz8XOrAJpqiCB2aVIuESvjI1F9oqebuvY8lekS1pt6TN7vt7qsw==", + "dev": true + }, "diffie-hellman": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", @@ -4471,6 +4489,35 @@ } } }, + "dom-testing-library": { + "version": "3.16.8", + "resolved": "https://registry.npmjs.org/dom-testing-library/-/dom-testing-library-3.16.8.tgz", + "integrity": "sha512-VGn2piehGoN9lmZDYd+xoTZwwcS+FoXebvZMw631UhS5LshiLTFNJs9bxRa9W7fVb1cAn9AYKAKZXh67rCDaqw==", + "dev": true, + "requires": { + "@babel/runtime": "^7.1.5", + "@sheerun/mutationobserver-shim": "^0.3.2", + "pretty-format": "^24.0.0", + "wait-for-expect": "^1.1.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.3.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.4.tgz", + "integrity": "sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==", + "dev": true, + "requires": { + "regenerator-runtime": "^0.12.0" + } + }, + "regenerator-runtime": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", + "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==", + "dev": true + } + } + }, "dom-walk": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz", @@ -8295,6 +8342,12 @@ "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=" }, + "indent-string": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz", + "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=", + "dev": true + }, "indexes-of": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", @@ -9423,6 +9476,54 @@ "detect-newline": "^2.1.0" } }, + "jest-dom": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/jest-dom/-/jest-dom-3.1.2.tgz", + "integrity": "sha512-QpyhZxgx8SkFefBaTD426RDT90dSmoB4nBXIHbQQ/MdrpFl9V2HRmhBYe7p82T22TkHQHbSAmis+il4c1R4cBg==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "css": "^2.2.3", + "css.escape": "^1.5.1", + "jest-diff": "^24.0.0", + "jest-matcher-utils": "^24.0.0", + "lodash": "^4.17.11", + "pretty-format": "^24.0.0", + "redent": "^2.0.0" + }, + "dependencies": { + "jest-diff": { + "version": "24.0.0", + "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-24.0.0.tgz", + "integrity": "sha512-XY5wMpRaTsuMoU+1/B2zQSKQ9RdE9gsLkGydx3nvApeyPijLA8GtEvIcPwISRCer+VDf9W1mStTYYq6fPt8ryA==", + "dev": true, + "requires": { + "chalk": "^2.0.1", + "diff-sequences": "^24.0.0", + "jest-get-type": "^24.0.0", + "pretty-format": "^24.0.0" + } + }, + "jest-get-type": { + "version": "24.0.0", + "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.0.0.tgz", + "integrity": "sha512-z6/Eyf6s9ZDGz7eOvl+fzpuJmN9i0KyTt1no37/dHu8galssxz5ZEgnc1KaV8R31q1khxyhB4ui/X5ZjjPk77w==", + "dev": true + }, + "jest-matcher-utils": { + "version": "24.0.0", + "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-24.0.0.tgz", + "integrity": "sha512-LQTDmO+aWRz1Tf9HJg+HlPHhDh1E1c65kVwRFo5mwCVp5aQDzlkz4+vCvXhOKFjitV2f0kMdHxnODrXVoi+rlA==", + "dev": true, + "requires": { + "chalk": "^2.0.1", + "jest-diff": "^24.0.0", + "jest-get-type": "^24.0.0", + "pretty-format": "^24.0.0" + } + } + } + }, "jest-each": { "version": "23.6.0", "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-23.6.0.tgz", @@ -12830,6 +12931,24 @@ "utila": "~0.4" } }, + "pretty-format": { + "version": "24.0.0", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.0.0.tgz", + "integrity": "sha512-LszZaKG665djUcqg5ZQq+XzezHLKrxsA86ZABTozp+oNhkdqa+tG2dX4qa6ERl5c/sRDrAa3lHmwnvKoP+OG/g==", + "dev": true, + "requires": { + "ansi-regex": "^4.0.0", + "ansi-styles": "^3.2.0" + }, + "dependencies": { + "ansi-regex": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.0.0.tgz", + "integrity": "sha512-iB5Dda8t/UqpPI/IjsejXu5jOGDrzn41wJyljwPH65VCIbk6+1BzFIMJGFwTNrYXT1CrD+B4l19U7awiQ8rk7w==", + "dev": true + } + } + }, "prismjs": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz", @@ -13613,6 +13732,33 @@ } } }, + "react-testing-library": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/react-testing-library/-/react-testing-library-6.0.0.tgz", + "integrity": "sha512-h0h+YLe4KWptK6HxOMnoNN4ngu3W8isrwDmHjPC5gxc+nOZOCurOvbKVYCvvuAw91jdO7VZSm/5KR7TxKnz0qA==", + "dev": true, + "requires": { + "@babel/runtime": "^7.3.1", + "dom-testing-library": "^3.13.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.3.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.4.tgz", + "integrity": "sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==", + "dev": true, + "requires": { + "regenerator-runtime": "^0.12.0" + } + }, + "regenerator-runtime": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", + "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==", + "dev": true + } + } + }, "react-transition-group": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz", @@ -13747,6 +13893,16 @@ } } }, + "redent": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/redent/-/redent-2.0.0.tgz", + "integrity": "sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=", + "dev": true, + "requires": { + "indent-string": "^3.0.0", + "strip-indent": "^2.0.0" + } + }, "reduce": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/reduce/-/reduce-1.0.1.tgz", @@ -15532,6 +15688,12 @@ "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=" }, + "strip-indent": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz", + "integrity": "sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=", + "dev": true + }, "strip-json-comments": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", @@ -16895,6 +17057,12 @@ "browser-process-hrtime": "^0.1.2" } }, + "wait-for-expect": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-1.1.0.tgz", + "integrity": "sha512-vQDokqxyMyknfX3luCDn16bSaRcOyH6gGuUXMIbxBLeTo6nWuEWYqMTT9a+44FmW8c2m6TRWBdNvBBjA1hwEKg==", + "dev": true + }, "walker": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz", diff --git a/client/package.json b/client/package.json index 1be5d264f8..1fd1af931a 100644 --- a/client/package.json +++ b/client/package.json @@ -87,7 +87,9 @@ "chokidar": "^2.0.4", "copy-webpack-plugin": "^4.6.0", "jest": "^23.6.0", + "jest-dom": "^3.1.2", "react-test-renderer": "^16.5.2", + "react-testing-library": "^6.0.0", "webpack-cli": "^3.1.1" }, "repository": { diff --git a/client/src/client-only-routes/ShowCertification.js b/client/src/client-only-routes/ShowCertification.js index 957ee271cd..bcd18056f6 100644 --- a/client/src/client-only-routes/ShowCertification.js +++ b/client/src/client-only-routes/ShowCertification.js @@ -18,8 +18,6 @@ import reallyWeirdErrorMessage from '../utils/reallyWeirdErrorMessage'; import RedirectHome from '../components/RedirectHome'; import { Loader } from '../components/helpers'; -import './show-certification.css'; - const propTypes = { cert: PropTypes.shape({ username: PropTypes.string, @@ -84,11 +82,7 @@ class ShowCertification extends Component { const { pending, complete, errored } = fetchState; if (pending) { - return ( -
- -
- ); + return ; } if (!pending && errored) { diff --git a/client/src/client-only-routes/ShowProfileOrFourOhFour.js b/client/src/client-only-routes/ShowProfileOrFourOhFour.js index 233f115f94..e4446082d7 100644 --- a/client/src/client-only-routes/ShowProfileOrFourOhFour.js +++ b/client/src/client-only-routes/ShowProfileOrFourOhFour.js @@ -59,11 +59,7 @@ class ShowFourOhFour extends Component { if (showLoading) { // We don't know if /:maybeUser is a user or not, we will show the loader // until we get a response from the API - return ( -
- -
- ); + return ; } if (isEmpty(requestedUser)) { // We have a response from the API, but there is nothing in the store diff --git a/client/src/client-only-routes/ShowSettings.js b/client/src/client-only-routes/ShowSettings.js index 34657e30f2..fd9c43e229 100644 --- a/client/src/client-only-routes/ShowSettings.js +++ b/client/src/client-only-routes/ShowSettings.js @@ -165,11 +165,7 @@ function ShowSettings(props) { } = props; if (showLoading) { - return ( -
- -
- ); + return ; } if (!showLoading && !isSignedIn) { diff --git a/client/src/client-only-routes/ShowUser.js b/client/src/client-only-routes/ShowUser.js index c1b4b3e65f..c2e2525aee 100644 --- a/client/src/client-only-routes/ShowUser.js +++ b/client/src/client-only-routes/ShowUser.js @@ -89,11 +89,7 @@ class ShowUser extends Component { const { username, isSignedIn, userFetchState, email } = this.props; const { pending, complete, errored } = userFetchState; if (pending && !complete) { - return ( -
- -
- ); + return ; } if ((complete || errored) && !isSignedIn) { diff --git a/client/src/components/helpers/Loader.js b/client/src/components/helpers/Loader.js index 83906f2c93..7d9d6b8342 100644 --- a/client/src/components/helpers/Loader.js +++ b/client/src/components/helpers/Loader.js @@ -1,10 +1,20 @@ import React from 'react'; +import PropTypes from 'prop-types'; import Spinner from 'react-spinkit'; -function Loader() { - return ; +import './loader.css'; + +function Loader({ fullScreen }) { + return ( +
+ +
+ ); } Loader.displayName = 'Loader'; +Loader.propTypes = { + fullScreen: PropTypes.bool +}; export default Loader; diff --git a/client/src/components/helpers/Loader.test.js b/client/src/components/helpers/Loader.test.js new file mode 100644 index 0000000000..e54731f0d3 --- /dev/null +++ b/client/src/components/helpers/Loader.test.js @@ -0,0 +1,33 @@ +/* global expect */ +import React from 'react'; +import { render } from 'react-testing-library'; +import 'jest-dom/extend-expect'; + +import Loader from './Loader'; + +describe('', () => { + it('renders to the DOM', () => { + const { container } = render(); + expect(container).toBeTruthy(); + }); + + it('adds the correct class when given a fullScreen prop', () => { + const { container } = render(); + expect(container.firstChild).toHaveClass('full-screen-wrapper'); + }); + + /** + * As we only wrap another library Component, + * there is nothing much to test except snapshots + */ + + it('matches to the default render snapshot', () => { + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); + }); + + it('matches the fullScreen render snapshot', () => { + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/client/src/components/helpers/__snapshots__/Loader.test.js.snap b/client/src/components/helpers/__snapshots__/Loader.test.js.snap new file mode 100644 index 0000000000..e1c9c4aa3c --- /dev/null +++ b/client/src/components/helpers/__snapshots__/Loader.test.js.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` matches the fullScreen render snapshot 1`] = ` +
+