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";
|
||||
|
||||
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" />
|
||||
|
|
|
@ -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");
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue