@octopusdeploy/design-system-components
Version:
The design systems component library.
110 lines (109 loc) • 6.56 kB
JavaScript
"use strict";
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 Button_1 = require("../Button");
(0, vitest_1.describe)("Button", () => {
const testCases = Button_1.buttonImportanceLevels.map((importance) => ({ importance }));
vitest_1.describe.each(testCases)("$importance button link", ({ importance: importanceString }) => {
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
const importance = importanceString;
(0, vitest_1.it)("is in the document", () => {
const button = renderButtonLink({ href: "/test-route", importance });
button.assertIsInTheDocument();
});
(0, vitest_1.it)("has the correct href for an internal link", () => {
const button = renderButtonLink({ href: "/test-route", importance });
button.assertHref("/test-route");
});
(0, vitest_1.it)("has the correct href for an external link", () => {
const button = renderButtonLink({ href: "http://octopus.com", importance, external: true });
button.assertHref("http://octopus.com");
});
(0, vitest_1.it)("should open in new window when set as external", () => {
const button = renderButtonLink({ href: "/test-route", importance, label: "test label", external: true });
button.assertWillOpenInNewWindow();
});
(0, vitest_1.it)("should open in current window when not set as external", () => {
const button = renderButtonLink({ href: "/test-route", importance, label: "test label", external: false });
button.assertWillOpenInCurrentWindow();
});
(0, vitest_1.it)("is disabled when set as disabled", () => {
const button = renderButtonLink({ href: "/test-route", importance, disabled: true });
button.assertIsDisabled();
});
(0, vitest_1.it)("is not disabled when not set as disabled", () => {
const button = renderButtonLink({ href: "/test-route", importance, disabled: false });
button.assertIsEnabled();
});
(0, vitest_1.it)("shows the label", () => {
const button = renderButtonLink({ href: "/test-route", importance, label: "test label" });
button.assertHasText("test label");
});
(0, vitest_1.it)("has the correct title", () => {
const button = renderButtonLink({ href: "/test-route", importance, title: "test title" });
button.assertHasTitle("test title");
});
(0, vitest_1.it)("has the correct tabindex", () => {
const button = renderButtonLink({ href: "/test-route", importance, tabIndex: -1 });
button.assertHasTabIndex(-1);
});
});
vitest_1.describe.each(testCases)("$importance basic button", ({ importance: importanceString }) => {
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
const importance = importanceString;
(0, vitest_1.it)("shows the label", () => {
const button = renderBasicButton({ importance, label: "test label" });
button.assertHasText("test label");
});
(0, vitest_1.it)("is disabled when set as disabled", () => {
const button = renderBasicButton({ importance, disabled: true });
button.assertIsDisabled();
});
(0, vitest_1.it)("is not disabled when not set as disabled", () => {
const button = renderBasicButton({ importance, disabled: false });
button.assertIsEnabled();
});
(0, vitest_1.it)("has the correct title", () => {
const button = renderBasicButton({ importance, title: "test title" });
button.assertHasTitle("test title");
});
(0, vitest_1.it)("uses the label as the title if no title is specified", () => {
const button = renderBasicButton({ importance, label: "test label" });
button.assertHasTitle("test label");
});
(0, vitest_1.it)("is disabled on click when the click handler is executing a promise", async () => {
const { promise } = (0, testing_library_1.createControlledPromise)();
const button = renderBasicButton({ importance, onClick: () => promise });
await button.click();
button.assertIsDisabled();
});
(0, vitest_1.it)("is enabled after the click handler finishes executing a promise", async () => {
const { promise, resolve } = (0, testing_library_1.createControlledPromise)();
const button = renderBasicButton({ importance, onClick: () => promise });
await button.click();
await resolve();
button.assertIsEnabled();
});
(0, vitest_1.it)("has the correct tabindex", () => {
const button = renderBasicButton({ importance, tabIndex: -1 });
button.assertHasTabIndex(-1);
});
(0, vitest_1.it)("is focused when autoFocus is set", () => {
const button = renderBasicButton({ importance, autoFocus: true });
button.assertHasFocus();
});
});
});
const testButtonName = "Test";
function renderButtonLink({ importance, href, label = testButtonName, onClick, disabled, title, external, tabIndex }) {
(0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { importance: importance, href: href, label: label, onClick: onClick, disabled: disabled, title: title, accessibleName: testButtonName, external: external, tabIndex: tabIndex }) }));
return testing_library_1.domQueries.getLink(testButtonName);
}
function renderBasicButton({ importance, label = testButtonName, onClick, disabled, title, tabIndex, autoFocus }) {
(0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { importance: importance, label: label, onClick: onClick ?? vi.fn(), disabled: disabled, title: title, accessibleName: testButtonName, tabIndex: tabIndex, autoFocus: autoFocus }) }));
return testing_library_1.domQueries.getButton(testButtonName);
}