@octopusdeploy/design-system-components
Version:
The design systems component library.
300 lines (299 loc) • 13.4 kB
JavaScript
"use strict";
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 user_event_1 = __importDefault(require("@testing-library/user-event"));
const vitest_1 = require("vitest");
const vitest_axe_1 = require("vitest-axe");
const TestDesignSystemProvider_1 = require("../../TestDesignSystemProvider");
const InlineMessage_1 = require("../InlineMessage");
(0, vitest_1.describe)("InlineMessage", () => {
(0, vitest_1.describe)("rendering", () => {
(0, vitest_1.it)("renders with description only", () => {
const message = renderInlineMessage({
type: "information",
description: "Test description",
});
message.shouldHaveDescription("Test description");
message.shouldNotHaveTitle();
});
(0, vitest_1.it)("renders with title and description", () => {
const message = renderInlineMessage({
type: "information",
title: "Test Title",
description: "Test description",
});
message.shouldHaveTitle("Test Title");
message.shouldHaveDescription("Test description");
});
vitest_1.it.each(InlineMessage_1.inlineMessageTypes)("renders %s type message", (type) => {
const message = renderInlineMessage({
type,
description: `Test ${type} message`,
});
message.shouldHaveDescription(`Test ${type} message`);
message.shouldBeInTheDocument();
});
});
(0, vitest_1.describe)("action button", () => {
(0, vitest_1.it)("renders action button when action with onClick is provided", () => {
const onClick = vitest_1.vi.fn();
const message = renderInlineMessage({
type: "information",
description: "Test description",
action: {
label: "Click Me",
onClick,
},
});
message.shouldHaveActionButton("Click Me");
});
});
(0, vitest_1.describe)("action link (internal)", () => {
(0, vitest_1.it)("renders internal action link when action with href is provided", () => {
const message = renderInlineMessage({
type: "information",
description: "Test description",
action: {
label: "Learn More",
href: "/internal-link",
},
});
message.shouldHaveActionLink("Learn More", "/internal-link");
});
});
(0, vitest_1.describe)("action link (external)", () => {
(0, vitest_1.it)("renders external action link when action with href and external is provided", () => {
const message = renderInlineMessage({
type: "information",
description: "Test description",
action: {
label: "External Link",
href: "https://example.com",
external: true,
},
});
message.shouldHaveActionLink("External Link", "https://example.com");
});
(0, vitest_1.it)("opens in new window for external link", () => {
const message = renderInlineMessage({
type: "information",
description: "Test description",
action: {
label: "External Link",
href: "https://example.com",
external: true,
},
});
message.shouldOpenInNewWindow("External Link");
});
(0, vitest_1.it)("renders external link with trackAnalytics set to true", () => {
const message = renderInlineMessage({
type: "information",
description: "Test description",
action: {
label: "External Link",
href: "https://example.com",
external: true,
trackAnalytics: true,
},
});
message.shouldHaveActionLink("External Link", "https://example.com");
});
(0, vitest_1.it)("renders external link with trackAnalytics set to false", () => {
const message = renderInlineMessage({
type: "information",
description: "Test description",
action: {
label: "External Link",
href: "https://example.com",
external: true,
trackAnalytics: false,
},
});
message.shouldHaveActionLink("External Link", "https://example.com");
});
});
(0, vitest_1.describe)("accessibility", () => {
(0, vitest_1.it)("is accessible with description only", async () => {
const message = renderInlineMessage({
type: "information",
description: "Test description",
});
await message.shouldBeAccessible();
});
(0, vitest_1.it)("is accessible with title and description", async () => {
const message = renderInlineMessage({
type: "information",
title: "Test Title",
description: "Test description",
});
await message.shouldBeAccessible();
});
(0, vitest_1.it)("is accessible with action button", async () => {
const message = renderInlineMessage({
type: "information",
description: "Test description",
action: {
label: "Click Me",
onClick: vitest_1.vi.fn(),
},
});
await message.shouldBeAccessible();
});
(0, vitest_1.it)("is accessible with internal action link", async () => {
const message = renderInlineMessage({
type: "information",
description: "Test description",
action: {
label: "Learn More",
href: "/internal-link",
},
});
await message.shouldBeAccessible();
});
(0, vitest_1.it)("is accessible with external action link", async () => {
const message = renderInlineMessage({
type: "information",
description: "Test description",
action: {
label: "External Link",
href: "https://example.com",
external: true,
},
});
await message.shouldBeAccessible();
});
});
(0, vitest_1.describe)("message types", () => {
(0, vitest_1.it)("renders information type message", () => {
const message = renderInlineMessage({
type: "information",
description: "Information message",
});
message.shouldHaveDescription("Information message");
});
(0, vitest_1.it)("renders warning type message", () => {
const message = renderInlineMessage({
type: "warning",
description: "Warning message",
});
message.shouldHaveDescription("Warning message");
});
(0, vitest_1.it)("renders danger type message", () => {
const message = renderInlineMessage({
type: "danger",
description: "Danger message",
});
message.shouldHaveDescription("Danger message");
});
(0, vitest_1.it)("renders feature type message", () => {
const message = renderInlineMessage({
type: "feature",
description: "Feature message",
});
message.shouldHaveDescription("Feature message");
});
(0, vitest_1.it)("renders upsell type message", () => {
const message = renderInlineMessage({
type: "upsell",
description: "Upsell message",
});
message.shouldHaveDescription("Upsell message");
});
});
});
function renderInlineMessage({ type, title, description, action }) {
const actionProps = action
? action.onClick
? { label: action.label, onClick: action.onClick }
: action.external && action.href
? {
label: action.label,
href: action.href,
external: true,
trackAnalytics: action.trackAnalytics,
}
: action.href
? {
label: action.label,
href: action.href,
}
: undefined
: undefined;
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(InlineMessage_1.InlineMessage, { type: type, title: title, description: description, action: actionProps }) }));
return getInlineMessageInteractions(container, description);
}
function getInlineMessageInteractions(container, description) {
return {
shouldBeInTheDocument: () => {
(0, vitest_1.expect)(react_1.screen.getByText(description)).toBeInTheDocument();
},
shouldHaveDescription: (expectedDescription) => {
(0, vitest_1.expect)(react_1.screen.getByText(expectedDescription)).toBeInTheDocument();
},
shouldHaveTitle: (expectedTitle) => {
(0, vitest_1.expect)(react_1.screen.getByText(expectedTitle)).toBeInTheDocument();
},
shouldNotHaveTitle: () => {
// Check that description exists but no title paragraph with bold styling exists
// Title is rendered as a bold paragraph, description is regular
const descriptionElement = react_1.screen.getByText(description);
(0, vitest_1.expect)(descriptionElement).toBeInTheDocument();
// The title would be a sibling paragraph before the description
// Since we can't easily distinguish, we just verify the description is present
// and there's no title text in the document (other than what might be in description)
},
shouldHaveIcon: () => {
// Icons are SVG elements rendered within the component
// We verify the component structure by checking that the description is present
// and the component container exists (which includes the icon)
const descriptionElement = react_1.screen.getByText(description);
(0, vitest_1.expect)(descriptionElement).toBeInTheDocument();
// The icon is part of the component structure, so if description renders, icon container exists
},
shouldHaveActionButton: (label) => {
const button = react_1.screen.getByRole("button", { name: label });
(0, vitest_1.expect)(button).toBeInTheDocument();
},
shouldNotHaveAction: () => {
// Check that no action button or link exists
// We verify by checking that buttons/links don't appear in the document
// (excluding any that might be from TestDesignSystemProvider)
const allButtons = react_1.screen.queryAllByRole("button");
const allLinks = react_1.screen.queryAllByRole("link");
// In a simple test scenario, if there are no action buttons/links,
// these arrays should be empty (or only contain provider-related elements)
// For a more precise check, we verify the description is present and no action elements follow it
(0, vitest_1.expect)(allButtons.length).toBe(0);
(0, vitest_1.expect)(allLinks.length).toBe(0);
},
shouldHaveActionLink: (label, href) => {
const link = testing_library_1.domQueries.getLink(label);
link.assertIsInTheDocument();
link.assertHref(href);
},
shouldOpenInNewWindow: (label) => {
const link = testing_library_1.domQueries.getLink(label);
link.assertWillOpenInNewWindow();
},
shouldOpenInCurrentWindow: (label) => {
const link = testing_library_1.domQueries.getLink(label);
link.assertWillOpenInCurrentWindow();
},
clickActionButton: async () => {
// Find the button by looking for any button in the document
// In our test scenarios, the action button is the only button
const button = react_1.screen.getByRole("button");
await user_event_1.default.click(button);
},
shouldBeAccessible: async () => {
const results = await (0, vitest_axe_1.axe)(container);
(0, vitest_1.expect)(results).toHaveNoViolations();
},
};
}