UploadButton tests (#6461)

* Add test

* add changeset

* lint

* Switch order

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/common-bees-prove.md

@@ -0,0 +1,6 @@
+---
+"@gradio/uploadbutton": minor
+"gradio": minor
+---
+
+feat:UploadButton tests

demo/upload_button_component_events/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: upload_button_component_events"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    \n", "    with gr.Row():\n", "        with gr.Column():\n", "            upload_btn = gr.UploadButton(label=\"Upload Single File\", file_count=\"single\")\n", "        with gr.Column():\n", "            output_file_1 = gr.File(label=\"Upload Single File Output\", file_count=\"single\")\n", "            num_load_btn_1 = gr.Number(label=\"# Load Upload Single File\", value=0)\n", "            output_click_1 = gr.Number(label=\"# Click Upload Single File Output\", value=0)\n", "            upload_btn.upload(lambda s,n: (s, n + 1), [upload_btn, num_load_btn_1], [output_file_1, num_load_btn_1])\n", "            upload_btn.click(lambda n: (n + 1), output_click_1, [output_click_1])\n", "    with gr.Row():\n", "        with gr.Column():\n", "            upload_btn_multiple = gr.UploadButton(label=\"Upload Multiple Files\", file_count=\"multiple\")\n", "        with gr.Column():\n", "            output_file_2 = gr.File(label=\"Upload Multiple Files Output\", file_count=\"multiple\")\n", "            num_load_btn_2 = gr.Number(label=\"# Load Upload Multiple Files\", value=0)\n", "            output_click_2 = gr.Number(label=\"# Click Upload Multiple Files Output\", value=0)\n", "            upload_btn_multiple.upload(lambda s,n: (s, n + 1), [upload_btn_multiple, num_load_btn_2], [output_file_2, num_load_btn_2])\n", "            upload_btn_multiple.click(lambda n: (n + 1), output_click_2, [output_click_2])\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/upload_button_component_events/run.py

@@ -0,0 +1,26 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    
+    with gr.Row():
+        with gr.Column():
+            upload_btn = gr.UploadButton(label="Upload Single File", file_count="single")
+        with gr.Column():
+            output_file_1 = gr.File(label="Upload Single File Output", file_count="single")
+            num_load_btn_1 = gr.Number(label="# Load Upload Single File", value=0)
+            output_click_1 = gr.Number(label="# Click Upload Single File Output", value=0)
+            upload_btn.upload(lambda s,n: (s, n + 1), [upload_btn, num_load_btn_1], [output_file_1, num_load_btn_1])
+            upload_btn.click(lambda n: (n + 1), output_click_1, [output_click_1])
+    with gr.Row():
+        with gr.Column():
+            upload_btn_multiple = gr.UploadButton(label="Upload Multiple Files", file_count="multiple")
+        with gr.Column():
+            output_file_2 = gr.File(label="Upload Multiple Files Output", file_count="multiple")
+            num_load_btn_2 = gr.Number(label="# Load Upload Multiple Files", value=0)
+            output_click_2 = gr.Number(label="# Click Upload Multiple Files Output", value=0)
+            upload_btn_multiple.upload(lambda s,n: (s, n + 1), [upload_btn_multiple, num_load_btn_2], [output_file_2, num_load_btn_2])
+            upload_btn_multiple.click(lambda n: (n + 1), output_click_2, [output_click_2])
+
+
+if __name__ == "__main__":
+    demo.launch()

js/app/test/upload_button_component_events.spec.ts

@@ -0,0 +1,50 @@
+import { test, expect } from "@gradio/tootils";
+
+test("UploadButton properly dispatches load event and click event for the single file case.", async ({
+	page
+}) => {
+	await page.getByRole("button", { name: "Upload Single File" }).click();
+	const uploader = await page.getByTestId("Upload Single File-upload-button");
+	await Promise.all([
+		uploader.setInputFiles(["./test/files/face.obj"]),
+		page.waitForResponse("**/upload?*?*")
+	]);
+
+	await expect(page.getByLabel("# Load Upload Single File")).toHaveValue("1");
+	await expect(
+		page.getByLabel("# Click Upload Single File Output")
+	).toHaveValue("1");
+
+	const downloadPromise = page.waitForEvent("download");
+	await page.getByRole("link").nth(0).click();
+	const download = await downloadPromise;
+	await expect(download.suggestedFilename()).toBe("face.obj");
+});
+
+test("UploadButton properly dispatches load event and click event for the multiple file case.", async ({
+	page
+}) => {
+	await page.getByRole("button", { name: "Upload Multiple Files" }).click();
+	const uploader = await page.getByTestId(
+		"Upload Multiple Files-upload-button"
+	);
+	await Promise.all([
+		uploader.setInputFiles([
+			"./test/files/face.obj",
+			"./test/files/cheetah1.jpg"
+		]),
+		page.waitForResponse("**/upload?*?*")
+	]);
+
+	await expect(page.getByLabel("# Load Upload Multiple Files")).toHaveValue(
+		"1"
+	);
+	await expect(
+		page.getByLabel("# Click Upload Multiple Files Output")
+	).toHaveValue("1");
+
+	const downloadPromise = page.waitForEvent("download");
+	await page.getByRole("link").nth(1).click();
+	const download = await downloadPromise;
+	await expect(download.suggestedFilename()).toBe("cheetah1.jpg");
+});

js/uploadbutton/Index.svelte

@@ -30,7 +30,7 @@
 
 	async function handle_event(
 		detail: null | FileData | FileData[],
-		event: "change" | "upload"
+		event: "change" | "upload" | "click"
 	): Promise<void> {
 		value = detail;
 		gradio.dispatch(event);

js/uploadbutton/shared/UploadButton.svelte

@@ -35,6 +35,7 @@
 	}
 
 	function openFileUpload(): void {
+		dispatch("click");
 		hidden_upload.click();
 	}