update tests

packages/svelte/tests/runtime-runes/samples/async-each-await-item/_config.js

@@ -1,42 +1,35 @@
 import { flushSync, tick } from 'svelte';
-import { deferred } from '../../../../src/internal/shared/utils.js';
 import { test } from '../../test';
 
-/** @type {Array<ReturnType<typeof deferred>>} */
-let items = [];
-
 export default test({
-	html: `<p>pending</p>`,
+	html: `<button>step 1</button><button>step 2</button><button>step 3</button><p>pending</p>`,
-
-	get props() {
-		items = [deferred(), deferred(), deferred()];
 
-		return {
+	async test({ assert, target }) {
-			items
+		const [button1, button2, button3] = target.querySelectorAll('button');
-		};
-	},
 
-	async test({ assert, target, component }) {
+		flushSync(() => button1.click());
-		items[0].resolve('a');
-		items[1].resolve('b');
-		items[2].resolve('c');
 		await Promise.resolve();
 		await Promise.resolve();
 		await tick();
 		flushSync();
-		assert.htmlEqual(target.innerHTML, '<p>a</p><p>b</p><p>c</p>');
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>step 1</button><button>step 2</button><button>step 3</button><p>a</p><p>b</p><p>c</p>'
+		);
 
-		items = [deferred(), deferred(), deferred(), deferred()];
+		flushSync(() => button2.click());
-		component.items = items;
 		await tick();
-		assert.htmlEqual(target.innerHTML, '<p>a</p><p>b</p><p>c</p>');
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>step 1</button><button>step 2</button><button>step 3</button><p>a</p><p>b</p><p>c</p>'
+		);
 
-		items[0].resolve('b');
+		flushSync(() => button3.click());
-		items[1].resolve('c');
-		items[2].resolve('d');
-		items[3].resolve('e');
 		await Promise.resolve();
 		await tick();
-		assert.htmlEqual(target.innerHTML, '<p>b</p><p>c</p><p>d</p><p>e</p>');
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>step 1</button><button>step 2</button><button>step 3</button><p>b</p><p>c</p><p>d</p><p>e</p>'
+		);
 	}
 });

packages/svelte/tests/runtime-runes/samples/async-each-await-item/main.svelte

@@ -1,7 +1,33 @@
 <script>
-	let { items } = $props();
+	let items = $state([
+		Promise.withResolvers(),
+		Promise.withResolvers(),
+		Promise.withResolvers()
+	]);
 </script>
 
+<button onclick={() => {
+	items[0].resolve('a');
+	items[1].resolve('b');
+	items[2].resolve('c');
+}}>step 1</button>
+
+<button onclick={() => {
+	items = [
+		Promise.withResolvers(),
+		Promise.withResolvers(),
+		Promise.withResolvers(),
+		Promise.withResolvers()
+	]
+}}>step 2</button>
+
+<button onclick={() => {
+	items[0].resolve('b');
+	items[1].resolve('c');
+	items[2].resolve('d');
+	items[3].resolve('e');
+}}>step 3</button>
+
 <svelte:boundary>
 	{#each items as deferred}
 		<p>{await deferred.promise}</p>