tests

packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused/_config.js

@@ -0,0 +1,26 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [input] = target.querySelectorAll('input');
+
+		input.focus();
+		input.value = '3';
+		input.dispatchEvent(new InputEvent('input', { bubbles: true }));
+		await tick();
+
+		assert.equal(input.value, '3');
+		assert.htmlEqual(target.innerHTML, `<p>3</p> <input type="number" />`);
+
+		input.focus();
+		input.value = '1';
+		input.dispatchEvent(new InputEvent('input', { bubbles: true }));
+		await tick();
+
+		assert.equal(input.value, '2');
+		assert.htmlEqual(target.innerHTML, `<p>2</p> <input type="number" />`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused/main.svelte

@@ -0,0 +1,27 @@
+<script>
+	let value = $state(0)
+	const min = 2
+	const max = 5
+
+	$effect(() => {
+		setValue()
+	})
+
+	function setValue() {
+		if (value < min) {
+			value = min
+		}
+		if (value > max) {
+			value = max
+		}
+	}
+</script>
+
+<svelte:boundary>
+	<p>{await value}</p>
+	<input type="number" bind:value />
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>

packages/svelte/tests/runtime-runes/samples/binding-update-while-focused-2/_config.js

@@ -0,0 +1,24 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const [input] = target.querySelectorAll('input');
+
+		input.focus();
+		input.value = '3';
+		input.dispatchEvent(new InputEvent('input', { bubbles: true }));
+		flushSync();
+
+		assert.equal(input.value, '3');
+		assert.htmlEqual(target.innerHTML, `<p>3</p> <input type="number" />`);
+
+		input.focus();
+		input.value = '1';
+		input.dispatchEvent(new InputEvent('input', { bubbles: true }));
+		flushSync();
+
+		assert.equal(input.value, '2');
+		assert.htmlEqual(target.innerHTML, `<p>2</p> <input type="number" />`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/binding-update-while-focused-2/main.svelte

@@ -0,0 +1,21 @@
+<script>
+	let value = $state(0)
+	const min = 2
+	const max = 5
+
+	$effect(() => {
+		setValue()
+	})
+
+	function setValue() {
+		if (value < min) {
+			value = min
+		}
+		if (value > max) {
+			value = max
+		}
+	}
+</script>
+
+<p>{value}</p>
+<input type="number" bind:value />