@octopusdeploy/design-system-components
Version:
The design systems component library.
114 lines (113 loc) • 6.03 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 TestDesignSystemProvider_1 = require("../../TestDesignSystemProvider");
const CardGroup_1 = require("../CardGroup");
const deploymentItems = [
{ value: "kubernetes", title: "Deploy to Kubernetes", description: "Deploy containers to a Kubernetes cluster" },
{ value: "aws", title: "Deploy to AWS", description: "Deploy to Amazon Web Services" },
{ value: "azure", title: "Deploy to Azure", description: "Deploy to Microsoft Azure" },
];
(0, vitest_1.describe)("CardGroup", () => {
(0, vitest_1.describe)("single-select", () => {
(0, vitest_1.it)("renders cards with radio inputs", () => {
const group = renderSingleSelectCardGroup({ value: "kubernetes", onChange: () => { } });
group.assertHasRadio("Deploy to Kubernetes");
group.assertHasRadio("Deploy to AWS");
group.assertHasRadio("Deploy to Azure");
});
(0, vitest_1.it)("uses radiogroup role with the groupName as the accessible label", () => {
const group = renderSingleSelectCardGroup({ value: "kubernetes", onChange: () => { } });
group.assertIsRadioGroup();
});
(0, vitest_1.it)("marks the card matching the value prop as selected", () => {
const group = renderSingleSelectCardGroup({ value: "aws", onChange: () => { } });
group.assertRadioIsSelected("Deploy to AWS");
});
(0, vitest_1.it)("calls onChange with the selected card's value", async () => {
const onChange = vitest_1.vi.fn();
const group = renderSingleSelectCardGroup({ value: "kubernetes", onChange });
await group.selectCard("Deploy to AWS");
(0, vitest_1.expect)(onChange).toHaveBeenCalledWith("aws");
});
});
(0, vitest_1.describe)("multi-select", () => {
(0, vitest_1.it)("renders cards with checkbox inputs", () => {
const group = renderMultiSelectCardGroup({ value: [], onChange: () => { } });
group.assertHasCheckbox("Deploy to Kubernetes");
group.assertHasCheckbox("Deploy to AWS");
group.assertHasCheckbox("Deploy to Azure");
});
(0, vitest_1.it)("adds a value when an unchecked card is selected", async () => {
const onChange = vitest_1.vi.fn();
const group = renderMultiSelectCardGroup({ value: ["kubernetes"], onChange });
await group.toggleCard("Deploy to AWS");
(0, vitest_1.expect)(onChange).toHaveBeenCalledWith(["kubernetes", "aws"]);
});
(0, vitest_1.it)("removes a value when an already-checked card is toggled off", async () => {
const onChange = vitest_1.vi.fn();
const group = renderMultiSelectCardGroup({ value: ["kubernetes", "aws"], onChange });
await group.toggleCard("Deploy to Kubernetes");
(0, vitest_1.expect)(onChange).toHaveBeenCalledWith(["aws"]);
});
});
(0, vitest_1.describe)("action", () => {
(0, vitest_1.it)("renders all action cards", () => {
const items = [
{ title: "Deploy to Kubernetes", description: "Deploy containers to a Kubernetes cluster", primaryAction: { label: "Add step", onClick: vitest_1.vi.fn() } },
{ title: "Deploy to AWS", description: "Deploy to Amazon Web Services" },
];
const group = renderActionCardGroup(items);
group.assertHasCard("Deploy to Kubernetes");
group.assertHasCard("Deploy to AWS");
});
});
});
function renderSingleSelectCardGroup(props) {
(0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(CardGroup_1.CardGroup, { type: "single-select", items: deploymentItems, value: props.value, onChange: props.onChange, groupName: "deployment-targets" }) }));
return createSingleSelectCardGroupInteractions();
}
function renderMultiSelectCardGroup(props) {
(0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(CardGroup_1.CardGroup, { type: "multi-select", items: deploymentItems, value: props.value, onChange: props.onChange, groupName: "deployment-targets" }) }));
return createMultiSelectCardGroupInteractions();
}
function renderActionCardGroup(items) {
(0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(CardGroup_1.CardGroup, { type: "action", items: items }) }));
return createActionCardGroupInteractions();
}
function createSingleSelectCardGroupInteractions() {
return {
assertHasRadio(title) {
testing_library_1.domQueries.getRadioButton(title).assertIsInTheDocument();
},
assertIsRadioGroup() {
testing_library_1.domQueries.getRadioButtonGroup("deployment-targets").assertIsInTheDocument();
},
assertRadioIsSelected(title) {
testing_library_1.domQueries.getRadioButton(title).assertIsSelected();
},
async selectCard(title) {
await testing_library_1.domQueries.getRadioButton(title).click();
},
};
}
function createMultiSelectCardGroupInteractions() {
return {
assertHasCheckbox(title) {
testing_library_1.domQueries.getCheckbox(title).assertIsInTheDocument();
},
async toggleCard(title) {
await testing_library_1.domQueries.getCheckbox(title).toggle();
},
};
}
function createActionCardGroupInteractions() {
return {
assertHasCard(title) {
testing_library_1.domQueries.getText(title).assertIsInTheDocument();
},
};
}