test(toggle): add more tests

This commit is contained in:
Eric Liu 2025-08-16 11:07:06 -07:00
commit 6deed4ee3c
2 changed files with 131 additions and 1 deletions

View file

@ -2,6 +2,7 @@
import { Toggle } from "carbon-components-svelte";
let toggled = false;
let initialToggled = true;
</script>
<Toggle
@ -23,3 +24,14 @@
labelText="Hidden label toggle"
aria-label="Hidden label toggle"
/>
<Toggle
bind:toggled={initialToggled}
labelText="Initial toggled state"
name="test-toggle"
on:toggle={(e) => {
console.log("initial toggled:", e.detail.toggled);
}}
/>
<Toggle labelText="Custom name toggle" name="custom-name-toggle" />

View file

@ -63,7 +63,7 @@ describe("Toggle", () => {
}
});
it("handles keyboard interactions", async () => {
it("handles keyboard interactions (Space)", async () => {
const consoleLog = vi.spyOn(console, "log");
render(Toggle);
@ -78,4 +78,122 @@ describe("Toggle", () => {
expect(toggle).not.toBeChecked();
expect(consoleLog).toHaveBeenCalledWith("toggled:", false);
});
it("handles keyboard interactions (Enter)", async () => {
const consoleLog = vi.spyOn(console, "log");
render(Toggle);
const toggle = getToggle("Default toggle");
toggle.focus();
await user.keyboard("{Enter}");
expect(toggle).toBeChecked();
expect(consoleLog).toHaveBeenCalledWith("toggled:", true);
await user.keyboard("{Enter}");
expect(toggle).not.toBeChecked();
expect(consoleLog).toHaveBeenCalledWith("toggled:", false);
});
it("ignores other key presses", async () => {
const consoleLog = vi.spyOn(console, "log");
render(Toggle);
const toggle = getToggle("Default toggle");
toggle.focus();
await user.keyboard("a");
expect(toggle).not.toBeChecked();
expect(consoleLog).not.toHaveBeenCalled();
await user.keyboard("Tab");
expect(toggle).not.toBeChecked();
expect(consoleLog).not.toHaveBeenCalled();
});
it("supports custom name attribute", () => {
render(Toggle);
const toggle = getToggle("Custom name toggle");
expect(toggle).toHaveAttribute("name", "custom-name-toggle");
});
it("prevents default on space and enter keys", async () => {
render(Toggle);
const toggle = getToggle("Default toggle");
toggle.focus();
const spaceEvent = new KeyboardEvent("keyup", { key: " " });
const enterEvent = new KeyboardEvent("keyup", { key: "Enter" });
const spacePreventDefault = vi.spyOn(spaceEvent, "preventDefault");
const enterPreventDefault = vi.spyOn(enterEvent, "preventDefault");
toggle.dispatchEvent(spaceEvent);
toggle.dispatchEvent(enterEvent);
expect(spacePreventDefault).toHaveBeenCalled();
expect(enterPreventDefault).toHaveBeenCalled();
});
it("handles disabled state interactions", async () => {
const consoleLog = vi.spyOn(console, "log");
render(Toggle);
const toggle = getToggle("Disabled toggle");
expect(toggle).toBeDisabled();
await user.click(toggle);
expect(toggle).not.toBeChecked();
expect(consoleLog).not.toHaveBeenCalled();
toggle.focus();
await user.keyboard(" ");
expect(toggle).not.toBeChecked();
expect(consoleLog).not.toHaveBeenCalled();
});
it("supports initial toggled state", () => {
render(Toggle);
const defaultToggle = getToggle("Default toggle");
expect(defaultToggle).not.toBeChecked();
const initialToggle = getToggle("Initial toggled state");
expect(initialToggle).toBeChecked();
});
it("handles rapid clicking", async () => {
const consoleLog = vi.spyOn(console, "log");
render(Toggle);
const toggle = getToggle("Default toggle");
await user.click(toggle);
await user.click(toggle);
await user.click(toggle);
expect(toggle).toBeChecked();
expect(consoleLog).toHaveBeenCalledTimes(3);
});
it("visually hides label when hideLabel is true", () => {
render(Toggle);
const label = screen.getByText("Hidden label toggle");
expect(label).toHaveClass("bx--visually-hidden");
});
it("handles aria-label fallback correctly", () => {
render(Toggle);
// Test toggle without labelText but with aria-label.
const toggle = getToggle("Hidden label toggle");
expect(toggle).toHaveAccessibleName("Hidden label toggle");
// Test toggle without labelText and without aria-label (should fallback to "Toggle").
const defaultToggle = getToggle("Default toggle");
expect(defaultToggle).toHaveAccessibleName("Default toggle");
});
});