test(analytics): Add unit tests

src/components/CaptureRoutes/CaptureRoutes.test.tsx

@@ -44,7 +44,10 @@ describe("CaptureRoutes", () => {
       </BrowserRouter>,
     );
     expect(pageviewSpy).toHaveBeenCalledWith({
+      controllerVersion: "",
+      dashboardVersion: "",
       hitType: "pageview",
+      isJuju: "false",
       page: "/new/path",
     });
   });

src/hooks/useAnalytics.test.ts

@@ -2,6 +2,7 @@ import { vi } from "vitest";
 
 import { rootStateFactory } from "testing/factories";
 import { configFactory, generalStateFactory } from "testing/factories/general";
+import { connectionInfoFactory } from "testing/factories/juju/jujulib";
 import { renderWrappedHook } from "testing/utils";
 import * as analyticsUtils from "utils/analytics";
 
@@ -69,4 +70,30 @@ describe("useAnalytics", () => {
       { category: "sidebar", action: "toggle" },
     );
   });
+
+  it("can send events with correct event params", () => {
+    const { result } = renderWrappedHook(() => useAnalytics(), {
+      state: rootStateFactory.build({
+        general: generalStateFactory.build({
+          appVersion: "1.0.0",
+          controllerConnections: {
+            "wss://example.com/api": connectionInfoFactory.build({
+              serverVersion: "1.2.3",
+            }),
+          },
+          config: configFactory.build({
+            analyticsEnabled: true,
+            isJuju: true,
+            controllerAPIEndpoint: "wss://example.com/api",
+          }),
+        }),
+      }),
+    });
+    result.current({ category: "sidebar", action: "toggle" });
+    expect(analyticsUtils.default).toHaveBeenCalledWith(
+      true,
+      { controllerVersion: "1.2.3", dashboardVersion: "1.0.0", isJuju: "true" },
+      { category: "sidebar", action: "toggle" },
+    );
+  });
 });

src/hooks/useAnalytics.tsx

@@ -8,13 +8,7 @@ import {
   getWSControllerURL,
 } from "store/general/selectors";
 import { useAppSelector } from "store/store";
-import analytics from "utils/analytics";
-
-type AnalyticMessage = {
-  path?: string;
-  category?: string;
-  action?: string;
-};
+import analytics, { type AnalyticsMessage } from "utils/analytics";
 
 export default function useAnalytics() {
   const analyticsEnabled = useAppSelector(getAnalyticsEnabled);
@@ -30,6 +24,6 @@ export default function useAnalytics() {
     isJuju: (!!isJuju).toString(),
   };
 
-  return (props: AnalyticMessage) =>
+  return (props: AnalyticsMessage) =>
     analytics(!!analyticsEnabled, eventParams, props);
 }

src/store/middleware/model-poller.ts

@@ -16,7 +16,12 @@ import { whoami } from "juju/jimm/thunks";
 import type { ConnectionWithFacades } from "juju/types";
 import { actions as appActions, thunks as appThunks } from "store/app";
 import { actions as generalActions } from "store/general";
-import { getAppVersion, getIsJuju, isLoggedIn } from "store/general/selectors";
+import {
+  getAnalyticsEnabled,
+  getAppVersion,
+  getIsJuju,
+  isLoggedIn,
+} from "store/general/selectors";
 import { AuthMethod } from "store/general/types";
 import { actions as jujuActions } from "store/juju";
 import type { RootState, Store } from "store/store";
@@ -134,7 +139,7 @@ export const modelPollerMiddleware: Middleware<
         }
 
         const isProduction = import.meta.env.PROD;
-        const analyticsEnabled = window.jujuDashboardConfig?.analyticsEnabled;
+        const analyticsEnabled = getAnalyticsEnabled(reduxStore.getState());
         const isJuju = (!!getIsJuju(reduxStore.getState())).toString();
         const dashboardVersion = getAppVersion(reduxStore.getState()) ?? "";
         const controllerVersion = conn.info.serverVersion ?? "";

src/utils/analytics.test.ts

@@ -43,7 +43,10 @@ describe("analytics", () => {
       { path: "/some/path" },
     );
     expect(pageviewSpy).toHaveBeenCalledWith({
+      controllerVersion: "1.0.0",
+      dashboardVersion: "1.0.0",
       hitType: "pageview",
+      isJuju: "true",
       page: "/some/path",
     });
   });

src/utils/analytics.ts

@@ -6,7 +6,11 @@ type EventParams = {
   isJuju: string;
 };
 
-type AnalyticsMessage = { path?: string; category?: string; action?: string };
+export type AnalyticsMessage = {
+  path?: string;
+  category?: string;
+  action?: string;
+};
 
 const analytics = (
   analyticsEnabled: boolean,
@@ -17,7 +21,7 @@ const analytics = (
     return;
   }
   if (path) {
-    ReactGA.send({ hitType: "pageview", page: path });
+    ReactGA.send({ hitType: "pageview", page: path, ...eventParams });
   } else {
     ReactGA.event(action, {
       category,