simplify the two tests

packages/svelte/tests/runtime-runes/samples/async-branch-commit-order/_config.js

@@ -1,30 +1,26 @@
 import { tick } from 'svelte';
 import { test } from '../../test';
 
-const buttons =
+const buttons = '<button>a</button><button>b</button><button>shift</button>';
-	'<button>a</button><button>b</button><button>resolve a1</button><button>resolve b1</button>';
 
 export default test({
 	async test({ assert, target }) {
 		await tick();
-		const [a, b, resolve_a1, resolve_b1] = target.querySelectorAll('button');
+		const [a, b, shift] = target.querySelectorAll('button');
-
-		assert.htmlEqual(target.innerHTML, `<p>0</p><p>0</p>${buttons}`);
 
 		// batch A waits on its key; batch B registers its key right away
 		a.click();
 		await tick();
 		b.click();
 		await tick();
-		assert.htmlEqual(target.innerHTML, `<p>0</p><p>0</p>${buttons}`);
 
 		// the older batch commits first
-		resolve_a1.click();
+		shift.click();
 		await tick();
 		assert.htmlEqual(target.innerHTML, `<p>0</p><p>1</p>${buttons}`);
 
 		// the newer batch commits with its own branch
-		resolve_b1.click();
+		shift.click();
 		await tick();
 		assert.htmlEqual(target.innerHTML, `<p>1</p><p>B</p>${buttons}`);
 	}

packages/svelte/tests/runtime-runes/samples/async-branch-commit-order/main.svelte

@@ -3,22 +3,17 @@
 	let b = $state(0);
 	let pend = false;
 
-	const pending = new Map();
+	const deferred = [];
 
-	function delay(key, value) {
+	function delay(value) {
 		if (!pend) return value;
-		return new Promise((resolve) => pending.set(key, () => resolve(value)));
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
 	}
 
-	function resolve(key) {
+	const k = $derived(b === 0 ? await delay(a) : 'B');
-		pending.get(key)();
-		pending.delete(key);
-	}
-
-	const k = $derived(b === 0 ? await delay(`a${a}`, a) : 'B');
 </script>
 
-<p>{await delay(`b${b}`, b)}</p>
+<p>{await delay(b)}</p>
 
 {#key k}
 	<p>{k}</p>
@@ -26,5 +21,4 @@
 
 <button onclick={() => { pend = true; a = 1; }}>a</button>
 <button onclick={() => { pend = true; b = 1; }}>b</button>
-<button onclick={() => resolve('a1')}>resolve a1</button>
+<button onclick={() => deferred.shift()()}>shift</button>
-<button onclick={() => resolve('b1')}>resolve b1</button>

packages/svelte/tests/runtime-runes/samples/async-merge-blocking-pending/_config.js

@@ -1,37 +1,33 @@
 import { tick } from 'svelte';
 import { test } from '../../test';
 
-const buttons =
+const buttons = '<button>x</button><button>toggle</button><button>pop</button>';
-	'<button>X</button><button>Y</button><button>Z</button><button>W</button><button>resolve e</button><button>resolve x1</button>';
 
 export default test({
-	async test({ assert, target, logs }) {
+	async test({ assert, target }) {
 		await tick();
-		const [X, Y, Z, W, resolve_e, resolve_x1] = target.querySelectorAll('button');
+		const [x, toggle, pop] = target.querySelectorAll('button');
-
-		assert.htmlEqual(target.innerHTML, `<p>n = 0</p><p>x = 0</p>${buttons}`);
 
 		// X is deferred on its own await
-		X.click();
+		x.click();
 		await tick();
 		// Y is deferred on the await inside the new branch
-		Y.click();
+		toggle.click();
 		await tick();
 		// Z hides that branch again, merges into Y, which merges into X
-		Z.click();
+		toggle.click();
 		await tick();
 		assert.htmlEqual(target.innerHTML, `<p>n = 0</p><p>x = 0</p>${buttons}`);
-		assert.deepEqual(logs, ['delay x0', 'delay x1', 'delay e']);
 
 		// the branch's await resolves while it is hidden
-		resolve_e.click();
+		pop.click();
 		await tick();
 		// W shows the branch again and merges into X
-		W.click();
+		toggle.click();
 		await tick();
 
 		// nothing is pending any more, so X commits
-		resolve_x1.click();
+		pop.click();
 		await tick();
 		assert.htmlEqual(target.innerHTML, `<p>n = 4</p><p>x = 1</p><p>cond: e</p>${buttons}`);
 	}

packages/svelte/tests/runtime-runes/samples/async-merge-blocking-pending/main.svelte

@@ -4,25 +4,19 @@
 	let cond = $state(false);
 	let pend = false;
 
-	const pending = new Map();
+	const deferred = [];
 
-	function delay(key, value) {
+	function delay(value) {
-		console.log(`delay ${key}`);
 		if (!pend) return value;
-		return new Promise((resolve) => pending.set(key, () => resolve(value)));
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
-	}
-
-	function resolve(key) {
-		pending.get(key)();
-		pending.delete(key);
 	}
 </script>
 
 <svelte:boundary>
 	<p>n = {n}</p>
-	<p>x = {await delay(`x${x}`, x)}</p>
+	<p>x = {await delay(x)}</p>
 	{#if cond}
-		<p>cond: {await delay('e', 'e')}</p>
+		<p>cond: {await delay('e')}</p>
 	{/if}
 
 	{#snippet pending()}
@@ -30,9 +24,6 @@
 	{/snippet}
 </svelte:boundary>
 
-<button onclick={() => { pend = true; n++; x = 1; }}>X</button>
+<button onclick={() => { pend = true; n++; x = 1; }}>x</button>
-<button onclick={() => { n++; cond = true; }}>Y</button>
+<button onclick={() => { n++; cond = !cond; }}>toggle</button>
-<button onclick={() => { n++; cond = false; }}>Z</button>
+<button onclick={() => deferred.pop()()}>pop</button>
-<button onclick={() => { n++; cond = true; }}>W</button>
-<button onclick={() => resolve('e')}>resolve e</button>
-<button onclick={() => resolve('x1')}>resolve x1</button>