test(web): add unit tests for OnboardingFlow component

Author: tyler-dane

packages/web/src/views/Onboarding/OnboardingFlow.test.tsx

@@ -0,0 +1,139 @@
+import "@testing-library/jest-dom";
+import { screen } from "@testing-library/react";
+import { render } from "@web/__tests__/__mocks__/mock.render";
+import { useHasCompletedSignup } from "@web/auth/useHasCompletedSignup";
+import { useIsMobile } from "@web/common/hooks/useIsMobile";
+import { OnboardingFlow } from "./OnboardingFlow";
+
+// Mock dependencies
+jest.mock("@web/auth/useHasCompletedSignup");
+jest.mock("@web/common/hooks/useIsMobile");
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useNavigate: () => jest.fn(),
+}));
+
+// Mock the Onboarding component to avoid complex rendering
+jest.mock("./components/Onboarding", () => ({
+  Onboarding: ({ steps, initialStepIndex = 0 }: any) => (
+    <div data-testid="onboarding">
+      <div data-testid="total-steps">{steps.length}</div>
+      <div data-testid="initial-step-index">{initialStepIndex}</div>
+      <div data-testid="first-step-id">{steps[initialStepIndex]?.id}</div>
+    </div>
+  ),
+}));
+
+const mockUseHasCompletedSignup = useHasCompletedSignup as jest.MockedFunction<
+  typeof useHasCompletedSignup
+>;
+const mockUseIsMobile = useIsMobile as jest.MockedFunction<typeof useIsMobile>;
+
+describe("OnboardingFlow", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseIsMobile.mockReturnValue(false);
+  });
+
+  describe("New User Flow", () => {
+    it("shows login flow first when user has not completed signup", () => {
+      mockUseHasCompletedSignup.mockReturnValue({
+        hasCompletedSignup: false,
+        markSignupCompleted: jest.fn(),
+      });
+
+      render(<OnboardingFlow />);
+
+      // Should show login steps (welcome step)
+      expect(screen.getByTestId("onboarding")).toBeInTheDocument();
+      expect(screen.getByTestId("first-step-id")).toHaveTextContent("welcome");
+    });
+
+    it("would start main onboarding at index 0 for new users", () => {
+      // This tests the logic that would happen after login completes
+      // When hasCompletedSignup is false, initialStepIndex should be 0
+      mockUseHasCompletedSignup.mockReturnValue({
+        hasCompletedSignup: false,
+        markSignupCompleted: jest.fn(),
+      });
+
+      render(<OnboardingFlow />);
+
+      expect(mockUseHasCompletedSignup).toHaveBeenCalled();
+    });
+  });
+
+  describe("Returning User Flow", () => {
+    it("shows login flow first even for returning users", () => {
+      mockUseHasCompletedSignup.mockReturnValue({
+        hasCompletedSignup: true,
+        markSignupCompleted: jest.fn(),
+      });
+
+      render(<OnboardingFlow />);
+
+      // First step should still be login/waitlist
+      expect(screen.getByTestId("onboarding")).toBeInTheDocument();
+      expect(screen.getByTestId("first-step-id")).toHaveTextContent("welcome");
+    });
+
+    it("calls useHasCompletedSignup to check signup status", () => {
+      mockUseHasCompletedSignup.mockReturnValue({
+        hasCompletedSignup: true,
+        markSignupCompleted: jest.fn(),
+      });
+
+      render(<OnboardingFlow />);
+
+      // Hook should be called to determine which step to start at
+      expect(mockUseHasCompletedSignup).toHaveBeenCalled();
+    });
+  });
+
+  describe("Mobile Flow", () => {
+    it("shows mobile onboarding flow when on mobile device", () => {
+      mockUseIsMobile.mockReturnValue(true);
+      mockUseHasCompletedSignup.mockReturnValue({
+        hasCompletedSignup: false,
+        markSignupCompleted: jest.fn(),
+      });
+
+      render(<OnboardingFlow />);
+
+      // Mobile flow should be rendered
+      expect(screen.getByTestId("onboarding")).toBeInTheDocument();
+    });
+  });
+
+  describe("localStorage Integration", () => {
+    beforeEach(() => {
+      localStorage.clear();
+    });
+
+    it("checks localStorage for hasCompletedSignup flag", () => {
+      localStorage.setItem("compass.auth.hasCompletedSignup", "true");
+
+      mockUseHasCompletedSignup.mockReturnValue({
+        hasCompletedSignup: true,
+        markSignupCompleted: jest.fn(),
+      });
+
+      render(<OnboardingFlow />);
+
+      expect(mockUseHasCompletedSignup).toHaveBeenCalled();
+    });
+
+    it("uses hasCompletedSignup value to determine initial step", () => {
+      localStorage.setItem("compass.auth.hasCompletedSignup", "false");
+
+      mockUseHasCompletedSignup.mockReturnValue({
+        hasCompletedSignup: false,
+        markSignupCompleted: jest.fn(),
+      });
+
+      render(<OnboardingFlow />);
+
+      expect(mockUseHasCompletedSignup).toHaveBeenCalled();
+    });
+  });
+});

packages/web/src/views/Onboarding/OnboardingFlow.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { useHasCompletedSignup } from "@web/auth/useHasCompletedSignup";
 import { IS_DEV } from "@web/common/constants/env.constants";
 import { useIsMobile } from "@web/common/hooks/useIsMobile";
 import {
@@ -35,6 +36,7 @@ const _OnboardingFlow: React.FC = () => {
   const navigate = useNavigate();
   const { setHideSteps } = useOnboarding();
   const isMobile = useIsMobile();
+  const { hasCompletedSignup } = useHasCompletedSignup();
 
   const [showOnboarding, setShowOnboarding] = useState(false);
 
@@ -195,10 +197,24 @@ const _OnboardingFlow: React.FC = () => {
     );
   }
 
+  // Determine initial step based on signup status
+  // If user has completed signup before, skip welcome screens and start at sign-in-with-google
+  const getInitialStepIndex = () => {
+    if (hasCompletedSignup) {
+      // Find the index of "sign-in-with-google" step
+      const signInStepIndex = onboardingSteps.findIndex(
+        (step) => step.id === "sign-in-with-google",
+      );
+      return signInStepIndex !== -1 ? signInStepIndex : 0;
+    }
+    return 0; // Start from beginning for new users
+  };
+
   return (
     <Onboarding
       key="main-onboarding"
       steps={onboardingSteps}
+      initialStepIndex={getInitialStepIndex()}
       onComplete={() => {
         navigate("/");
       }}

packages/web/src/views/Onboarding/components/Onboarding.tsx

@@ -116,10 +116,15 @@ export interface OnboardingStep {
 interface Props {
   steps: OnboardingStep[];
   onComplete: (reason: "skip" | "complete") => void;
+  initialStepIndex?: number;
 }
 
-export const Onboarding: React.FC<Props> = ({ steps, onComplete }) => {
-  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+export const Onboarding: React.FC<Props> = ({
+  steps,
+  onComplete,
+  initialStepIndex = 0,
+}) => {
+  const [currentStepIndex, setCurrentStepIndex] = useState(initialStepIndex);
   const [isNavPrevented, setIsNavPrevented] = useState(false);
 
   const handleNext = (data?: Record<string, unknown>) => {