Add unit and integration tests

.vscode/launch.json

@@ -1,5 +1,22 @@
 {
     "version": "0.2.0",
     "configurations": [
+      {
+        "name": "Debug CRA Tests",
+        "type": "node",
+        "request": "launch",
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
+        "args": [
+          "test",
+          "--runInBand",
+          "--no-cache",
+          "--coverage",
+          "--watchAll=false"
+        ],
+        "cwd": "${workspaceRoot}",
+        "protocol": "inspector",
+        "console": "integratedTerminal",
+        "internalConsoleOptions": "neverOpen"
+      }
     ]
   }

package.json

@@ -8,10 +8,14 @@
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1"
   },
+  "devDependencies": {
+    "@testing-library/react": "^8.0.4",
+    "jest-dom": "^3.5.0"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --coverage --watchAll=false",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -28,5 +32,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "jest": {
+    "collectCoverageFrom" : [
+      "<rootDir>/src/**/*.js",
+       "!<rootDir>/src/index.js" , 
+       "!<rootDir>/src/serviceWorker.js",
+       "!<rootDir>/src/test-utils/**/*.js"
+      ]
   }
 }

src/App.test.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { cleanup } from "@testing-library/react";
+import "jest-dom/extend-expect";
+import renderWithRoute from "./test-utils/renderWithRoute";
+import App from "./App";
+
+afterEach(cleanup);
+
+test("should render home page", async () => {
+  const { queryByTestId } = renderWithRoute(<App />, "/");
+
+  const navigationNode = queryByTestId("navigation");
+  expect(navigationNode).toBeInTheDocument();
+
+  const homeNode = queryByTestId("home");
+  expect(homeNode).toBeInTheDocument();
+
+  const todosNode = queryByTestId("todos");
+  expect(todosNode).not.toBeInTheDocument();
+
+  const notFoundNode = queryByTestId("not-found");
+  expect(notFoundNode).not.toBeInTheDocument();
+});
+
+test("should render todos page", () => {
+  const { queryByTestId } = renderWithRoute(<App />, "/todos");
+
+  const navigationNode = queryByTestId("navigation");
+  expect(navigationNode).toBeInTheDocument();
+
+  const homeNode = queryByTestId("home");
+  expect(homeNode).not.toBeInTheDocument();
+
+  const todosNode = queryByTestId("todos");
+  expect(todosNode).toBeInTheDocument();
+
+  const notFoundNode = queryByTestId("not-found");
+  expect(notFoundNode).not.toBeInTheDocument();
+});
+
+test("should render not found page", () => {
+  const { queryByTestId } = renderWithRoute(<App />, "/bad-route");
+
+  const navigationNode = queryByTestId("navigation");
+  expect(navigationNode).toBeInTheDocument();
+
+  const homeNode = queryByTestId("home");
+  expect(homeNode).not.toBeInTheDocument();
+
+  const todosNode = queryByTestId("todos");
+  expect(todosNode).not.toBeInTheDocument();
+
+  const notFoundNode = queryByTestId("not-found");
+  expect(notFoundNode).toBeInTheDocument();
+});

src/Home.test.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import Home from "./Home";
+
+afterEach(cleanup);
+
+test("should render home component", () => {
+  const { container } = render(<Home />);
+  expect(container).toMatchSnapshot();
+});

src/Navigation.test.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { cleanup, fireEvent } from "@testing-library/react";
+import "jest-dom/extend-expect";
+import renderWithRoute from "./test-utils/renderWithRoute";
+import Navigation from "./Navigation";
+
+afterEach(cleanup);
+
+test("should have home not as link when on home route", async () => {
+  const { getByText } = renderWithRoute(<Navigation />, "/");
+
+  const navigationNode = getByText("Home");
+  expect(navigationNode).toMatchSnapshot();
+});
+
+test("should have home as link when not on home route", async () => {
+  const { getByText } = renderWithRoute(<Navigation />, "/not-home");
+
+  const navigationNode = getByText("Home");
+  expect(navigationNode).toMatchSnapshot();
+});
+
+test("should change route to home route when home link clicked", async () => {
+  const { getByText, history } = renderWithRoute(<Navigation />, "/not-home");
+
+  const navigationNode = getByText("Home");
+  fireEvent.click(navigationNode);
+  expect(history.location.pathname).toBe("/");
+});
+
+test("should have todos example not as link when on todos route", async () => {
+  const { getByText } = renderWithRoute(<Navigation />, "/todos");
+
+  const navigationNode = getByText("Todos Example");
+  expect(navigationNode).toMatchSnapshot();
+});
+
+test("should have todos example as link when not on todos route", async () => {
+  const { getByText } = renderWithRoute(<Navigation />, "/not-todos");
+
+  const navigationNode = getByText("Todos Example");
+  expect(navigationNode).toMatchSnapshot();
+});
+
+test("should change route to todos route when todos link clicked", async () => {
+  const { getByText, history } = renderWithRoute(<Navigation />, "/not-todos");
+
+  const navigationNode = getByText("Todos Example");
+  fireEvent.click(navigationNode);
+  expect(history.location.pathname).toBe("/todos");
+});

src/NotFound.test.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import NotFound from "./NotFound";
+
+afterEach(cleanup);
+
+test("should render not found component", () => {
+  const { container } = render(<NotFound />);
+  expect(container).toMatchSnapshot();
+});

src/Todos.test.js

@@ -0,0 +1,82 @@
+import React from "react";
+import { render, cleanup, fireEvent } from "@testing-library/react";
+import "jest-dom/extend-expect";
+import Todos from "./Todos";
+
+afterEach(cleanup);
+
+test("should start with empty list", () => {
+  const { getByTestId } = render(<Todos />);
+
+  const todosListNode = getByTestId("todos-list")
+  expect(todosListNode.hasChildNodes()).toBe(false)
+});
+
+test("should not add blank item to list", () => {
+  const { getByPlaceholderText, getByTestId } = render(<Todos />);
+
+  const todosEntryNode = getByPlaceholderText("Add todo...")
+
+  enterValueAndPressEnter(todosEntryNode, "")
+
+  const todosListNode = getByTestId("todos-list")
+  expect(todosListNode.hasChildNodes()).toBe(false)
+});
+
+test("should add items to list", () => {
+  const { getByPlaceholderText, getByLabelText } = render(<Todos />);
+
+  const todosEntryNode = getByPlaceholderText("Add todo...")
+
+  enterValueAndPressEnter(todosEntryNode, "Learn to test")
+  enterValueAndPressEnter(todosEntryNode, "Practice")
+  enterValueAndPressEnter(todosEntryNode, "Keep trying")
+
+  expect(getByLabelText("Learn to test").checked).toBe(false)
+  expect(getByLabelText("Practice").checked).toBe(false)
+  expect(getByLabelText("Keep trying").checked).toBe(false)
+});
+
+test("should check item to list", () => {
+  const { getByPlaceholderText, getByLabelText } = render(<Todos />);
+
+  const todosEntryNode = getByPlaceholderText("Add todo...")
+
+  enterValueAndPressEnter(todosEntryNode, "Learn to test")
+  enterValueAndPressEnter(todosEntryNode, "Practice")
+  enterValueAndPressEnter(todosEntryNode, "Keep trying")
+
+  const practiceNode = getByLabelText("Practice")
+
+  fireEvent.click(practiceNode)
+
+  expect(getByLabelText("Learn to test").checked).toBe(false)
+  expect(practiceNode.checked).toBe(true)
+  expect(getByLabelText("Keep trying").checked).toBe(false)
+});
+
+test("should delete item from list", () => {
+  const { getByPlaceholderText, getAllByText, queryByLabelText } = render(<Todos />);
+
+  const todosEntryNode = getByPlaceholderText("Add todo...")
+
+  enterValueAndPressEnter(todosEntryNode, "Learn to test")
+  enterValueAndPressEnter(todosEntryNode, "Practice")
+  enterValueAndPressEnter(todosEntryNode, "Keep trying")
+
+  const removeButtons = getAllByText("(remove)")
+
+  fireEvent.click(removeButtons[1])
+
+  expect(queryByLabelText("Learn to test")).toBeInTheDocument()
+  expect(queryByLabelText("Practice")).not.toBeInTheDocument()
+  expect(queryByLabelText("Keep trying")).toBeInTheDocument()
+});
+
+const enterValueAndPressEnter = (node, value) =>{
+  fireEvent.change(node, { target: { value } })
+
+  fireEvent.keyPress(node, {
+    charCode: 13
+  })
+}

src/__snapshots__/Home.test.js.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render home component 1`] = `
+<div>
+  <div
+    class="Home"
+    data-testid="home"
+  >
+    <header
+      class="Home-header"
+    >
+      <img
+        alt="logo"
+        class="Home-logo"
+        src="logo.svg"
+      />
+      <p>
+        Edit 
+        <code>
+          src/App.js
+        </code>
+         and save to reload.
+      </p>
+      <a
+        class="Home-link"
+        href="https://reactjs.org"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Learn React
+      </a>
+    </header>
+  </div>
+</div>
+`;

src/__snapshots__/Navigation.test.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should have home as link when not on home route 1`] = `
+<a
+  href="/"
+>
+  Home
+</a>
+`;
+
+exports[`should have home not as link when on home route 1`] = `
+<span>
+  Home
+</span>
+`;
+
+exports[`should have todos example as link when not on todos route 1`] = `
+<a
+  href="/todos"
+>
+  Todos Example
+</a>
+`;
+
+exports[`should have todos example not as link when on todos route 1`] = `
+<span>
+  Todos Example
+</span>
+`;

src/__snapshots__/NotFound.test.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render not found component 1`] = `
+<div>
+  <div
+    class="NotFound"
+    data-testid="not-found"
+  >
+    <h1>
+      Whoops!
+    </h1>
+  </div>
+</div>
+`;

src/test-utils/renderWithRoute.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import {
+  createHistory,
+  createMemorySource,
+  LocationProvider
+} from "@reach/router";
+
+// this is a handy function that I would utilize for any component
+// that relies on the router being in context
+const renderWithRoute = (ui, route) => {
+    const history = createHistory(createMemorySource(route))
+    return {
+    ...render(<LocationProvider history={history}>{ui}</LocationProvider>),
+    // adding `history` to the returned utilities to allow us
+    // to reference it in our tests (just try to avoid using
+    // this to test implementation details).
+    history
+  }
+};
+
+export default renderWithRoute