@octopusdeploy/design-system-components
Version:
The design systems component library.
124 lines (123 loc) • 5.83 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 ErrorSummary_1 = require("../ErrorSummary");
(0, vitest_1.describe)("ErrorSummary", () => {
(0, vitest_1.describe)("message", () => {
(0, vitest_1.it)("renders the message as a heading", () => {
const { assertMessageVisible } = renderErrorPanel({ message: "Something went wrong", details: [] });
assertMessageVisible("Something went wrong");
});
});
(0, vitest_1.describe)("details", () => {
(0, vitest_1.it)("renders a single detail as a description, not a list", () => {
const { assertDetailVisible, assertListAbsent } = renderErrorPanel({
message: "An error occurred",
details: [{ text: "The name field is required" }],
});
assertDetailVisible("The name field is required");
assertListAbsent();
});
(0, vitest_1.it)("renders multiple details as an ordered list", () => {
const { assertListVisible } = renderErrorPanel({
message: "Validation issues",
details: [{ text: "First error" }, { text: "Second error" }, { text: "Third error" }],
});
assertListVisible(["First error", "Second error", "Third error"]);
});
(0, vitest_1.it)("renders a detail link alongside the detail text", () => {
const { assertDetailVisible, assertDetailLinkVisible } = renderErrorPanel({
message: "An error occurred",
details: [{ text: "Active Directory integration failed", link: "https://octopus.com/docs" }],
});
assertDetailVisible("Active Directory integration failed");
assertDetailLinkVisible();
});
(0, vitest_1.it)("renders nothing for a detail with no text", () => {
const { assertDetailAbsent } = renderErrorPanel({
message: "An error occurred",
details: [{ link: "https://octopus.com/docs" }],
});
assertDetailAbsent();
});
});
(0, vitest_1.describe)("help", () => {
(0, vitest_1.it)("renders a help link when only help link is provided", () => {
const { assertHelpLinkVisible, assertViewDetailsAbsent } = renderErrorPanel({
message: "An error occurred",
details: [],
help: { link: "https://octopus.com/docs" },
});
assertHelpLinkVisible();
assertViewDetailsAbsent();
});
(0, vitest_1.it)("renders a view details toggle when only help text is provided", () => {
const { assertViewDetailsVisible, assertHelpLinkAbsent } = renderErrorPanel({
message: "An error occurred",
details: [],
help: { text: "This is a known issue with Windows Server 2008 R2." },
});
assertViewDetailsVisible();
assertHelpLinkAbsent();
});
(0, vitest_1.it)("renders a view details toggle containing both text and a link when both are provided", () => {
const { assertViewDetailsVisible, assertHelpLinkVisible } = renderErrorPanel({
message: "An error occurred",
details: [],
help: { text: "This is a known issue with Windows Server 2008 R2.", link: "https://octopus.com/docs" },
});
assertViewDetailsVisible();
assertHelpLinkVisible();
});
});
(0, vitest_1.describe)("accessibility", () => {
(0, vitest_1.it)("has role alert", () => {
const { assertHasAlertRole } = renderErrorPanel({ message: "An error occurred", details: [] });
assertHasAlertRole();
});
});
});
function renderErrorPanel(error) {
(0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(ErrorSummary_1.ErrorSummary, { error: error }) }));
return interactions;
}
const interactions = {
assertMessageVisible(message) {
testing_library_1.domQueries.getText(message).assertIsInTheDocument();
},
assertDetailVisible(text) {
testing_library_1.domQueries.getText(text).assertIsInTheDocument();
},
assertDetailAbsent() {
testing_library_1.domQueries.queryLink("More info")?.assertIsNotInTheDocument();
},
assertDetailLinkVisible() {
testing_library_1.domQueries.getLink("More info").assertIsInTheDocument();
},
assertListVisible(expectedItems) {
const items = testing_library_1.domQueries.getList(undefined).getListItems();
expect(items.map((item) => item.textContent)).toEqual(expectedItems);
},
assertListAbsent() {
testing_library_1.domQueries.queryList(undefined)?.assertIsNotInTheDocument();
},
assertHelpLinkVisible() {
testing_library_1.domQueries.getLink("More info").assertIsInTheDocument();
},
assertHelpLinkAbsent() {
testing_library_1.domQueries.queryLink("More info")?.assertIsNotInTheDocument();
},
assertViewDetailsVisible() {
testing_library_1.domQueries.getText("View details").assertIsInTheDocument();
},
assertViewDetailsAbsent() {
testing_library_1.domQueries.queryText("View details")?.assertIsNotInTheDocument();
},
assertHasAlertRole() {
testing_library_1.domQueries.getAlertWithContent("An error occurred").isInTheDocument();
},
};