add test

packages/svelte/tests/runtime-runes/samples/async-overlapping-array-2/_config.js

@@ -0,0 +1,62 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		await tick();
+
+		const [increment, shift] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<div>1</div>
+				<div>2</div>
+				<div>3</div>
+			`
+		);
+
+		assert.deepEqual(logs, ['updating']);
+
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+
+		assert.deepEqual(logs, ['updating', 'updating', 'updating']);
+
+		shift.click();
+		shift.click();
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<div>2</div>
+				<div>3</div>
+				<div>4</div>
+			`
+		);
+
+		shift.click();
+		shift.click();
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<div>3</div>
+				<div>4</div>
+				<div>5</div>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-overlapping-array-2/main.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	let items = $state([1, 2, 3])
+	let queue: Array<() => void> = [];
+
+	function push(value: number) {
+		return new Promise((fulfil) => {
+			queue.push(() => fulfil(value));
+		});
+	}
+
+	function shift() {
+		queue.shift()?.();
+	}
+
+	let array = $derived.by(() => {
+		console.log('updating');
+		return items;
+	});
+
+	queueMicrotask(() => {
+		shift();
+		shift();
+		shift();
+	});
+</script>
+
+<button onclick={() => items = items.map((n) => n + 1)}>increment</button>
+<button onclick={shift}>shift</button>
+
+{#each array as item}
+	<div>{await push(item)}</div>
+{/each}