mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
test(toggle): add more tests
This commit is contained in:
parent
7b0e6f8b69
commit
6deed4ee3c
2 changed files with 131 additions and 1 deletions
|
@ -2,6 +2,7 @@
|
||||||
import { Toggle } from "carbon-components-svelte";
|
import { Toggle } from "carbon-components-svelte";
|
||||||
|
|
||||||
let toggled = false;
|
let toggled = false;
|
||||||
|
let initialToggled = true;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Toggle
|
<Toggle
|
||||||
|
@ -23,3 +24,14 @@
|
||||||
labelText="Hidden label toggle"
|
labelText="Hidden label toggle"
|
||||||
aria-label="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" />
|
||||||
|
|
|
@ -63,7 +63,7 @@ describe("Toggle", () => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
it("handles keyboard interactions", async () => {
|
it("handles keyboard interactions (Space)", async () => {
|
||||||
const consoleLog = vi.spyOn(console, "log");
|
const consoleLog = vi.spyOn(console, "log");
|
||||||
render(Toggle);
|
render(Toggle);
|
||||||
|
|
||||||
|
@ -78,4 +78,122 @@ describe("Toggle", () => {
|
||||||
expect(toggle).not.toBeChecked();
|
expect(toggle).not.toBeChecked();
|
||||||
expect(consoleLog).toHaveBeenCalledWith("toggled:", false);
|
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");
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue