@gradio/downloadbutton 0.4.18 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @gradio/downloadbutton
 
+## 0.5.0
+
+### Features
+
+- [#13502](https://github.com/gradio-app/gradio/pull/13502) [`429faeb`](https://github.com/gradio-app/gradio/commit/429faeb643fb1afc1722c0f63fafa11603f2c87f) - Ensure every component dispatches a `change` event when its value changes.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/client@2.2.2
+- @gradio/button@0.7.0
+
+## 0.4.18
+
+### Dependency updates
+
+- @gradio/client@2.2.1
+
+## 0.4.18
+
+### Dependency updates
+
+- @gradio/client@2.2.0
+
+## 0.4.18
+
+### Dependency updates
+
+- @gradio/utils@0.12.2
+
+## 0.4.18
+
+### Dependency updates
+
+- @gradio/utils@0.12.1
+- @gradio/button@0.6.6
+
 ## 0.4.18
 
 ### Dependency updates

package/DownloadButton.test.ts

@@ -0,0 +1,418 @@
+import { test, describe, afterEach, beforeEach, expect, vi } from "vitest";
+import { cleanup, render, fireEvent } from "@self/tootils/render";
+import { run_shared_prop_tests } from "@self/tootils/shared-prop-tests";
+
+import DownloadButton from "./Index.svelte";
+
+const default_props = {
+	value: null,
+	variant: "secondary" as const,
+	size: "lg" as const,
+	icon: null,
+	label: "Download",
+	interactive: true
+};
+
+run_shared_prop_tests({
+	component: DownloadButton,
+	name: "DownloadButton",
+	base_props: { ...default_props },
+	has_label: false,
+	has_validation_error: false,
+	visible_false_hides: true,
+	has_block_wrapper: false
+});
+
+function spy_anchor_click(): {
+	captured: { href: string; download: string }[];
+	restore: () => void;
+} {
+	const captured: { href: string; download: string }[] = [];
+	const spy = vi
+		.spyOn(HTMLAnchorElement.prototype, "click")
+		.mockImplementation(function (this: HTMLAnchorElement) {
+			captured.push({ href: this.href, download: this.download });
+		});
+	return { captured, restore: () => spy.mockRestore() };
+}
+
+describe("Props: label", () => {
+	afterEach(() => cleanup());
+
+	test("renders the label as the button's accessible name", async () => {
+		const { getByRole } = await render(DownloadButton, {
+			...default_props,
+			label: "download CSV"
+		});
+
+		expect(getByRole("button", { name: "download CSV" })).toBeVisible();
+	});
+
+	test("null label renders an empty button", async () => {
+		const { getByRole } = await render(DownloadButton, {
+			...default_props,
+			label: null
+		});
+
+		expect(getByRole("button")).toBeVisible();
+	});
+});
+
+describe("Props: icon", () => {
+	afterEach(() => cleanup());
+
+	test("renders icon image when icon prop is set", async () => {
+		const { getByRole } = await render(DownloadButton, {
+			...default_props,
+			icon: {
+				url: "https://gradio.app/icon.svg",
+				path: "icon.svg",
+				orig_name: "icon.svg"
+			}
+		});
+
+		const img = getByRole("img");
+		expect(img).toHaveAttribute("src", "https://gradio.app/icon.svg");
+	});
+
+	test("does not render icon image when icon prop is null", async () => {
+		const { queryByRole } = await render(DownloadButton, {
+			...default_props,
+			icon: null
+		});
+
+		expect(queryByRole("img")).not.toBeInTheDocument();
+	});
+});
+
+describe("Props: value", () => {
+	let anchor_spy: ReturnType<typeof spy_anchor_click>;
+
+	beforeEach(() => {
+		anchor_spy = spy_anchor_click();
+	});
+
+	afterEach(() => {
+		anchor_spy.restore();
+		cleanup();
+	});
+
+	test("clicking triggers a synthetic anchor click with the file URL", async () => {
+		const { getByRole } = await render(DownloadButton, {
+			...default_props,
+			value: {
+				url: "https://gradio.app/files/report.pdf",
+				orig_name: "report.pdf",
+				path: "report.pdf"
+			} as any
+		});
+
+		await fireEvent.click(getByRole("button", { name: "Download" }));
+
+		expect(anchor_spy.captured).toHaveLength(1);
+		expect(anchor_spy.captured[0].href).toBe(
+			"https://gradio.app/files/report.pdf"
+		);
+	});
+
+	test("uses orig_name as the download filename when provided", async () => {
+		const { getByRole } = await render(DownloadButton, {
+			...default_props,
+			value: {
+				url: "https://gradio.app/abc123",
+				orig_name: "weekly-downloads.pdf",
+				path: "abc123"
+			} as any
+		});
+
+		await fireEvent.click(getByRole("button", { name: "Download" }));
+
+		expect(anchor_spy.captured[0].download).toBe("weekly-downloads.pdf");
+	});
+
+	test("derives filename from URL when orig_name is missing", async () => {
+		const { getByRole } = await render(DownloadButton, {
+			...default_props,
+			value: {
+				url: "https://gradio.app/files/data.csv",
+				orig_name: "",
+				path: "files/data.csv"
+			} as any
+		});
+
+		await fireEvent.click(getByRole("button", { name: "Download" }));
+
+		expect(anchor_spy.captured[0].download).toBe("data.csv");
+	});
+
+	test("strips query string from URL-derived filename", async () => {
+		const { getByRole } = await render(DownloadButton, {
+			...default_props,
+			value: {
+				url: "https://gradio.app/files/data.csv?token=abc&v=2",
+				orig_name: "",
+				path: "files/data.csv"
+			} as any
+		});
+
+		await fireEvent.click(getByRole("button", { name: "Download" }));
+
+		expect(anchor_spy.captured[0].download).toBe("data.csv");
+	});
+
+	test("strips hash fragment from URL-derived filename", async () => {
+		const { getByRole } = await render(DownloadButton, {
+			...default_props,
+			value: {
+				url: "https://gradio.app/files/notes.md#section-2",
+				orig_name: "",
+				path: "files/notes.md"
+			} as any
+		});
+
+		await fireEvent.click(getByRole("button", { name: "Download" }));
+
+		expect(anchor_spy.captured[0].download).toBe("notes.md");
+	});
+
+	test("does not trigger download when value is null", async () => {
+		const { getByRole } = await render(DownloadButton, {
+			...default_props,
+			value: null
+		});
+
+		await fireEvent.click(getByRole("button", { name: "Download" }));
+
+		expect(anchor_spy.captured).toHaveLength(0);
+	});
+
+	test("does not trigger download when value.url is missing", async () => {
+		const { getByRole } = await render(DownloadButton, {
+			...default_props,
+			value: { url: "", orig_name: "file.txt", path: "file.txt" } as any
+		});
+
+		await fireEvent.click(getByRole("button", { name: "Download" }));
+
+		expect(anchor_spy.captured).toHaveLength(0);
+	});
+});
+
+describe("Props: disabled", () => {
+	afterEach(() => cleanup());
+
+	test("interactive=false renders the button as disabled", async () => {
+		const { getByRole } = await render(DownloadButton, {
+			...default_props,
+			interactive: false,
+			value: {
+				url: "https://gradio.app/files/report.pdf",
+				orig_name: "report.pdf",
+				path: "report.pdf"
+			} as any
+		});
+
+		expect(getByRole("button", { name: "Download" })).toBeDisabled();
+	});
+
+	test("interactive=true renders the button as enabled", async () => {
+		const { getByRole } = await render(DownloadButton, {
+			...default_props,
+			interactive: true
+		});
+
+		expect(getByRole("button", { name: "Download" })).toBeEnabled();
+	});
+});
+
+describe("get_data / set_data", () => {
+	let anchor_spy: ReturnType<typeof spy_anchor_click>;
+
+	beforeEach(() => {
+		anchor_spy = spy_anchor_click();
+	});
+
+	afterEach(() => {
+		anchor_spy.restore();
+		cleanup();
+	});
+
+	test("get_data returns the current value", async () => {
+		const file_value = {
+			url: "https://gradio.app/files/report.pdf",
+			orig_name: "report.pdf",
+			path: "report.pdf"
+		};
+		const { get_data } = await render(DownloadButton, {
+			...default_props,
+			value: file_value as any
+		});
+
+		expect((await get_data()).value).toEqual(file_value);
+	});
+
+	test("get_data returns null when no value is set", async () => {
+		const { get_data } = await render(DownloadButton, {
+			...default_props,
+			value: null
+		});
+
+		expect((await get_data()).value).toBeNull();
+	});
+
+	test("set_data updates the value used for download", async () => {
+		const { getByRole, set_data } = await render(DownloadButton, {
+			...default_props,
+			value: null
+		});
+
+		await set_data({
+			value: {
+				url: "https://gradio.app/files/updated.pdf",
+				orig_name: "updated.pdf",
+				path: "updated.pdf"
+			}
+		});
+
+		await fireEvent.click(getByRole("button", { name: "Download" }));
+
+		expect(anchor_spy.captured).toHaveLength(1);
+		expect(anchor_spy.captured[0].href).toBe(
+			"https://gradio.app/files/updated.pdf"
+		);
+		expect(anchor_spy.captured[0].download).toBe("updated.pdf");
+	});
+
+	test("set_data then get_data round-trips the value", async () => {
+		const { get_data, set_data } = await render(DownloadButton, {
+			...default_props,
+			value: null
+		});
+
+		const new_value = {
+			url: "https://gradio.app/files/data.csv",
+			orig_name: "data.csv",
+			path: "data.csv"
+		};
+		await set_data({ value: new_value });
+
+		expect((await get_data()).value).toEqual(new_value);
+	});
+});
+
+describe("Events", () => {
+	let anchor_spy: ReturnType<typeof spy_anchor_click>;
+
+	beforeEach(() => {
+		anchor_spy = spy_anchor_click();
+	});
+
+	afterEach(() => {
+		anchor_spy.restore();
+		cleanup();
+	});
+
+	test("does not dispatch spurious click event on mount", async () => {
+		const { listen } = await render(DownloadButton, {
+			...default_props,
+			value: {
+				url: "https://gradio.app/file.zip",
+				orig_name: "file.zip",
+				path: "file.zip"
+			} as any
+		});
+
+		const click = listen("click", { retrospective: true });
+		expect(click).not.toHaveBeenCalled();
+	});
+
+	test("dispatches click event with a downloadable value", async () => {
+		const { getByRole, listen } = await render(DownloadButton, {
+			...default_props,
+			value: {
+				url: "https://gradio.app/file.zip",
+				orig_name: "file.zip",
+				path: "file.zip"
+			} as any
+		});
+
+		const click = listen("click");
+		await fireEvent.click(getByRole("button", { name: "Download" }));
+
+		expect(click).toHaveBeenCalledTimes(1);
+	});
+
+	test("dispatches click event even when value is null", async () => {
+		const { getByRole, listen } = await render(DownloadButton, {
+			...default_props,
+			value: null
+		});
+
+		const click = listen("click");
+		await fireEvent.click(getByRole("button", { name: "Download" }));
+
+		expect(click).toHaveBeenCalledTimes(1);
+	});
+});
+
+describe("Edge cases", () => {
+	let anchor_spy: ReturnType<typeof spy_anchor_click>;
+
+	beforeEach(() => {
+		anchor_spy = spy_anchor_click();
+	});
+
+	afterEach(() => {
+		anchor_spy.restore();
+		cleanup();
+	});
+
+	test("falls back to 'file' when orig_name is empty and URL ends with a trailing slash", async () => {
+		const { getByRole } = await render(DownloadButton, {
+			...default_props,
+			value: {
+				url: "https://gradio.app/files/",
+				orig_name: "",
+				path: "files/"
+			} as any
+		});
+
+		await fireEvent.click(getByRole("button", { name: "Download" }));
+
+		expect(anchor_spy.captured).toHaveLength(1);
+		expect(anchor_spy.captured[0].download).toBe("file");
+	});
+
+	test("falls back to 'file' when URL has no path segments after domain", async () => {
+		const { getByRole } = await render(DownloadButton, {
+			...default_props,
+			value: {
+				url: "https://gradio.app/",
+				orig_name: "",
+				path: ""
+			} as any
+		});
+
+		await fireEvent.click(getByRole("button", { name: "Download" }));
+
+		expect(anchor_spy.captured).toHaveLength(1);
+		expect(anchor_spy.captured[0].download).toBe("file");
+	});
+
+	test("does not leak anchor elements into document.body after download", async () => {
+		const anchors_before = document.body.querySelectorAll("a").length;
+
+		const { getByRole } = await render(DownloadButton, {
+			...default_props,
+			value: {
+				url: "https://gradio.app/files/report.pdf",
+				orig_name: "report.pdf",
+				path: "report.pdf"
+			} as any
+		});
+
+		await fireEvent.click(getByRole("button", { name: "Download" }));
+
+		expect(document.body.querySelectorAll("a").length).toBe(anchors_before);
+	});
+});

package/Index.svelte

@@ -9,6 +9,7 @@
 
 	const props = $props();
 	const gradio = new Gradio<DownloadButtonEvents, DownloadButtonProps>(props);
+	gradio.watch_for_change();
 </script>
 
 <DownloadButton

package/dist/Index.svelte

@@ -9,6 +9,7 @@
 
 	const props = $props();
 	const gradio = new Gradio<DownloadButtonEvents, DownloadButtonProps>(props);
+	gradio.watch_for_change();
 </script>
 
 <DownloadButton

package/dist/types.d.ts

@@ -6,5 +6,6 @@ export interface DownloadButtonProps {
     icon: FileData | null;
 }
 export interface DownloadButtonEvents {
+    change: never;
     click: never;
 }

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@gradio/downloadbutton",
-  "version": "0.4.18",
+  "version": "0.5.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
   "license": "ISC",
   "private": false,
   "dependencies": {
-    "@gradio/button": "^0.6.5",
-    "@gradio/utils": "^0.12.0",
-    "@gradio/client": "^2.1.0"
+    "@gradio/button": "^0.7.0",
+    "@gradio/client": "^2.2.2",
+    "@gradio/utils": "^0.12.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.16.0"
+    "@gradio/preview": "^0.16.2"
   },
   "main": "./Index.svelte",
   "main_changeset": true,

package/types.ts

@@ -8,5 +8,6 @@ export interface DownloadButtonProps {
 }
 
 export interface DownloadButtonEvents {
+	change: never;
 	click: never;
 }