Improve unit tests for App

client/src/App.jsx

@@ -27,7 +27,7 @@ const needsHeaderFooter = {
   [ERROR]: true,
 };
 
-const Header = ({ show }) => {
+export const Header = ({ show }) => {
   const transitionRef = useRef(null);
 
   return (
@@ -46,7 +46,7 @@ const Header = ({ show }) => {
   );
 };
 
-const Footer = ({ show }) => {
+export const Footer = ({ show }) => {
   const transitionRef = useRef(null);
 
   return (
@@ -65,12 +65,12 @@ const Footer = ({ show }) => {
   );
 };
 
-const paramRouter = {
+export const paramRouter = {
   join: dispatch.goToLobby,
   summary: gameId => dispatch.goToSummary(gameId, false),
 };
 
-const State = ({ show, children, setTransitioning }) => {
+export const State = ({ show, children, setTransitioning }) => {
   const transitionRef = useRef(null);
 
   return (

client/src/tests/App.test.js

@@ -1,7 +1,42 @@
 import React from "react";
 import { shallow } from "enzyme";
-import App from "../App";
+import App, { Header, Footer, paramRouter, State } from "../App";
 
-it("renders without crashing", () => {
-  shallow(<App />);
+jest.mock("../domain/gameStore");
+
+import { dispatch } from "../domain/gameStore";
+
+describe("App", () => {
+  it("renders", () => {
+    const rendered = shallow(<App />);
+    expect(rendered).toMatchSnapshot();
+  });
+
+  describe("Header", () => {
+    it("renders", () => {
+      const rendered = shallow(<Header />);
+      expect(rendered).toMatchSnapshot();
+    });
+  });
+
+  describe("Footer", () => {
+    it("renders", () => {
+      const rendered = shallow(<Footer />);
+      expect(rendered).toMatchSnapshot();
+    });
+  });
+
+  describe("paramRouter", () => {
+    it("routes summary param", () => {
+      paramRouter.summary("test-game-id");
+      expect(dispatch.goToSummary).toMatchSnapshot();
+    });
+  });
+
+  describe("State", () => {
+    it("renders", () => {
+      const rendered = shallow(<State>Test</State>);
+      expect(rendered).toMatchSnapshot();
+    });
+  });
 });

client/src/tests/__snapshots__/App.test.js.snap

@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App Footer renders 1`] = `
+<CSSTransition
+  classNames="fade"
+  mountOnEnter={true}
+  nodeRef={
+    Object {
+      "current": null,
+    }
+  }
+  timeout={500}
+  unmountOnExit={true}
+>
+  <div
+    className="footer"
+  >
+    <ApiInfo />
+  </div>
+</CSSTransition>
+`;
+
+exports[`App Header renders 1`] = `
+<CSSTransition
+  classNames="fade"
+  mountOnEnter={true}
+  nodeRef={
+    Object {
+      "current": null,
+    }
+  }
+  timeout={500}
+  unmountOnExit={true}
+>
+  <div
+    className="header"
+  >
+    <p>
+      TerrAssumptions!
+    </p>
+  </div>
+</CSSTransition>
+`;
+
+exports[`App State renders 1`] = `
+<CSSTransition
+  classNames="fade"
+  mountOnEnter={true}
+  nodeRef={
+    Object {
+      "current": null,
+    }
+  }
+  onEnter={[Function]}
+  onExited={[Function]}
+  timeout={500}
+  unmountOnExit={true}
+>
+  <div
+    className="state"
+  >
+    Test
+  </div>
+</CSSTransition>
+`;
+
+exports[`App paramRouter routes summary param 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      "test-game-id",
+      false,
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;
+
+exports[`App renders 1`] = `
+<StrictMode>
+  <div
+    className="page"
+  >
+    <Header />
+    <State
+      setTransitioning={[Function]}
+      show={true}
+    >
+      <div
+        className="loading"
+      >
+        <Loading />
+      </div>
+    </State>
+    <State
+      setTransitioning={[Function]}
+      show={false}
+    >
+      <HomePage />
+    </State>
+    <State
+      setTransitioning={[Function]}
+      show={false}
+    >
+      <Lobby />
+    </State>
+    <State
+      setTransitioning={[Function]}
+      show={false}
+    >
+      <RoundSummary />
+    </State>
+    <State
+      setTransitioning={[Function]}
+      show={false}
+    >
+      <GameSummary />
+    </State>
+    <State
+      show={false}
+    >
+      <p>
+        Application encountered unrecoverable error, please refresh the page.
+      </p>
+    </State>
+    <Footer />
+  </div>
+</StrictMode>
+`;