@envive-ai/react-hooks 0.2.7-arthur-1 → 0.2.7-arthur-2

package/src/contexts/amplitudeContext/__tests__/amplitudeContext.test.tsx

@@ -0,0 +1,525 @@
+import React from "react";
+import { render, screen, waitFor, act } from "@testing-library/react";
+import { Provider, useStore } from "jotai";
+import {
+  AmplitudeProvider,
+  useAmplitude,
+  SpiffyMetricsEventName,
+} from "../amplitudeContext";
+import {
+  UserIdentityProvider,
+  useUserIdentity,
+} from "src/contexts/userIdentityContext/userIdentityContext";
+import { LocalStorageProvider } from "src/contexts/localStorageContext";
+import { EnviveConfigProvider } from "src/contexts/enviveConfigContext/enviveConfigContext";
+import { FeatureFlagServiceProvider } from "src/contexts/featureFlagServiceContext/featureFlagServiceContext";
+import { userIdAtom } from "src/atoms/app";
+import Logger from "src/application/logging/logger";
+import { createInstance } from "@amplitude/analytics-browser";
+
+// Mock the Logger to avoid console output in tests
+// vi.spyOn(Logger, "logInfo").mockImplementation(() => {});
+// vi.spyOn(Logger, "logWarn").mockImplementation(() => {});
+// vi.spyOn(Logger, "logError").mockImplementation(() => {});
+// vi.spyOn(Logger, "logDebug").mockImplementation(() => {});
+
+// Mock Amplitude
+const mockTrack = vi.fn();
+const mockInit = vi.fn();
+const mockAdd = vi.fn();
+
+vi.mock("@amplitude/analytics-browser", () => ({
+  createInstance: vi.fn(() => ({
+    track: mockTrack,
+    init: mockInit,
+    add: mockAdd,
+  })),
+}));
+
+// Mock EventsDispatcher
+vi.mock("src/events", () => ({
+  EventsDispatcher: {
+    dispatch: vi.fn(),
+  },
+  SpiffyEvent: {
+    AMPLITUDE_EVENT: "AMPLITUDE_EVENT",
+  },
+}));
+
+// Mock crypto.subtle.digest for insert_id generation
+const mockDigest = vi.fn().mockResolvedValue(new Uint8Array(32).fill(0));
+Object.defineProperty(global, "crypto", {
+  value: {
+    subtle: {
+      digest: mockDigest,
+    },
+  },
+  writable: true,
+});
+
+// Component that uses the useAmplitude hook
+const MockAmplitudeComponent: React.FC = () => {
+  const amplitude = useAmplitude();
+
+  return (
+    <div data-testid="amplitude-component">
+      <div data-testid="is-ready">{amplitude.isReady.toString()}</div>
+      <button
+        data-testid="track-event-button"
+        onClick={() =>
+          amplitude.trackEvent({
+            eventName: SpiffyMetricsEventName.ChatUserMessageInput,
+            eventProps: { message: "test message" },
+          })
+        }
+      >
+        Track Event
+      </button>
+    </div>
+  );
+};
+
+// Component that reads userIdAtom to verify it's set
+const AtomReaderComponent: React.FC = () => {
+  const store = useStore();
+  const [userId, setUserId] = React.useState<string>("not-set");
+
+  React.useEffect(() => {
+    const unsubscribe = store.sub(userIdAtom, () => {
+      try {
+        const value = store.get(userIdAtom);
+        if (value) {
+          setUserId(value);
+        }
+      } catch {
+        // Still not set
+      }
+    });
+
+    const timer = setTimeout(() => {
+      try {
+        const value = store.get(userIdAtom);
+        if (value) {
+          setUserId(value);
+        }
+      } catch {
+        // Not set yet
+      }
+    }, 50);
+
+    return () => {
+      unsubscribe();
+      clearTimeout(timer);
+    };
+  }, [store]);
+
+  return <div data-testid="atom-reader">{userId}</div>;
+};
+
+// Component that uses both contexts
+const CombinedContextComponent: React.FC = () => {
+  const userIdentity = useUserIdentity();
+  const amplitude = useAmplitude();
+
+  return (
+    <div data-testid="combined-component">
+      <div data-testid="user-id-from-identity">
+        {userIdentity.getUserIdOrDefault()}
+      </div>
+      <div data-testid="amplitude-ready">{amplitude.isReady.toString()}</div>
+    </div>
+  );
+};
+
+// Wrapper component with all required providers
+const TestWrapper: React.FC<{
+  children: React.ReactNode;
+  amplitudeApiKey?: string;
+  userIdOverride?: string;
+  userIdDefault?: string;
+}> = ({
+  children,
+  amplitudeApiKey = "test-amplitude-key",
+  userIdOverride,
+  userIdDefault,
+}) => {
+  // Set up localStorage with user IDs if provided
+  React.useEffect(() => {
+    if (userIdOverride) {
+      localStorage.setItem("v1-spiffy-user-id-override", userIdOverride);
+    }
+    if (userIdDefault) {
+      localStorage.setItem("v1-spiffy-user-id-default", userIdDefault);
+    }
+  }, [userIdOverride, userIdDefault]);
+
+  return (
+    <Provider>
+      <EnviveConfigProvider
+        identifyingPrefix="test"
+        orgShortName="test-org"
+        amplitudeApiKey={amplitudeApiKey}
+        dataResidency="US"
+        env="test"
+        contextSource="app"
+        featureGates={[]}
+      >
+        <LocalStorageProvider>
+          <UserIdentityProvider>
+            <FeatureFlagServiceProvider featureGates={[]}>
+              <AmplitudeProvider>{children}</AmplitudeProvider>
+            </FeatureFlagServiceProvider>
+          </UserIdentityProvider>
+        </LocalStorageProvider>
+      </EnviveConfigProvider>
+    </Provider>
+  );
+};
+
+describe("AmplitudeProvider with UserIdentityContext", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    if (typeof localStorage !== "undefined") {
+      localStorage.clear();
+    }
+    // Reset mocks
+    mockTrack.mockClear();
+    mockInit.mockClear();
+    mockAdd.mockClear();
+    mockDigest.mockResolvedValue(new Uint8Array(32).fill(0));
+  });
+
+  describe("Integration with UserIdentityContext - userIdAtom", () => {
+    it("should be ready when UserIdentityContext provides a userId", async () => {
+      render(
+        <TestWrapper>
+          <CombinedContextComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        const isReady = screen.getByTestId("amplitude-ready").textContent;
+        expect(isReady).toBe("true");
+      });
+    });
+
+    it("should use userId from UserIdentityContext in tracking events", async () => {
+      const testUserId = "test-user-id-123";
+      render(
+        <TestWrapper userIdOverride={testUserId}>
+          <MockAmplitudeComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("is-ready").textContent).toBe("true");
+      });
+
+      await act(async () => {
+        screen.getByTestId("track-event-button").click();
+      });
+
+      await waitFor(() => {
+        expect(mockTrack).toHaveBeenCalled();
+        const callArgs = mockTrack.mock.calls[0];
+        expect(callArgs[0]).toBe("[Spiffy] Chat User Message Input");
+        expect(callArgs[1]).toHaveProperty("user.id", testUserId);
+      });
+    });
+
+    it("should use default userId from UserIdentityContext when override is not set", async () => {
+      const testUserId = "default-user-id-456";
+      render(
+        <TestWrapper userIdDefault={testUserId}>
+          <MockAmplitudeComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("is-ready").textContent).toBe("true");
+      });
+
+      await act(async () => {
+        screen.getByTestId("track-event-button").click();
+      });
+
+      await waitFor(() => {
+        expect(mockTrack).toHaveBeenCalled();
+        const callArgs = mockTrack.mock.calls[0];
+        expect(callArgs[1]).toHaveProperty("user.id", testUserId);
+      });
+    });
+
+    it("should prioritize override userId over default userId", async () => {
+      const overrideUserId = "override-user-id-789";
+      const defaultUserId = "default-user-id-012";
+      render(
+        <TestWrapper
+          userIdOverride={overrideUserId}
+          userIdDefault={defaultUserId}
+        >
+          <MockAmplitudeComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("is-ready").textContent).toBe("true");
+      });
+
+      await act(async () => {
+        screen.getByTestId("track-event-button").click();
+      });
+
+      await waitFor(() => {
+        expect(mockTrack).toHaveBeenCalled();
+        const callArgs = mockTrack.mock.calls[0];
+        expect(callArgs[1]).toHaveProperty("user.id", overrideUserId);
+        expect(callArgs[1]).not.toHaveProperty("user.id", defaultUserId);
+      });
+    });
+
+    it("should initialize Amplitude with userId from UserIdentityContext", async () => {
+      const testUserId = "init-user-id-345";
+      render(
+        <TestWrapper userIdOverride={testUserId}>
+          <MockAmplitudeComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(mockInit).toHaveBeenCalled();
+        const initArgs = mockInit.mock.calls[0];
+        expect(initArgs[1]).toBe(testUserId);
+      });
+    });
+  });
+
+  describe("userIdAtom synchronization", () => {
+    it("should sync userIdAtom with UserIdentityContext userId", async () => {
+      const testUserId = "sync-user-id-678";
+      render(
+        <TestWrapper userIdOverride={testUserId}>
+          <>
+            <CombinedContextComponent />
+            <AtomReaderComponent />
+          </>
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        const identityUserId = screen.getByTestId(
+          "user-id-from-identity"
+        ).textContent;
+        const atomUserId = screen.getByTestId("atom-reader").textContent;
+        expect(identityUserId).toBe(testUserId);
+        expect(atomUserId).toBe(testUserId);
+        expect(identityUserId).toBe(atomUserId);
+      });
+    });
+  });
+
+  describe("Event tracking with UserIdentityContext userId", () => {
+    it("should include user.id in all tracked events", async () => {
+      const testUserId = "event-user-id-901";
+      render(
+        <TestWrapper userIdOverride={testUserId}>
+          <MockAmplitudeComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("is-ready").textContent).toBe("true");
+      });
+
+      await act(async () => {
+        screen.getByTestId("track-event-button").click();
+      });
+
+      await waitFor(() => {
+        expect(mockTrack).toHaveBeenCalled();
+        const callArgs = mockTrack.mock.calls[0];
+        expect(callArgs[1]).toHaveProperty("user.id", testUserId);
+      });
+    });
+
+    it("should include user.id in default tracking props", async () => {
+      const testUserId = "default-props-user-id";
+      render(
+        <TestWrapper userIdOverride={testUserId}>
+          <MockAmplitudeComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("is-ready").textContent).toBe("true");
+      });
+
+      await act(async () => {
+        screen.getByTestId("track-event-button").click();
+      });
+
+      await waitFor(() => {
+        expect(mockTrack).toHaveBeenCalled();
+        const callArgs = mockTrack.mock.calls[0];
+        const eventProps = callArgs[1];
+        expect(eventProps["user.id"]).toBe(testUserId);
+        expect(eventProps["cdp.user_id"]).toBe(null);
+      });
+    });
+
+    it("should track multiple events with correct userId", async () => {
+      const testUserId = "multi-event-user-id";
+      const MultiEventComponent: React.FC = () => {
+        const amplitude = useAmplitude();
+
+        const trackMultiple = () => {
+          amplitude.trackEvent({
+            eventName: SpiffyMetricsEventName.ChatUserMessageInput,
+            eventProps: { event1: true },
+          });
+          amplitude.trackEvent({
+            eventName: SpiffyMetricsEventName.ChatSuggestionClicked,
+            eventProps: { event2: true },
+          });
+        };
+
+        return (
+          <button data-testid="track-multiple" onClick={trackMultiple}>
+            Track Multiple
+          </button>
+        );
+      };
+
+      render(
+        <TestWrapper userIdOverride={testUserId}>
+          <MultiEventComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("track-multiple")).toBeInTheDocument();
+      });
+
+      await act(async () => {
+        screen.getByTestId("track-multiple").click();
+      });
+
+      await waitFor(() => {
+        expect(mockTrack).toHaveBeenCalledTimes(2);
+        mockTrack.mock.calls.forEach((call: any[]) => {
+          expect(call[1]).toHaveProperty("user.id", testUserId);
+        });
+      });
+    });
+  });
+
+  describe("Context readiness and initialization", () => {
+    it("should wait for UserIdentityContext to be ready before becoming ready", async () => {
+      render(
+        <TestWrapper>
+          <CombinedContextComponent />
+        </TestWrapper>
+      );
+
+      // Both contexts should eventually be ready
+      await waitFor(() => {
+        const amplitudeReady = screen.getByTestId("amplitude-ready").textContent;
+        expect(amplitudeReady).toBe("true");
+      });
+    });
+
+    it("should initialize Amplitude client with correct userId from UserIdentityContext", async () => {
+      const testUserId = "init-client-user-id";
+      render(
+        <TestWrapper userIdOverride={testUserId}>
+          <MockAmplitudeComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(mockInit).toHaveBeenCalledWith(
+          "test-amplitude-key",
+          testUserId,
+          expect.objectContaining({
+            serverZone: "US",
+          })
+        );
+      });
+    });
+
+    it("should not render children when not ready", async () => {
+      // Create a provider without required dependencies
+      const IncompleteWrapper: React.FC<{ children: React.ReactNode }> = ({
+        children,
+      }) => {
+        return (
+          <Provider>
+            <EnviveConfigProvider
+              identifyingPrefix="test"
+              orgShortName="test-org"
+              // Missing amplitudeApiKey
+              featureGates={[]}
+            >
+              <LocalStorageProvider>
+                <UserIdentityProvider>
+                  <FeatureFlagServiceProvider featureGates={[]}>
+                    <AmplitudeProvider>{children}</AmplitudeProvider>
+                  </FeatureFlagServiceProvider>
+                </UserIdentityProvider>
+              </LocalStorageProvider>
+            </EnviveConfigProvider>
+          </Provider>
+        );
+      };
+
+      const { container } = render(
+        <IncompleteWrapper>
+          <div data-testid="should-not-render">Should not render</div>
+        </IncompleteWrapper>
+      );
+
+      // AmplitudeProvider returns null when not ready, so children should not render
+      await waitFor(() => {
+        expect(
+          screen.queryByTestId("should-not-render")
+        ).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Error handling", () => {
+    it("should handle tracking errors gracefully when userId is available", async () => {
+      const testUserId = "error-user-id";
+      mockTrack.mockImplementationOnce(() => {
+        throw new Error("Tracking error");
+      });
+
+      const logErrorSpy = vi.spyOn(Logger, "logError");
+
+      render(
+        <TestWrapper userIdOverride={testUserId}>
+          <MockAmplitudeComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("is-ready").textContent).toBe("true");
+      });
+
+      await act(async () => {
+        screen.getByTestId("track-event-button").click();
+      });
+
+      await waitFor(() => {
+        expect(logErrorSpy).toHaveBeenCalledWith(
+          "[spiffy-ai] Error tracking event",
+          expect.any(Error),
+          expect.objectContaining({
+            eventName: SpiffyMetricsEventName.ChatUserMessageInput,
+          })
+        );
+      });
+    });
+  });
+});
+

package/src/contexts/amplitudeContext/amplitudeContext.tsx

@@ -34,7 +34,6 @@ import { useEnviveConfig } from "src/contexts/enviveConfigContext/enviveConfigCo
 import {
   useFeatureFlagService,
 } from "src/contexts/featureFlagServiceContext/featureFlagServiceContext";
-import { useUserIdentity } from "src/contexts/userIdentityContext/userIdentityContext";
 
 export enum SpiffyMetricsEventName {
   BundleLoaded = "Bundle Loaded",
@@ -116,7 +115,7 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
     React.useState<Record<string, unknown>>({});
 
   const isReady = Boolean(
-    userId && featureFlagService && amplitudeApiKey && userId
+    userId && featureFlagService && amplitudeApiKey
   );
 
   const getDefaultTrackingProps = useCallback((): Record<string, unknown> => {
@@ -416,6 +415,10 @@ export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
     [trackEvent, isReady, setSupplementalDefaultProps]
   );
 
+  if (!isReady) {
+    return null;
+  }
+
   return (
     <AmplitudeContext.Provider value={value}>
       {children}

package/src/contexts/userIdentityContext/userIdentityContext.tsx

@@ -12,7 +12,7 @@ import CommerceApiClient from "src/application/commerce-api";
 import { v4 as uuid } from "uuid";
 import { ClientDetails } from "src/application/models/clientDetails";
 import { useLocalStorage } from "src/contexts/localStorageContext";
-import { useSetAtom } from "jotai";
+import { useAtom } from "jotai";
 import { userIdAtom } from "src/atoms/app";
 
 // Helper function from the original service
@@ -50,6 +50,7 @@ const UserIdentityContext = createContext<UserIdentityContextType | undefined>(
 export const UserIdentityProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
+  const [userId, setUserId] = useAtom(userIdAtom);
   const {
     getItem,
     setItem,
@@ -180,6 +181,11 @@ export const UserIdentityProvider: React.FC<{ children: React.ReactNode }> = ({
       isReady,
     ]
   );
+  useEffect(() => {
+    if (isReady && !userId) {
+      setUserId(getUserIdOrDefault() ?? "");
+    }
+  }, [isReady, userId, setUserId]);
 
   return (
     <UserIdentityContext.Provider value={value}>
@@ -190,10 +196,6 @@ export const UserIdentityProvider: React.FC<{ children: React.ReactNode }> = ({
 
 export const useUserIdentity = () => {
   const context = useContext(UserIdentityContext);
-  const setUserId = useSetAtom(userIdAtom);
-  useEffect(() => {
-    setUserId(context?.getUserIdOrDefault() ?? "");
-  }, [context, setUserId]);
   if (!context) {
     throw new Error(
       "useUserIdentity must be used within a UserIdentityProvider"