better test

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

@@ -5,7 +5,7 @@ export default test({
 	async test({ assert, target }) {
 		await tick();
 
-		const [add, shift] = target.querySelectorAll('button');
+		const [add, shift, pop] = target.querySelectorAll('button');
 
 		add.click();
 		await tick();
@@ -19,6 +19,7 @@ export default test({
 			`
 				<button>add</button>
 				<button>shift</button>
+				<button>pop</button>
 				<p>pending=6 values.length=1 values=[1]</p>
 				<div>not keyed:
 					<div>1</div>
@@ -38,6 +39,7 @@ export default test({
 			`
 				<button>add</button>
 				<button>shift</button>
+				<button>pop</button>
 				<p>pending=4 values.length=2 values=[1,2]</p>
 				<div>not keyed:
 					<div>1</div>
@@ -59,6 +61,7 @@ export default test({
 			`
 				<button>add</button>
 				<button>shift</button>
+				<button>pop</button>
 				<p>pending=2 values.length=3 values=[1,2,3]</p>
 				<div>not keyed:
 					<div>1</div>
@@ -82,6 +85,7 @@ export default test({
 			`
 				<button>add</button>
 				<button>shift</button>
+				<button>pop</button>
 				<p>pending=0 values.length=4 values=[1,2,3,4]</p>
 				<div>not keyed:
 					<div>1</div>
@@ -97,5 +101,105 @@ export default test({
 				</div>
 			`
 		);
+
+		add.click();
+		await tick();
+		add.click();
+		await tick();
+		add.click();
+		await tick();
+		add.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add</button>
+				<button>shift</button>
+				<button>pop</button>
+				<p>pending=8 values.length=4 values=[1,2,3,4]</p>
+				<div>not keyed:
+					<div>1</div>
+					<div>2</div>
+					<div>3</div>
+					<div>4</div>
+				</div>
+				<div>keyed:
+					<div>1</div>
+					<div>2</div>
+					<div>3</div>
+					<div>4</div>
+				</div>
+			`
+		);
+
+		// pop should have no effect until earlier promises have also resolved
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add</button>
+				<button>shift</button>
+				<button>pop</button>
+				<p>pending=6 values.length=4 values=[1,2,3,4]</p>
+				<div>not keyed:
+					<div>1</div>
+					<div>2</div>
+					<div>3</div>
+					<div>4</div>
+				</div>
+				<div>keyed:
+					<div>1</div>
+					<div>2</div>
+					<div>3</div>
+					<div>4</div>
+				</div>
+			`
+		);
+
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add</button>
+				<button>shift</button>
+				<button>pop</button>
+				<p>pending=0 values.length=8 values=[1,2,3,4,5,6,7,8]</p>
+				<div>not keyed:
+					<div>1</div>
+					<div>2</div>
+					<div>3</div>
+					<div>4</div>
+					<div>5</div>
+					<div>6</div>
+					<div>7</div>
+					<div>8</div>
+				</div>
+				<div>keyed:
+					<div>1</div>
+					<div>2</div>
+					<div>3</div>
+					<div>4</div>
+					<div>5</div>
+					<div>6</div>
+					<div>7</div>
+					<div>8</div>
+				</div>
+			`
+		);
 	}
 });

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

@@ -11,18 +11,14 @@
 		return p.promise;
 	}
 
-	function shift() {
-		const fn = queue.shift();
-		if (fn) fn();
-	}
-
 	function addValue() {
 		values.push(values.length+1);
 	}
 </script>
 
 <button onclick={addValue}>add</button>
-<button onclick={shift}>shift</button>
+<button onclick={() => queue.shift()?.()}>shift</button>
+<button onclick={() => queue.pop()?.()}>pop</button>
 
 <p>
 	pending={$effect.pending()}