add test

Author: trueadm

packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Blue.svelte

@@ -0,0 +1 @@
+<div></div>

packages/svelte/tests/runtime-runes/samples/component-transition-hmr/Red.svelte

@@ -0,0 +1,10 @@
+<script>
+	function show(node) {
+			return {
+					duration: 500,
+					css: (t) => `opacity: ${t}`,
+			}
+	}
+</script>
+
+<div class="red" in:show></div>

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

@@ -0,0 +1,27 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		hmr: true
+	},
+
+	async test({ assert, target, raf }) {
+		const [b1] = target.querySelectorAll('button');
+
+		b1.click();
+
+		flushSync();
+
+		b1.click();
+
+		flushSync();
+
+		raf.tick(0);
+
+		raf.tick(250);
+		const div = /** @type {HTMLDivElement} */ (target.querySelector('.red'));
+		assert.equal(div.style.opacity, '0.5');
+	}
+});

packages/svelte/tests/runtime-runes/samples/component-transition-hmr/main.svelte

@@ -0,0 +1,14 @@
+<script>
+  import Red from "./Red.svelte"
+  import Blue from "./Blue.svelte"
+  const comps = {
+    Red,
+    Blue
+  };
+  let activeComp = $state("Red")
+</script>
+
+<main>
+  <button onclick={() => activeComp = activeComp === "Red" ? "Blue" : "Red"}>toggle</button>
+  <svelte:component this={comps[activeComp]} />
+</main>