fix: Consolodate full screen loaders in to one component

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",

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": {

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 <Loader fullScreen={true} />;
-        <div className='loader-wrapper'>
-          <Loader />
-        </div>
-      );
     }
 
     if (!pending && errored) {

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 <Loader fullScreen={true} />;
-        <div className='loader-wrapper'>
-          <Loader />
-        </div>
-      );
     }
     if (isEmpty(requestedUser)) {
       // We have a response from the API, but there is nothing in the store

client/src/client-only-routes/ShowSettings.js

@@ -165,11 +165,7 @@ function ShowSettings(props) {
   } = props;
 
   if (showLoading) {
-    return (
+    return <Loader fullScreen={true} />;
-      <div className='loader-wrapper'>
-        <Loader />
-      </div>
-    );
   }
 
   if (!showLoading && !isSignedIn) {

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 <Loader fullScreen={true} />;
-        <div className='loader-wrapper'>
-          <Loader />
-        </div>
-      );
     }
 
     if ((complete || errored) && !isSignedIn) {

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() {
+import './loader.css';
-  return <Spinner name='ball-clip-rotate-multiple' />;
+
+function Loader({ fullScreen }) {
+  return (
+    <div className={fullScreen ? 'full-screen-wrapper' : ''}>
+      <Spinner name='ball-clip-rotate-multiple' />
+    </div>
+  );
 }
 
 Loader.displayName = 'Loader';
+Loader.propTypes = {
+  fullScreen: PropTypes.bool
+};
 
 export default Loader;

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('<Loader />', () => {
+  it('renders to the DOM', () => {
+    const { container } = render(<Loader />);
+    expect(container).toBeTruthy();
+  });
+
+  it('adds the correct class when given a fullScreen prop', () => {
+    const { container } = render(<Loader fullScreen={true} />);
+    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(<Loader />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('matches the fullScreen render snapshot', () => {
+    const { container } = render(<Loader fullScreen={true} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

client/src/components/helpers/__snapshots__/Loader.test.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Loader /> matches the fullScreen render snapshot 1`] = `
+<div
+  class="full-screen-wrapper"
+>
+  <div
+    class="sk-fade-in sk-spinner ball-clip-rotate-multiple"
+  >
+    <div />
+    <div />
+  </div>
+</div>
+`;
+
+exports[`<Loader /> matches to the default render snapshot 1`] = `
+<div
+  class=""
+>
+  <div
+    class="sk-fade-in sk-spinner ball-clip-rotate-multiple"
+  >
+    <div />
+    <div />
+  </div>
+</div>
+`;

client/src/components/helpers/loader.css

@@ -1,4 +1,4 @@
-.loader-wrapper {
+.full-screen-wrapper {
   height: 100vh;
   width: 100%;
   display: flex;
@@ -6,7 +6,7 @@
   align-items: center;
 }
 
-.loader-wrapper .sk-spinner {
+.full-screen-wrapper .sk-spinner {
   transform: scale(8);
   color: #006400;
 }

client/src/pages/welcome.js

@@ -70,11 +70,7 @@ function Welcome({
   activeDonations
 }) {
   if (pending && !complete) {
-    return (
+    return <Loader fullScreen={true} />;
-      <div className='loader-wrapper'>
-        <Loader />
-      </div>
-    );
   }
 
   if (!isSignedIn) {