chore(tests): Added and cleaned up tests

package.json

@@ -43,6 +43,7 @@
     "prettier": "^2.3.2",
     "razzle": "^4.0.6",
     "razzle-dev-utils": "^4.0.6",
+    "react-test-renderer": "^17.0.2",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
     "webpack": "^4.44.1",

src/components/App/__test__/App.test.js

@@ -1,7 +1,8 @@
-import App from './App';
+import App from '../App';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { MemoryRouter } from 'react-router-dom';
+import renderer from 'react-test-renderer';
 
 describe('<App />', () => {
   test('renders without exploding', () => {
@@ -13,4 +14,14 @@ describe('<App />', () => {
       div,
     );
   });
+  test('<App /> snapshot', () => {
+    const tree = renderer
+      .create(
+        <MemoryRouter>
+          <App />
+        </MemoryRouter>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });

src/components/App/__test__/__snapshots__/App.test.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<App /> <App /> snapshot 1`] = `
+<div
+  className="container"
+>
+  <div
+    className="container"
+  >
+    <div
+      className="row"
+    >
+      <div
+        className="column"
+        style={
+          Object {
+            "marginTop": "12%",
+          }
+        }
+      >
+        <img
+          className="avatar"
+        />
+        <h1>
+          undefined
+        </h1>
+        <p />
+        <div>
+          <p
+            className="footer"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/Avatar/__test__/Avatar.test.js

@@ -1,10 +1,15 @@
-import Avatar from './Avatar';
+import Avatar from '../Avatar';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import renderer from 'react-test-renderer';
 
 describe('<Avatar />', () => {
   test('renders without exploding', () => {
     const div = document.createElement('div');
     ReactDOM.render(<Avatar />, div);
   });
+  test('<Avatar /> snapshot', () => {
+    const tree = renderer.create(<Avatar />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });

src/components/Avatar/__test__/__snapshots__/Avatar.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Avatar /> <Avatar /> snapshot 1`] = `
+<img
+  className="avatar"
+/>
+`;

src/components/Button/__test__/Button.test.js

@@ -1,10 +1,15 @@
-import Button from './Button';
+import Button from '../Button';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import renderer from 'react-test-renderer';
 
 describe('<Button />', () => {
   test('renders without exploding', () => {
     const div = document.createElement('div');
     ReactDOM.render(<Button />, div);
   });
+  test('<Button /> snapshot', () => {
+    const tree = renderer.create(<Button />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });

src/components/Button/__test__/__snapshots__/Button.test.js.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Button /> <Button /> snapshot 1`] = `
+<a
+  className="button button-undefined"
+  onClick={[Function]}
+  rel="noopener noreferrer"
+  target="_blank"
+/>
+`;

src/components/Home/__test__/Home.test.js

@@ -1,10 +1,15 @@
-import Home from './Home';
+import Home from '../Home';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import renderer from 'react-test-renderer';
 
 describe('<Home />', () => {
   test('renders without exploding', () => {
     const div = document.createElement('div');
     ReactDOM.render(<Home />, div);
   });
+  test('<Home /> snapshot', () => {
+    const tree = renderer.create(<Home />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });

src/components/Home/__test__/__snapshots__/Home.test.js.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Home /> <Home /> snapshot 1`] = `
+<div
+  className="container"
+>
+  <div
+    className="row"
+  >
+    <div
+      className="column"
+      style={
+        Object {
+          "marginTop": "12%",
+        }
+      }
+    >
+      <img
+        className="avatar"
+      />
+      <h1>
+        undefined
+      </h1>
+      <p />
+      <div>
+        <p
+          className="footer"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/Sort/Sort.js

@@ -1,5 +1,5 @@
-import React from 'react';
-
+import React, { memo } from 'react';
+// this will sort in descending order because data is reverse sorted before it is rendered
 const Sort = ({ children }) => {
   const sorted = React.Children.toArray(children).sort((a, b) => {
     return b.props.order - a.props.order;
@@ -8,4 +8,4 @@ const Sort = ({ children }) => {
   return sorted;
 };
 
-export default Sort;
+export default memo(Sort);

src/components/Sort/Sort.test.js

@@ -1,10 +0,0 @@
-import Sort from './Sort';
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-describe('<Sort />', () => {
-  test('renders without exploding', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<Sort />, div);
-  });
-});

src/components/Sort/__test__/Sort.test.js

@@ -0,0 +1,71 @@
+import Sort from '../Sort';
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import Button from '../../Button/Button';
+import youtubeLogo from '../../../icons/youtube.svg';
+import twitchLogo from '../../../icons/twitch.svg';
+import linkedinLogo from '../../../icons/linkedin.svg';
+import githubLogo from '../../../icons/github.svg';
+import renderer from 'react-test-renderer';
+
+describe('<Sort />', () => {
+  let container = null;
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+  afterEach(() => {
+    unmountComponentAtNode(container);
+    container.remove();
+    container = null;
+  });
+
+  test('renders without exploding', () => {
+    render(<Sort />, container);
+  });
+
+  test('Sorts Buttons by order', () => {
+    const tree = renderer
+      .create(
+        <Sort>
+          <Button
+            name="twitch"
+            href="twitch.tv"
+            displayName="Twitch"
+            logo={twitchLogo}
+            order={0}
+          />
+
+          <Button
+            name="youtube"
+            href="youtube.com"
+            displayName="YouTube"
+            logo={youtubeLogo}
+            order={-1}
+          />
+          <Button
+            name="linkedin"
+            href="linkedin.com"
+            displayName="LinkedIn"
+            logo={linkedinLogo}
+            order={2}
+          />
+          <Button
+            name="github"
+            href="github.com"
+            displayName="GitHub"
+            logo={githubLogo}
+            order={1}
+          />
+        </Sort>,
+      )
+      .toJSON();
+
+    expect(tree.length).toEqual(4);
+    expect(tree[0].props.href).toEqual('linkedin.com');
+    expect(tree[1].props.href).toEqual('github.com');
+    expect(tree[2].props.href).toEqual('twitch.tv');
+    expect(tree[3].props.href).toEqual('youtube.com');
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Sort/__test__/__snapshots__/Sort.test.js.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Sort /> Sorts Buttons by order 1`] = `
+Array [
+  <a
+    className="button button-linkedin"
+    href="linkedin.com"
+    onClick={[Function]}
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <img
+      alt="LinkedIn logo"
+      className="icon"
+      src="linkedin.svg"
+    />
+    LinkedIn
+  </a>,
+  <a
+    className="button button-github"
+    href="github.com"
+    onClick={[Function]}
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <img
+      alt="GitHub logo"
+      className="icon"
+      src="github.svg"
+    />
+    GitHub
+  </a>,
+  <a
+    className="button button-twitch"
+    href="twitch.tv"
+    onClick={[Function]}
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <img
+      alt="Twitch logo"
+      className="icon"
+      src="twitch.svg"
+    />
+    Twitch
+  </a>,
+  <a
+    className="button button-youtube"
+    href="youtube.com"
+    onClick={[Function]}
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <img
+      alt="YouTube logo"
+      className="icon"
+      src="youtube.svg"
+    />
+    YouTube
+  </a>,
+]
+`;

yarn.lock

@@ -8452,16 +8452,16 @@ react-error-overlay@^6.0.7, react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+"react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
 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@^17.0.1:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
-
 react-refresh@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.9.0.tgz#71863337adc3e5c2f8a6bfddd12ae3bfe32aafbf"
@@ -8496,6 +8496,24 @@ react-router@5.2.1:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-shallow-renderer@^16.13.1:
+  version "16.14.1"
+  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124"
+  integrity sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^16.12.0 || ^17.0.0"
+
+react-test-renderer@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
+  integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^17.0.2"
+    react-shallow-renderer "^16.13.1"
+    scheduler "^0.20.2"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"