import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { ProfileEditor } from "./ProfileEditor";

vi.mock("../api/profileApi", () => ({
  updateProfile: vi.fn(),
  changePassword: vi.fn(),
  uploadAvatar: vi.fn()
}));

const profile = {
  user: { id: "1", email: "user@example.com", role: "user", is_superuser: false, status: "active" },
  profile: { display_name: "Compton User", avatar_url: null }
};

describe("ProfileEditor", () => {
  it("renders profile edit form", () => {
    const queryClient = new QueryClient();
    render(
      <QueryClientProvider client={queryClient}>
        <ProfileEditor profile={profile} />
      </QueryClientProvider>
    );
    expect(screen.getByRole("heading", { name: "Edit profile" })).toBeInTheDocument();
    expect(screen.getByDisplayValue("Compton User")).toBeInTheDocument();
    expect(screen.getByRole("button", { name: "Save name" })).toBeInTheDocument();
    expect(screen.getByRole("button", { name: "Change password" })).toBeInTheDocument();
  });
});
