124 lines
3.5 KiB
TypeScript
124 lines
3.5 KiB
TypeScript
import React from "react";
|
|
import "@testing-library/jest-dom";
|
|
import { render, screen } from "@testing-library/react";
|
|
import { ThemeProvider } from "constants/DefaultTheme";
|
|
import ButtonTabComponent from "./ButtonTabComponent";
|
|
import { lightTheme } from "selectors/themeSelectors";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { noop } from "lodash";
|
|
|
|
const options = [
|
|
{
|
|
icon: "BOLD_FONT",
|
|
value: "BOLD",
|
|
},
|
|
{
|
|
icon: "ITALICS_FONT",
|
|
value: "ITALICS",
|
|
},
|
|
{
|
|
icon: "UNDERLINE",
|
|
value: "UNDERLINE",
|
|
},
|
|
];
|
|
|
|
describe("<ButtonTabComponent />", () => {
|
|
const getTestComponent = (
|
|
handleOnSelect: any = undefined,
|
|
values: Array<string> = [],
|
|
) => (
|
|
<ThemeProvider theme={lightTheme}>
|
|
<ButtonTabComponent
|
|
options={options}
|
|
selectButton={handleOnSelect}
|
|
values={values}
|
|
/>
|
|
</ThemeProvider>
|
|
);
|
|
|
|
it("passed value should be selected", () => {
|
|
const firstItem = options[0];
|
|
render(getTestComponent(noop, [firstItem.value]));
|
|
|
|
expect(screen.getByRole("tab", { selected: true })).toHaveClass(
|
|
`t--button-tab-${firstItem.value}`,
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("<ButtonTabComponent /> - Keyboard Navigation", () => {
|
|
const getTestComponent = (handleOnSelect: any = undefined) => (
|
|
<ThemeProvider theme={lightTheme}>
|
|
<ButtonTabComponent
|
|
options={options}
|
|
selectButton={handleOnSelect}
|
|
values={[]}
|
|
/>
|
|
</ThemeProvider>
|
|
);
|
|
|
|
it("Pressing tab should focus the component", () => {
|
|
render(getTestComponent());
|
|
userEvent.tab();
|
|
expect(screen.getByRole("tablist")).toHaveFocus();
|
|
|
|
// Should focus first Item
|
|
screen.getAllByRole("tab").forEach((tab, i) => {
|
|
if (i === 0) expect(tab).toHaveClass("focused");
|
|
else expect(tab).not.toHaveClass("focused");
|
|
});
|
|
});
|
|
|
|
it("{ArrowRight} should focus the next item", () => {
|
|
render(getTestComponent());
|
|
userEvent.tab();
|
|
|
|
userEvent.keyboard("{ArrowRight}");
|
|
screen.getAllByRole("tab").forEach((tab, i) => {
|
|
if (i === 1) expect(tab).toHaveClass("focused");
|
|
else expect(tab).not.toHaveClass("focused");
|
|
});
|
|
|
|
// ArrowRight after the last item should focus the first item again
|
|
userEvent.keyboard("{ArrowRight}");
|
|
userEvent.keyboard("{ArrowRight}");
|
|
screen.getAllByRole("tab").forEach((tab, i) => {
|
|
if (i === 0) expect(tab).toHaveClass("focused");
|
|
else expect(tab).not.toHaveClass("focused");
|
|
});
|
|
});
|
|
|
|
it("{ArrowLeft} should focus the previous item", () => {
|
|
render(getTestComponent());
|
|
userEvent.tab();
|
|
|
|
userEvent.keyboard("{ArrowLeft}");
|
|
screen.getAllByRole("tab").forEach((tab, i) => {
|
|
if (i === 2) expect(tab).toHaveClass("focused");
|
|
else expect(tab).not.toHaveClass("focused");
|
|
});
|
|
|
|
userEvent.keyboard("{ArrowLeft}");
|
|
screen.getAllByRole("tab").forEach((tab, i) => {
|
|
if (i === 1) expect(tab).toHaveClass("focused");
|
|
else expect(tab).not.toHaveClass("focused");
|
|
});
|
|
});
|
|
|
|
it("{Enter} or ' ' should trigger click event for the focused item", () => {
|
|
const handleClick = jest.fn();
|
|
render(getTestComponent(handleClick));
|
|
userEvent.tab();
|
|
|
|
userEvent.keyboard("{ArrowRight}");
|
|
userEvent.keyboard("{Enter}");
|
|
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
expect(handleClick).toHaveBeenLastCalledWith(options[1].value);
|
|
|
|
userEvent.keyboard("{ArrowRight}");
|
|
userEvent.keyboard("{Enter}");
|
|
expect(handleClick).toHaveBeenCalledTimes(2);
|
|
expect(handleClick).toHaveBeenLastCalledWith(options[2].value);
|
|
});
|
|
});
|