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 ALabel 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
`);