add test

Author: ottomated

packages/kit/test/apps/basics/src/routes/remote/form/file-upload/+page.svelte

@@ -4,7 +4,7 @@
 
 <form {...upload} enctype="multipart/form-data">
 	<input {...upload.fields.text.as('hidden', 'Hello world')} />
-	<p>File 1: (progress: {upload.fields.file1.progress()})</p>
+	<p>File 1: (progress: <span id="progress1">{upload.fields.file1.progress()}</span>)</p>
 	<input {...upload.fields.file1.as('file')} />
 	<p>File 2: (progress: {upload.fields.deep.files[0].progress()})</p>
 	<input {...upload.fields.deep.files[0].as('file')} />

packages/kit/test/apps/basics/src/routes/remote/form/file-upload/form.remote.ts

@@ -15,7 +15,7 @@ export const upload = form(
 			return {
 				text: data.text,
 				file1: data.file1.size,
-				file2: data.deep.files.map((f) => f.size)
+				files: data.deep.files.map((f) => f.size)
 			};
 		}
 		return {

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

@@ -2033,19 +2033,24 @@ test.describe('remote functions', () => {
 			mimeType: 'text/plain',
 			buffer: Buffer.from('a')
 		});
-		await page.locator('input[name="file2"]').setInputFiles({
+		await page.locator('input[name="deep.files[0]"]').setInputFiles({
 			name: 'b.txt',
 			mimeType: 'text/plain',
 			buffer: Buffer.from('b')
 		});
+		await page.locator('input[name="deep.files[1]"]').setInputFiles({
+			name: 'c.txt',
+			mimeType: 'text/plain',
+			buffer: Buffer.from('c')
+		});
 		await page.locator('input[type="checkbox"]').check();
 		await page.locator('button').click();
 
 		await expect(page.locator('pre')).toHaveText(
 			JSON.stringify({
 				text: 'Hello world',
 				file1: 'a',
-				file2: 'b'
+				files: ['b', 'c']
 			})
 		);
 	});
@@ -2057,21 +2062,65 @@ test.describe('remote functions', () => {
 			mimeType: 'text/plain',
 			buffer: Buffer.alloc(1024 * 1024 * 10)
 		});
-		await page.locator('input[name="file2"]').setInputFiles({
+		await page.locator('input[name="deep.files[0]"]').setInputFiles({
 			name: 'b.txt',
 			mimeType: 'text/plain',
 			buffer: Buffer.from('b')
 		});
+		await page.locator('input[name="deep.files[1]"]').setInputFiles({
+			name: 'c.txt',
+			mimeType: 'text/plain',
+			buffer: Buffer.from('c')
+		});
 		await page.locator('button').click();
 
 		await expect(page.locator('pre')).toHaveText(
 			JSON.stringify({
 				text: 'Hello world',
 				file1: 1024 * 1024 * 10,
-				file2: 1
+				files: [1, 1]
 			})
 		);
 	});
+	test('file upload progress works', async ({ page, context, javaScriptEnabled }) => {
+		if (!javaScriptEnabled) return;
+		await page.goto('/remote/form/file-upload');
+		const cdp = await context.newCDPSession(page);
+		await cdp.send('Network.emulateNetworkConditions', {
+			offline: false,
+			latency: 0,
+			downloadThroughput: -1,
+			uploadThroughput: 1024 * 1024 * 5 // throttle so it'll take 2 seconds to upload
+		});
+		try {
+			const progress = page.locator('#progress1');
+			expect(progress).toHaveText('0');
+			await page.locator('input[name="file1"]').setInputFiles({
+				name: 'a.txt',
+				mimeType: 'text/plain',
+				buffer: Buffer.alloc(1024 * 1024 * 10)
+			});
+			await page.locator('input[name="deep.files[0]"]').setInputFiles({
+				name: 'b.txt',
+				mimeType: 'text/plain',
+				buffer: Buffer.from('b')
+			});
+			await page.locator('input[name="deep.files[1]"]').setInputFiles({
+				name: 'c.txt',
+				mimeType: 'text/plain',
+				buffer: Buffer.from('c')
+			});
+			await page.locator('button').click();
+			await expect(progress).not.toHaveText('0');
+		} finally {
+			await cdp.send('Network.emulateNetworkConditions', {
+				offline: false,
+				latency: 0,
+				downloadThroughput: -1,
+				uploadThroughput: -1
+			});
+		}
+	});
 });
 
 test.describe('params prop', () => {