Fix coverage on SummaryMap and refactor slightly

client/src/components/screens/GameSummary/SummaryMap/SummaryMap.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import flagLookup from "../../../../domain/flagLookup";
 import { useGameConfig } from "../../../../hooks/useGameInfo";
 import useMap from "../../../../hooks/useMap";
@@ -68,12 +68,10 @@ const SummaryMap = ({ players, coords }) => {
   useMarkersFromGuesses(mapRef, players, roundActive, targetPoint);
 
   // scroll the map to the target point
-  useEffect(() => {
-    if (mapRef.current) {
-      // TODO maybe pack this up with setRoundNum and pass as onSelect
-      mapRef.current.panTo(targetPoint ?? { lat: 0, lng: 0 });
-    }
-  }, [mapRef, targetPoint]);
+  const onRoundSelect = useCallback(newRound => {
+    mapRef.current.panTo(coords?.[newRound] ?? { lat: 0, lng: 0 });
+    setRoundNum(newRound);
+  }, [mapRef, coords]);
 
   return (
     <div className={styles.container}>
@@ -83,7 +81,7 @@ const SummaryMap = ({ players, coords }) => {
           rounds={rounds}
           coords={coords}
           selected={roundNum}
-          onSelect={setRoundNum}
+          onSelect={onRoundSelect}
         />
       )}
     </div>

client/src/tests/SummaryMap.test.js

@@ -60,6 +60,44 @@ describe("SummaryMap", () => {
     );
   });
 
+  it("handles having the round changed", () => {
+    const panTo = jest.fn();
+    useMap.mockReturnValue({ current: { panTo } });
+    useGameConfig.mockReturnValue({ countryLock: "lock" });
+    const rendered = shallow(
+      <SummaryMap
+        players="players"
+        coords={{
+          1: { lat: 1, lng: 2 },
+          2: { lat: 3, lng: 4 },
+          3: { lat: 5, lng: 6 },
+        }}
+      />
+    );
+    rendered.find("RoundSelect").prop("onSelect")(2);
+    expect(panTo).toMatchSnapshot();
+    expect(rendered).toMatchSnapshot();
+  });
+
+  it("handles invalid round change", () => {
+    const panTo = jest.fn();
+    useMap.mockReturnValue({ current: { panTo } });
+    useGameConfig.mockReturnValue({ countryLock: "lock" });
+    const rendered = shallow(
+      <SummaryMap
+        players="players"
+        coords={{
+          1: { lat: 1, lng: 2 },
+          2: { lat: 3, lng: 4 },
+          3: { lat: 5, lng: 6 },
+        }}
+      />
+    );
+    rendered.find("RoundSelect").prop("onSelect")(5);
+    expect(panTo).toMatchSnapshot();
+    expect(rendered).toMatchSnapshot();
+  });
+
   describe("RoundSelect", () => {
     it("renders", () => {
       const onSelect = jest.fn();
@@ -87,7 +125,7 @@ describe("SummaryMap", () => {
             2: { country: "country2" },
             3: { country: "country3" },
           }}
-          selected
+          selected="2"
           onSelect={onSelect}
         />
       );
@@ -128,6 +166,23 @@ describe("SummaryMap", () => {
       expect(onSelect).toHaveBeenCalledWith("1");
     });
 
+    it("does not call onSelect when other keys pressed", () => {
+      const onSelect = jest.fn();
+      const rendered = shallow(
+        <RoundSelect
+          rounds={3}
+          coords={{
+            1: { country: "country1" },
+            2: { country: "country2" },
+            3: { country: "country3" },
+          }}
+          onSelect={onSelect}
+        />
+      );
+      rendered.find("div.tab").first().simulate("keydown", { key: "Escape" });
+      expect(onSelect).not.toHaveBeenCalledWith("1");
+    });
+
     it("calls onSelect with 0 when X clicked", () => {
       const onSelect = jest.fn();
       const rendered = shallow(
@@ -167,5 +222,25 @@ describe("SummaryMap", () => {
         .simulate("keydown", { key: "Enter" });
       expect(onSelect).toHaveBeenCalledWith("0");
     });
+
+    it("does not call onSelect with 0 when other keys pressed on X", () => {
+      const onSelect = jest.fn();
+      const rendered = shallow(
+        <RoundSelect
+          rounds={3}
+          coords={{
+            1: { country: "country1" },
+            2: { country: "country2" },
+            3: { country: "country3" },
+          }}
+          onSelect={onSelect}
+        />
+      );
+      rendered
+        .findWhere(x => x.text() === "X")
+        .first()
+        .simulate("keydown", { key: "Escape" });
+      expect(onSelect).not.toHaveBeenCalledWith("0");
+    });
   });
 });

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

@@ -16,7 +16,7 @@ exports[`SummaryMap RoundSelect can be selected 1`] = `
      - 
   </div>
   <div
-    className="tab "
+    className="tab tab--active"
     key="2"
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -98,6 +98,106 @@ exports[`SummaryMap RoundSelect renders 1`] = `
 </div>
 `;
 
+exports[`SummaryMap handles having the round changed 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      Object {
+        "lat": 3,
+        "lng": 4,
+      },
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;
+
+exports[`SummaryMap handles having the round changed 2`] = `
+<div
+  className="container"
+>
+  <div
+    className="map"
+  />
+  <RoundSelect
+    coords={
+      Object {
+        "1": Object {
+          "lat": 1,
+          "lng": 2,
+        },
+        "2": Object {
+          "lat": 3,
+          "lng": 4,
+        },
+        "3": Object {
+          "lat": 5,
+          "lng": 6,
+        },
+      }
+    }
+    onSelect={[Function]}
+    rounds={3}
+    selected={2}
+  />
+</div>
+`;
+
+exports[`SummaryMap handles invalid round change 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      Object {
+        "lat": 0,
+        "lng": 0,
+      },
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;
+
+exports[`SummaryMap handles invalid round change 2`] = `
+<div
+  className="container"
+>
+  <div
+    className="map"
+  />
+  <RoundSelect
+    coords={
+      Object {
+        "1": Object {
+          "lat": 1,
+          "lng": 2,
+        },
+        "2": Object {
+          "lat": 3,
+          "lng": 4,
+        },
+        "3": Object {
+          "lat": 5,
+          "lng": 6,
+        },
+      }
+    }
+    onSelect={[Function]}
+    rounds={3}
+    selected={5}
+  />
+</div>
+`;
+
 exports[`SummaryMap renders 1`] = `
 <div
   className="container"