test: cover remote form touched behaviour

Author: LeeWxx

packages/kit/test/apps/basics/src/routes/remote/form/touched/+page.svelte

@@ -0,0 +1,30 @@
+<script>
+	import { touched_form } from './touched.remote.js';
+	import { tick } from 'svelte';
+
+	const markNameTouched = async () => {
+		touched_form.fields.name.set('example');
+		await tick();
+	};
+</script>
+
+<h1>Remote Form Touched Test</h1>
+
+<p id="touched-name">Name touched: {touched_form.fields.name.touched() ? 'yes' : 'no'}</p>
+<p id="touched-age">Age touched: {touched_form.fields.age.touched() ? 'yes' : 'no'}</p>
+
+<button id="set-btn" type="button" on:click={markNameTouched}> set name programmatically </button>
+
+<form {...touched_form}>
+	<label>
+		Name
+		<input id="name-input" {...touched_form.fields.name.as('text')} />
+	</label>
+
+	<label>
+		Age
+		<input id="age-input" {...touched_form.fields.age.as('number')} />
+	</label>
+
+	<button id="reset-btn" type="reset">Reset</button>
+</form>

packages/kit/test/apps/basics/src/routes/remote/form/touched/touched.remote.ts

@@ -0,0 +1,10 @@
+import { form } from '$app/server';
+import * as v from 'valibot';
+
+export const touched_form = form(
+	v.object({
+		name: v.optional(v.string()),
+		age: v.optional(v.number())
+	}),
+	(data) => ({ submitted: data })
+);

packages/kit/test/apps/basics/test/test.js

@@ -1982,6 +1982,30 @@ test.describe('remote functions', () => {
 		expect(JSON.parse(arrayValue)).toEqual([{ leaf: 'array-0-leaf' }, { leaf: 'array-1-leaf' }]);
 	});
 
+	test('form fields touched tracks interactions', async ({ page, javaScriptEnabled }) => {
+		if (!javaScriptEnabled) return;
+
+		await page.goto('/remote/form/touched');
+
+		const nameTouched = page.locator('#touched-name');
+		const ageTouched = page.locator('#touched-age');
+
+		await expect(nameTouched).toHaveText('Name touched: no');
+		await expect(ageTouched).toHaveText('Age touched: no');
+
+		await page.click('#set-btn');
+		await expect(nameTouched).toHaveText('Name touched: yes');
+
+		await page.click('#reset-btn');
+		await expect(nameTouched).toHaveText('Name touched: no');
+
+		await page.fill('#age-input', '42');
+		await expect(ageTouched).toHaveText('Age touched: yes');
+
+		await page.click('#reset-btn');
+		await expect(ageTouched).toHaveText('Age touched: no');
+	});
+
 	test('selects are not nuked when unrelated controls change', async ({
 		page,
 		javaScriptEnabled