fix: improve useSingleFileInput and add test coverage

Author: dodaa08

apps/meteor/client/hooks/useSingleFileInput.spec.ts

@@ -0,0 +1,71 @@
+import { renderHook, act } from '@testing-library/react';
+import { useSingleFileInput } from './useSingleFileInput';
+
+afterEach(() => {
+    document.body.innerHTML = '';
+});
+
+describe('useSingleFileInput', () => {
+    it('should create an input element and append it to the body', () => {
+        const onSetFile = jest.fn();
+        renderHook(() => useSingleFileInput(onSetFile));
+
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.style.display = 'none';
+        document.body.appendChild(input);
+        expect(input).toBeDefined();
+        expect((input as HTMLInputElement).style.display).toBe('none');
+    });
+
+    it('should set the accept attribute based on fileType option', () => {
+        const onSetFile = jest.fn();
+        renderHook(() => useSingleFileInput(onSetFile, 'image', { fileType: 'video/*' }));
+
+        const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+        expect(input.getAttribute('accept')).toBe('video/*');
+    });
+
+    it('should use default accept attribute if not provided', () => {
+        const onSetFile = jest.fn();
+        renderHook(() => useSingleFileInput(onSetFile));
+
+        const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+        expect(input.getAttribute('accept')).toBe('image/*');
+    });
+
+    it('should trigger click on the input when calling onClick', () => {
+        const onSetFile = jest.fn();
+        const { result } = renderHook(() => useSingleFileInput(onSetFile));
+        const [onClick] = result.current;
+
+        const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+        const clickSpy = jest.spyOn(input, 'click');
+
+        act(() => {
+            onClick();
+        });
+
+        expect(clickSpy).toHaveBeenCalled();
+    });
+
+    it('should call onSetFile when a file is selected', () => {
+        const onSetFile = jest.fn();
+        renderHook(() => useSingleFileInput(onSetFile, 'test-field'));
+
+        const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+        const file = new File(['foo'], 'foo.txt', { type: 'text/plain' });
+
+        Object.defineProperty(input, 'files', {
+            value: [file],
+        });
+
+        act(() => {
+            input.dispatchEvent(new Event('change'));
+        });
+
+        expect(onSetFile).toHaveBeenCalledWith(file, expect.any(FormData));
+        const formData = onSetFile.mock.calls[0][1] as FormData;
+        expect(formData.get('test-field')).toBe(file);
+    });
+});

apps/meteor/client/hooks/useSingleFileInput.ts

@@ -3,10 +3,13 @@ import { useRef, useEffect } from 'react';
 
 export const useSingleFileInput = (
 	onSetFile: (file: File, formData: FormData) => void,
-	fileType = 'image/*',
 	fileField = 'image',
+	options?: {
+		fileType?: string;
+	},
 ): [onClick: () => void, reset: () => void] => {
 	const ref = useRef<HTMLInputElement>();
+	const fileType = options?.fileType || 'image/*';
 
 	useEffect(() => {
 		const fileInput = document.createElement('input');

apps/meteor/client/views/admin/customEmoji/AddCustomEmoji.tsx

@@ -60,7 +60,7 @@ const AddCustomEmoji = ({ close, onChange, ...props }: AddCustomEmojiProps): Rea
 		await saveAction(formData);
 	}, [emojiFile, name, aliases, saveAction]);
 
-	const [clickUpload] = useSingleFileInput(setEmojiPreview, 'image/*', 'emoji');
+	const [clickUpload] = useSingleFileInput(setEmojiPreview, 'emoji');
 
 	const handleChangeName = (e: ChangeEvent<HTMLInputElement>): void => {
 		if (e.currentTarget.value !== '') {

apps/meteor/client/views/admin/customEmoji/EditCustomEmoji.tsx

@@ -135,7 +135,7 @@ const EditCustomEmoji = ({ close, onChange, data, ...props }: EditCustomEmojiPro
 		[setAliases, name],
 	);
 
-	const [clickUpload] = useSingleFileInput(setEmojiFile, 'image/*', 'emoji');
+	const [clickUpload] = useSingleFileInput(setEmojiFile, 'emoji');
 
 	const handleChangeName = (e: ChangeEvent<HTMLInputElement>): void => {
 		if (e.currentTarget.value !== '') {

apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx

@@ -28,7 +28,7 @@ const AddCustomSound = ({ goToNew, close, onChange, ...props }: AddCustomSoundPr
 		setSound(soundFile);
 	}, []);
 
-	const [clickUpload] = useSingleFileInput(handleChangeFile, 'audio/mp3');
+	const [clickUpload] = useSingleFileInput(handleChangeFile, 'sound', { fileType: 'audio/mp3' });
 
 	const saveAction = useCallback(
 		// FIXME

apps/meteor/client/views/admin/customSounds/EditSound.tsx

@@ -29,10 +29,10 @@ function EditSound({ close, onChange, data, ...props }: EditSoundProps): ReactEl
 	const [name, setName] = useState(() => data?.name ?? '');
 	const [sound, setSound] = useState<
 		| {
-				_id: string;
-				name: string;
-				extension?: string;
-		  }
+			_id: string;
+			name: string;
+			extension?: string;
+		}
 		| File
 	>(() => data);
 
@@ -123,7 +123,7 @@ function EditSound({ close, onChange, data, ...props }: EditSoundProps): ReactEl
 		);
 	}, [_id, close, deleteCustomSound, dispatchToastMessage, onChange, setModal, t]);
 
-	const [clickUpload] = useSingleFileInput(handleChangeFile, 'audio/mp3');
+	const [clickUpload] = useSingleFileInput(handleChangeFile, 'sound', { fileType: 'audio/mp3' });
 
 	return (
 		<>

apps/meteor/client/views/marketplace/AppInstallPage.tsx

@@ -15,7 +15,7 @@ const AppInstallPage = () => {
 	const { file } = watch();
 	const { install, isInstalling } = useInstallApp(file);
 
-	const [handleUploadButtonClick] = useSingleFileInput((value) => setValue('file', value), 'app');
+	const [handleUploadButtonClick] = useSingleFileInput((value) => setValue('file', value), 'app', { fileType: '.zip' });
 
 	const handleCancel = useCallback(() => {
 		router.navigate({