import * as React from "react";
import { render, focus, press, click } from "reakit-test-utils";
import { CompositeItemProps, CompositeItem } from "../CompositeItem";
const props: CompositeItemProps = {
items: [
{ id: "1", ref: { current: null } },
{ id: "2", ref: { current: null } },
{ id: "3", ref: { current: null } },
],
currentId: "2",
setCurrentId: jest.fn(),
registerItem: jest.fn(),
unregisterItem: jest.fn(),
next: jest.fn(),
previous: jest.fn(),
up: jest.fn(),
down: jest.fn(),
first: jest.fn(),
last: jest.fn(),
};
test("render", () => {
const { container } = render();
expect(container).toMatchInlineSnapshot(`
`);
});
test("render current", () => {
const { container } = render();
expect(container).toMatchInlineSnapshot(`
`);
});
test("render without state props", () => {
// @ts-ignore
const { container } = render();
expect(container).toMatchInlineSnapshot(`
`);
});
test("interact without state props", () => {
// @ts-ignore
const { getByLabelText } = render();
const item = getByLabelText("item");
focus(item);
expect(item).toHaveFocus();
press.ArrowUp();
press.Delete();
click(item);
});
test("render aria-activedescendant", () => {
const { container } = render(
);
expect(container).toMatchInlineSnapshot(`
`);
});
test("render aria-activedescendant current", () => {
const { container } = render(
);
expect(container).toMatchInlineSnapshot(`
`);
});
test("do not re-render if item is not the current or the previous active one", () => {
const onRender = jest.fn();
const Test = React.memo((itemProps: CompositeItemProps) => {
React.useEffect(onRender);
return ;
}, CompositeItem.unstable_propsAreEqual);
const { rerender } = render();
expect(onRender).toHaveBeenCalledTimes(1);
rerender();
expect(onRender).toHaveBeenCalledTimes(2);
rerender();
expect(onRender).toHaveBeenCalledTimes(3);
rerender();
expect(onRender).toHaveBeenCalledTimes(3);
rerender();
expect(onRender).toHaveBeenCalledTimes(4);
rerender();
expect(onRender).toHaveBeenCalledTimes(5);
});