From c2f4787dfaa37ae5c621511b02d7421e79850b6f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 27 Jun 2024 15:52:48 -0400
Subject: [PATCH] bring tests over from fix-each-dom-bug

---
 .../samples/each-updates-6/_config.js         | 27 ++++++++++++
 .../samples/each-updates-6/main.svelte        | 26 ++++++++++++
 .../samples/each-updates-7/_config.js         | 27 ++++++++++++
 .../samples/each-updates-7/main.svelte        | 26 ++++++++++++
 .../samples/each-updates-8/_config.js         | 42 +++++++++++++++++++
 .../samples/each-updates-8/main.svelte        | 23 ++++++++++
 6 files changed, 171 insertions(+)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/each-updates-6/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/each-updates-6/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/each-updates-7/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/each-updates-7/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/each-updates-8/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/each-updates-8/main.svelte

diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-6/_config.js b/packages/svelte/tests/runtime-runes/samples/each-updates-6/_config.js
new file mode 100644
index 0000000000..8bd2d17131
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-6/_config.js
@@ -0,0 +1,27 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<ul><li>test (1) <span style="background-color: red; width: 20px; height: 20px; display: inline-block;"></span></li><li>test 2 (2)</li><li>test 3 (3)</li></ul><button>Swap items 1 &amp; 3</button>`,
+
+	async test({ assert, target }) {
+		const [btn1] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<ul><li>test (1) <span style="background-color: red; width: 20px; height: 20px; display: inline-block;"></span></li><li>test 2 (2)</li><li>test 3 (3)</li></ul><button>Swap items 1 &amp; 3</button>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-6/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-updates-6/main.svelte
new file mode 100644
index 0000000000..a1b948ac0f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-6/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	const items = $state([
+		{ name: 'test', id: 1, color: 'red' },
+		{ name: 'test 2', id: 2 },
+		{ name: 'test 3', id: 3 },
+	]);
+	const onclick = () => {
+		const from = 0;
+		const to = 2;
+		items.splice(to, 0, items.splice(from, 1)[0]);
+	};
+</script>
+
+{#snippet renderItem(item)}
+	<li>
+		{item.name} ({item.id})
+		{#if item.color}<span style="background-color: {item.color}; width: 20px; height: 20px; display: inline-block;"></span>{/if}
+	</li>
+{/snippet}
+
+<ul>
+	{#each items as item (item.id)}
+		{@render renderItem(item)}
+	{/each}
+</ul>
+<button {onclick}>Swap items 1 & 3</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-7/_config.js b/packages/svelte/tests/runtime-runes/samples/each-updates-7/_config.js
new file mode 100644
index 0000000000..7f1f5b6589
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-7/_config.js
@@ -0,0 +1,27 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<ul><li>test (1)</li> <span style="background-color: red; width: 20px; height: 20px; display: inline-block;"></span><li>test 2 (2)</li><li>test 3 (3)</li></ul><button>Swap items 1 &amp; 3</button>`,
+
+	async test({ assert, target }) {
+		const [btn1] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<ul><li>test (1)</li><span style="background-color: red; width: 20px; height: 20px; display: inline-block;"></span><li>test 2 (2)</li><li>test 3 (3)</li></ul><button>Swap items 1 &amp; 3</button>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-7/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-updates-7/main.svelte
new file mode 100644
index 0000000000..df8b054a42
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-7/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	const items = $state([
+		{ name: 'test', id: 1, color: 'red' },
+		{ name: 'test 2', id: 2 },
+		{ name: 'test 3', id: 3 },
+	]);
+	const onclick = () => {
+		const from = 0;
+		const to = 2;
+		items.splice(to, 0, items.splice(from, 1)[0]);
+	};
+</script>
+
+{#snippet renderItem(item)}
+	<li>
+		{item.name} ({item.id})
+	</li>
+	{#if item.color}<span style="background-color: {item.color}; width: 20px; height: 20px; display: inline-block;"></span>{/if}
+{/snippet}
+
+<ul>
+	{#each items as item (item.id)}
+		{@render renderItem(item)}
+	{/each}
+</ul>
+<button {onclick}>Swap items 1 & 3</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-8/_config.js b/packages/svelte/tests/runtime-runes/samples/each-updates-8/_config.js
new file mode 100644
index 0000000000..e675dcaf67
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-8/_config.js
@@ -0,0 +1,42 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>Add new message</button><p>first</p><p>message 1</p>`,
+
+	async test({ assert, target }) {
+		/**
+		 * @type {{ click: () => void; }}
+		 */
+		let btn1;
+
+		[btn1] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Add new message</button><p>first</p><p>message 1</p><p>message 2</p>`
+		);
+
+		await Promise.resolve();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Add new message</button><p>first</p><p>message 1</p><p>message 2</p>`
+		);
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		await Promise.resolve();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Add new message</button><p>first</p><p>message 1</p><p>message 2</p><p>message 3</p>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-8/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-updates-8/main.svelte
new file mode 100644
index 0000000000..869ccdc8dd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-8/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	let messages = $state([{id: 1, content: "message 1"}]);
+
+	function add() {
+		const newId = messages.length + 1
+		messages.push({id: 0, tmpId: newId, content: `message ${newId}`})
+
+		queueMicrotask(() => {
+			const msg = messages.find((m) => m.tmpId === newId && m.id === 0)
+			msg.tmpId = ""
+			msg.id = newId
+		})
+	}
+</script>
+
+<button onclick={add}>Add new message</button>
+
+{#each messages as msg, i (`${msg.id}_${msg.tmpId ?? ""}`)}
+	{#if i === 0}
+		<p>first</p>
+	{/if}
+	<p>{msg.content}</p>
+{/each}