// @vitest-environment jsdom
//
// "Skip to content" moves the focus to the page's <main> itself. Following its
// `#content` fragment would push a history entry, and the app reads every popstate as a page change.
import { afterEach, describe, expect, it } from "vitest";
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { SkipLink } from "./SkipLink";
import { CONTENT_ID } from "./landmarks";

afterEach(cleanup);

describe("SkipLink", () => {
  it("focuses the content region without touching the address", () => {
    render(
      <>
        <SkipLink label="Skip to content" />
        <main id={CONTENT_ID} tabIndex={-1}>
          page
        </main>
      </>,
    );
    const before = window.location.href;
    const link = screen.getByRole("link", { name: "Skip to content" });
    // Off screen until focused, then a full-size button (sr-only / not-sr-only zeroed its padding).
    expect(link.className).toContain("focus:translate-y-0");
    expect(link.className).not.toMatch(/sr-only/);
    fireEvent.click(link);
    expect(document.activeElement?.id).toBe(CONTENT_ID);
    expect(window.location.href).toBe(before);
  });
});