cozsweet-frontend-nextjs/src/app/auth/components/__tests__/tailwind-components.test.tsx

import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it, vi } from "vitest";

import { AuthScreen } from "../../auth-screen";
import { AuthBackground } from "../auth-background";
import { AuthEmailPanel } from "../auth-email-panel";
import { AuthErrorMessage } from "../auth-error-message";
import { AuthFacebookPanel } from "../auth-facebook-panel";
import { AuthLegalText } from "../auth-legal-text";
import { AuthPanel } from "../auth-panel";
import { AuthPrimaryButton } from "../auth-primary-button";
import { AuthSocialButton } from "../auth-social-button";
import { AuthTextField } from "../auth-text-field";
import { EmailLoginForm } from "../email-login-form";
import { EmailRegisterForm } from "../email-register-form";

vi.mock("@/stores/auth/auth-context", () => ({
  useAuthDispatch: () => vi.fn(),
  useAuthState: () => ({
    authPanelMode: "facebook",
    isLoading: false,
    errorMessage: null,
    loginStatus: "notLoggedIn",
    hasInitialized: true,
  }),
}));

vi.mock("next/navigation", () => ({
  useRouter: () => ({ back: vi.fn(), replace: vi.fn() }),
}));

describe("auth Tailwind components", () => {
  it("renders outside CharacterProvider", () => {
    expect(() => renderToStaticMarkup(<AuthScreen />)).not.toThrow();
  });

  it("renders AuthErrorMessage only when a message is present", () => {
    expect(renderToStaticMarkup(<AuthErrorMessage message={null} />)).toBe("");

    const html = renderToStaticMarkup(<AuthErrorMessage message="Invalid email" />);
    expect(html).toContain('role="alert"');
    expect(html).toContain("text-error");
    expect(html).toContain("Invalid email");
  });

  it("renders AuthPrimaryButton with Tailwind gradient and spinner", () => {
    const html = renderToStaticMarkup(
      <AuthPrimaryButton isLoading>Continue</AuthPrimaryButton>,
    );

    expect(html).toContain("min-h-(--auth-field-height)");
    expect(html).toContain("bg-[linear-gradient");
    expect(html).toContain("animate-spin");
    expect(html).toContain("Continue");
  });

  it("renders EmailLoginForm with Tailwind form layout", () => {
    const html = renderToStaticMarkup(<EmailLoginForm />);

    expect(html).toContain("<form");
    expect(html).toContain("flex");
    expect(html).toContain("w-full");
    expect(html).toContain("gap-md");
    expect(html).toContain("Login");
    expect(html).toContain('data-analytics-key="auth.email_login"');
  });

  it("renders EmailRegisterForm with Tailwind form layout", () => {
    const html = renderToStaticMarkup(<EmailRegisterForm />);

    expect(html).toContain("<form");
    expect(html).toContain("flex");
    expect(html).toContain("w-full");
    expect(html).toContain("gap-md");
    expect(html).toContain("Register");
    expect(html).toContain('data-analytics-key="auth.email_register"');
  });

  it("renders AuthBackground with Tailwind layout classes", () => {
    const html = renderToStaticMarkup(<AuthBackground />);

    expect(html).toContain("absolute");
    expect(html).toContain("inset-0");
    expect(html).toContain("bg-[#fbf1f2]");
    expect(html).toContain("object-cover");
    expect(html).toContain("%2Fimages%2Fauth%2Fbg-login.png");
  });

  it("positions the back button from the auth screen top-left inset", () => {
    const html = renderToStaticMarkup(<AuthPanel />);

    expect(html).toContain('data-analytics-key="auth.back"');
    expect(html).toContain("absolute left-0 top-0 z-2");
    expect(html).toContain("size-(--responsive-icon-button-size,42px)");
    expect(html).not.toContain("left-[calc(var(--spacing-xl,20px)");
  });

  it("renders AuthSocialButton with Tailwind button layout", () => {
    const html = renderToStaticMarkup(
      <AuthSocialButton icon={<span>G</span>}>Continue</AuthSocialButton>,
    );

    expect(html).toContain("min-h-(--auth-social-button-height)");
    expect(html).toContain("border-auth-border");
    expect(html).toContain("text-auth-text-primary");
    expect(html).toContain("Continue");
  });

  it("renders AuthLegalText with Tailwind checkbox and links", () => {
    const html = renderToStaticMarkup(<AuthLegalText />);

    expect(html).toContain('aria-label="Agree to terms"');
    expect(html).toContain("size-(--auth-legal-checkbox-size)");
    expect(html).toContain("bg-auth-legal-check");
    expect(html).toContain("Privacy Agreement");
    expect(html).toContain("Terms of User");
  });

  it("renders AuthTextField with Tailwind input states", () => {
    const html = renderToStaticMarkup(
      <AuthTextField
        value="bad"
        onChange={() => {}}
        label="Email"
        placeholder="Email"
        errorMessage="Invalid email"
      />,
    );

    expect(html).toContain("min-h-(--auth-field-height)");
    expect(html).toContain("placeholder:text-auth-input-placeholder");
    expect(html).toContain("text-auth-text-primary");
    expect(html).toContain("Invalid email");
  });

  it("renders AuthEmailPanel with Tailwind panel layout", () => {
    const html = renderToStaticMarkup(
      <AuthEmailPanel onSwitchToFacebook={() => {}} />,
    );

    expect(html).toContain("flex min-h-0 w-full flex-auto flex-col");
    expect(html).toContain("h-xxl");
    expect(html).toContain("Other Sign In Options");
  });

  it("renders AuthFacebookPanel with Tailwind Facebook button", () => {
    const html = renderToStaticMarkup(
      <AuthFacebookPanel onSwitchToEmail={() => {}} />,
    );

    expect(html).toContain("Login with Facebook");
    expect(html).toContain('data-analytics-key="auth.facebook_login"');
    expect(html).toContain("bg-auth-surface");
    expect(html).toContain("enabled:hover:brightness-[0.97]");
    expect(html).toContain("Other Sign In Options");
  });
});