From 189cc586c67266fe9ef6a23f0e241c43a5479590 Mon Sep 17 00:00:00 2001
From: Sepand Ansari <sepans@sepans.com>
Date: Sat, 27 Oct 2018 20:48:57 -0400
Subject: [PATCH] Add jest snapshot testing to Nav.jsx

---
 client/components/__test__/Nav.test.jsx       |   8 +
 .../__test__/__snapshots__/Nav.test.jsx.snap  | 527 ++++++++++++++++++
 package.json                                  |   1 +
 3 files changed, 536 insertions(+)
 create mode 100644 client/components/__test__/__snapshots__/Nav.test.jsx.snap

diff --git a/client/components/__test__/Nav.test.jsx b/client/components/__test__/Nav.test.jsx
index 4543c343..b52e521f 100644
--- a/client/components/__test__/Nav.test.jsx
+++ b/client/components/__test__/Nav.test.jsx
@@ -1,6 +1,7 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
+import renderer from 'react-test-renderer';
 
 import Nav from './../Nav';
 
@@ -44,4 +45,11 @@ describe('Nav', () => {
     const nav = getWrapper();
     expect(nav.exists('.nav')).toEqual(true);
   });
+
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(<Nav {...props} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/client/components/__test__/__snapshots__/Nav.test.jsx.snap b/client/components/__test__/__snapshots__/Nav.test.jsx.snap
new file mode 100644
index 00000000..dae0b91e
--- /dev/null
+++ b/client/components/__test__/__snapshots__/Nav.test.jsx.snap
@@ -0,0 +1,527 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Nav renders correctly 1`] = `
+<nav
+  className="nav"
+  title="main-navigation"
+>
+  <ul
+    className="nav__items-left"
+    title="project-menu"
+  >
+    <li
+      className="nav__item-logo"
+    >
+      <span
+        className="isvg loading"
+      />
+    </li>
+    <li
+      className="nav__item"
+    >
+      <button
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+      >
+        <span
+          className="nav__item-header"
+        >
+          File
+        </span>
+        <span
+          className="isvg loading nav__item-header-triangle"
+        />
+      </button>
+      <ul
+        className="nav__dropdown"
+      >
+        <button
+          className="nav__dropdown-heading"
+          onClick={[Function]}
+        >
+          <span>
+            File
+          </span>
+          <span
+            className="isvg loading"
+          />
+        </button>
+        <li
+          className="nav__dropdown-item"
+        >
+          <button
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+          >
+            New
+          </button>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <button
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+          >
+            Save
+            <span
+              className="nav__keyboard-shortcut"
+            >
+              Ctrl
+              +s
+            </span>
+          </button>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <button
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+          >
+            Duplicate
+          </button>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <button
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+          >
+            Share
+          </button>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <button
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+          >
+            Download
+          </button>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <a
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            style={Object {}}
+          >
+            Open
+          </a>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <a
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            style={Object {}}
+          >
+            Examples
+          </a>
+        </li>
+      </ul>
+    </li>
+    <li
+      className="nav__item"
+    >
+      <button
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+      >
+        <span
+          className="nav__item-header"
+        >
+          Edit
+        </span>
+        <span
+          className="isvg loading nav__item-header-triangle"
+        />
+      </button>
+      <ul
+        className="nav__dropdown"
+      >
+        <button
+          className="nav__dropdown-heading"
+          onClick={[Function]}
+        >
+          <span>
+            Edit
+          </span>
+          <span
+            className="isvg loading"
+          />
+        </button>
+        <li
+          className="nav__dropdown-item"
+        >
+          <button
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+          >
+            Tidy Code
+            <span
+              className="nav__keyboard-shortcut"
+            >
+              ⇧
+              +Tab
+            </span>
+          </button>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <button
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+          >
+            Find
+            <span
+              className="nav__keyboard-shortcut"
+            >
+              Ctrl
+              +F
+            </span>
+          </button>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <button
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+          >
+            Find Next
+            <span
+              className="nav__keyboard-shortcut"
+            >
+              Ctrl
+              +G
+            </span>
+          </button>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <button
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+          >
+            Find Previous
+            <span
+              className="nav__keyboard-shortcut"
+            >
+              ⇧
+              +
+              Ctrl
+              +G
+            </span>
+          </button>
+        </li>
+      </ul>
+    </li>
+    <li
+      className="nav__item"
+    >
+      <button
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+      >
+        <span
+          className="nav__item-header"
+        >
+          Sketch
+        </span>
+        <span
+          className="isvg loading nav__item-header-triangle"
+        />
+      </button>
+      <ul
+        className="nav__dropdown"
+      >
+        <button
+          className="nav__dropdown-heading"
+          onClick={[Function]}
+        >
+          <span>
+            Sketch
+          </span>
+          <span
+            className="isvg loading"
+          />
+        </button>
+        <li
+          className="nav__dropdown-item"
+        >
+          <button
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+          >
+            Run
+            <span
+              className="nav__keyboard-shortcut"
+            >
+              Ctrl
+              +Enter
+            </span>
+          </button>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <button
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+          >
+            Stop
+            <span
+              className="nav__keyboard-shortcut"
+            >
+              ⇧
+              +
+              Ctrl
+              +Enter
+            </span>
+          </button>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <button
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+          >
+            Start Accessible
+            <span
+              className="nav__keyboard-shortcut"
+            >
+              ⇧
+              +
+              Ctrl
+              +1
+            </span>
+          </button>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <button
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+          >
+            Stop Accessible
+            <span
+              className="nav__keyboard-shortcut"
+            >
+              ⇧
+              +
+              Ctrl
+              +2
+            </span>
+          </button>
+        </li>
+      </ul>
+    </li>
+    <li
+      className="nav__item"
+    >
+      <button
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+      >
+        <span
+          className="nav__item-header"
+        >
+          Help & Feedback
+        </span>
+        <span
+          className="isvg loading nav__item-header-triangle"
+        />
+      </button>
+      <ul
+        className="nav__dropdown"
+      >
+        <button
+          className="nav__dropdown-heading"
+          onClick={[Function]}
+        >
+          <span>
+            Help & Feedback
+          </span>
+          <span
+            className="isvg loading"
+          />
+        </button>
+        <li
+          className="nav__dropdown-item"
+        >
+          <button
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+          >
+            Keyboard Shortcuts
+          </button>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <a
+            href="https://p5js.org/reference/"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Reference
+          </a>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <a
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            style={Object {}}
+          >
+            About
+          </a>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <a
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            style={Object {}}
+          >
+            Feedback
+          </a>
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <ul
+    className="nav__items-right"
+    title="user-menu"
+  >
+    <li
+      className="nav__item"
+    >
+      <span>
+        Hello, 
+        new-user
+        !
+      </span>
+    </li>
+    <span
+      className="nav__item-spacer"
+    >
+      |
+    </span>
+    <li
+      className="nav__item"
+    >
+      <button
+        className="nav__item-header"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+      >
+        My Account
+      </button>
+      <span
+        className="isvg loading nav__item-header-triangle"
+      />
+      <ul
+        className="nav__dropdown"
+      >
+        <button
+          className="nav__dropdown-heading"
+          onClick={[Function]}
+        >
+          <span>
+            My Account
+          </span>
+          <span
+            className="isvg loading"
+          />
+        </button>
+        <li
+          className="nav__dropdown-item"
+        >
+          <a
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            style={Object {}}
+          >
+            My sketches
+          </a>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <a
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            style={Object {}}
+          >
+            My assets
+          </a>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <a
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            style={Object {}}
+          >
+            Settings
+          </a>
+        </li>
+        <li
+          className="nav__dropdown-item"
+        >
+          <button
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+          >
+            Log out
+          </button>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</nav>
+`;
diff --git a/package.json b/package.json
index 7f82bbb0..6d71df00 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "sass-loader": "^6.0.7",
     "style-loader": "^0.13.2",
     "webpack-manifest-plugin": "^2.0.4",
+    "react-test-renderer": "^16.6.0",
     "webpack-node-externals": "^1.7.2"
   },
   "engines": {