From 7c230f228a7e2af218f371d5b585a17896d48c93 Mon Sep 17 00:00:00 2001
From: Urvashi Sharma <urvashi.sharma@canonical.com>
Date: Tue, 18 Feb 2025 12:44:29 +0530
Subject: [PATCH] feat(testing): Replace mocking store with renderWrappedHook
 state

---
 src/components/LogIn/LogIn.tsx |  4 +--
 src/hooks/useAnalytics.test.ts | 55 +++++++++++++++++++++++-----------
 2 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/components/LogIn/LogIn.tsx b/src/components/LogIn/LogIn.tsx
index f3de25a47..4a4206b04 100644
--- a/src/components/LogIn/LogIn.tsx
+++ b/src/components/LogIn/LogIn.tsx
@@ -77,10 +77,10 @@ export default function LogIn() {
     if (userIsLoggedIn) {
       sendAnalytics({
         category: "Authentication",
-        action: "User Login",
+        action: `User Login (${config?.authMethod})`,
       });
     }
-  }, [userIsLoggedIn, sendAnalytics]);
+  }, [userIsLoggedIn, sendAnalytics, config]);
 
   let form: ReactNode = null;
   switch (config?.authMethod) {
diff --git a/src/hooks/useAnalytics.test.ts b/src/hooks/useAnalytics.test.ts
index 1cf20746b..33920dcf6 100644
--- a/src/hooks/useAnalytics.test.ts
+++ b/src/hooks/useAnalytics.test.ts
@@ -2,7 +2,8 @@ import ReactGA from "react-ga4";
 import type { MockInstance } from "vitest";
 import { vi } from "vitest";
 
-import * as store from "store/store";
+import { rootStateFactory } from "testing/factories";
+import { configFactory, generalStateFactory } from "testing/factories/general";
 import { renderWrappedHook } from "testing/utils";
 
 import useAnalytics from "./useAnalytics";
@@ -34,31 +35,46 @@ describe("useAnalytics", () => {
   });
 
   it("does not send events in development", () => {
-    vi.spyOn(store, "useAppSelector").mockImplementation(
-      vi.fn().mockReturnValue(true),
-    );
     vi.stubEnv("PROD", false);
-    const { result } = renderWrappedHook(() => useAnalytics());
+    const { result } = renderWrappedHook(() => useAnalytics(), {
+      state: rootStateFactory.build({
+        general: generalStateFactory.build({
+          config: configFactory.build({
+            analyticsEnabled: true,
+          }),
+        }),
+      }),
+    });
     result.current({ path: "/some/path" });
     expect(eventSpy).not.toHaveBeenCalled();
     expect(pageviewSpy).not.toHaveBeenCalled();
   });
 
   it("does not send events if analytics are disabled", () => {
-    vi.spyOn(store, "useAppSelector").mockImplementation(
-      vi.fn().mockReturnValue(false),
-    );
-    const { result } = renderWrappedHook(() => useAnalytics());
+    const { result } = renderWrappedHook(() => useAnalytics(), {
+      state: rootStateFactory.build({
+        general: generalStateFactory.build({
+          config: configFactory.build({
+            analyticsEnabled: false,
+          }),
+        }),
+      }),
+    });
     result.current({ path: "/some/path" });
     expect(eventSpy).not.toHaveBeenCalled();
     expect(pageviewSpy).not.toHaveBeenCalled();
   });
 
   it("can send pageview events", () => {
-    vi.spyOn(store, "useAppSelector").mockImplementation(
-      vi.fn().mockReturnValue(true),
-    );
-    const { result } = renderWrappedHook(() => useAnalytics());
+    const { result } = renderWrappedHook(() => useAnalytics(), {
+      state: rootStateFactory.build({
+        general: generalStateFactory.build({
+          config: configFactory.build({
+            analyticsEnabled: true,
+          }),
+        }),
+      }),
+    });
     result.current({ path: "/some/path" });
     expect(pageviewSpy).toHaveBeenCalledWith({
       hitType: "pageview",
@@ -67,10 +83,15 @@ describe("useAnalytics", () => {
   });
 
   it("can send events", () => {
-    vi.spyOn(store, "useAppSelector").mockImplementation(
-      vi.fn().mockReturnValue(true),
-    );
-    const { result } = renderWrappedHook(() => useAnalytics());
+    const { result } = renderWrappedHook(() => useAnalytics(), {
+      state: rootStateFactory.build({
+        general: generalStateFactory.build({
+          config: configFactory.build({
+            analyticsEnabled: true,
+          }),
+        }),
+      }),
+    });
     result.current({ category: "sidebar", action: "toggle" });
     expect(eventSpy).toHaveBeenCalledWith({
       category: "sidebar",