add test

Author: trueadm

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

@@ -0,0 +1,34 @@
+import { flushSync } from '../../../../src/index-client.js';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, raf, target }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		btn1?.click();
+		btn1?.click();
+		btn1?.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>Push</button><button>Remove</button><ul><li>0</li><li>1</li><li>2</li></ul'
+		);
+
+		btn2?.click();
+		flushSync();
+		raf.tick(50);
+
+		const li = /** @type {HTMLElement & { foo: number }} */ (target.querySelector('ul > li'));
+
+		assert.equal(li.foo, 0.5);
+
+		btn1?.click();
+		flushSync();
+
+		assert.equal(li.foo, 0.5);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>Push</button><button>Remove</button><ul><li>0</li><li>1</li><li>2</li><li>3</li></ul'
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/transition-each/main.svelte

@@ -0,0 +1,30 @@
+<script>
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: (t, u) => {
+				node.foo = t;
+			}
+		};
+	}
+
+	let list = $state([]);
+	let id = 0;
+
+	function push() {
+		list.push({ id: id++ })
+	}
+
+	function removeFirst() {
+		list.splice(0, 1);
+	}
+</script>
+
+<button onclick={push}>Push</button>
+<button onclick={removeFirst}>Remove</button>
+
+<ul>
+	{#each list as item (item.id)}
+		<li out:foo>{item.id}</li>
+	{/each}
+</ul>