Add tests

Author: raythurnvoid

packages/svelte/tests/runtime-runes/samples/mount-component-in-onmount-with-context-with-state/_config.js

@@ -0,0 +1,34 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		const button = target.querySelector('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>toggle</button>
+				<div>
+					<p>First if block:</p>
+					<span class="first">First: true</span>
+					<p>Second if block:</p>
+					<span class="second">Second: true</span>
+				</div>
+			`
+		);
+
+		flushSync(() => button?.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>toggle</button>
+				<div>
+					<p>First if block:</p>
+					<p>Second if block:</p>
+				</div>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/mount-component-in-onmount-with-context-with-state/main.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { onMount } from 'svelte';
+	import { mountComponentWithContext } from './module.svelte.js';
+
+	let mountTarget;
+
+	let getShowText;
+	let setShowText;
+
+	onMount(() => {
+		const r = mountComponentWithContext(mountTarget);
+		getShowText = r.getShowText;
+		setShowText = r.setShowText;
+	});
+
+	function toggleState() {
+		setShowText(!getShowText());
+	}
+</script>
+
+<button onclick={() => toggleState()}>toggle</button>
+<div bind:this={mountTarget}></div>

packages/svelte/tests/runtime-runes/samples/mount-component-in-onmount-with-context-with-state/module.svelte.js

@@ -0,0 +1,19 @@
+import { mount } from 'svelte';
+import Nested from './nested.svelte';
+
+export function mountComponentWithContext(target) {
+	const stateObject = $state({ showText: true });
+
+	mount(Nested, {
+		target,
+		props: {},
+		context: new Map([['stateContext', stateObject]])
+	});
+
+	return {
+		getShowText: () => stateObject.showText,
+		setShowText: (newShowText) => {
+			stateObject.showText = newShowText;
+		}
+	};
+}

packages/svelte/tests/runtime-runes/samples/mount-component-in-onmount-with-context-with-state/nested.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { getContext } from 'svelte';
+
+	const stateObjectFromContext = getContext('stateContext');
+</script>
+
+<p>First if block:</p>
+{#if stateObjectFromContext.showText === true}
+	<span class="first">First: {stateObjectFromContext.showText}</span>
+{/if}
+
+<p>Second if block:</p>
+{#if stateObjectFromContext.showText === true}
+	<span class="second">Second: {stateObjectFromContext.showText}</span>
+{/if}