DelayedButton tests

client/src/components/util/DelayedButton.jsx

@@ -25,7 +25,7 @@ const useCountdown = (seconds, onEnd) => {
   return [remaining, () => setPaused(!paused)];
 };
 
-const CountdownButton = ({
+export const CountdownButton = ({
   onCancelled,
   onEnd,
   formatter,

client/src/tests/DelayedButton.test.js

@@ -0,0 +1,93 @@
+import React from "react";
+import { shallow } from "enzyme";
+import DelayedButton, {
+  CountdownButton,
+} from "../components/util/DelayedButton";
+
+describe("DelayedButton", () => {
+  it("renders", () => {
+    const onEnd = jest.fn();
+    const countDownFormatter = jest.fn();
+    const seconds = 10;
+    const buttonClass = "test-button";
+    const rendered = shallow(
+      <DelayedButton
+        autoFocus
+        {...{ onEnd, countDownFormatter, seconds, buttonClass }}
+      >
+        test
+      </DelayedButton>
+    );
+    expect(rendered).toMatchSnapshot();
+  });
+
+  it("starts timer after click", () => {
+    const onEnd = jest.fn();
+    const countDownFormatter = jest.fn();
+    const seconds = 10;
+    const buttonClass = "test-button";
+    const rendered = shallow(
+      <DelayedButton
+        autoFocus
+        {...{ onEnd, countDownFormatter, seconds, buttonClass }}
+      >
+        test
+      </DelayedButton>
+    );
+    rendered.find("button").first().simulate("click");
+    expect(rendered).toMatchSnapshot();
+  });
+
+  it("resets self after second click", () => {
+    const onEnd = jest.fn();
+    const countDownFormatter = jest.fn();
+    const seconds = 10;
+    const buttonClass = "test-button";
+    const rendered = shallow(
+      <DelayedButton
+        autoFocus
+        {...{ onEnd, countDownFormatter, seconds, buttonClass }}
+      >
+        test
+      </DelayedButton>
+    );
+    rendered.find("button").first().simulate("click");
+    rendered.find("CountdownButton").first().prop("onCancelled")();
+    expect(rendered).toMatchSnapshot();
+  });
+
+  describe("CountdownButton", () => {
+    it("renders", () => {
+      const onCancelled = jest.fn();
+      const onEnd = jest.fn();
+      const formatter = jest.fn();
+      formatter.mockReturnValue("formatted");
+      const seconds = 10;
+      const buttonClass = "test-button";
+      const rendered = shallow(
+        <CountdownButton
+          autoFocus
+          {...{ onCancelled, onEnd, formatter, seconds, buttonClass }}
+        />
+      );
+      expect(formatter).toHaveBeenCalled();
+      expect(rendered).toMatchSnapshot();
+    });
+
+    it("cancels on click", () => {
+      const onCancelled = jest.fn();
+      const onEnd = jest.fn();
+      const formatter = jest.fn();
+      const seconds = 10;
+      const buttonClass = "test-button";
+      const rendered = shallow(
+        <CountdownButton
+          autoFocus
+          {...{ onCancelled, onEnd, formatter, seconds, buttonClass }}
+        />
+      );
+      rendered.find("button").first().simulate("click");
+      expect(onCancelled).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DelayedButton CountdownButton renders 1`] = `
+<button
+  autoFocus={true}
+  className="test-button"
+  onClick={[Function]}
+  type="button"
+>
+  formatted
+</button>
+`;
+
+exports[`DelayedButton renders 1`] = `
+<button
+  autoFocus={true}
+  className="test-button"
+  onClick={[Function]}
+  type="button"
+>
+  test
+</button>
+`;
+
+exports[`DelayedButton resets self after second click 1`] = `
+<button
+  autoFocus={true}
+  className="test-button"
+  onClick={[Function]}
+  type="button"
+>
+  test
+</button>
+`;
+
+exports[`DelayedButton starts timer after click 1`] = `
+<CountdownButton
+  autoFocus={true}
+  buttonClass="test-button"
+  formatter={[MockFunction]}
+  onCancelled={[Function]}
+  onEnd={[MockFunction]}
+  seconds={10}
+/>
+`;