ApiInfo tests

client/src/components/util/ApiInfo.jsx

@@ -1,6 +1,13 @@
 import { useEffect, useState } from "react";
 import { getStatus } from "../../domain/apiMethods";
 
+export const PureApiInfo = ({ status, version }) =>
+  status === "healthy" ? (
+    <p>API Version: {version}</p>
+  ) : (
+    <p>Unable to communicate with API server! Error: {status}</p>
+  );
+
 const ApiInfo = () => {
   const [data, setData] = useState(null);
   useEffect(() => {
@@ -12,11 +19,7 @@ const ApiInfo = () => {
   }
 
   const { status, version } = data;
-  return status === "healthy" ? (
-    <p>API Version: {version}</p>
-  ) : (
-    <p>Unable to communicate with API server! Error: {status}</p>
-  );
+  return <PureApiInfo status={status} version={version} />;
 };
 
 export default ApiInfo;

client/src/tests/ApiInfo.test.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { shallow } from "enzyme";
+import ApiInfo, { PureApiInfo } from "../components/util/ApiInfo";
+
+jest.mock("../domain/apiMethods");
+
+describe("ApiInfo", () => {
+  it("renders", () => {
+    const rendered = shallow(<ApiInfo />);
+    expect(rendered).toMatchSnapshot();
+  });
+
+  describe("PureApiInfo", () => {
+    it("renders", () => {
+      const rendered = shallow(<PureApiInfo status="healthy" version="test" />);
+      expect(rendered).toMatchSnapshot();
+    });
+
+    it("renders for unhealthy", () => {
+      const rendered = shallow(<PureApiInfo status="bad" version="test" />);
+      expect(rendered).toMatchSnapshot();
+    });
+  });
+});

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ApiInfo PureApiInfo renders 1`] = `
+<p>
+  API Version: 
+  test
+</p>
+`;
+
+exports[`ApiInfo PureApiInfo renders for unhealthy 1`] = `
+<p>
+  Unable to communicate with API server! Error: 
+  bad
+</p>
+`;
+
+exports[`ApiInfo renders 1`] = `
+<p>
+  Connecting to back-end...
+</p>
+`;