add test

Author: trueadm

packages/svelte/tests/runtime-runes/samples/each-updates-8/_config.js

@@ -0,0 +1,33 @@
+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>`);
+	}
+});

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}