next: checkbox tests

packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte

@@ -12,7 +12,7 @@
 		disabled = false,
 		required = false,
 		name,
-		value,
+		value = "on",
 		el = $bindable(),
 		asChild,
 		child,

packages/bits-ui/src/tests/checkbox/Checkbox.spec.ts

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/svelte";
+import { render } from "@testing-library/svelte/svelte5";
 import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
@@ -9,11 +9,11 @@ import type { Checkbox } from "$lib/index.js";
 
 const kbd = getTestKbd();
 
-function setup(props?: Checkbox.Props) {
+function setup(props?: Checkbox.RootProps) {
 	const user = userEvent.setup();
 	const returned = render(CheckboxTest, props);
 	const root = returned.getByTestId("root");
-	const input = returned.getByTestId("input") as HTMLInputElement;
+	const input = document.querySelector("input") as HTMLInputElement;
 	return {
 		...returned,
 		root,
@@ -29,10 +29,18 @@ describe("checkbox", () => {
 	});
 
 	it("has bits data attrs", async () => {
-		const { getByTestId, root } = setup();
-		const indicator = getByTestId("indicator");
+		const { root } = setup();
 		expect(root).toHaveAttribute("data-checkbox-root");
-		expect(indicator).toHaveAttribute("data-checkbox-indicator");
+	});
+
+	it("doesn't render the checkbox input if a name prop isnt passed", async () => {
+		const { input } = setup();
+		expect(input).not.toBeInTheDocument();
+	});
+
+	it("renders the checkbox input if a name prop is passed", async () => {
+		const { input } = setup({ name: "checkbox" });
+		expect(input).toBeInTheDocument();
 	});
 
 	it('defaults the value to "on", when no value prop is passed', async () => {

packages/bits-ui/src/tests/checkbox/CheckboxTest.svelte

@@ -1,23 +1,16 @@
 <script lang="ts">
 	import { Checkbox } from "$lib/index.js";
 
-	type $$Props = Checkbox.Props;
-
-	export let checked: Checkbox.Props["checked"] = false;
+	let { checked = false, ...restProps }: Checkbox.RootProps = $props();
 </script>
 
 <main>
 	<p data-testid="binding">{checked}</p>
-	<Checkbox.Root data-testid="root" bind:checked {...$$restProps}>
-		<Checkbox.Indicator data-testid="indicator" let:isChecked let:isIndeterminate>
-			{#if isIndeterminate}
-				indeterminate
-			{:else if isChecked}
-				true
-			{:else}
-				false
-			{/if}
-		</Checkbox.Indicator>
-		<Checkbox.Input data-testid="input" />
+	<Checkbox.Root name="terms" data-testid="root" bind:checked {...restProps}>
+		{#snippet children({ checked })}
+			<span data-testid="indicator">
+				{checked}
+			</span>
+		{/snippet}
 	</Checkbox.Root>
 </main>