added tests for header

package.json

@@ -11,7 +11,6 @@
     "history": "4.9.0",
     "js-beautify": "^1.10.2",
     "moment": "^2.29.4",
-    "node-sass": "^4.13.1",
     "nouislider": "14.0.2",
     "prop-types": "15.7.2",
     "react": "16.9.0",
@@ -25,7 +24,8 @@
     "react-scripts": "^3.3.0",
     "react-slick": "0.25.2",
     "react-splitter-layout": "^4.0.0",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
@@ -41,6 +41,7 @@
     "gulp-append-prepend": "1.0.8",
     "jest": "^24.9.0",
     "prettier": "1.18.2",
+    "react-test-renderer": "16.9",
     "ts-jest": "^29.0.3"
   },
   "optionalDependencies": {

src/components/Header/Header.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { BrowserRouter as Router } from 'react-router-dom';
+import Header from './Header';
+
+describe("Header", () => {
+    it("renders correctly", () => {
+        const tree = renderer
+            .create(
+              <Router>
+                <Header brand="BrandName" route="/home" />
+              </Router>
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

src/components/Header/HeaderLinks.test.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { BrowserRouter as Router } from "react-router-dom/cjs/react-router-dom.min";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import HeaderLinks from "./HeaderLinks";
+
+
+describe("HeaderLinks", () => {
+    it("renders snapshot", () => {
+        const { container } = render(<Router><HeaderLinks /></Router>);
+        expect(container).toMatchSnapshot();
+    });
+    it("renders HeaderLinks", () => {
+        render(
+            <Router>
+                <HeaderLinks />
+            </Router>
+        );
+        expect(screen.getByText("Playground")).toBeInTheDocument();
+        expect(screen.getByText("About")).toBeInTheDocument();
+    });
+});

src/components/Header/__snapshots__/Header.test.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header renders correctly 1`] = `
+<header
+  className="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionFixed makeStyles-appBar-1 MuiAppBar-colorPrimary mui-fixed"
+>
+  <div
+    className="MuiToolbar-root MuiToolbar-regular makeStyles-container-5 MuiToolbar-gutters"
+  >
+    <div
+      className="makeStyles-flex-6"
+    >
+      <a
+        className="makeStyles-link-2"
+        href="/home"
+        onClick={[Function]}
+      >
+        <button
+          className="MuiButtonBase-root MuiButton-root makeStyles-title-7 MuiButton-text"
+          disabled={false}
+          onBlur={[Function]}
+          onDragLeave={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          tabIndex={0}
+          type="button"
+        >
+          <span
+            className="MuiButton-label"
+          >
+            BrandName
+          </span>
+          <span
+            className="MuiTouchRipple-root"
+          />
+        </button>
+      </a>
+    </div>
+    <div
+      className="PrivateHiddenCss-smDown-24"
+    />
+  </div>
+</header>
+`;

src/components/Header/__snapshots__/HeaderLinks.test.js.snap

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HeaderLinks renders snapshot 1`] = `
+<div>
+  <ul
+    class="MuiList-root makeStyles-list-1 MuiList-padding"
+  >
+    <li
+      class="MuiListItem-root makeStyles-listItem-2 MuiListItem-gutters"
+    >
+      <a
+        class="makeStyles-link-10"
+        href="/playground"
+      >
+        <button
+          class="MuiButtonBase-root MuiButton-root makeStyles-button-14 makeStyles-transparent-28 makeStyles-navLink-4 MuiButton-text"
+          tabindex="0"
+          target="_blank"
+          title="Get Started"
+          type="button"
+        >
+          <span
+            class="MuiButton-label"
+          >
+            Playground
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+      </a>
+    </li>
+    <li
+      class="MuiListItem-root makeStyles-listItem-2 MuiListItem-gutters"
+    >
+      <a
+        class="makeStyles-link-10"
+        href="/about"
+      >
+        <button
+          class="MuiButtonBase-root MuiButton-root makeStyles-button-14 makeStyles-transparent-28 makeStyles-navLink-4 MuiButton-text"
+          tabindex="0"
+          target="_blank"
+          title="Get to know me!"
+          type="button"
+        >
+          <span
+            class="MuiButton-label"
+          >
+            About
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+      </a>
+    </li>
+    <li
+      class="MuiListItem-root makeStyles-listItem-2 MuiListItem-gutters"
+    >
+      <a
+        aria-disabled="false"
+        class="MuiButtonBase-root MuiButton-root makeStyles-button-14 makeStyles-transparent-28 makeStyles-navLink-4 MuiButton-text"
+        href="https://github.com/BrandonArmand/Binari"
+        tabindex="0"
+        target="_blank"
+        title="Checkout my GitHub"
+      >
+        <span
+          class="MuiButton-label"
+        >
+          <i
+            class="makeStyles-socialIcons-9 fab fa-github"
+          />
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;