add test

Author: trueadm

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

@@ -0,0 +1,33 @@
+import { flushSync } from '../../../../src/index-client.js';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, raf, target }) {
+		const btn1 = target.querySelector('button');
+
+		btn1?.click();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>Toggle</button><div><div>1</div><div>2</div><div>3</div></div>'
+		);
+
+		flushSync();
+		raf.tick(50);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>Toggle</button><div style="overflow: hidden; opacity: 0;"><div>1</div><div>2</div><div>3</div></div>'
+		);
+
+		await Promise.resolve();
+
+		flushSync();
+		raf.tick(500);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>Toggle</button><div style=""><div>3</div><div>4</div></div>'
+		);
+	}
+});

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

@@ -0,0 +1,23 @@
+<script>
+	import { slide } from 'svelte/transition';
+
+	let toggle = $state(true);
+	let items = $state([ 1, 2, 3 ]);
+
+	const handle_toggle = async () => {
+		toggle = false;
+		await Promise.resolve();
+		items = [3, 4];
+		toggle = true;
+	};
+</script>
+
+<button onclick={handle_toggle}>Toggle</button>
+
+{#if toggle}
+	<div transition:slide={{ duration: 500 }}>
+		{#each items as item (item)}
+			<div>{item}</div>
+		{/each}
+	</div>
+{/if}