From ff96b437581a1df6d16f6302131b417028788df5 Mon Sep 17 00:00:00 2001
From: David Laganiere <40720561+davidlag0@users.noreply.github.com>
Date: Sun, 26 Feb 2023 10:07:52 -0500
Subject: [PATCH] test(Bar): add snapshot tests

---
 frontend/__tests__/__mocks__/fileMock.js      |   1 +
 .../__tests__/unit/components/Bar.test.jsx    |  47 ++++++++
 .../__snapshots__/Bar.test.jsx.snap           | 104 ++++++++++++++++++
 frontend/jest.config.js                       |   3 +-
 4 files changed, 154 insertions(+), 1 deletion(-)
 create mode 100644 frontend/__tests__/__mocks__/fileMock.js
 create mode 100644 frontend/__tests__/unit/components/Bar.test.jsx
 create mode 100644 frontend/__tests__/unit/components/__snapshots__/Bar.test.jsx.snap

diff --git a/frontend/__tests__/__mocks__/fileMock.js b/frontend/__tests__/__mocks__/fileMock.js
new file mode 100644
index 0000000..0a445d0
--- /dev/null
+++ b/frontend/__tests__/__mocks__/fileMock.js
@@ -0,0 +1 @@
+module.exports = "test-file-stub";
diff --git a/frontend/__tests__/unit/components/Bar.test.jsx b/frontend/__tests__/unit/components/Bar.test.jsx
new file mode 100644
index 0000000..446d349
--- /dev/null
+++ b/frontend/__tests__/unit/components/Bar.test.jsx
@@ -0,0 +1,47 @@
+import { render } from "@testing-library/react";
+import Bar from "components/Bar";
+import { Router } from "react-router-dom";
+import { createMemoryHistory } from "history";
+
+// Useful reference: https://bholmes.dev/blog/mocking-browser-apis-fetch-localstorage-dates-the-easy-way-with-jest/
+
+let mockStorage = {};
+
+describe("Bar", () => {
+  beforeAll(() => {
+    global.Storage.prototype.getItem = jest.fn((key) => mockStorage[key]);
+  });
+
+  beforeEach(() => {
+    // make sure the fridge starts out empty for each test
+    mockStorage = {};
+  });
+
+  afterAll(() => {
+    global.Storage.prototype.getItem.mockReset();
+  });
+
+  it("renders Bar unchanged when logged out", () => {
+    const history = createMemoryHistory();
+    mockStorage["loggedIn"] = false;
+
+    const { container } = render(
+      <Router history={history}>
+        <Bar />
+      </Router>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders Bar unchanged when logged in", () => {
+    const history = createMemoryHistory();
+    mockStorage["loggedIn"] = true;
+
+    const { container } = render(
+      <Router history={history}>
+        <Bar />
+      </Router>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/frontend/__tests__/unit/components/__snapshots__/Bar.test.jsx.snap b/frontend/__tests__/unit/components/__snapshots__/Bar.test.jsx.snap
new file mode 100644
index 0000000..6a4346c
--- /dev/null
+++ b/frontend/__tests__/unit/components/__snapshots__/Bar.test.jsx.snap
@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Bar renders Bar unchanged when logged in 1`] = `
+<div>
+  <header
+    class="MuiPaper-root MuiAppBar-root MuiAppBar-positionStatic MuiAppBar-colorSecondary MuiPaper-elevation4"
+    style="background: rgb(0, 0, 0);"
+  >
+    <div
+      class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+    >
+      <div
+        class="MuiBox-root MuiBox-root-2"
+      >
+        <h6
+          class="MuiTypography-root MuiTypography-h6 MuiTypography-colorInherit"
+        >
+          <a
+            class="MuiTypography-root MuiLink-root MuiLink-underlineNone MuiTypography-colorInherit"
+            href="/"
+          >
+            <img
+              alt="logo"
+              height="100"
+              src="test-file-stub"
+              width="100"
+            />
+          </a>
+        </h6>
+      </div>
+      <button
+        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+            />
+          </svg>
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+    </div>
+  </header>
+</div>
+`;
+
+exports[`Bar renders Bar unchanged when logged out 1`] = `
+<div>
+  <header
+    class="MuiPaper-root MuiAppBar-root MuiAppBar-positionStatic MuiAppBar-colorSecondary MuiPaper-elevation4"
+    style="background: rgb(0, 0, 0);"
+  >
+    <div
+      class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+    >
+      <div
+        class="MuiBox-root MuiBox-root-1"
+      >
+        <h6
+          class="MuiTypography-root MuiTypography-h6 MuiTypography-colorInherit"
+        >
+          <a
+            class="MuiTypography-root MuiLink-root MuiLink-underlineNone MuiTypography-colorInherit"
+            href="/"
+          >
+            <img
+              alt="logo"
+              height="100"
+              src="test-file-stub"
+              width="100"
+            />
+          </a>
+        </h6>
+      </div>
+      <button
+        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label"
+        >
+          Log In
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+    </div>
+  </header>
+</div>
+`;
diff --git a/frontend/jest.config.js b/frontend/jest.config.js
index 73948c2..4dea552 100644
--- a/frontend/jest.config.js
+++ b/frontend/jest.config.js
@@ -24,7 +24,8 @@ const customJestConfig = {
   moduleNameMapper: {
     "^uuid$": require.resolve("uuid"),
     "^@fontsource/roboto$": "identity-obj-proxy",
-    "\\.(png|css)$": "identity-obj-proxy",
+    "\\.(css)$": "identity-obj-proxy",
+    "\\.(png|pdf|svg|jpg|jpeg)$": "<rootDir>/__tests__/__mocks__/fileMock.js",
   },
   testPathIgnorePatterns: ["<rootDir>/cypress/"],
 };