From 115f470c4d3c882e50bee7939c54cb582425ba5f Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Fri, 28 Jan 2022 15:04:29 -0800
Subject: [PATCH] Adding jest setup and basic tests.

---
 .jest/setEnvVars.js                      |  2 ++
 __tests__/Home.test.js                   |  8 +++++
 __tests__/Nav.test.js                    | 15 ++++++++
 __tests__/__snapshots__/Nav.test.js.snap | 46 ++++++++++++++++++++++++
 __tests__/buildBase64Data.test.js        | 22 ++++++++++++
 __tests__/index.test.js                  |  8 +++++
 jest.setup.js                            |  3 ++
 package.json                             | 12 ++++++-
 pages/index.js                           |  1 -
 9 files changed, 115 insertions(+), 2 deletions(-)
 create mode 100644 .jest/setEnvVars.js
 create mode 100644 __tests__/Home.test.js
 create mode 100644 __tests__/Nav.test.js
 create mode 100644 __tests__/__snapshots__/Nav.test.js.snap
 create mode 100644 __tests__/buildBase64Data.test.js
 create mode 100644 __tests__/index.test.js
 create mode 100644 jest.setup.js

diff --git a/.jest/setEnvVars.js b/.jest/setEnvVars.js
new file mode 100644
index 0000000..e227cea
--- /dev/null
+++ b/.jest/setEnvVars.js
@@ -0,0 +1,2 @@
+process.env.PUBLIC_CLOUD_NAME='testCloudName';
+process.env.PUBLIC_FOLDER_NAME='testFolderName';
\ No newline at end of file
diff --git a/__tests__/Home.test.js b/__tests__/Home.test.js
new file mode 100644
index 0000000..2c2c7b3
--- /dev/null
+++ b/__tests__/Home.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import HomePage from '../pages';
+
+describe('Index Page <HomePage />', () => {
+  it('should render', () => {
+    render(<HomePage />);
+  });
+});
diff --git a/__tests__/Nav.test.js b/__tests__/Nav.test.js
new file mode 100644
index 0000000..956ee1b
--- /dev/null
+++ b/__tests__/Nav.test.js
@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import Nav from '../components/Nav';
+
+const useRouter = jest.spyOn(require('next/router'), 'useRouter');
+
+describe('<Nav/>', () => {
+  it('Renders nav correctly and matches snapshot', () => {
+    const router = { pathname: '/' };
+    useRouter.mockReturnValue(router);
+    const { container, debug } = render(<Nav />);
+    expect(container).toMatchSnapshot();
+    const link = screen.getByText('RSVP');
+    expect(link).toHaveAttribute('href', '/rsvp');
+  });
+});
diff --git a/__tests__/__snapshots__/Nav.test.js.snap b/__tests__/__snapshots__/Nav.test.js.snap
new file mode 100644
index 0000000..befd625
--- /dev/null
+++ b/__tests__/__snapshots__/Nav.test.js.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Nav/> Renders nav correctly and matches snapshot 1`] = `
+<div>
+  <nav
+    class="NavStyles-sc-vewc8g-0 dWZdml"
+  >
+    <a
+      aria-current="page"
+      href="/"
+    >
+      Home
+    </a>
+    <a
+      href="/story"
+    >
+      Our Story
+    </a>
+    <a
+      href="/party"
+    >
+      Wedding Party
+    </a>
+    <a
+      href="/photos"
+    >
+      Photos
+    </a>
+    <a
+      href="/travelstay"
+    >
+      Travel & Stay
+    </a>
+    <a
+      href="/qanda"
+    >
+      Q + A
+    </a>
+    <a
+      href="/rsvp"
+    >
+      RSVP
+    </a>
+  </nav>
+</div>
+`;
diff --git a/__tests__/buildBase64Data.test.js b/__tests__/buildBase64Data.test.js
new file mode 100644
index 0000000..e7a5b99
--- /dev/null
+++ b/__tests__/buildBase64Data.test.js
@@ -0,0 +1,22 @@
+import buildBase64Data from '../utils/buildBase64Data';
+
+describe('build base 64 function', () => {
+  const imageName = 'https://picsum.photos/1307/880';
+  const alt = 'test alt';
+  it('takes an image name and builds base64 image', async () => {
+    const imageData = await buildBase64Data(false, imageName, alt, {});
+    expect(imageData).toBeDefined();
+    expect(imageData.alt).toEqual(alt);
+    expect(imageData.imageProps).toBeDefined();
+    expect(imageData.imageProps.blurDataURL).toContain(
+      'data:image/jpeg;base64'
+    );
+    expect(imageData.imageProps.height).toBeGreaterThan(0);
+    expect(imageData.imageProps.width).toBeGreaterThan(0);
+    expect(imageData.imageProps.src).toContain(imageName);
+  });
+
+  it('fails if image not resolved', async () => {
+    expect(await buildBase64Data(false, 'Blah', alt, {})).toEqual({});
+  });
+});
diff --git a/__tests__/index.test.js b/__tests__/index.test.js
new file mode 100644
index 0000000..4580887
--- /dev/null
+++ b/__tests__/index.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import Home from '../pages/index';
+
+describe('Home', () => {
+  it('renders home page', () => {
+    render(<Home />);
+  });
+});
diff --git a/jest.setup.js b/jest.setup.js
new file mode 100644
index 0000000..d8e5eaf
--- /dev/null
+++ b/jest.setup.js
@@ -0,0 +1,3 @@
+import '@testing-library/jest-dom';
+
+window.alert = console.log;
diff --git a/package.json b/package.json
index 42271ae..b7df406 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "NODE_OPTIONS='--inspect' next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "test": "NODE_ENV=test jest --watch"
   },
   "dependencies": {
     "@plaiceholder/next": "^2.2.0",
@@ -67,6 +68,15 @@
       "react/prop-types": 0
     }
   },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "setupFiles": [
+      "./.jest/setEnvVars.js"
+    ],
+    "setupFilesAfterEnv": [
+      "./jest.setup.js"
+    ]
+  },
   "//": "This is our babel config, I prefer this over a .babelrc file",
   "babel": {
     "plugins": [
diff --git a/pages/index.js b/pages/index.js
index 34d9600..edf96c8 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -2,7 +2,6 @@ import styled from 'styled-components';
 import Head from 'next/head';
 import useUser from '../lib/useUser';
 import HomeContent from '../components/HomeContent';
-import connectDb from '../utils/db';
 import Login from '../components/Login';
 import Layout from '../components/Layout';
 import buildBase64Data from '../utils/buildBase64Data';