@octopusdeploy/design-system-components
Version:
The design systems component library.
104 lines (103 loc) • 6.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
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 Button_1 = require("../../Button");
const TestDesignSystemProvider_1 = require("../../TestDesignSystemProvider");
const SideNavBar_1 = require("../SideNavBar");
(0, vitest_1.describe)("SideNavBar", () => {
(0, vitest_1.it)("renders a tabs when provided for top items", () => {
const navigationSideBar = renderNavigationSideBar({ topItems: [{ type: "link", href: "/foo", label: "foo", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.CogIcon, { size: 24 }) }], bottomItems: [] });
navigationSideBar.assertHasTab("foo");
});
(0, vitest_1.it)("uses accessible name for link when provided", () => {
const navigationSideBar = renderNavigationSideBar({ topItems: [{ type: "link", href: "/foo", label: "foo", accessibleName: "accessible name", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.CogIcon, { size: 24 }) }], bottomItems: [] });
navigationSideBar.assertHasTab("accessible name");
});
(0, vitest_1.it)("renders a link when provided for bottom items", () => {
const navigationSideBar = renderNavigationSideBar({ topItems: [], bottomItems: [{ type: "link", href: "/foo", label: "foo", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.CogIcon, { size: 24 }) }] });
navigationSideBar.assertHasTab("foo");
});
(0, vitest_1.it)("renders a custom when provided for bottom items", () => {
const navigationSideBar = renderNavigationSideBar({
topItems: [],
bottomItems: [
{
type: "custom",
key: "custom-key",
content: ((0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Foo", importance: "primary", onClick: () => {
return;
} })),
},
],
});
navigationSideBar.assertHasCustomButton("foo");
});
(0, vitest_1.it)("is accessible", async () => {
const navigationSideBar = renderNavigationSideBar({ topItems: [{ type: "link", href: "/foo", label: "foo", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.CogIcon, { size: 24 }) }], bottomItems: [{ type: "link", href: "/bar", label: "bar", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.CogIcon, { size: 24 }) }] });
await navigationSideBar.assertIsAccessible();
});
(0, vitest_1.describe)("isVisible prop", () => {
(0, vitest_1.it)("hides links in topItems when isVisible is false", () => {
const navigationSideBar = renderNavigationSideBar({
topItems: [
{ type: "link", href: "/visible", label: "Visible Link", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.CogIcon, { size: 24 }), isVisible: true },
{ type: "link", href: "/hidden", label: "Hidden Link", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.CogIcon, { size: 24 }), isVisible: false },
],
bottomItems: [],
});
navigationSideBar.assertHasTab("Visible Link");
navigationSideBar.assertDoesNotHaveTab("Hidden Link");
});
(0, vitest_1.it)("hides links in bottomItems when isVisible is false", () => {
const navigationSideBar = renderNavigationSideBar({
topItems: [],
bottomItems: [
{ type: "link", href: "/visible", label: "Visible Link", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.CogIcon, { size: 24 }), isVisible: true },
{ type: "link", href: "/hidden", label: "Hidden Link", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.CogIcon, { size: 24 }), isVisible: false },
],
});
navigationSideBar.assertHasTab("Visible Link");
navigationSideBar.assertDoesNotHaveTab("Hidden Link");
});
(0, vitest_1.it)("shows links when isVisible is true", () => {
const navigationSideBar = renderNavigationSideBar({
topItems: [{ type: "link", href: "/foo", label: "Visible Link", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.CogIcon, { size: 24 }), isVisible: true }],
bottomItems: [],
});
navigationSideBar.assertHasTab("Visible Link");
});
(0, vitest_1.it)("shows links by default when isVisible is not specified", () => {
const navigationSideBar = renderNavigationSideBar({
topItems: [{ type: "link", href: "/foo", label: "Default Visible", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.CogIcon, { size: 24 }) }],
bottomItems: [],
});
navigationSideBar.assertHasTab("Default Visible");
});
});
});
function renderNavigationSideBar({ topItems, bottomItems }) {
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(SideNavBar_1.SideNavBar, { topItems: topItems, bottomItems: bottomItems }) }));
return getInteractions(container);
}
function getInteractions(container) {
return {
assertHasTab(name) {
testing_library_1.domQueries.getLink(name).assertIsInTheDocument();
},
assertDoesNotHaveTab(name) {
testing_library_1.domQueries.queryLink(name).assertIsNotInTheDocument();
},
async assertIsAccessible() {
const results = await (0, vitest_axe_1.axe)(container);
(0, vitest_1.expect)(results).toHaveNoViolations();
},
assertHasCustomButton(accessibleName) {
testing_library_1.domQueries.getButton(accessibleName).assertIsInTheDocument();
},
};
}