Test added for SPA action form.

Author: ciscoheat

CHANGELOG.md

@@ -7,9 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- [SPA action form](https://superforms.rocks/concepts/spa#spa-action-form) now supports form elements as well, by adding its `use:enhance` on all related forms.
+
 ### Fixed
 
 - Fixed type inference for `FormPath` with nested arrays. Error output improved as well.
+- If method is "GET" or doesn't exist on an enhanced form, it's now automatically set to "POST".
 
 ## [2.11.0] - 2024-03-22
 

src/routes/(v2)/v2/spa-action-2/+page.svelte

@@ -7,7 +7,7 @@
 
 	export let data;
 
-	const { enhance } = superForm(defaults(valibot(classifySchema)), {
+	const { enhance, submitting, formId } = superForm(defaults(valibot(classifySchema)), {
 		SPA: '/v2/spa-action-2/classify',
 		taintedMessage: false,
 		onUpdate({ result }) {
@@ -32,12 +32,15 @@
 		{#each data.entries as entry}
 			<tr>
 				<td>{entry.id}</td>
-				<td>{entry.name}</td>
+				<td id="name-{entry.id}">{entry.name}</td>
 				<td>
 					<form use:enhance>
 						<input type="hidden" name="id" value={entry.id} />
 						<input type="hidden" name="name" value={entry.name} />
-						<button>Change name</button>
+						<button on:click={() => ($formId = String(entry.id))}>
+							{#if $submitting && $formId == String(entry.id)}Loading...
+							{:else}Change name{/if}
+						</button>
 					</form>
 				</td>
 			</tr>

src/routes/(v2)/v2/spa-action-2/classify/+page.server.ts

@@ -4,6 +4,8 @@ import { classifySchema } from './schema.js';
 
 export const actions = {
 	default: async ({ request }) => {
+		await new Promise((res) => setTimeout(res, 1000));
+
 		const form = await superValidate(request, valibot(classifySchema));
 		console.log(form);