import React from "react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import userEvent from "../../src";
describe("userEvent.tab", () => {
it("should cycle elements in document tab order", () => {
const { getAllByTestId } = render(
);
const [checkbox, radio, number] = getAllByTestId("element");
expect(document.body).toHaveFocus();
userEvent.tab();
expect(checkbox).toHaveFocus();
userEvent.tab();
expect(radio).toHaveFocus();
userEvent.tab();
expect(number).toHaveFocus();
userEvent.tab();
// cycle goes back to first element
expect(checkbox).toHaveFocus();
});
it("should go backwards when shift = true", () => {
const { getAllByTestId } = render(
);
const [checkbox, radio, number] = getAllByTestId("element");
radio.focus();
userEvent.tab({ shift: true });
expect(checkbox).toHaveFocus();
userEvent.tab({ shift: true });
expect(number).toHaveFocus();
});
it("should respect tabindex, regardless of dom position", () => {
const { getAllByTestId } = render(
);
const [checkbox, radio, number] = getAllByTestId("element");
userEvent.tab();
expect(radio).toHaveFocus();
userEvent.tab();
expect(checkbox).toHaveFocus();
userEvent.tab();
expect(number).toHaveFocus();
userEvent.tab();
expect(radio).toHaveFocus();
});
it("should respect dom order when tabindex are all the same", () => {
const { getAllByTestId } = render(
);
const [checkbox, radio, number] = getAllByTestId("element");
userEvent.tab();
expect(checkbox).toHaveFocus();
userEvent.tab();
expect(number).toHaveFocus();
userEvent.tab();
expect(radio).toHaveFocus();
userEvent.tab();
expect(checkbox).toHaveFocus();
});
it("should suport a mix of elements with/without tab index", () => {
const { getAllByTestId } = render(
);
const [checkbox, radio, number] = getAllByTestId("element");
userEvent.tab();
expect(checkbox).toHaveFocus();
userEvent.tab();
expect(number).toHaveFocus();
userEvent.tab();
expect(radio).toHaveFocus();
});
it("should not tab to with no href", () => {
const { getAllByTestId } = render(
);
const [checkbox, link] = getAllByTestId("element");
userEvent.tab();
expect(checkbox).toHaveFocus();
userEvent.tab();
expect(link).toHaveFocus();
});
it("should stay within a focus trab", () => {
const { getAllByTestId, getByTestId } = render(
<>
>
);
const [div1, div2] = [getByTestId("div1"), getByTestId("div2")];
const [
checkbox1,
radio1,
number1,
checkbox2,
radio2,
number2
] = getAllByTestId("element");
expect(document.body).toHaveFocus();
userEvent.tab({ focusTrap: div1 });
expect(checkbox1).toHaveFocus();
userEvent.tab({ focusTrap: div1 });
expect(radio1).toHaveFocus();
userEvent.tab({ focusTrap: div1 });
expect(number1).toHaveFocus();
userEvent.tab({ focusTrap: div1 });
// cycle goes back to first element
expect(checkbox1).toHaveFocus();
userEvent.tab({ focusTrap: div2 });
expect(checkbox2).toHaveFocus();
userEvent.tab({ focusTrap: div2 });
expect(radio2).toHaveFocus();
userEvent.tab({ focusTrap: div2 });
expect(number2).toHaveFocus();
userEvent.tab({ focusTrap: div2 });
// cycle goes back to first element
expect(checkbox2).toHaveFocus();
});
});