add test for file input

edmundhung · Dec 13, 2024 · 5e8eb8c · 5e8eb8c
1 parent 29ff8e0
commit 5e8eb8c
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 9 deletions.
diff --git a/packages/conform-dom/dom.ts b/packages/conform-dom/dom.ts
@@ -152,21 +152,30 @@ export function syncFieldValue(
 				? value
 				: [];
 
-	if (element instanceof HTMLSelectElement) {
+	if (element instanceof HTMLInputElement) {
+		switch (element.type) {
+			case 'checkbox':
+			case 'radio':
+				element.checked = getInputValue(value).includes(element.value);
+				element.defaultChecked = getInputValue(defaultValue).includes(
+					element.value,
+				);
+				break;
+			case 'file':
+				// Do nothing for now
+				break;
+			default:
+				element.value = getInputValue(value)[0] ?? '';
+				element.defaultValue = getInputValue(defaultValue)[0] ?? '';
+				break;
+		}
+	} else if (element instanceof HTMLSelectElement) {
 		for (const option of element.options) {
 			option.selected = getInputValue(value).includes(option.value);
 			option.defaultSelected = getInputValue(defaultValue).includes(
 				option.value,
 			);
 		}
-	} else if (
-		element instanceof HTMLInputElement &&
-		(element.type === 'checkbox' || element.type === 'radio')
-	) {
-		element.checked = getInputValue(value).includes(element.value);
-		element.defaultChecked = getInputValue(defaultValue).includes(
-			element.value,
-		);
 	} else {
 		element.value = getInputValue(value)[0] ?? '';
 		element.defaultValue = getInputValue(defaultValue)[0] ?? '';

diff --git a/playground/app/routes/sync-form-state.tsx b/playground/app/routes/sync-form-state.tsx
@@ -10,6 +10,7 @@ import { Playground, Field } from '~/components';
 const schema = z.object({
 	input: z.object({
 		text: z.string(),
+		files: z.instanceof(File).array(),
 		number: z.number(),
 	}),
 	textarea: z.string(),
@@ -32,6 +33,7 @@ export async function action({ request }: ActionFunctionArgs) {
 			input: {
 				text: 'Default text',
 				number: 4,
+				files: [],
 			},
 			textarea: 'You need to write something here',
 			select: 'red',
@@ -53,6 +55,7 @@ export default function Example() {
 			input: {
 				text: 'Hello World',
 				number: 2,
+				files: [],
 			},
 			textarea: 'Once upon a time',
 			select: 'green',
@@ -73,6 +76,10 @@ export default function Example() {
 				max: 10,
 				step: 1,
 			},
+			'input.files': {
+				required: true,
+				multiple: true,
+			},
 			textarea: {
 				required: true,
 				minLength: 10,
@@ -115,6 +122,9 @@ export default function Example() {
 						<input type="number" name={inputFields.number.name} />
 					</Field>
 				) : null}
+				<Field label="Files" meta={inputFields.files}>
+					<input type="file" name={inputFields.files.name} />
+				</Field>
 				<Field label="Textarea" meta={fields.textarea}>
 					<textarea name={fields.textarea.name} />
 				</Field>

diff --git a/tests/integrations/sync-form-state.spec.ts b/tests/integrations/sync-form-state.spec.ts
@@ -6,6 +6,7 @@ function getFieldset(form: Locator) {
 		token: form.locator('[name="token"]'),
 		text: form.locator('[name="input.text"]'),
 		number: form.locator('[name="input.number"]'),
+		files: form.locator('[name="input.files"]'),
 		textarea: form.locator('[name="textarea"]'),
 		select: form.locator('[name="select"]'),
 		multiSelect: form.locator('[name="multiSelect"]'),
@@ -35,6 +36,7 @@ async function assertFieldsetValue(
 
 	await expect(fieldset.text).toHaveValue(value.input.text);
 	await expect(fieldset.number).toHaveValue(value.input.number.toString());
+	await expect(fieldset.files).toHaveValue('');
 	await expect(fieldset.textarea).toHaveValue(value.textarea);
 	await expect(fieldset.select).toHaveValue(value.select);
 	await expect(fieldset.multiSelect).toHaveValues(value.multiSelect);
@@ -153,6 +155,9 @@ test('sync validation attributes', async ({ page }) => {
 	await expect(fieldset.number).toHaveJSProperty('max', '10');
 	await expect(fieldset.number).toHaveJSProperty('step', '1');
 
+	await expect(fieldset.files).toHaveJSProperty('required', true);
+	await expect(fieldset.files).toHaveJSProperty('multiple', true);
+
 	await expect(fieldset.textarea).toHaveJSProperty('required', true);
 	await expect(fieldset.textarea).toHaveJSProperty('minLength', 10);
 	await expect(fieldset.textarea).toHaveJSProperty('maxLength', 1000);