@octopusdeploy/design-system-components
Version:
The design systems component library.
126 lines (125 loc) • 6.9 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 vitest_axe_1 = require("vitest-axe");
const renderComponentTest_1 = require("../../../testing/renderComponentTest");
const Switch_1 = require("../Switch");
(0, vitest_1.describe)("Switch", () => {
(0, vitest_1.it)("renders the switch", () => {
const switchEl = renderSwitch({ value: false, label: "Enable feature", onChange: vitest_1.vi.fn() });
switchEl.assertIsInTheDocument();
});
(0, vitest_1.it)("renders the label", () => {
const switchEl = renderSwitch({ value: false, label: "Enable feature", onChange: vitest_1.vi.fn() });
switchEl.assertHasLabel("Enable feature");
});
(0, vitest_1.it)("calls onChange with true when toggled on", async () => {
const onChange = vitest_1.vi.fn();
const switchEl = renderSwitch({ value: false, label: "Enable feature", onChange });
await switchEl.toggle();
(0, vitest_1.expect)(onChange).toHaveBeenCalledWith(true);
});
(0, vitest_1.it)("calls onChange with false when toggled off", async () => {
const onChange = vitest_1.vi.fn();
const switchEl = renderSwitch({ value: true, label: "Enable feature", onChange });
await switchEl.toggle();
(0, vitest_1.expect)(onChange).toHaveBeenCalledWith(false);
});
(0, vitest_1.it)("is on when value prop is true", () => {
const switchEl = renderSwitch({ value: true, label: "Enable feature", onChange: vitest_1.vi.fn() });
switchEl.assertIsChecked();
});
(0, vitest_1.it)("is off when value prop provided is false", () => {
const switchEl = renderSwitch({ value: false, label: "Enable feature", onChange: vitest_1.vi.fn() });
switchEl.assertIsNotChecked();
});
(0, vitest_1.it)("is disabled when disabled prop is true", () => {
const switchEl = renderSwitch({ value: false, label: "Enable feature", onChange: vitest_1.vi.fn(), disabled: true });
switchEl.assertIsDisabled();
});
(0, vitest_1.it)("is enabled when disabled prop is false", () => {
const switchEl = renderSwitch({ value: false, label: "Enable feature", onChange: vitest_1.vi.fn(), disabled: false });
switchEl.assertIsEnabled();
});
(0, vitest_1.it)("does not call onChange when disabled", async () => {
const onChange = vitest_1.vi.fn();
const switchEl = renderSwitch({ value: false, label: "Enable feature", onChange, disabled: true });
await switchEl.toggle();
(0, vitest_1.expect)(onChange).not.toHaveBeenCalled();
});
(0, vitest_1.describe)("switch without label", () => {
(0, vitest_1.it)("renders with accessible name", () => {
const switchEl = renderSwitch({ value: false, accessibleName: "Toggle feature", onChange: vitest_1.vi.fn() });
switchEl.assertIsInTheDocument();
});
(0, vitest_1.it)("does not render visible label text", () => {
renderSwitch({ value: false, accessibleName: "Toggle feature", onChange: vitest_1.vi.fn() });
(0, vitest_1.expect)(react_1.screen.queryByText("Toggle feature")).not.toBeInTheDocument();
});
(0, vitest_1.it)("calls onChange when toggled", async () => {
const onChange = vitest_1.vi.fn();
const switchEl = renderSwitch({ value: false, accessibleName: "Toggle feature", onChange });
await switchEl.toggle();
(0, vitest_1.expect)(onChange).toHaveBeenCalledWith(true);
});
(0, vitest_1.it)("is disabled when disabled prop is true", () => {
const switchEl = renderSwitch({ value: false, accessibleName: "Toggle feature", onChange: vitest_1.vi.fn(), disabled: true });
switchEl.assertIsDisabled();
});
});
(0, vitest_1.describe)("accessibility", () => {
(0, vitest_1.it)("is accessible when off", async () => {
const { container } = renderSwitch({ value: false, label: "Enable feature", onChange: vitest_1.vi.fn() });
const results = await (0, vitest_axe_1.axe)(container.container);
(0, vitest_1.expect)(results).toHaveNoViolations();
});
(0, vitest_1.it)("is accessible when on", async () => {
const { container } = renderSwitch({ value: true, label: "Enable feature", onChange: vitest_1.vi.fn() });
const results = await (0, vitest_axe_1.axe)(container.container);
(0, vitest_1.expect)(results).toHaveNoViolations();
});
(0, vitest_1.it)("is accessible when disabled", async () => {
const { container } = renderSwitch({ value: false, label: "Enable feature", onChange: vitest_1.vi.fn(), disabled: true });
const results = await (0, vitest_axe_1.axe)(container.container);
(0, vitest_1.expect)(results).toHaveNoViolations();
});
(0, vitest_1.it)("is accessible without a label", async () => {
const { container } = renderSwitch({ value: false, accessibleName: "Toggle feature", onChange: vitest_1.vi.fn() });
const results = await (0, vitest_axe_1.axe)(container.container);
(0, vitest_1.expect)(results).toHaveNoViolations();
});
(0, vitest_1.it)("has proper label association", () => {
const switchEl = renderSwitch({ value: false, label: "Enable feature", onChange: vitest_1.vi.fn() });
switchEl.assertHasLabel("Enable feature");
});
(0, vitest_1.it)("has aria-checked set to true when on", () => {
const switchEl = renderSwitch({ value: true, label: "Enable feature", onChange: vitest_1.vi.fn() });
switchEl.assertIsChecked();
});
(0, vitest_1.it)("has aria-checked set to false when off", () => {
const switchEl = renderSwitch({ value: false, label: "Enable feature", onChange: vitest_1.vi.fn() });
switchEl.assertIsNotChecked();
});
});
});
function getAccessibleName(props) {
if ("label" in props && props.label)
return props.label;
if ("accessibleName" in props && props.accessibleName)
return props.accessibleName;
return "";
}
function renderSwitch(props) {
const result = (0, renderComponentTest_1.renderComponentTest)((0, jsx_runtime_1.jsx)(Switch_1.Switch, { ...props }));
const switchEl = testing_library_1.domQueries.getSwitch(getAccessibleName(props));
return {
...switchEl,
assertHasLabel: (expectedLabel) => {
(0, vitest_1.expect)(react_1.screen.getByLabelText(expectedLabel)).toBeInTheDocument();
},
container: result,
};
}