GuessPane tests

client/src/tests/ClickMarkerMap.test.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { shallow } from "enzyme";
+import ClickMarkerMap from "../components/screens/GamePanel/GuessPane/ClickMarkerMap";
+
+jest.mock("../hooks/useMapBounds");
+jest.mock("../hooks/useMap");
+jest.mock("../hooks/useClickMarker");
+jest.mock("../hooks/useGameInfo");
+
+import { useGameConfig } from "../hooks/useGameInfo";
+import useMapBounds from "../hooks/useMapBounds";
+import useMap from "../hooks/useMap";
+
+describe("ClickMarkerMap", () => {
+  it("renders", () => {
+    useMap.mockReturnValue("map")
+    useGameConfig.mockReturnValue({ countryLock: "lock" });
+    const rendered = shallow(<ClickMarkerMap />);
+    expect(rendered).toMatchSnapshot();
+    expect(useMapBounds).toHaveBeenCalledWith("map", "lock");
+  });
+});

client/src/tests/GuessPane.test.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { shallow } from "enzyme";
+import GuessPane from "../components/screens/GamePanel/GuessPane";
+
+jest.mock("../domain/gameStore");
+jest.mock("../domain/geocoding");
+
+import { dispatch } from "../domain/gameStore";
+import { reverseGeocode } from "../domain/geocoding";
+
+describe("GuessPane", () => {
+  it("renders", () => {
+    const rendered = shallow(<GuessPane />);
+    expect(rendered).toMatchSnapshot();
+  });
+
+  it("resizes to large", () => {
+    const handle = shallow(<GuessPane />);
+    handle.find("div.resize").first().simulate("click");
+    expect(handle).toMatchSnapshot();
+  });
+
+  it("resizes to medium", () => {
+    const handle = shallow(<GuessPane />);
+    handle.find("div.resize--medium").first().simulate("click");
+    expect(handle).toMatchSnapshot();
+  });
+
+  it("resizes to large on keydown Enter", () => {
+    const handle = shallow(<GuessPane />);
+    handle.find("div.resize").first().simulate("keydown", { key: "Enter" });
+    expect(handle).toMatchSnapshot();
+  });
+
+  it("resizes to medium on keydown Enter", () => {
+    const handle = shallow(<GuessPane />);
+    handle.find("div.resize--medium").first().simulate("keydown", { key: "Enter" });
+    expect(handle).toMatchSnapshot();
+  });
+
+  it("submits", async () => {
+    reverseGeocode.mockReturnValue("geocoded")
+    const handle = shallow(<GuessPane />);
+    handle.find("ClickMarkerMap").first().prop("onMarkerMoved")({ lat: "lat", lng: "lng" });
+    // check submit enabled
+    expect(handle).toMatchSnapshot();
+    await handle.find("button").first().prop("onClick")();
+    expect(reverseGeocode).toHaveBeenCalledWith(expect.objectContaining({ lat: "lat", lng: "lng" }));
+    expect(dispatch.submitGuess).toHaveBeenCalledWith(expect.objectContaining({
+      country: "geocoded",
+      lat: "lat",
+      lng: "lng",
+    }));
+    // check submit disabled again
+    expect(handle).toMatchSnapshot();
+  });
+});

client/src/tests/RoundTimer.test.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { shallow } from "enzyme";
+import RoundTimer from "../components/screens/GamePanel/GuessPane/RoundTimer";
+
+jest.mock("../domain/gameStore");
+
+import { useRoundSeconds } from "../domain/gameStore";
+
+describe("RoundTimer", () => {
+  it("renders with time left", () => {
+    useRoundSeconds.mockReturnValue(100);
+    const rendered = shallow(<RoundTimer />);
+    expect(rendered).toMatchSnapshot();
+  });
+  it("renders with no time left", () => {
+    useRoundSeconds.mockReturnValue(0);
+    const rendered = shallow(<RoundTimer />);
+    expect(rendered).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClickMarkerMap renders 1`] = `
+<div
+  className="map"
+/>
+`;

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

@@ -0,0 +1,274 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GuessPane renders 1`] = `
+<div
+  className="pane pane--small"
+>
+  <button
+    className="submit"
+    disabled={true}
+    onClick={[Function]}
+    type="button"
+  >
+    Submit Guess
+  </button>
+  <ClickMarkerMap
+    onMarkerMoved={[Function]}
+  />
+  <RoundTimer
+    onTimeout={[Function]}
+  />
+  <div
+    className="resize"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    ↗️
+  </div>
+  <div
+    className="resize resize--medium"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    ➡️
+  </div>
+</div>
+`;
+
+exports[`GuessPane resizes to large 1`] = `
+<div
+  className="pane pane--big"
+>
+  <button
+    className="submit"
+    disabled={true}
+    onClick={[Function]}
+    type="button"
+  >
+    Submit Guess
+  </button>
+  <ClickMarkerMap
+    onMarkerMoved={[Function]}
+  />
+  <RoundTimer
+    onTimeout={[Function]}
+  />
+  <div
+    className="resize"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    ↙️
+  </div>
+  <div
+    className="resize resize--medium"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    ⬅️
+  </div>
+</div>
+`;
+
+exports[`GuessPane resizes to large on keydown Enter 1`] = `
+<div
+  className="pane pane--big"
+>
+  <button
+    className="submit"
+    disabled={true}
+    onClick={[Function]}
+    type="button"
+  >
+    Submit Guess
+  </button>
+  <ClickMarkerMap
+    onMarkerMoved={[Function]}
+  />
+  <RoundTimer
+    onTimeout={[Function]}
+  />
+  <div
+    className="resize"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    ↙️
+  </div>
+  <div
+    className="resize resize--medium"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    ⬅️
+  </div>
+</div>
+`;
+
+exports[`GuessPane resizes to medium 1`] = `
+<div
+  className="pane pane--medium"
+>
+  <button
+    className="submit"
+    disabled={true}
+    onClick={[Function]}
+    type="button"
+  >
+    Submit Guess
+  </button>
+  <ClickMarkerMap
+    onMarkerMoved={[Function]}
+  />
+  <RoundTimer
+    onTimeout={[Function]}
+  />
+  <div
+    className="resize"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    ↙️
+  </div>
+  <div
+    className="resize resize--medium"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    ⬅️
+  </div>
+</div>
+`;
+
+exports[`GuessPane resizes to medium on keydown Enter 1`] = `
+<div
+  className="pane pane--medium"
+>
+  <button
+    className="submit"
+    disabled={true}
+    onClick={[Function]}
+    type="button"
+  >
+    Submit Guess
+  </button>
+  <ClickMarkerMap
+    onMarkerMoved={[Function]}
+  />
+  <RoundTimer
+    onTimeout={[Function]}
+  />
+  <div
+    className="resize"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    ↙️
+  </div>
+  <div
+    className="resize resize--medium"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    ⬅️
+  </div>
+</div>
+`;
+
+exports[`GuessPane submits 1`] = `
+<div
+  className="pane pane--small"
+>
+  <button
+    className="submit"
+    disabled={false}
+    onClick={[Function]}
+    type="button"
+  >
+    Submit Guess
+  </button>
+  <ClickMarkerMap
+    onMarkerMoved={[Function]}
+  />
+  <RoundTimer
+    onTimeout={[Function]}
+  />
+  <div
+    className="resize"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    ↗️
+  </div>
+  <div
+    className="resize resize--medium"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    ➡️
+  </div>
+</div>
+`;
+
+exports[`GuessPane submits 2`] = `
+<div
+  className="pane pane--small"
+>
+  <button
+    className="submit"
+    disabled={true}
+    onClick={[Function]}
+    type="button"
+  >
+    Submit Guess
+  </button>
+  <ClickMarkerMap
+    onMarkerMoved={[Function]}
+  />
+  <RoundTimer
+    onTimeout={[Function]}
+  />
+  <div
+    className="resize"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    ↗️
+  </div>
+  <div
+    className="resize resize--medium"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    ➡️
+  </div>
+</div>
+`;

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RoundTimer renders with no time left 1`] = `
+<span
+  className="timer timer--timeout"
+>
+  Time's up!
+</span>
+`;
+
+exports[`RoundTimer renders with time left 1`] = `
+<span
+  className="timer"
+>
+  Time: 
+  1m 40s
+</span>
+`;