66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
|
import React from "react";
|
||
|
|
import "@testing-library/jest-dom";
|
||
|
|
import { render, screen } from "@testing-library/react";
|
||
|
|
import userEvent from "@testing-library/user-event";
|
||
|
|
import { Provider } from "react-redux";
|
||
|
|
|
||
|
|
import { lightTheme } from "selectors/themeSelectors";
|
||
|
|
import { ThemeProvider } from "constants/DefaultTheme";
|
||
|
|
import store from "../../store";
|
||
|
|
import { MainContainerLayoutControl } from "./MainContainerLayoutControl";
|
||
|
|
|
||
|
|
function navigateWithArrowKeys(key: string, noOfPresses: number) {
|
||
|
|
for (let i = 0; i < noOfPresses; i++) {
|
||
|
|
userEvent.keyboard(key);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
describe("<MainContainerLayoutControl />", () => {
|
||
|
|
const getTestComponent = () => (
|
||
|
|
<ThemeProvider theme={lightTheme}>
|
||
|
|
<Provider store={store}>
|
||
|
|
<MainContainerLayoutControl />
|
||
|
|
</Provider>
|
||
|
|
</ThemeProvider>
|
||
|
|
);
|
||
|
|
|
||
|
|
it("Pressing tab should focus on the first component", () => {
|
||
|
|
render(getTestComponent());
|
||
|
|
userEvent.tab();
|
||
|
|
|
||
|
|
// Should focus on the first component
|
||
|
|
const tab = screen.getAllByRole("button")[0];
|
||
|
|
expect(tab).toHaveFocus();
|
||
|
|
});
|
||
|
|
|
||
|
|
it("{ArrowRight} should focus the next item", () => {
|
||
|
|
render(getTestComponent());
|
||
|
|
const tabs = screen.getAllByRole("button");
|
||
|
|
userEvent.tab();
|
||
|
|
|
||
|
|
navigateWithArrowKeys("{ArrowRight}", 1);
|
||
|
|
expect(tabs[1]).toHaveFocus();
|
||
|
|
|
||
|
|
// Focus back on the first element
|
||
|
|
userEvent.keyboard("{ArrowLeft}");
|
||
|
|
|
||
|
|
// Arrow Right after the last item should focus the first item again
|
||
|
|
navigateWithArrowKeys("{ArrowRight}", tabs.length);
|
||
|
|
expect(tabs[0]).toHaveFocus();
|
||
|
|
});
|
||
|
|
|
||
|
|
it("{ArrowLeft} should focus the next item", async () => {
|
||
|
|
render(getTestComponent());
|
||
|
|
const tabs = screen.getAllByRole("button");
|
||
|
|
userEvent.tab();
|
||
|
|
|
||
|
|
// Arrow Left on the First item should focus on the last item
|
||
|
|
navigateWithArrowKeys("{ArrowLeft}", 1);
|
||
|
|
expect(tabs[tabs.length - 1]).toHaveFocus();
|
||
|
|
|
||
|
|
navigateWithArrowKeys("{ArrowLeft}", tabs.length - 1);
|
||
|
|
|
||
|
|
expect(tabs[0]).toHaveFocus();
|
||
|
|
});
|
||
|
|
});
|