Refactor hook out of HomePage to improve test coverage

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

@@ -68,10 +68,13 @@ const SummaryMap = ({ players, coords }) => {
   useMarkersFromGuesses(mapRef, players, roundActive, targetPoint);
 
   // scroll the map to the target point
-  const onRoundSelect = useCallback(newRound => {
-    mapRef.current.panTo(coords?.[newRound] ?? { lat: 0, lng: 0 });
-    setRoundNum(newRound);
-  }, [mapRef, coords]);
+  const onRoundSelect = useCallback(
+    newRound => {
+      mapRef.current.panTo(coords?.[newRound] ?? { lat: 0, lng: 0 });
+      setRoundNum(newRound);
+    },
+    [mapRef, coords]
+  );
 
   return (
     <div className={styles.container}>

client/src/components/screens/HomePage/HomePage.jsx

@@ -1,10 +1,10 @@
-import { useState, useEffect, useRef, forwardRef } from "react";
+import { useRef, forwardRef } from "react";
 import { CSSTransition } from "react-transition-group";
 import { dispatch } from "../../../domain/gameStore";
-import { hasSavedGameInfo } from "../../../domain/localStorageMethods";
 import DelayedButton from "../../util/DelayedButton";
 import GameCreationForm from "../../util/GameCreationForm";
 import styles from "./HomePage.module.css";
+import useHasSavedInfo from "./useHasSavedInfo";
 
 export const Rejoin = forwardRef((_, ref) => (
   <div className={styles.rejoinSection} ref={ref}>
@@ -21,10 +21,7 @@ export const Rejoin = forwardRef((_, ref) => (
 ));
 
 const HomePage = () => {
-  const [hasSavedInfo, setHasSavedInfo] = useState(false);
-  useEffect(() => {
-    hasSavedGameInfo().then(setHasSavedInfo);
-  }, []);
+  const hasSavedInfo = useHasSavedInfo();
   const transitionRef = useRef(null);
 
   return (

client/src/components/screens/HomePage/useHasSavedInfo.jsx

@@ -0,0 +1,12 @@
+import { useState, useEffect } from "react";
+import { hasSavedGameInfo } from "../../../domain/localStorageMethods";
+
+const useHasSavedInfo = () => {
+  const [hasSavedInfo, setHasSavedInfo] = useState(false);
+  useEffect(() => {
+    hasSavedGameInfo().then(setHasSavedInfo);
+  }, []);
+  return hasSavedInfo;
+};
+
+export default useHasSavedInfo;

client/src/tests/HomePage.test.js

@@ -3,12 +3,20 @@ import { mount, shallow } from "enzyme";
 import HomePage, { Rejoin } from "../components/screens/HomePage/HomePage";
 
 jest.mock("../domain/gameStore");
-jest.mock("../domain/localStorageMethods");
+jest.mock("../components/screens/HomePage/useHasSavedInfo");
 
 import { dispatch } from "../domain/gameStore";
+import useHasSavedInfo from "../components/screens/HomePage/useHasSavedInfo";
 
 describe("HomePage", () => {
   it("renders", () => {
+    useHasSavedInfo.mockReturnValue(false);
+    const rendered = shallow(<HomePage />);
+    expect(rendered).toMatchSnapshot();
+  });
+
+  it("renders with saved info", () => {
+    useHasSavedInfo.mockReturnValue(true);
     const rendered = shallow(<HomePage />);
     expect(rendered).toMatchSnapshot();
   });

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

@@ -73,3 +73,27 @@ exports[`HomePage renders 1`] = `
   />
 </div>
 `;
+
+exports[`HomePage renders with saved info 1`] = `
+<div
+  className="page"
+>
+  <CSSTransition
+    classNames="fade"
+    in={true}
+    mountOnEnter={true}
+    nodeRef={
+      Object {
+        "current": null,
+      }
+    }
+    timeout={500}
+    unmountOnExit={true}
+  >
+    <ForwardRef />
+  </CSSTransition>
+  <GameCreationForm
+    afterCreate={[Function]}
+  />
+</div>
+`;