AppLoader.auth.test.tsx

import "../../../../tests/ui/dom";

import React from "react";
import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
import { cleanup, render } from "@testing-library/react";
import { useTheme } from "../../contexts/ThemeContext";
import { installDom } from "../../../../tests/ui/dom";

let cleanupDom: (() => void) | null = null;

let apiStatus: "auth_required" | "connecting" | "error" = "auth_required";
let apiError: string | null = "Authentication required";

const AUTH_TOKEN_STORAGE_KEY = "mux:auth-token";

// AppLoader imports App, which pulls in Lottie-based components. In happy-dom,
// lottie-web's canvas bootstrap can throw during module evaluation.
void mock.module("lottie-react", () => ({
  __esModule: true,
  default: () => <div data-testid="LottieMock" />,
}));

void mock.module("@/browser/contexts/API", () => ({
  APIProvider: (props: { children: React.ReactNode }) => props.children,
  useAPI: () => {
    if (apiStatus === "auth_required") {
      return {
        api: null,
        status: "auth_required" as const,
        error: apiError,
        authenticate: () => undefined,
        retry: () => undefined,
      };
    }

    if (apiStatus === "error") {
      return {
        api: null,
        status: "error" as const,
        error: apiError ?? "Connection error",
        authenticate: () => undefined,
        retry: () => undefined,
      };
    }

    return {
      api: null,
      status: "connecting" as const,
      error: null,
      authenticate: () => undefined,
      retry: () => undefined,
    };
  },
}));

void mock.module("@/browser/components/LoadingScreen/LoadingScreen", () => ({
  LoadingScreen: () => {
    const { theme } = useTheme();
    return <div data-testid="LoadingScreenMock">{theme}</div>;
  },
}));

void mock.module("@/browser/components/StartupConnectionError/StartupConnectionError", () => ({
  StartupConnectionError: (props: { error: string }) => (
    <div data-testid="StartupConnectionErrorMock">{props.error}</div>
  ),
}));

void mock.module("@/browser/components/AuthTokenModal/AuthTokenModal", () => ({
  // Note: Module mocks leak between bun test files.
  // Export all commonly-used symbols to avoid cross-test import errors.
  // Keep token helpers behaviorally close to production so leaked mocks do not
  // break tests that expect auth-token persistence.
  AuthTokenModal: (props: { error?: string | null }) => (
    <div data-testid="AuthTokenModalMock">{props.error ?? "no-error"}</div>
  ),
  getStoredAuthToken: () => {
    try {
      return localStorage.getItem(AUTH_TOKEN_STORAGE_KEY);
    } catch {
      return null;
    }
  },
  setStoredAuthToken: (token: string) => {
    try {
      localStorage.setItem(AUTH_TOKEN_STORAGE_KEY, token);
    } catch {
      // no-op in tests without storage
    }
  },
  clearStoredAuthToken: () => {
    try {
      localStorage.removeItem(AUTH_TOKEN_STORAGE_KEY);
    } catch {
      // no-op in tests without storage
    }
  },
}));

import { AppLoader } from "../AppLoader/AppLoader";

describe("AppLoader", () => {
  beforeEach(() => {
    cleanupDom = installDom();
  });

  afterEach(() => {
    cleanup();
    mock.restore();
    cleanupDom?.();
    cleanupDom = null;
  });

  test("renders AuthTokenModal when API status is auth_required (before workspaces load)", () => {
    apiStatus = "auth_required";
    apiError = "Authentication required";

    const { getByTestId, queryByText } = render(<AppLoader />);

    expect(queryByText("Loading Mux")).toBeNull();
    expect(getByTestId("AuthTokenModalMock").textContent).toContain("Authentication required");
  });

  test("renders StartupConnectionError when API status is error (before workspaces load)", () => {
    apiStatus = "error";
    apiError = "Connection error";

    const { getByTestId, queryByTestId } = render(<AppLoader />);

    expect(queryByTestId("LoadingScreenMock")).toBeNull();
    expect(queryByTestId("AuthTokenModalMock")).toBeNull();
    expect(getByTestId("StartupConnectionErrorMock").textContent).toContain("Connection error");
  });

  test("wraps LoadingScreen in ThemeProvider", () => {
    apiStatus = "connecting";
    apiError = null;

    const { getByTestId } = render(<AppLoader />);

    // If ThemeProvider is missing, useTheme() will throw.
    expect(getByTestId("LoadingScreenMock").textContent).toBeTruthy();
  });
});