import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { LoginButton } from "./LoginButton";

const { mockOAuth2 } = vi.hoisted(() => ({
  mockOAuth2: vi.fn(),
}));

vi.mock("@/lib/auth-client", () => ({
  signIn: {
    oauth2: mockOAuth2,
  },
}));

describe("LoginButton", (): void => {
  beforeEach((): void => {
    mockOAuth2.mockClear();
  });

  it("should render sign in button", (): void => {
    render(<LoginButton />);
    const button = screen.getByRole("button", { name: /sign in/i });
    expect(button).toBeInTheDocument();
  });

  it("should initiate OAuth2 sign-in on click", async (): Promise<void> => {
    const user = userEvent.setup();
    render(<LoginButton />);

    const button = screen.getByRole("button", { name: /sign in/i });
    await user.click(button);

    expect(mockOAuth2).toHaveBeenCalledWith({
      providerId: "authentik",
      callbackURL: "/",
    });
  });

  it("should have proper styling", (): void => {
    render(<LoginButton />);
    const button = screen.getByRole("button", { name: /sign in/i });
    expect(button).toHaveClass("w-full");
  });
});