@octopusdeploy/design-system-components
Version:
The design systems component library.
151 lines (150 loc) • 7.13 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const testing_library_1 = require("@octopusdeploy/testing-library");
const react_1 = require("@testing-library/react");
const react_2 = __importDefault(require("react"));
const vitest_1 = require("vitest");
const DeprecatedIconButton_1 = require("../DeprecatedIconButton");
(0, vitest_1.describe)("DeprecatedIconButton", () => {
DeprecatedIconButton_1.IconButtonIcons.forEach((icon) => {
(0, vitest_1.describe)(`when the predefined icon "${icon}" is used`, () => {
(0, vitest_1.it)("renders an icon button", () => {
const iconButton = renderPredefinedIconButton(icon);
iconButton.assertIsInTheDocument();
});
(0, vitest_1.it)("can be clicked", async () => {
const iconButton = renderPredefinedIconButton(icon);
await iconButton.click();
iconButton.assertButtonClicked();
});
(0, vitest_1.it)("can be disabled", () => {
const iconButton = renderPredefinedIconButton(icon, { disabled: true });
iconButton.assertButtonIsDisabled();
});
(0, vitest_1.it)("can disable keyboard focus", () => {
const iconButton = renderPredefinedIconButton(icon, { keyboardFocusable: false });
iconButton.assertButtonKeyboardFocusDisabled();
});
(0, vitest_1.it)("is not focused by default", async () => {
const iconButton = renderPredefinedIconButton(icon);
await iconButton.assertIsNotFocused();
});
(0, vitest_1.it)("can be focused imperatively", async () => {
const iconButton = renderCustomIconButton();
iconButton.focusImperatively();
await iconButton.assertIsFocused();
});
});
});
(0, vitest_1.describe)("with custom icon", () => {
(0, vitest_1.it)("renders an icon button", () => {
const iconButton = renderCustomIconButton();
iconButton.assertIsInTheDocument();
});
(0, vitest_1.it)("can be clicked", async () => {
const iconButton = renderCustomIconButton();
await iconButton.click();
iconButton.assertButtonClicked();
});
(0, vitest_1.it)("can be disabled", () => {
const iconButton = renderCustomIconButton({ disabled: true });
iconButton.assertButtonIsDisabled();
});
(0, vitest_1.it)("renders the provided custom icon", () => {
const iconButton = renderCustomIconButton();
iconButton.assertHasCustomIcon();
});
(0, vitest_1.it)("can disable keyboard focus", () => {
const iconButton = renderCustomIconButton({ keyboardFocusable: false });
iconButton.assertButtonKeyboardFocusDisabled();
});
(0, vitest_1.it)("is not focused by default", async () => {
const iconButton = renderCustomIconButton();
await iconButton.assertIsNotFocused();
});
(0, vitest_1.it)("can be focused imperatively", async () => {
const iconButton = renderCustomIconButton();
iconButton.focusImperatively();
await iconButton.assertIsFocused();
});
});
});
function renderPredefinedIconButton(icon, { disabled, keyboardFocusable } = {}) {
const ref = react_2.default.createRef();
const onClick = vitest_1.vi.fn();
(0, react_1.render)((0, jsx_runtime_1.jsx)(DeprecatedIconButton_1.DeprecatedIconButton, { icon: icon, onClick: onClick, disabled: disabled, tabIndex: keyboardFocusable === false ? -1 : 1, ref: ref }));
const focus = ref.current;
if (!focus) {
throw new Error("The ref for the icon button was not set");
}
return getIconButtonInteractions(icon, onClick, ref.current);
}
function renderCustomIconButton({ disabled, keyboardFocusable } = {}) {
const ref = react_2.default.createRef();
const accessibleName = "Test Icon Button";
const onClick = vitest_1.vi.fn();
(0, react_1.render)((0, jsx_runtime_1.jsx)(DeprecatedIconButton_1.DeprecatedIconButton, { customIcon: CustomIcon, onClick: onClick, disabled: disabled, tabIndex: keyboardFocusable === false ? -1 : 1, accessibleName: accessibleName, ref: ref }));
const focus = ref.current;
if (!focus) {
throw new Error("The ref for custom icon button was not set");
}
return getCustomIconButtonInteractions(accessibleName, onClick, focus);
}
function getIconButtonInteractions(accessibleName, onClick, focus) {
const interactions = {
click: async () => {
await testing_library_1.domQueries.getButton(accessibleName).click();
},
assertIsInTheDocument: () => {
testing_library_1.domQueries.getButton(accessibleName).assertIsInTheDocument();
},
assertButtonClicked: () => {
(0, vitest_1.expect)(onClick).toHaveBeenCalled();
},
assertButtonIsDisabled: () => {
testing_library_1.domQueries.getButton(accessibleName).assertIsDisabled();
},
assertButtonKeyboardFocusDisabled: () => {
(0, vitest_1.expect)(testing_library_1.domQueries.getButton(accessibleName).innerElement.tabIndex).toBe(-1);
},
assertIsNotFocused: async () => {
const element = (0, testing_library_1.getActiveElement)();
await element.click();
//TODO: not modifiers are causing some type errors at the moment. Replace this
//with expect(onClick).not.toHaveBeenCalled() when this is fixed.
(0, vitest_1.expect)(onClick).toHaveBeenCalledTimes(0);
},
assertIsFocused: async () => {
const element = (0, testing_library_1.getActiveElement)();
await element.click();
(0, vitest_1.expect)(onClick).toHaveBeenCalledTimes(1);
},
focusImperatively: () => {
(0, react_1.act)(() => focus.focus());
},
};
return interactions;
}
function getCustomIconButtonInteractions(accessibleName, onClick, focus) {
return {
...getIconButtonInteractions(accessibleName, onClick, focus),
assertHasCustomIcon: () => {
(0, vitest_1.expect)(react_1.screen.getByText(CustomIconText)).toBeInTheDocument();
},
};
}
function getIconButtonWithPatchInteractions(accessibleName, onClick, focus) {
return {
...getIconButtonInteractions(accessibleName, onClick, focus),
assertHasPathIcon() {
(0, vitest_1.expect)(react_1.screen.getByAltText(PathAlternateText)).toBeInTheDocument();
},
};
}
const CustomIconText = "Test Icon";
const CustomIcon = (0, jsx_runtime_1.jsx)("h1", { children: "Test Icon" });
const PathAlternateText = "Path Icon";