4701 upload button unit tests (#4744)

* First upload

* fix tests

* cleanuop

* tweak

* cleanup

* revert

---------

Co-authored-by: freddyaboulton <alfonsoboulton@gmail.com>

js/app/src/components/UploadButton/UploadButton.svelte

@@ -6,13 +6,13 @@
 	import { blobToBase64 } from "@gradio/upload";
 	import { _ } from "svelte-i18n";
 
-	export let elem_id: string = "";
-	export let elem_classes: Array<string> = [];
-	export let visible: boolean = true;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
 	export let label: string;
 	export let value: null | FileData;
 	export let file_count: string;
-	export let file_types: Array<string> = ["file"];
+	export let file_types: string[] = [];
 	export let root: string;
 	export let size: "sm" | "lg" = "lg";
 	export let scale: number | null = null;
@@ -72,6 +72,7 @@
 	{min_width}
 	{mode}
 	{variant}
+	{label}
 	on:click
 	on:load={handle_upload}
 >

js/app/src/components/UploadButton/UploadButton.test.ts

@@ -0,0 +1,68 @@
+import { test, describe, expect, vi, afterEach, assert } from "vitest";
+import { spy, spyOn } from "tinyspy";
+import { cleanup, render, wait_for_event } from "@gradio/tootils";
+import event from "@testing-library/user-event";
+import { setupi18n } from "../../i18n";
+import type { LoadingStatus } from "../StatusTracker/types";
+import UploadButton from "./UploadButton.svelte";
+
+describe("UploadButton", () => {
+	afterEach(() => {
+		cleanup();
+		vi.restoreAllMocks();
+	});
+
+	test("Uploads with blob", async () => {
+		vi.mock("@gradio/client", async () => {
+			return {
+				upload_files: vi.fn((f) => new Promise((res) => res({})))
+			};
+		});
+
+		const api = await import("@gradio/client");
+
+		setupi18n();
+
+		const { getByTestId } = await render(UploadButton, {
+			label: "file",
+			value: null,
+			mode: "dynamic",
+			root: "http://localhost:7860",
+			file_count: "1"
+		});
+
+		const item = getByTestId("file-upload-button"); // container.querySelectorAll("input")[0];
+
+		const file = new File(["hello"], "my-audio.wav", { type: "audio/wav" });
+		await event.upload(item, file);
+
+		expect(api.upload_files).toHaveBeenCalled();
+	});
+
+	test("upload sets change event", async () => {
+		vi.mock("@gradio/client", async () => {
+			return {
+				upload_files: vi.fn((f) => new Promise((res) => res({})))
+			};
+		});
+
+		await import("@gradio/client");
+		setupi18n();
+		const { component, getByTestId } = await render(UploadButton, {
+			label: "file",
+			value: null,
+			mode: "dynamic",
+			root: "http://localhost:7860",
+			file_count: "1"
+		});
+
+		const item = getByTestId("file-upload-button"); //container.querySelectorAll("input")[0];
+		const file = new File(["hello"], "my-audio.wav", { type: "audio/wav" });
+		event.upload(item, file);
+		const mock = await wait_for_event(component, "change");
+		expect(mock.callCount).toBe(1);
+		const [data] = component.$capture_state().value;
+		expect(data).toBeTruthy();
+		assert.equal(data.name, "my-audio.wav");
+	});
+});

js/upload-button/src/UploadButton.svelte

@@ -3,17 +3,18 @@
 	import { createEventDispatcher } from "svelte";
 	import type { FileData } from "@gradio/upload";
 
-	export let elem_id: string = "";
-	export let elem_classes: Array<string> = [];
-	export let visible: boolean = true;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
 	export let file_count: string;
-	export let file_types: Array<string> = ["file"];
+	export let file_types: string[] = [];
 	export let include_file_metadata = true;
 	export let size: "sm" | "lg" = "lg";
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let mode: "static" | "dynamic" = "dynamic";
 	export let variant: "primary" | "secondary" | "stop" = "secondary";
+	export let label: string;
 
 	let hidden_upload: HTMLInputElement;
 	const dispatch = createEventDispatcher();
@@ -24,9 +25,8 @@
 		file_types = file_types.map((x) => {
 			if (x.startsWith(".")) {
 				return x;
-			} else {
-				return x + "/*";
 			}
+			return x + "/*";
 		});
 		accept_file_types = file_types.join(", ");
 	}
@@ -36,14 +36,14 @@
 	};
 
 	const loadFiles = (files: FileList) => {
-		let _files: Array<File> = Array.from(files);
+		let _files: File[] = Array.from(files);
 		if (!files.length) {
 			return;
 		}
 		if (file_count === "single") {
 			_files = [files[0]];
 		}
-		var all_file_data: Array<FileData | File> = [];
+		var all_file_data: (FileData | File)[] = [];
 		_files.forEach((f, i) => {
 			all_file_data[i] = include_file_metadata
 				? {
@@ -88,6 +88,7 @@
 	multiple={file_count === "multiple" || undefined}
 	webkitdirectory={file_count === "directory" || undefined}
 	mozdirectory={file_count === "directory" || undefined}
+	data-testid="{label}-upload-button"
 />
 
 <Button