import { render, screen, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import LighthouseMetrics from "./LighthouseMetrics";

it("updates the inspection criteria while preserving keyboard navigation", async () => {
  const user = userEvent.setup();
  render(<LighthouseMetrics />);

  const report = screen.getByRole("region", { name: "Inspeção de qualidade" });
  expect(screen.getByRole("radio", { name: /Performance/ })).toBeChecked();
  expect(within(report).getByRole("list")).toHaveTextContent(/JavaScript/);

  const accessibility = screen.getByRole("radio", { name: /Acessibilidade/ });
  await user.click(accessibility);
  expect(accessibility).toHaveFocus();
  expect(within(report).getByRole("list")).toHaveTextContent(/teclado/);

  await user.keyboard("{ArrowRight}");
  expect(screen.getByRole("radio", { name: /Boas práticas/ })).toBeChecked();
  expect(within(report).getByRole("list")).toHaveTextContent(/consentimento/);

  await user.keyboard("{ArrowRight}");
  expect(screen.getByRole("radio", { name: /SEO/ })).toBeChecked();
  expect(within(report).getByRole("list")).toHaveTextContent(/Sitemap/);

  await user.keyboard("{ArrowRight}");
  expect(screen.getByRole("radio", { name: /Performance/ })).toBeChecked();
  expect(within(report).getByRole("list")).toHaveTextContent(/JavaScript/);
});