@octopusdeploy/design-system-components
Version:
The design systems component library.
141 lines (140 loc) • 7.01 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 vitest_axe_1 = require("vitest-axe");
const TestDesignSystemProvider_1 = require("../../TestDesignSystemProvider");
const PageActions_1 = require("../PageActions");
(0, vitest_1.describe)("PageActions", () => {
(0, vitest_1.describe)("when action type is button", () => {
const label = "Primary Button";
const onClickCallback = vitest_1.vi.fn();
const buttonAction = {
type: "button",
label,
onClick: onClickCallback,
hasPermissions: true,
};
(0, vitest_1.it)("is accessible", async () => {
const pageActions = renderPageActions({ primaryAction: buttonAction });
await pageActions.assertIsAccessible();
});
(0, vitest_1.it)("shows button action if permission check passes", () => {
const pageActions = renderPageActions({ primaryAction: buttonAction });
pageActions.assertButtonIsInDocument(label);
});
(0, vitest_1.it)("disables the button action if permission check fails", () => {
const pageActions = renderPageActions({ primaryAction: { ...buttonAction, hasPermissions: false } });
pageActions.assertButtonIsDisabled(label);
});
(0, vitest_1.it)("should call onClick callback when the button is clicked", async () => {
const pageActions = renderPageActions({ primaryAction: buttonAction });
await pageActions.clickButton(label);
pageActions.assertButtonCallbackIsCalled(onClickCallback);
});
});
(0, vitest_1.describe)("when action type is navigate", () => {
const label = "Navigate Action";
const href = "/test";
const navigateAction = {
type: "navigate",
label,
buttonType: "secondary",
path: href,
hasPermissions: true,
};
(0, vitest_1.it)("is accessible", async () => {
const pageActions = renderPageActions({ actions: [navigateAction] });
await pageActions.assertIsAccessible();
});
(0, vitest_1.it)("shows navigate action with correct href if permission check passes", () => {
const pageActions = renderPageActions({ actions: [navigateAction] });
pageActions.assertLinkActionIsInDocument(label, href);
});
(0, vitest_1.it)("disables the navigate action if permission check fails", () => {
const pageActions = renderPageActions({ actions: [{ ...navigateAction, hasPermissions: false }] });
pageActions.assertLinkActionIsDisabled(label);
});
});
(0, vitest_1.describe)("when action type is custom", () => {
const label = "Custom Action";
const customAction = {
type: "custom",
key: "Custom Action",
content: (0, jsx_runtime_1.jsx)("button", { children: label }),
hasPermissions: true,
};
(0, vitest_1.it)("is accessible", async () => {
const pageActions = renderPageActions({ actions: [customAction] });
await pageActions.assertIsAccessible();
});
(0, vitest_1.it)("shows custom action if permission check passes", () => {
const pageActions = renderPageActions({ actions: [customAction] });
pageActions.assertButtonIsInDocument(label);
});
(0, vitest_1.it)("does not show dialog action if permission check fails", () => {
const pageActions = renderPageActions({ actions: [{ ...customAction, hasPermissions: false }] });
pageActions.assertButtonIsNotInDocument(label);
});
});
(0, vitest_1.describe)("when overflowActions is available", () => {
const overflowMenuItemLabel = "Item 1";
const overflowActions = [{ type: "internal-link", label: overflowMenuItemLabel, path: "/href-target" }];
(0, vitest_1.it)("is accessible", async () => {
const pageActions = renderPageActions({ overflowActions });
await pageActions.assertIsAccessible();
});
(0, vitest_1.it)("shows overflow button", () => {
const pageActions = renderPageActions({ overflowActions });
pageActions.assertButtonIsInDocument("overflow menu button");
});
(0, vitest_1.it)("shows overflow menu when the overflow button is clicked", async () => {
const pageActions = renderPageActions({ overflowActions });
pageActions.assertOverflowMenuIsNotInDocument();
await pageActions.clickButton("overflow menu button");
pageActions.assertOverflowMenuAndMenuItemIsInDocument(overflowMenuItemLabel);
});
});
});
function renderPageActions({ primaryAction, actions, overflowActions }) {
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { primaryAction: primaryAction, actions: actions, overflowActions: overflowActions }) }));
return getPageActionInteractions(container);
}
function getPageActionInteractions(container) {
return {
async assertIsAccessible() {
const results = await (0, vitest_axe_1.axe)(container);
(0, vitest_1.expect)(results).toHaveNoViolations();
},
assertButtonIsInDocument: (label) => {
testing_library_1.domQueries.getButton(label).assertIsInTheDocument();
},
assertButtonIsNotInDocument: (label) => {
testing_library_1.domQueries.queryButton(label).assertIsNotInTheDocument();
},
assertButtonIsDisabled: (label) => {
testing_library_1.domQueries.getButton(label).assertIsDisabled();
},
assertLinkActionIsInDocument: (label, href) => {
testing_library_1.domQueries.getLink(label).assertIsInTheDocument();
testing_library_1.domQueries.getLink(label).assertHref(href);
},
assertLinkActionIsDisabled: (label) => {
testing_library_1.domQueries.getLink(label).assertIsDisabled();
},
clickButton: async (label) => {
await testing_library_1.domQueries.getButton(label).click();
},
assertButtonCallbackIsCalled: (cb) => {
(0, vitest_1.expect)(cb).toHaveBeenCalled();
},
assertOverflowMenuAndMenuItemIsInDocument: (label) => {
testing_library_1.domQueries.getMenu(undefined).getMenuItem(label).assertIsInTheDocument();
},
assertOverflowMenuIsNotInDocument: () => {
testing_library_1.domQueries.queryMenu(undefined).assertIsNotInTheDocument();
},
};
}