test: Add test cases for enctype / formenctype attributes for /actions/enhance/ test page

Author: allozaur

packages/kit/test/apps/basics/src/routes/actions/enhance/+page.server.js

@@ -18,6 +18,12 @@ export const actions = {
 			result: fields.get('username')
 		};
 	},
+	login_2: async ({ request }) => {
+		const fields = await request.formData();
+		return {
+			result: fields.get('username_2')
+		};
+	},
 	register: async ({ request }) => {
 		const fields = await request.formData();
 		return {
@@ -53,5 +59,16 @@ export const actions = {
 		});
 
 		return {};
+	},
+	send_file: async ({ request }) => {
+		const data = await request.formData();
+		const file = data.get('file');
+
+		console.log('file', file);
+
+		return {
+			// @ts-expect-error
+			result: 'file name:' + file.name
+		};
 	}
 };

packages/kit/test/apps/basics/src/routes/actions/enhance/+page.svelte

@@ -57,3 +57,15 @@
 		<button formmethod="dialog">Cancel</button>
 	</form>
 </dialog>
+
+<form action="?/login_2" enctype="application/x-www-form-urlencoded" method="post" use:enhance>
+	<input name="username_2" type="text" />
+
+	<button class="form-enctype-submit">Submit</button>
+</form>
+
+<form action="?/send_file" method="post" use:enhance>
+	<input type="file" name="file" class="form-file-input" />
+
+	<button class="form-file-submit" formenctype="multipart/form-data" type="submit">Submit</button>
+</form>

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

@@ -1153,6 +1153,61 @@ test.describe('Actions', () => {
 		await expect(page.locator('pre.formdata2')).toHaveText(JSON.stringify({ message: 'hello' }));
 	});
 
+	test('use:enhance with `enctype="application/x-www-form-urlencoded"` attribute in `<form>`', async ({
+		page
+	}) => {
+		await page.goto('/actions/enhance');
+
+		expect(await page.textContent('pre.formdata1')).toBe(JSON.stringify(null));
+		expect(await page.textContent('pre.formdata2')).toBe(JSON.stringify(null));
+
+		await page.locator('input[name="username_2"]').fill('foo');
+		await page.locator('button.form-enctype-submit').click();
+
+		await expect(page.locator('pre.formdata1')).toHaveText(JSON.stringify({ result: 'foo' }));
+		await expect(page.locator('pre.formdata2')).toHaveText(JSON.stringify({ result: 'foo' }));
+		await expect(page.locator('input[name="username_2"]')).toHaveValue('');
+	});
+
+	test('use:enhance with `enctype="multipart/form"` attribute in `<form>`', async ({ page }) => {
+		await page.goto('/actions/enhance');
+
+		expect(await page.textContent('pre.formdata1')).toBe(JSON.stringify(null));
+		expect(await page.textContent('pre.formdata2')).toBe(JSON.stringify(null));
+
+		const fileInput = page.locator('input[type="file"].form-file-input');
+
+		await fileInput.setInputFiles({
+			name: 'test-file.txt',
+			mimeType: 'text/plain',
+			buffer: Buffer.from('this is test')
+		});
+
+		await page.locator('button.form-file-submit').click();
+
+		await expect(page.locator('pre.formdata1')).toHaveText(
+			JSON.stringify({ result: 'file name:test-file.txt' })
+		);
+		await expect(page.locator('pre.formdata2')).toHaveText(
+			JSON.stringify({ result: 'file name:test-file.txt' })
+		);
+		await expect(page.locator('input[name=username]')).toHaveValue('');
+	});
+
+	test('use:enhance with defined `enctype` attribute for `<form>` element', async ({ page }) => {
+		await page.goto('/actions/enhance');
+
+		expect(await page.textContent('pre.formdata1')).toBe(JSON.stringify(null));
+		expect(await page.textContent('pre.formdata2')).toBe(JSON.stringify(null));
+
+		await page.locator('input[name="username_2"]').fill('foo');
+		await page.locator('button.form-enctype-submit').click();
+
+		await expect(page.locator('pre.formdata1')).toHaveText(JSON.stringify({ result: 'foo' }));
+		await expect(page.locator('pre.formdata2')).toHaveText(JSON.stringify({ result: 'foo' }));
+		await expect(page.locator('input[name="username_2"]')).toHaveValue('');
+	});
+
 	test('redirect', async ({ page, javaScriptEnabled }) => {
 		await page.goto('/actions/redirect');