Test for #11256

packages/svelte/tests/runtime-legacy/samples/nested-component-bind-group/Flavour.svelte

@@ -0,0 +1,5 @@
+<label><input type=checkbox bind:group={$flavours} value={flavour}>{flavour}</label>
+<script>
+	import { flavours } from "./stores.js"
+	export let flavour
+</script>

packages/svelte/tests/runtime-legacy/samples/nested-component-bind-group/_config.js

@@ -0,0 +1,36 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, window }) {
+		const els = target.querySelectorAll('input');
+		assert.equal(els.length, 3);
+		const [input1, input2, input3] = els;
+		const event = new window.Event('change');
+
+    // I don't know why this is needed to set the checkboxes back to default (unchecked)
+		for (const input of els) {
+  		input.checked = false;
+		  await input.dispatchEvent(event);
+		}
+
+		assert.equal(input1.checked, false);
+		assert.equal(input2.checked, false);
+		assert.equal(input3.checked, false);
+
+		input3.checked = true;
+		await input3.dispatchEvent(event);
+		await Promise.resolve();
+
+		assert.equal(input1.checked, false);
+		assert.equal(input2.checked, false);
+		assert.equal(input3.checked, true);
+
+		input1.checked = true;
+		await input1.dispatchEvent(event);
+		await Promise.resolve();
+
+		assert.equal(input1.checked, true);
+		assert.equal(input2.checked, false);
+		assert.equal(input3.checked, true);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/nested-component-bind-group/main.svelte

@@ -0,0 +1,14 @@
+<script>
+	import Flavour from "./Flavour.svelte"
+	let menu = [
+		'Cookies and cream',
+		'Mint choc chip',
+		'Raspberry ripple'
+	];
+        let selection = [];
+        $: console.log(selection)
+</script>
+
+{#each menu as flavour}
+	<Flavour {flavour} bind:group={selection} />
+{/each}

packages/svelte/tests/runtime-legacy/samples/nested-component-bind-group/stores.js

@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+
+export const flavours = writable([]);
+
+flavours.subscribe(console.log)