94 lines
3.3 KiB
TypeScript
94 lines
3.3 KiB
TypeScript
import { renderToStaticMarkup } from "react-dom/server";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
|
|
import { AuthBackground } from "../auth-background";
|
|
import { AuthErrorMessage } from "../auth-error-message";
|
|
import { AuthLegalText } from "../auth-legal-text";
|
|
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(),
|
|
}));
|
|
|
|
describe("auth Tailwind components", () => {
|
|
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 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");
|
|
});
|
|
|
|
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");
|
|
});
|
|
|
|
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("renders AuthSocialButton with Tailwind button layout", () => {
|
|
const html = renderToStaticMarkup(
|
|
<AuthSocialButton icon={<span>G</span>}>Continue</AuthSocialButton>,
|
|
);
|
|
|
|
expect(html).toContain("min-h-[var(--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-[var(--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-[var(--auth-field-height)]");
|
|
expect(html).toContain("placeholder:text-auth-input-placeholder");
|
|
expect(html).toContain("text-auth-text-primary");
|
|
expect(html).toContain("Invalid email");
|
|
});
|
|
});
|