@octopusdeploy/design-system-components
Version:
The design systems component library.
77 lines (76 loc) • 3.05 kB
JavaScript
;
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 react_1 = require("@testing-library/react");
const user_event_1 = __importDefault(require("@testing-library/user-event"));
const react_2 = __importDefault(require("react"));
const vitest_1 = require("vitest");
const vitest_axe_1 = require("vitest-axe");
const Tab_1 = require("../Tab");
const Tabs_1 = require("../Tabs");
(0, vitest_1.describe)("Tabs", () => {
(0, vitest_1.test)("renders content when open", () => {
const { interactions } = renderTabs();
interactions.assertFirstTabContentIsVisible();
});
(0, vitest_1.test)("shows second tab content when second tab is clicked", async () => {
const { interactions } = renderTabs();
await interactions.assertSecondTabContentIsVisible();
});
});
const content = {
first: "This is the content inside the first tab",
second: "This is the content inside the second tab",
third: "This is the content inside the third tab",
};
function isTabKey(value) {
return typeof value === "string" && Object.keys(content).includes(value);
}
function getTabContent(key) {
return content[key];
}
const tabs = [
{
label: "First Tab",
value: "first",
},
{
label: "Second Tab",
value: "second",
},
{
label: "Third Tab",
value: "third",
},
];
function renderTabs() {
function TabsWrapper() {
const [activeTab, setActiveTab] = react_2.default.useState("first");
return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { value: activeTab, variant: "scrollable", scrollButtons: undefined, onChange: (_, value) => {
if (isTabKey(value)) {
setActiveTab(value);
}
}, children: [tabs.map((tab) => ((0, jsx_runtime_1.jsx)(Tab_1.Tab, { label: tab.label, value: tab.value }, tab.value))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: getTabContent(activeTab) })] }));
}
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TabsWrapper, {}));
const interactions = getTabsInteractions(container);
return { container, interactions };
}
function getTabsInteractions(container) {
return {
tabShouldBeAccessible: async () => {
const results = await (0, vitest_axe_1.axe)(container);
(0, vitest_1.expect)(results).toHaveNoViolations();
},
assertFirstTabContentIsVisible: () => {
(0, vitest_1.expect)(react_1.screen.getByText(content.first)).toBeInTheDocument();
},
assertSecondTabContentIsVisible: async () => {
await user_event_1.default.click(react_1.screen.getByRole("tab", { name: "Second Tab" }));
(0, vitest_1.expect)(react_1.screen.getByText(content.second)).toBeInTheDocument();
},
};
}