Feature/unit test

.gitignore

@@ -22,4 +22,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.env
+.env
+src/__snapshots__
+src/components/**/__snapshots__

package.json

@@ -53,7 +53,7 @@
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
-    "test": "node scripts/test.js"
+    "test": "node scripts/test.js --watchAll"
   },
   "browserslist": [
     ">0.2%",
@@ -68,11 +68,12 @@
     ],
     "resolver": "jest-pnp-resolver",
     "setupFiles": [
-      "react-app-polyfill/jsdom"
+      "react-app-polyfill/jsdom",
+      "<rootDir>/src/test-setup.js"
     ],
     "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
-      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
+      "<rootDir>/src/App.test.jsx",
+      "<rootDir>/src/components/**/*.(spec|test).{js,jsx,ts,tsx}"
     ],
     "testEnvironment": "jsdom",
     "testURL": "http://localhost",
@@ -124,6 +125,7 @@
     "jest-pnp-resolver": "1.0.2",
     "jest-resolve": "23.6.0",
     "jest-watch-typeahead": "^0.2.1",
-    "react-dev-utils": "^8.0.0"
+    "react-dev-utils": "^8.0.0",
+    "react-test-renderer": "^16.8.6"
   }
 }

src/App.test.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import renderer from "react-test-renderer";
+import { Provider } from "react-redux";
+import App from "./App";
+import { routineTests } from "./components/test-utils";
+import { store } from "./redux";
+
+describe("App root", () => {
+  const component = (
+    <Provider store={store}>
+      <App />
+    </Provider>
+  );
+
+  routineTests(component);
+});

src/components/dialog/Dialog.test.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Button } from "evergreen-ui";
+import { routineTests } from "../test-utils";
+import Dialog from "./Dialog";
+
+describe("Dialog", () => {
+  let dialog;
+
+  beforeEach(() => {
+    dialog = (
+      <Dialog
+        confirmLabel="OK"
+        onConfirm={() => undefined}
+        title="Sample Dialog"
+        trigger={<Button>Open Dialog</Button>}
+      >
+        <p>Sample Dialog content</p>
+      </Dialog>
+    );
+  });
+
+  routineTests(dialog);
+});

src/components/dialog/NewTaskDialog.test.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import NewTaskDialog from "./NewTaskDialog";
+import { routineTests } from "../test-utils";
+
+describe("Dialog", () => {
+  let dialog;
+
+  beforeEach(() => {
+    dialog = <NewTaskDialog onConfirm={() => undefined} />;
+  });
+
+  routineTests(dialog);
+});

src/components/select-menu/SelectMenu.test.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import SelectMenu from "./SelectMenu";
+import { routineTests } from "../test-utils";
+
+describe("Dialog", () => {
+  let selectMenu;
+
+  beforeEach(() => {
+    selectMenu = (
+      <SelectMenu
+        options={[
+          {
+            label: "option 1",
+            value: "option 1"
+          },
+          {
+            label: "option 2",
+            value: "option 2"
+          },
+          {
+            label: "option 3",
+            value: "option 3"
+          }
+        ]}
+        onSelect={() => undefined}
+      />
+    );
+  });
+
+  routineTests(selectMenu);
+});

src/components/task/Task.test.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import Task from "./Task";
+import { emptyFiller, routineTests } from "../test-utils";
+
+describe("Task", () => {
+  let task;
+
+  beforeEach(() => {
+    task = (
+      <Task
+        changeStatus={emptyFiller}
+        deleteTask={emptyFiller}
+        task={{
+          id: 1,
+          title: "Review iPhone XS Max",
+          description: "Review the newest flagship iPhone.",
+          status: "To Do"
+        }}
+      />
+    );
+  });
+
+  routineTests(task);
+});

src/components/task/TaskLane.test.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import Task from "./Task";
+import TaskLane from "./TaskLane";
+import { emptyFiller, routineTests } from "../test-utils";
+
+describe("TaskLane", () => {
+  let taskLane;
+
+  beforeEach(() => {
+    taskLane = (
+      <TaskLane icon="pulse" title="In Progress">
+        <Task
+          changeStatus={emptyFiller}
+          deleteTask={emptyFiller}
+          task={{
+            id: 1,
+            title: "Review iPhone XS Max",
+            description: "Review the newest flagship iPhone.",
+            status: "To Do"
+          }}
+        />
+        <Task
+          changeStatus={emptyFiller}
+          deleteTask={emptyFiller}
+          task={{
+            id: 2,
+            title: "Review iPhone XS Max",
+            description: "Review the newest flagship iPhone.",
+            status: "To Do"
+          }}
+        />
+      </TaskLane>
+    );
+  });
+
+  routineTests(taskLane);
+});

src/components/test-utils.js

@@ -0,0 +1,23 @@
+import ReactDOM from "react-dom";
+import renderer from "react-test-renderer";
+
+export const emptyFiller = () => undefined;
+
+export const renderWithoutCrashing = component =>
+  test(`renders without crashing`, () => {
+    const div = document.createElement("div");
+    ReactDOM.render(component, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+export const renderSameSnapshot = component =>
+  test("renders the same snapshot", () => {
+    const output = renderer.create(component);
+    const tree = output.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+export const routineTests = component => {
+  renderWithoutCrashing(component);
+  renderSameSnapshot(component);
+};

src/components/topbar/Topbar.test.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Topbar from "./Topbar";
+import { routineTests } from "../test-utils";
+
+describe("Topbar", () => {
+  let topbar;
+
+  beforeEach(() => {
+    topbar = (
+      <Topbar>
+        <p>Test</p>
+      </Topbar>
+    );
+  });
+
+  routineTests(topbar);
+});

src/test-setup.js

@@ -0,0 +1,4 @@
+/* eslint no-console: 0 */
+// Evergreen keeps spitting out console warnings about a deprecated CSS prop which we're not using;
+// it clobs up the jest unit test output! Disable warnings.
+console.warn = jest.fn();

yarn.lock

@@ -8499,6 +8499,16 @@ react-scrollbar-size@^2.0.2:
     react-event-listener "^0.5.1"
     stifle "^1.0.2"
 
+react-test-renderer@^16.8.6:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.6.tgz#188d8029b8c39c786f998aa3efd3ffe7642d5ba1"
+  integrity sha512-H2srzU5IWYT6cZXof6AhUcx/wEyJddQ8l7cLM/F7gDXYyPr4oq+vCIxJYXVGhId1J706sqziAjuOEjyNkfgoEw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.8.6"
+    scheduler "^0.13.6"
+
 react-tiny-virtual-list@^2.1.4:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/react-tiny-virtual-list/-/react-tiny-virtual-list-2.2.0.tgz#eafb6fcf764e4ed41150ff9752cdaad8b35edf4a"