import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { SkipLink } from "../SkipLink";
const TestBase = ({ skipProps }) => (
);
//children were required plus they helped to check defaultTabIndex
describe("rendering", () => {
describe("initial state", () => {
it("rendered", () => {
const { getByTestId } = render();
expect(getByTestId("skip-link")).toBeInTheDocument();
});
it("has class skip-link", () => {
const { getByTestId } = render();
expect(getByTestId("skip-link")).toHaveClass("skip-link");
});
it("has href #maincontent", () => {
const { getByTestId } = render();
expect(getByTestId("skip-link").getAttribute("href")).toBe(
"#maincontent",
);
});
});
describe("passed props", () => {
it("has additional class when className is set", () => {
const { getByTestId } = render(
,
);
expect(getByTestId("skip-link")).toHaveClass("skip-link");
expect(getByTestId("skip-link")).toHaveClass("test-class");
});
});
});
describe("keyboard navigation", () => {
it("focuses on first tab", async () => {
render();
const { tab } = userEvent.setup();
await tab();
expect(screen.getByTestId("skip-link")).toHaveFocus();
});
it.fails("focuses main on click", async () => {
render();
const { tab, keyboard } = userEvent.setup();
await tab();
await keyboard("{Enter}");
expect(screen.getByTestId("maincontent")).toHaveFocus();
});
});