update test

Author: Rich-Harris

packages/svelte/tests/runtime-runes/samples/effect-active-derived/_config.js

@@ -2,12 +2,40 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
-	html: `<button>toggle (false)</button>`,
+	html: `
+		<button>toggle outer</button>
+		<button>toggle inner</button>
+		<button>reset</button>
+	`,
 
 	test({ assert, target }) {
-		const btn = target.querySelector('button');
-		flushSync(() => btn?.click());
+		const [outer, inner, reset] = target.querySelectorAll('button');
 
-		assert.htmlEqual(target.innerHTML, `<button>toggle (true)</button><p>bar is true</p>`);
+		flushSync(() => outer?.click());
+		flushSync(() => inner?.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>toggle outer</button>
+				<button>toggle inner</button>
+				<button>reset</button>
+				<p>v is true</p>
+			`
+		);
+
+		flushSync(() => reset?.click());
+		flushSync(() => inner?.click());
+		flushSync(() => outer?.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>toggle outer</button>
+				<button>toggle inner</button>
+				<button>reset</button>
+				<p>v is true</p>
+			`
+		);
 	}
 });

packages/svelte/tests/runtime-runes/samples/effect-active-derived/main.svelte

@@ -1,6 +1,5 @@
 <script>
 	let value = $state(false);
-
 	const fn = () => {
 		if ($effect.active()) {
 			$effect(() => {
@@ -10,14 +9,23 @@
 		return value;
 	};
 
-	let foo = $state(false)
-	let bar = $derived(foo ? fn() : false);
+	let outer = $state(false);
+	let inner = $state(false);
+	let v = $derived(inner ? fn() : false);
 </script>
 
-<button onclick={() => foo = !foo}>
-	toggle ({foo})
+<button onclick={() => outer = !outer}>
+	toggle outer
+</button>
+
+<button onclick={() => inner = !inner}>
+	toggle inner
+</button>
+
+<button onclick={() => outer = inner = value = false}>
+	reset
 </button>
 
-{#if bar}
-	<p>bar is true</p>
+{#if outer && v}
+	<p>v is true</p>
 {/if}