@octopusdeploy/design-system-components
Version:
The design systems component library.
158 lines (157 loc) • 7.28 kB
JavaScript
;
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 vitest_1 = require("vitest");
const ActionButton_1 = require("../ActionButton");
(0, vitest_1.describe)("ActionButton", () => {
const actionButtonTypes = {
[ActionButton_1.ActionButtonType.Primary]: "Primary",
[ActionButton_1.ActionButtonType.Secondary]: "Secondary",
[ActionButton_1.ActionButtonType.Ternary]: "Ternary",
[ActionButton_1.ActionButtonType.Save]: "Save",
[ActionButton_1.ActionButtonType.Delete]: "Delete",
};
const testCases = Object.entries(actionButtonTypes).map((value) => ({ type: value[0], name: value[1] }));
vitest_1.describe.each(testCases)("ActionButtonType.$name", ({ type }) => {
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
const actionButtonType = type;
(0, vitest_1.it)("shows the button label", () => {
const actionButton = renderActionButton({
type: actionButtonType,
label: "test label",
});
actionButton.shouldHaveText("test label");
});
(0, vitest_1.it)("shows the busy label when busy", async () => {
const { promise } = (0, testing_library_1.createControlledPromise)();
const actionButton = renderActionButton({
type: actionButtonType,
onClick: () => promise,
label: "Button",
busyLabel: "Busy",
});
await actionButton.click();
actionButton.shouldHaveText("Busy");
});
(0, vitest_1.it)("is disabled on click when the click handler is executing a promise", async () => {
const { promise } = (0, testing_library_1.createControlledPromise)();
const actionButton = renderActionButton({
type: actionButtonType,
onClick: () => promise,
});
await actionButton.click();
actionButton.shouldBeDisabled();
});
(0, vitest_1.it)("is enabled after click when the click handler finishes executing a promise", async () => {
const { promise, resolve } = (0, testing_library_1.createControlledPromise)();
const actionButton = renderActionButton({
type: actionButtonType,
onClick: () => promise,
});
await resolve();
actionButton.shouldBeEnabled();
});
(0, vitest_1.it)("is enabled after click when the click handler does not return a promise", async () => {
const actionButton = renderActionButton({
type: actionButtonType,
onClick: () => undefined,
});
await actionButton.click();
// This is a bit hacky to get around the current behaviour in ActionButton
// Even if onClick returns a non-promise, it wraps it in a promise and briefly sets the button to busy
// This wait can be removed once this behaviour is changed.
await actionButton.waitForButtonToBeEnabled();
actionButton.shouldBeEnabled();
});
(0, vitest_1.it)("is disabled when the disabled promise is executing", () => {
const { promise } = (0, testing_library_1.createControlledPromise)();
const actionButton = renderActionButton({
type: actionButtonType,
disabled: promise,
});
actionButton.shouldBeDisabled();
});
(0, vitest_1.it)("is enabled when the disabled promise is resolved", async () => {
const { promise, resolve } = (0, testing_library_1.createControlledPromise)();
const actionButton = renderActionButton({
type: actionButtonType,
disabled: promise,
});
await resolve();
actionButton.shouldBeEnabled();
});
(0, vitest_1.it)("is disabled when set as disabled", () => {
const actionButton = renderActionButton({
type: actionButtonType,
disabled: true,
});
actionButton.shouldBeDisabled();
});
(0, vitest_1.it)("is not disabled when not set as disabled", () => {
const actionButton = renderActionButton({
type: actionButtonType,
disabled: false,
});
actionButton.shouldBeEnabled();
});
(0, vitest_1.it)("has the title", () => {
const actionButton = renderActionButton({
type: actionButtonType,
title: "test title",
});
actionButton.shouldHaveTitle("test title");
});
(0, vitest_1.it)("uses the label as the title if no title is specified", () => {
const actionButton = renderActionButton({
type: actionButtonType,
label: "test label",
});
actionButton.shouldHaveTitle("test label");
});
(0, vitest_1.it)("has the correct tabindex", () => {
const actionButton = renderActionButton({
type: actionButtonType,
tabIndex: -1,
});
actionButton.shouldHaveTabIndex(-1);
});
});
});
const testButtonName = "Test";
function renderActionButton({ type, label = testButtonName, onClick, disabled, title, busyLabel, tabIndex }) {
(0, react_1.render)((0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { type: type, label: label, onClick: onClick, disabled: disabled, title: title, accessibleName: testButtonName, busyLabel: busyLabel, tabIndex: tabIndex }));
return getActionButtonInteractions();
}
function getActionButtonInteractions() {
return {
click: async () => {
await testing_library_1.domQueries.getButton(testButtonName).click();
},
waitForButtonToBeEnabled: () => {
return (0, react_1.waitFor)(() => testing_library_1.domQueries.getButton(testButtonName).assertIsEnabled());
},
shouldHaveText: (text) => {
testing_library_1.domQueries.getButton(testButtonName).assertHasText(text);
},
shouldNotHaveText: (text) => {
testing_library_1.domQueries.getButton(testButtonName).assertDoesNotHaveText(text);
},
shouldHaveTitle: (title) => {
testing_library_1.domQueries.getButton(testButtonName).assertHasTitle(title);
},
shouldHaveNoTitle: () => {
testing_library_1.domQueries.getButton(testButtonName).assertHasNoTitle();
},
shouldBeEnabled: () => {
testing_library_1.domQueries.getButton(testButtonName).assertIsEnabled();
},
shouldBeDisabled: () => {
testing_library_1.domQueries.getButton(testButtonName).assertIsDisabled();
},
shouldHaveTabIndex: (tabIndex) => {
testing_library_1.domQueries.getButton(testButtonName).assertHasTabIndex(tabIndex);
},
};
}