From 82097a1ee87c178a44b6e901931d195c979fe88e Mon Sep 17 00:00:00 2001
From: Charlie Guan <charliegdev@gmail.com>
Date: Mon, 27 May 2019 15:56:58 -0700
Subject: [PATCH 1/9] :wrench: Specify test paths

---
 package.json                          | 6 +++---
 src/components/dialog/Dialog.test.jsx | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)
 create mode 100644 src/components/dialog/Dialog.test.jsx

diff --git a/package.json b/package.json
index 2a0def3..77b1490 100644
--- a/package.json
+++ b/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%",
@@ -71,8 +71,8 @@
       "react-app-polyfill/jsdom"
     ],
     "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
-      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
+      "<rootDir>/src/App.test.js",
+      "<rootDir>/src/components/**/*.(spec|test).{js,jsx,ts,tsx}"
     ],
     "testEnvironment": "jsdom",
     "testURL": "http://localhost",
diff --git a/src/components/dialog/Dialog.test.jsx b/src/components/dialog/Dialog.test.jsx
new file mode 100644
index 0000000..14c198c
--- /dev/null
+++ b/src/components/dialog/Dialog.test.jsx
@@ -0,0 +1 @@
+console.log("test");

From 56fd1e2da0e7bb35d2e9c031b938a5788e450bad Mon Sep 17 00:00:00 2001
From: Charlie Guan <charliegdev@gmail.com>
Date: Mon, 27 May 2019 16:02:39 -0700
Subject: [PATCH 2/9] :white_check_mark: Fix App.test.jsx

---
 src/App.test.js  |  9 ---------
 src/App.test.jsx | 16 ++++++++++++++++
 2 files changed, 16 insertions(+), 9 deletions(-)
 delete mode 100644 src/App.test.js
 create mode 100644 src/App.test.jsx

diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index a754b20..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/App.test.jsx b/src/App.test.jsx
new file mode 100644
index 0000000..d08eeee
--- /dev/null
+++ b/src/App.test.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { Provider } from "react-redux";
+import App from "./App";
+import { store } from "./redux";
+
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(
+    <Provider store={store}>
+      <App />
+    </Provider>,
+    div
+  );
+  ReactDOM.unmountComponentAtNode(div);
+});

From 7ef8141e913922de021de97a3c6ebe8f97201db3 Mon Sep 17 00:00:00 2001
From: Charlie Guan <charliegdev@gmail.com>
Date: Mon, 27 May 2019 16:03:58 -0700
Subject: [PATCH 3/9] :white_check_mark: Fix Dialog test

---
 src/components/dialog/Dialog.test.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/dialog/Dialog.test.jsx b/src/components/dialog/Dialog.test.jsx
index 14c198c..886bd79 100644
--- a/src/components/dialog/Dialog.test.jsx
+++ b/src/components/dialog/Dialog.test.jsx
@@ -1 +1,5 @@
-console.log("test");
+describe("Dialog", () => {
+  it("renders without crashing", () => {
+    console.log("OK");
+  });
+});

From ed5f3046cef0dc731c135190c16fcb8b1be86762 Mon Sep 17 00:00:00 2001
From: Charlie Guan <charliegdev@gmail.com>
Date: Mon, 27 May 2019 16:39:22 -0700
Subject: [PATCH 4/9] :white_check_mark: Add a new snapshot test for App.jsx

---
 .gitignore       |  3 ++-
 package.json     |  5 +++--
 src/App.test.jsx | 31 ++++++++++++++++++++++---------
 yarn.lock        | 10 ++++++++++
 4 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/.gitignore b/.gitignore
index 532eddc..4c00c27 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.env
\ No newline at end of file
+.env
+src/__snapshots__
\ No newline at end of file
diff --git a/package.json b/package.json
index 77b1490..8e2e584 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
       "react-app-polyfill/jsdom"
     ],
     "testMatch": [
-      "<rootDir>/src/App.test.js",
+      "<rootDir>/src/App.test.jsx",
       "<rootDir>/src/components/**/*.(spec|test).{js,jsx,ts,tsx}"
     ],
     "testEnvironment": "jsdom",
@@ -124,6 +124,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"
   }
 }
diff --git a/src/App.test.jsx b/src/App.test.jsx
index d08eeee..eceda35 100644
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -1,16 +1,29 @@
 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 { store } from "./redux";
 
-it("renders without crashing", () => {
-  const div = document.createElement("div");
-  ReactDOM.render(
-    <Provider store={store}>
-      <App />
-    </Provider>,
-    div
-  );
-  ReactDOM.unmountComponentAtNode(div);
+describe("App root", () => {
+  test("App renders without crashing", () => {
+    const div = document.createElement("div");
+    ReactDOM.render(
+      <Provider store={store}>
+        <App />
+      </Provider>,
+      div
+    );
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+  test("App renders the same snapshot", () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <App />
+      </Provider>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/yarn.lock b/yarn.lock
index 8f1cf6e..527f4f3 100644
--- a/yarn.lock
+++ b/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"

From d6d120e63b63543e791008835d3c1e083d6acd72 Mon Sep 17 00:00:00 2001
From: Charlie Guan <charliegdev@gmail.com>
Date: Mon, 27 May 2019 16:55:25 -0700
Subject: [PATCH 5/9] :white_check_mark: Add render test and snapshot test to
 Dialog.

---
 src/components/dialog/Dialog.test.jsx         | 33 +++++++++++++++++--
 .../dialog/__snapshots__/Dialog.test.jsx.snap | 18 ++++++++++
 2 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 src/components/dialog/__snapshots__/Dialog.test.jsx.snap

diff --git a/src/components/dialog/Dialog.test.jsx b/src/components/dialog/Dialog.test.jsx
index 886bd79..ec19790 100644
--- a/src/components/dialog/Dialog.test.jsx
+++ b/src/components/dialog/Dialog.test.jsx
@@ -1,5 +1,34 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import renderer from "react-test-renderer";
+import { Button } from "evergreen-ui";
+import Dialog from "./Dialog";
+
 describe("Dialog", () => {
-  it("renders without crashing", () => {
-    console.log("OK");
+  let dialog;
+
+  beforeEach(() => {
+    dialog = (
+      <Dialog
+        confirmLabel="OK"
+        onConfirm={() => undefined}
+        title="Sample Dialog"
+        trigger={<Button>Open Dialog</Button>}
+      >
+        <p>Sample Dialog content</p>
+      </Dialog>
+    );
+  });
+
+  test("Dialog renders without crashing", () => {
+    const div = document.createElement("div");
+    ReactDOM.render(dialog, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+  test("Dialog renders the same snapshot", () => {
+    const component = renderer.create(dialog);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/dialog/__snapshots__/Dialog.test.jsx.snap b/src/components/dialog/__snapshots__/Dialog.test.jsx.snap
new file mode 100644
index 0000000..104bdb8
--- /dev/null
+++ b/src/components/dialog/__snapshots__/Dialog.test.jsx.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dialog Dialog renders the same snapshot 1`] = `
+<div>
+  <div
+    className="📦box-szg_border-box css-nil"
+  />
+  <div
+    onClick={[Function]}
+  >
+    <button
+      className="css-69cngj 📦fnt-fam_b77syt 📦mt_0px 📦fnt-sze_12px 📦f-wght_500 📦ln-ht_32px 📦ltr-spc_0 📦btrr_3px 📦bbrr_3px 📦btlr_3px 📦bblr_3px 📦pt_0px 📦pb_0px 📦pr_16px 📦pl_16px 📦ml_0px 📦mr_0px 📦mb_0px 📦h_32px 📦pst_relative 📦dspl_inline-flex 📦algn-itms_center 📦flx-wrap_nowrap 📦box-szg_border-box"
+    >
+      Open Dialog
+    </button>
+  </div>
+</div>
+`;

From 43e016c4dc64d90f291007d0dd2112b9ccdacc43 Mon Sep 17 00:00:00 2001
From: Charlie Guan <charliegdev@gmail.com>
Date: Mon, 27 May 2019 17:20:46 -0700
Subject: [PATCH 6/9] :white_check_mark: Add basic tests for NewTaskDialog as
 well

---
 .gitignore                                    |  3 ++-
 package.json                                  |  3 ++-
 src/components/dialog/NewTaskDialog.test.jsx  | 25 +++++++++++++++++++
 .../dialog/__snapshots__/Dialog.test.jsx.snap | 18 -------------
 src/test-setup.js                             |  2 ++
 5 files changed, 31 insertions(+), 20 deletions(-)
 create mode 100644 src/components/dialog/NewTaskDialog.test.jsx
 delete mode 100644 src/components/dialog/__snapshots__/Dialog.test.jsx.snap
 create mode 100644 src/test-setup.js

diff --git a/.gitignore b/.gitignore
index 4c00c27..bdd26ae 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,4 +23,5 @@ yarn-debug.log*
 yarn-error.log*
 
 .env
-src/__snapshots__
\ No newline at end of file
+src/__snapshots__
+src/components/**/__snapshots__
diff --git a/package.json b/package.json
index 8e2e584..d4d9efe 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,8 @@
     ],
     "resolver": "jest-pnp-resolver",
     "setupFiles": [
-      "react-app-polyfill/jsdom"
+      "react-app-polyfill/jsdom",
+      "<rootDir>/src/test-setup.js"
     ],
     "testMatch": [
       "<rootDir>/src/App.test.jsx",
diff --git a/src/components/dialog/NewTaskDialog.test.jsx b/src/components/dialog/NewTaskDialog.test.jsx
new file mode 100644
index 0000000..330aca2
--- /dev/null
+++ b/src/components/dialog/NewTaskDialog.test.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import renderer from "react-test-renderer";
+import { Button } from "evergreen-ui";
+import NewTaskDialog from "./NewTaskDialog";
+
+describe("Dialog", () => {
+  let dialog;
+
+  beforeEach(() => {
+    dialog = <NewTaskDialog onConfirm={() => undefined} />;
+  });
+
+  test("Dialog renders without crashing", () => {
+    const div = document.createElement("div");
+    ReactDOM.render(dialog, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+  test("Dialog renders the same snapshot", () => {
+    const component = renderer.create(dialog);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/components/dialog/__snapshots__/Dialog.test.jsx.snap b/src/components/dialog/__snapshots__/Dialog.test.jsx.snap
deleted file mode 100644
index 104bdb8..0000000
--- a/src/components/dialog/__snapshots__/Dialog.test.jsx.snap
+++ /dev/null
@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Dialog Dialog renders the same snapshot 1`] = `
-<div>
-  <div
-    className="📦box-szg_border-box css-nil"
-  />
-  <div
-    onClick={[Function]}
-  >
-    <button
-      className="css-69cngj 📦fnt-fam_b77syt 📦mt_0px 📦fnt-sze_12px 📦f-wght_500 📦ln-ht_32px 📦ltr-spc_0 📦btrr_3px 📦bbrr_3px 📦btlr_3px 📦bblr_3px 📦pt_0px 📦pb_0px 📦pr_16px 📦pl_16px 📦ml_0px 📦mr_0px 📦mb_0px 📦h_32px 📦pst_relative 📦dspl_inline-flex 📦algn-itms_center 📦flx-wrap_nowrap 📦box-szg_border-box"
-    >
-      Open Dialog
-    </button>
-  </div>
-</div>
-`;
diff --git a/src/test-setup.js b/src/test-setup.js
new file mode 100644
index 0000000..588b428
--- /dev/null
+++ b/src/test-setup.js
@@ -0,0 +1,2 @@
+/* eslint no-console: 0 */
+console.warn = jest.fn();

From e270cab8a46c455f539ea4bcd3a8c63f15968768 Mon Sep 17 00:00:00 2001
From: Charlie Guan <charliegdev@gmail.com>
Date: Mon, 27 May 2019 17:45:17 -0700
Subject: [PATCH 7/9] :recycle: Extract common tests into a util

---
 src/App.test.jsx                              | 27 ++++--------
 src/components/dialog/Dialog.test.jsx         | 14 ++-----
 .../select-menu/SelectMenu.test.jsx           | 42 +++++++++++++++++++
 src/components/test-utils.js                  | 16 +++++++
 4 files changed, 69 insertions(+), 30 deletions(-)
 create mode 100644 src/components/select-menu/SelectMenu.test.jsx
 create mode 100644 src/components/test-utils.js

diff --git a/src/App.test.jsx b/src/App.test.jsx
index eceda35..78800a9 100644
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -3,27 +3,16 @@ import ReactDOM from "react-dom";
 import renderer from "react-test-renderer";
 import { Provider } from "react-redux";
 import App from "./App";
+import { renderWithoutCrashing, renderSameSnapshot } from "./components/test-utils";
 import { store } from "./redux";
 
 describe("App root", () => {
-  test("App renders without crashing", () => {
-    const div = document.createElement("div");
-    ReactDOM.render(
-      <Provider store={store}>
-        <App />
-      </Provider>,
-      div
-    );
-    ReactDOM.unmountComponentAtNode(div);
-  });
+  const component = (
+    <Provider store={store}>
+      <App />
+    </Provider>
+  );
 
-  test("App renders the same snapshot", () => {
-    const component = renderer.create(
-      <Provider store={store}>
-        <App />
-      </Provider>
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
+  renderWithoutCrashing("App", component);
+  renderSameSnapshot("App", component);
 });
diff --git a/src/components/dialog/Dialog.test.jsx b/src/components/dialog/Dialog.test.jsx
index ec19790..cc44901 100644
--- a/src/components/dialog/Dialog.test.jsx
+++ b/src/components/dialog/Dialog.test.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import renderer from "react-test-renderer";
 import { Button } from "evergreen-ui";
+import { renderWithoutCrashing, renderSameSnapshot } from "../test-utils";
 import Dialog from "./Dialog";
 
 describe("Dialog", () => {
@@ -20,15 +21,6 @@ describe("Dialog", () => {
     );
   });
 
-  test("Dialog renders without crashing", () => {
-    const div = document.createElement("div");
-    ReactDOM.render(dialog, div);
-    ReactDOM.unmountComponentAtNode(div);
-  });
-
-  test("Dialog renders the same snapshot", () => {
-    const component = renderer.create(dialog);
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
+  renderWithoutCrashing("Dialog", dialog);
+  renderSameSnapshot("Dialog", dialog);
 });
diff --git a/src/components/select-menu/SelectMenu.test.jsx b/src/components/select-menu/SelectMenu.test.jsx
new file mode 100644
index 0000000..c2dbd57
--- /dev/null
+++ b/src/components/select-menu/SelectMenu.test.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import renderer from "react-test-renderer";
+import SelectMenu from "./SelectMenu";
+
+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}
+      />
+    );
+  });
+
+  test("Dialog renders without crashing", () => {
+    const div = document.createElement("div");
+    ReactDOM.render(selectMenu, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+  test("Dialog renders the same snapshot", () => {
+    const component = renderer.create(selectMenu);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/components/test-utils.js b/src/components/test-utils.js
new file mode 100644
index 0000000..18cf025
--- /dev/null
+++ b/src/components/test-utils.js
@@ -0,0 +1,16 @@
+import ReactDOM from "react-dom";
+import renderer from "react-test-renderer";
+
+export const renderWithoutCrashing = (componentName, component) =>
+  test(`${componentName} renders without crashing`, () => {
+    const div = document.createElement("div");
+    ReactDOM.render(component, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+export const renderSameSnapshot = (componentName, component) =>
+  test(`${componentName} renders the same snapshot`, () => {
+    const output = renderer.create(component);
+    const tree = output.toJSON();
+    expect(tree).toMatchSnapshot();
+  });

From 04f8a99aebe3d93de8d98d672159b300b818e8c9 Mon Sep 17 00:00:00 2001
From: Charlie Guan <charliegdev@gmail.com>
Date: Mon, 27 May 2019 20:35:24 -0700
Subject: [PATCH 8/9] :white_check_mark: Add basic tests for all components

---
 src/App.test.jsx                              |  5 +--
 src/components/dialog/Dialog.test.jsx         |  7 +---
 src/components/dialog/NewTaskDialog.test.jsx  | 16 +-------
 .../select-menu/SelectMenu.test.jsx           | 15 +-------
 src/components/task/Task.test.jsx             | 24 ++++++++++++
 src/components/task/TaskLane.test.jsx         | 37 +++++++++++++++++++
 src/components/test-utils.js                  | 15 ++++++--
 src/components/topbar/Topbar.test.jsx         | 17 +++++++++
 8 files changed, 97 insertions(+), 39 deletions(-)
 create mode 100644 src/components/task/Task.test.jsx
 create mode 100644 src/components/task/TaskLane.test.jsx
 create mode 100644 src/components/topbar/Topbar.test.jsx

diff --git a/src/App.test.jsx b/src/App.test.jsx
index 78800a9..4e19741 100644
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 import renderer from "react-test-renderer";
 import { Provider } from "react-redux";
 import App from "./App";
-import { renderWithoutCrashing, renderSameSnapshot } from "./components/test-utils";
+import { routineTests } from "./components/test-utils";
 import { store } from "./redux";
 
 describe("App root", () => {
@@ -13,6 +13,5 @@ describe("App root", () => {
     </Provider>
   );
 
-  renderWithoutCrashing("App", component);
-  renderSameSnapshot("App", component);
+  routineTests(component);
 });
diff --git a/src/components/dialog/Dialog.test.jsx b/src/components/dialog/Dialog.test.jsx
index cc44901..2711945 100644
--- a/src/components/dialog/Dialog.test.jsx
+++ b/src/components/dialog/Dialog.test.jsx
@@ -1,8 +1,6 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import renderer from "react-test-renderer";
 import { Button } from "evergreen-ui";
-import { renderWithoutCrashing, renderSameSnapshot } from "../test-utils";
+import { routineTests } from "../test-utils";
 import Dialog from "./Dialog";
 
 describe("Dialog", () => {
@@ -21,6 +19,5 @@ describe("Dialog", () => {
     );
   });
 
-  renderWithoutCrashing("Dialog", dialog);
-  renderSameSnapshot("Dialog", dialog);
+  routineTests(dialog);
 });
diff --git a/src/components/dialog/NewTaskDialog.test.jsx b/src/components/dialog/NewTaskDialog.test.jsx
index 330aca2..c0bf0ef 100644
--- a/src/components/dialog/NewTaskDialog.test.jsx
+++ b/src/components/dialog/NewTaskDialog.test.jsx
@@ -1,8 +1,6 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import renderer from "react-test-renderer";
-import { Button } from "evergreen-ui";
 import NewTaskDialog from "./NewTaskDialog";
+import { routineTests } from "../test-utils";
 
 describe("Dialog", () => {
   let dialog;
@@ -11,15 +9,5 @@ describe("Dialog", () => {
     dialog = <NewTaskDialog onConfirm={() => undefined} />;
   });
 
-  test("Dialog renders without crashing", () => {
-    const div = document.createElement("div");
-    ReactDOM.render(dialog, div);
-    ReactDOM.unmountComponentAtNode(div);
-  });
-
-  test("Dialog renders the same snapshot", () => {
-    const component = renderer.create(dialog);
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
+  routineTests(dialog);
 });
diff --git a/src/components/select-menu/SelectMenu.test.jsx b/src/components/select-menu/SelectMenu.test.jsx
index c2dbd57..5b80726 100644
--- a/src/components/select-menu/SelectMenu.test.jsx
+++ b/src/components/select-menu/SelectMenu.test.jsx
@@ -1,7 +1,6 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import renderer from "react-test-renderer";
 import SelectMenu from "./SelectMenu";
+import { routineTests } from "../test-utils";
 
 describe("Dialog", () => {
   let selectMenu;
@@ -28,15 +27,5 @@ describe("Dialog", () => {
     );
   });
 
-  test("Dialog renders without crashing", () => {
-    const div = document.createElement("div");
-    ReactDOM.render(selectMenu, div);
-    ReactDOM.unmountComponentAtNode(div);
-  });
-
-  test("Dialog renders the same snapshot", () => {
-    const component = renderer.create(selectMenu);
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
+  routineTests(selectMenu);
 });
diff --git a/src/components/task/Task.test.jsx b/src/components/task/Task.test.jsx
new file mode 100644
index 0000000..496f706
--- /dev/null
+++ b/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);
+});
diff --git a/src/components/task/TaskLane.test.jsx b/src/components/task/TaskLane.test.jsx
new file mode 100644
index 0000000..6cbf21e
--- /dev/null
+++ b/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);
+});
diff --git a/src/components/test-utils.js b/src/components/test-utils.js
index 18cf025..7d95b35 100644
--- a/src/components/test-utils.js
+++ b/src/components/test-utils.js
@@ -1,16 +1,23 @@
 import ReactDOM from "react-dom";
 import renderer from "react-test-renderer";
 
-export const renderWithoutCrashing = (componentName, component) =>
-  test(`${componentName} renders without crashing`, () => {
+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 = (componentName, component) =>
-  test(`${componentName} renders the same snapshot`, () => {
+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);
+};
diff --git a/src/components/topbar/Topbar.test.jsx b/src/components/topbar/Topbar.test.jsx
new file mode 100644
index 0000000..724919a
--- /dev/null
+++ b/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);
+});

From e4f85b6659f5bf864b64eef908690ebdf13d6fd6 Mon Sep 17 00:00:00 2001
From: Charlie Guan <charliegdev@gmail.com>
Date: Mon, 27 May 2019 22:42:37 -0700
Subject: [PATCH 9/9] :bulb: Document the reason to disable console.warn

---
 src/test-setup.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/test-setup.js b/src/test-setup.js
index 588b428..91606c9 100644
--- a/src/test-setup.js
+++ b/src/test-setup.js
@@ -1,2 +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();