diff --git a/src/lib/components/switch/Switch.svelte b/src/lib/components/switch/Switch.svelte index c03c9f4..779cdd9 100644 --- a/src/lib/components/switch/Switch.svelte +++ b/src/lib/components/switch/Switch.svelte @@ -14,7 +14,6 @@ import { useDescriptionContext } from "$lib/components/description/DescriptionProvider.svelte"; import { useId } from "$lib/hooks/use-id"; import { Keys } from "$lib/utils/keyboard"; - import { createEventDispatcher } from "svelte"; import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder"; import { get_current_component } from "svelte/internal"; import type { SupportedAs } from "$lib/internal/elements"; @@ -32,12 +31,7 @@ export let checked = false; /***** Events *****/ - const forwardEvents = forwardEventsBuilder(get_current_component(), [ - "change", - ]); - const dispatch = createEventDispatcher<{ - change: boolean; - }>(); + const forwardEvents = forwardEventsBuilder(get_current_component()); /***** Component *****/ let api = useSwitchContext(); @@ -47,7 +41,7 @@ $: switchStore = $api?.switchStore; function toggle() { - dispatch("change", !checked); + checked = !checked; } function handleClick(e: CustomEvent) { diff --git a/src/lib/components/switch/_ManagedSwitch.svelte b/src/lib/components/switch/_ManagedSwitch.svelte deleted file mode 100644 index c94bb44..0000000 --- a/src/lib/components/switch/_ManagedSwitch.svelte +++ /dev/null @@ -1,16 +0,0 @@ - - - (state = e.detail)} - on:change={onChange} -> - - diff --git a/src/lib/components/switch/switch.test.ts b/src/lib/components/switch/switch.test.ts index 93a68e1..3b9f432 100644 --- a/src/lib/components/switch/switch.test.ts +++ b/src/lib/components/switch/switch.test.ts @@ -7,15 +7,15 @@ import { getSwitchLabel, SwitchState, } from "$lib/test-utils/accessibility-assertions"; -import ManagedSwitch from "./_ManagedSwitch.svelte"; import { click, Keys, press } from "$lib/test-utils/interactions"; import svelte from "svelte-inline-compile"; +import { writable } from "svelte/store"; jest.mock("../../hooks/use-id"); describe("Safe guards", () => { it("should be possible to render a Switch without crashing", () => { render(svelte` - + `); }); }); @@ -23,7 +23,7 @@ describe("Safe guards", () => { describe("Rendering", () => { it('(on) Switch should have a slot prop', () => { render(svelte` - + {checked ? 'On' : 'Off'} `) @@ -33,7 +33,7 @@ describe("Rendering", () => { it('(off) Switch should have a slot prop', () => { render(svelte` - + {checked ? 'On' : 'Off'} `) @@ -43,21 +43,21 @@ describe("Rendering", () => { it("should be possible to render an (on) Switch using an `as` prop", () => { render(svelte` - + `); assertSwitch({ state: SwitchState.On, tag: "span" }); }); it("should be possible to render an (off) Switch using an `as` prop", () => { render(svelte` - + `); assertSwitch({ state: SwitchState.Off, tag: "span" }); }); it("should be possible to use the switch contents as the label", () => { render(svelte` - + Enable notifications `) @@ -67,7 +67,7 @@ describe("Rendering", () => { describe("`type` attribute", () => { it('should set the `type` to "button" by default', async () => { render(svelte` - Trigger + Trigger `); expect(getSwitch()).toHaveAttribute("type", "button"); @@ -75,7 +75,7 @@ describe("Rendering", () => { it('should not set the `type` to "button" if it already contains a `type`', async () => { render(svelte` - Trigger + Trigger `); expect(getSwitch()).toHaveAttribute("type", "submit"); @@ -83,7 +83,7 @@ describe("Rendering", () => { it('should not set the type if the "as" prop is not a "button"', async () => { render(svelte` - Trigger + Trigger `); expect(getSwitch()).not.toHaveAttribute("type"); @@ -95,7 +95,7 @@ describe("Render composition", () => { it("should be possible to render a Switch.Group, Switch and Switch.Label", () => { render(svelte` - + Enable notifications `); @@ -107,7 +107,7 @@ describe("Render composition", () => { render(svelte` Label B - Label A + Label A `); @@ -121,7 +121,7 @@ describe("Render composition", () => { it("should be possible to render a Switch.Group, Switch and Switch.Label (after the Switch)", () => { render(svelte` - Label A + Label A Label B `); @@ -137,7 +137,7 @@ describe("Render composition", () => { render(svelte` This is an important feature - + `); @@ -150,7 +150,7 @@ describe("Render composition", () => { it("should be possible to render a Switch.Group, Switch and Switch.Description (after the Switch)", () => { render(svelte` - + This is an important feature `); @@ -165,7 +165,7 @@ describe("Render composition", () => { render(svelte` Label A - + This is an important feature `); @@ -181,8 +181,9 @@ describe("Render composition", () => { describe("Keyboard interactions", () => { describe("`Space` key", () => { it("should be possible to toggle the Switch with Space", async () => { + let checked = writable(false); render(svelte` - + `); // Ensure checkbox is off @@ -207,9 +208,9 @@ describe("Keyboard interactions", () => { describe("`Enter` key", () => { it("should not be possible to use Enter to toggle the Switch", async () => { - let handleChange = jest.fn(); + let checked = writable(false); render(svelte` - + `); // Ensure checkbox is off @@ -221,7 +222,8 @@ describe("Keyboard interactions", () => { // Try to toggle await press(Keys.Enter); - expect(handleChange).not.toHaveBeenCalled(); + // Ensure state is still off + assertSwitch({ state: SwitchState.Off }); }); }); @@ -229,7 +231,7 @@ describe("Keyboard interactions", () => { it("should be possible to tab away from the Switch", async () => { render(svelte`
- +
`) @@ -254,8 +256,9 @@ describe("Keyboard interactions", () => { describe("Mouse interactions", () => { it("should be possible to toggle the Switch with a click", async () => { + let checked = writable(false); render(svelte` - + `); // Ensure checkbox is off @@ -275,9 +278,10 @@ describe("Mouse interactions", () => { }); it("should be possible to toggle the Switch with a click on the Label", async () => { + let checked = writable(false); render(svelte` - + The label `); @@ -305,9 +309,10 @@ describe("Mouse interactions", () => { }); it("should not be possible to toggle the Switch with a click on the Label (passive)", async () => { + let checked = writable(false); render(svelte` - + The label `);