102 lines
3.2 KiB
TypeScript
102 lines
3.2 KiB
TypeScript
import React from "react";
|
|
import {
|
|
fireEvent,
|
|
queryAllByRole,
|
|
render,
|
|
screen,
|
|
waitFor,
|
|
} from "@testing-library/react";
|
|
import EditIcon from "@material-ui/icons/Edit";
|
|
import DeleteIcon from "@material-ui/icons/Delete";
|
|
import AddIcon from "@material-ui/icons/Add";
|
|
import {
|
|
CandidatePosition,
|
|
getIconForPosition,
|
|
} from "../components/CandidatePositionLegend";
|
|
import MenuIcon from "@material-ui/icons/Menu";
|
|
|
|
const memoizedGetIconPath = (icon: JSX.Element) => {
|
|
const cache: { path?: string } = {};
|
|
return (): string => {
|
|
if (cache?.path) {
|
|
return cache.path;
|
|
} else {
|
|
const { container } = render(icon);
|
|
const path = container.innerHTML.match(/<path d="(.*)">/)?.[1];
|
|
if (!path) {
|
|
throw `Could not get path of MUI ${icon.type.displayName}`;
|
|
}
|
|
cache.path = path;
|
|
return path;
|
|
}
|
|
};
|
|
};
|
|
|
|
const getEditIconPath = memoizedGetIconPath(<EditIcon />);
|
|
const getMenuIconPath = memoizedGetIconPath(<MenuIcon />);
|
|
const getDeleteIconPath = memoizedGetIconPath(<DeleteIcon />);
|
|
const getAddIconPath = memoizedGetIconPath(<AddIcon />);
|
|
export const getPositivePositionPath = memoizedGetIconPath(
|
|
getIconForPosition(CandidatePosition.positive)
|
|
);
|
|
export const getNeutralPositionPath = memoizedGetIconPath(
|
|
getIconForPosition(CandidatePosition.neutral)
|
|
);
|
|
export const getNegativePositionPath = memoizedGetIconPath(
|
|
getIconForPosition(CandidatePosition.negative)
|
|
);
|
|
export const getSkippedPositionPath = memoizedGetIconPath(
|
|
getIconForPosition(CandidatePosition.skipped)
|
|
);
|
|
|
|
// sorry, I found no better way to find a specific icon button...
|
|
export const queryAllIconButtons = (
|
|
iconPath: string,
|
|
container?: HTMLElement
|
|
): HTMLElement[] => {
|
|
return (
|
|
container
|
|
? queryAllByRole(container, "button")
|
|
: screen.queryAllByRole("button")
|
|
).filter(
|
|
(button) =>
|
|
button.innerHTML.includes("svg") && button.innerHTML.includes(iconPath)
|
|
);
|
|
};
|
|
|
|
export const queryAllEditIconButtons = (
|
|
container?: HTMLElement
|
|
): Array<HTMLElement> => queryAllIconButtons(getEditIconPath(), container);
|
|
|
|
const queryAllDeleteIconButtons = (
|
|
container?: HTMLElement
|
|
): Array<HTMLElement> => queryAllIconButtons(getDeleteIconPath(), container);
|
|
|
|
export const queryAllAddIconButtons = (
|
|
container?: HTMLElement
|
|
): Array<HTMLElement> => queryAllIconButtons(getAddIconPath(), container);
|
|
|
|
export const queryAllMenuIconButtons = (
|
|
container?: HTMLElement
|
|
): Array<HTMLElement> => queryAllIconButtons(getMenuIconPath(), container);
|
|
|
|
export const expandAccordionAndGetIconButtons = async (
|
|
accordion: HTMLElement
|
|
): Promise<{ editIconButton: HTMLElement; deleteIconButton: HTMLElement }> => {
|
|
let editIconsButtons = queryAllDeleteIconButtons();
|
|
let deleteIconsButtons = queryAllEditIconButtons();
|
|
expect(editIconsButtons).toHaveLength(0);
|
|
expect(deleteIconsButtons).toHaveLength(0);
|
|
fireEvent.click(accordion);
|
|
await waitFor(() => {
|
|
editIconsButtons = queryAllEditIconButtons();
|
|
deleteIconsButtons = queryAllDeleteIconButtons();
|
|
expect(editIconsButtons).toHaveLength(1);
|
|
expect(deleteIconsButtons).toHaveLength(1);
|
|
});
|
|
return {
|
|
editIconButton: editIconsButtons[0],
|
|
deleteIconButton: deleteIconsButtons[0],
|
|
};
|
|
};
|