@gradio/model3d 0.16.8 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @gradio/model3d
 
+## 0.17.0
+
+### Features
+
+- [#13275](https://github.com/gradio-app/gradio/pull/13275) [`2d025c5`](https://github.com/gradio-app/gradio/commit/2d025c56cffb5c4eecbe47515ec771b5ecf46611) - Model3D Unit Tests.  Thanks @dawoodkhan82!
+
+## 0.16.9
+
+### Fixes
+
+- [#13288](https://github.com/gradio-app/gradio/pull/13288) [`d75e311`](https://github.com/gradio-app/gradio/commit/d75e311a4b64fc1998b6deda3134a3dc6efb5dd5) - `model3d` ply freeze fix.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/atoms@0.24.0
+- @gradio/statustracker@0.14.1
+- @gradio/upload@0.17.9
+
 ## 0.16.8
 
 ### Dependency updates

package/Model3D.test.ts

@@ -0,0 +1,737 @@
+import {
+	test,
+	describe,
+	afterEach,
+	beforeAll,
+	afterAll,
+	expect,
+	vi
+} from "vitest";
+import {
+	cleanup,
+	render,
+	waitFor,
+	mock_client,
+	upload_file,
+	drop_file,
+	download_file,
+	TEST_GLTF,
+	TEST_PLY,
+	TEST_SPLAT
+} from "@self/tootils/render";
+import { run_shared_prop_tests } from "@self/tootils/shared-prop-tests";
+import event from "@testing-library/user-event";
+
+import Model3D from "./Index.svelte";
+
+// BabylonJS and gsplat perform async initialization (canvas setup, model loading)
+// that can complete after component cleanup, causing unhandled rejections.
+// These are harmless race conditions in the 3D rendering libraries, not test bugs.
+function suppress_3d_library_errors(e: PromiseRejectionEvent): void {
+	const msg = e.reason?.message ?? "";
+	if (
+		msg.includes("addEventListener") ||
+		msg.includes("Viewer is disposed") ||
+		msg.includes("Invalid URL") ||
+		msg.includes("Unsupported property type")
+	) {
+		e.preventDefault();
+	}
+}
+
+beforeAll(() => {
+	window.addEventListener("unhandledrejection", suppress_3d_library_errors);
+});
+
+afterAll(() => {
+	window.removeEventListener("unhandledrejection", suppress_3d_library_errors);
+});
+
+const base_props = {
+	label: "3D Model",
+	show_label: true,
+	interactive: false,
+	value: null as any,
+	display_mode: "solid" as "solid" | "point_cloud" | "wireframe",
+	clear_color: [0, 0, 0, 0] as [number, number, number, number],
+	zoom_speed: 1,
+	camera_position: [null, null, null] as [
+		number | null,
+		number | null,
+		number | null
+	],
+	has_change_history: false,
+	buttons: null as any,
+	height: undefined
+};
+
+const interactive_props = {
+	...base_props,
+	interactive: true,
+	client: mock_client()
+};
+
+// Model3D uses BlockLabel (floating label) instead of the standard block-info label,
+// so the shared label tests don't apply — label behaviour is tested manually below.
+run_shared_prop_tests({
+	component: Model3D,
+	name: "Model3D",
+	base_props,
+	has_label: false
+});
+
+describe("Model3D", () => {
+	afterEach(() => cleanup());
+
+	test("renders empty placeholder when value is null (static)", async () => {
+		const { queryByTestId } = await render(Model3D, {
+			...base_props,
+			value: null
+		});
+
+		expect(queryByTestId("model3d")).not.toBeInTheDocument();
+	});
+
+	test("renders viewer when value is set (static)", async () => {
+		const { getByTestId } = await render(Model3D, {
+			...base_props,
+			value: TEST_GLTF
+		});
+
+		await waitFor(() => {
+			expect(getByTestId("model3d")).toBeInTheDocument();
+		});
+	});
+
+	test("default label is '3D Model' when label is empty", async () => {
+		const { getByText } = await render(Model3D, {
+			...base_props,
+			label: "",
+			show_label: true
+		});
+
+		expect(getByText("3D Model")).toBeInTheDocument();
+	});
+
+	test("custom label is rendered", async () => {
+		const { getByText } = await render(Model3D, {
+			...base_props,
+			label: "My Fancy Model",
+			show_label: true
+		});
+
+		expect(getByText("My Fancy Model")).toBeVisible();
+	});
+
+	test("show_label: false hides the label visually", async () => {
+		const { getByText } = await render(Model3D, {
+			...base_props,
+			label: "Hidden Label",
+			show_label: false
+		});
+
+		expect(getByText("Hidden Label")).not.toBeVisible();
+	});
+});
+
+describe("Static mode", () => {
+	afterEach(() => cleanup());
+
+	test("download produces file with orig_name as filename", async () => {
+		await render(Model3D, {
+			...base_props,
+			value: TEST_GLTF
+		});
+
+		const { suggested_filename } = await download_file(
+			"[data-testid='model3d-download-link']"
+		);
+		expect(suggested_filename).toBe(TEST_GLTF.orig_name);
+	});
+
+	test("download falls back to path when orig_name is missing", async () => {
+		const value_no_orig = {
+			path: "mymodel.gltf",
+			url: "/test/test_files/Box.gltf",
+			orig_name: undefined,
+			size: 100,
+			mime_type: "model/gltf+json"
+		};
+		await render(Model3D, {
+			...base_props,
+			value: value_no_orig as any
+		});
+
+		const { suggested_filename } = await download_file(
+			"[data-testid='model3d-download-link']"
+		);
+		expect(suggested_filename).toBe("mymodel.gltf");
+	});
+
+	test("undo button is disabled when has_change_history is false", async () => {
+		const { getByLabelText } = await render(Model3D, {
+			...base_props,
+			value: TEST_GLTF,
+			has_change_history: false
+		});
+
+		await waitFor(() => {
+			expect(getByLabelText("Undo")).toBeDisabled();
+		});
+	});
+
+	test(".ply value skips undo button (Canvas3DGS branch)", async () => {
+		const { queryByLabelText, getByTestId } = await render(Model3D, {
+			...base_props,
+			value: TEST_PLY
+		});
+
+		await waitFor(() => {
+			expect(getByTestId("model3d")).toBeInTheDocument();
+		});
+		expect(queryByLabelText("Undo")).not.toBeInTheDocument();
+	});
+
+	test(".splat value skips undo button (Canvas3DGS branch)", async () => {
+		const { queryByLabelText, getByTestId } = await render(Model3D, {
+			...base_props,
+			value: TEST_SPLAT
+		});
+
+		await waitFor(() => {
+			expect(getByTestId("model3d")).toBeInTheDocument();
+		});
+		expect(queryByLabelText("Undo")).not.toBeInTheDocument();
+	});
+
+	test(".gltf value shows undo button (Canvas3D branch)", async () => {
+		const { getByLabelText } = await render(Model3D, {
+			...base_props,
+			value: TEST_GLTF
+		});
+
+		await waitFor(() => {
+			expect(getByLabelText("Undo")).toBeInTheDocument();
+		});
+	});
+});
+
+describe("Interactive mode", () => {
+	afterEach(() => cleanup());
+
+	test("renders upload dropzone when value is null", async () => {
+		const { getByLabelText } = await render(Model3D, {
+			...interactive_props,
+			value: null
+		});
+
+		expect(getByLabelText("model3d.drop_to_upload")).toBeInTheDocument();
+	});
+
+	test("renders viewer with clear button when value is set", async () => {
+		const { getByLabelText, queryByLabelText } = await render(Model3D, {
+			...interactive_props,
+			value: TEST_GLTF
+		});
+
+		expect(getByLabelText("common.clear")).toBeInTheDocument();
+		expect(queryByLabelText("model3d.drop_to_upload")).not.toBeInTheDocument();
+	});
+
+	test("clicking clear transitions back to upload dropzone", async () => {
+		const { getByLabelText } = await render(Model3D, {
+			...interactive_props,
+			value: TEST_GLTF
+		});
+
+		const clear_btn = await waitFor(() => getByLabelText("common.clear"));
+		await event.click(clear_btn);
+
+		await waitFor(() => {
+			expect(getByLabelText("model3d.drop_to_upload")).toBeInTheDocument();
+		});
+	});
+
+	test("undo is available for .gltf files", async () => {
+		const { getByLabelText } = await render(Model3D, {
+			...interactive_props,
+			value: TEST_GLTF
+		});
+
+		expect(getByLabelText("common.undo")).toBeInTheDocument();
+	});
+
+	test("undo is not available for .ply files", async () => {
+		const { getByLabelText, queryByLabelText } = await render(Model3D, {
+			...interactive_props,
+			value: TEST_PLY
+		});
+
+		expect(getByLabelText("common.clear")).toBeInTheDocument();
+		expect(queryByLabelText("common.undo")).not.toBeInTheDocument();
+	});
+
+	test("undo is not available for .splat files", async () => {
+		const { getByLabelText, queryByLabelText } = await render(Model3D, {
+			...interactive_props,
+			value: TEST_SPLAT
+		});
+
+		expect(getByLabelText("common.clear")).toBeInTheDocument();
+		expect(queryByLabelText("common.undo")).not.toBeInTheDocument();
+	});
+
+	test("clicking undo does not clear the value", async () => {
+		const { getByLabelText, get_data } = await render(Model3D, {
+			...interactive_props,
+			value: TEST_GLTF
+		});
+
+		await event.click(getByLabelText("common.undo"));
+
+		const data = await get_data();
+		expect(data.value).toEqual(TEST_GLTF);
+	});
+
+	test("set_data to null shows upload dropzone", async () => {
+		const { set_data, getByLabelText } = await render(Model3D, {
+			...interactive_props,
+			value: TEST_GLTF
+		});
+
+		await set_data({ value: null });
+
+		await waitFor(() => {
+			expect(getByLabelText("model3d.drop_to_upload")).toBeInTheDocument();
+		});
+	});
+
+	test("set_data with value shows viewer and clear button", async () => {
+		const { set_data, getByLabelText, queryByLabelText } = await render(
+			Model3D,
+			{
+				...interactive_props,
+				value: null
+			}
+		);
+
+		await set_data({ value: TEST_GLTF });
+
+		await waitFor(() => {
+			expect(getByLabelText("common.clear")).toBeInTheDocument();
+		});
+		expect(queryByLabelText("model3d.drop_to_upload")).not.toBeInTheDocument();
+	});
+});
+
+describe("Events", () => {
+	afterEach(() => cleanup());
+
+	test("mounting with a null value does not fire change", async () => {
+		const { listen } = await render(Model3D, {
+			...base_props,
+			value: null
+		});
+
+		const change = listen("change", { retrospective: true });
+		expect(change).not.toHaveBeenCalled();
+	});
+
+	test("mounting with an initial value does not fire change", async () => {
+		const { listen } = await render(Model3D, {
+			...base_props,
+			value: TEST_GLTF
+		});
+
+		const change = listen("change", { retrospective: true });
+		expect(change).not.toHaveBeenCalled();
+	});
+
+	test("change fires when value changes via set_data", async () => {
+		const { listen, set_data } = await render(Model3D, {
+			...base_props,
+			value: null
+		});
+
+		const change = listen("change");
+		await set_data({ value: TEST_GLTF });
+
+		expect(change).toHaveBeenCalledTimes(1);
+	});
+
+	test("change deduplicates when set_data called with same value", async () => {
+		const { listen, set_data } = await render(Model3D, {
+			...base_props,
+			value: TEST_GLTF
+		});
+
+		const change = listen("change");
+		await set_data({ value: TEST_GLTF });
+		await set_data({ value: TEST_GLTF });
+
+		expect(change).not.toHaveBeenCalled();
+	});
+
+	test("change fires when set_data clears the value", async () => {
+		const { listen, set_data } = await render(Model3D, {
+			...base_props,
+			value: TEST_GLTF
+		});
+
+		const change = listen("change");
+		await set_data({ value: null });
+
+		expect(change).toHaveBeenCalledTimes(1);
+	});
+
+	test("clear event fires when clear button clicked (interactive)", async () => {
+		const { getByLabelText, listen } = await render(Model3D, {
+			...interactive_props,
+			value: TEST_GLTF
+		});
+
+		const clear = listen("clear");
+		const change = listen("change");
+
+		const clear_btn = await waitFor(() => getByLabelText("common.clear"));
+		await event.click(clear_btn);
+
+		expect(clear).toHaveBeenCalledTimes(1);
+		expect(change).toHaveBeenCalled();
+	});
+
+	test("custom_button_click fires with id when toolbar button clicked", async () => {
+		const { getByLabelText, listen } = await render(Model3D, {
+			...base_props,
+			value: null,
+			show_label: true,
+			buttons: [{ value: "Action", id: 42, icon: null }] as any
+		});
+
+		const custom_click = listen("custom_button_click");
+		await event.click(getByLabelText("Action"));
+
+		expect(custom_click).toHaveBeenCalledTimes(1);
+		expect(custom_click).toHaveBeenCalledWith({ id: 42 });
+	});
+
+	test("change fires when switching file types via set_data", async () => {
+		const { listen, set_data } = await render(Model3D, {
+			...base_props,
+			value: TEST_GLTF
+		});
+
+		const change = listen("change");
+		await set_data({ value: TEST_PLY });
+
+		expect(change).toHaveBeenCalledTimes(1);
+	});
+
+	test("upload event fires when file is uploaded", async () => {
+		const { listen } = await render(Model3D, {
+			...interactive_props,
+			value: null
+		});
+
+		const upload = listen("upload");
+		const change = listen("change");
+
+		await upload_file(TEST_GLTF);
+
+		await waitFor(() => {
+			expect(upload).toHaveBeenCalledTimes(1);
+		});
+		expect(change).toHaveBeenCalled();
+	});
+
+	test("drag and drop triggers upload and change events", async () => {
+		const { listen } = await render(Model3D, {
+			...interactive_props,
+			value: null
+		});
+
+		const upload = listen("upload");
+		const change = listen("change");
+
+		await drop_file(TEST_GLTF, "[aria-label='model3d.drop_to_upload']");
+
+		await waitFor(() => {
+			expect(upload).toHaveBeenCalledTimes(1);
+		});
+		expect(change).toHaveBeenCalled();
+	});
+
+	test("upload failure dispatches error event", async () => {
+		const failing_upload = vi
+			.fn()
+			.mockRejectedValue(new Error("File too large"));
+		const { listen } = await render(Model3D, {
+			...interactive_props,
+			client: {
+				upload: failing_upload,
+				stream: async () => ({ onmessage: null, close: () => {} })
+			}
+		});
+
+		const error = listen("error");
+
+		await upload_file(TEST_GLTF);
+
+		await waitFor(() => {
+			expect(failing_upload).toHaveBeenCalled();
+		});
+
+		await waitFor(() => {
+			expect(error).toHaveBeenCalledTimes(1);
+		});
+		expect(error).toHaveBeenCalledWith("File too large");
+	});
+});
+
+describe("Props: buttons", () => {
+	afterEach(() => cleanup());
+
+	test("renders buttons when show_label is true and buttons is non-empty", async () => {
+		const { getByLabelText } = await render(Model3D, {
+			...base_props,
+			value: null,
+			show_label: true,
+			buttons: [{ value: "MyBtn", id: 1, icon: null }] as any
+		});
+
+		expect(getByLabelText("MyBtn")).toBeInTheDocument();
+	});
+
+	test("does not render buttons when show_label is false", async () => {
+		const { queryByLabelText } = await render(Model3D, {
+			...base_props,
+			value: null,
+			show_label: false,
+			buttons: [{ value: "HiddenBtn", id: 1, icon: null }] as any
+		});
+
+		expect(queryByLabelText("HiddenBtn")).not.toBeInTheDocument();
+	});
+
+	test("does not render custom button when buttons is null", async () => {
+		const { queryByLabelText } = await render(Model3D, {
+			...base_props,
+			value: null,
+			show_label: true,
+			buttons: null
+		});
+
+		expect(queryByLabelText("Custom action")).not.toBeInTheDocument();
+	});
+
+	test("does not render custom button when buttons is empty array", async () => {
+		const { queryByLabelText } = await render(Model3D, {
+			...base_props,
+			value: null,
+			show_label: true,
+			buttons: []
+		});
+
+		expect(queryByLabelText("Custom action")).not.toBeInTheDocument();
+	});
+
+	test("renders multiple custom buttons", async () => {
+		const { getByLabelText } = await render(Model3D, {
+			...base_props,
+			value: null,
+			show_label: true,
+			buttons: [
+				{ value: "First", id: 1, icon: null },
+				{ value: "Second", id: 2, icon: null }
+			] as any
+		});
+
+		expect(getByLabelText("First")).toBeInTheDocument();
+		expect(getByLabelText("Second")).toBeInTheDocument();
+	});
+});
+
+describe("get_data / set_data", () => {
+	afterEach(() => cleanup());
+
+	test("get_data returns null when value is null", async () => {
+		const { get_data } = await render(Model3D, {
+			...base_props,
+			value: null
+		});
+
+		const data = await get_data();
+		expect(data.value).toBeNull();
+	});
+
+	test("get_data returns FileData when value is set", async () => {
+		const { get_data } = await render(Model3D, {
+			...base_props,
+			value: TEST_GLTF
+		});
+
+		const data = await get_data();
+		expect(data.value).toEqual(TEST_GLTF);
+	});
+
+	test("set_data populates the viewer", async () => {
+		const { set_data, getByTestId } = await render(Model3D, {
+			...base_props,
+			value: null
+		});
+
+		await set_data({ value: TEST_GLTF });
+
+		await waitFor(() => {
+			expect(getByTestId("model3d")).toBeInTheDocument();
+		});
+	});
+
+	test("set_data to null removes the viewer (static)", async () => {
+		const { set_data, queryByTestId } = await render(Model3D, {
+			...base_props,
+			value: TEST_GLTF
+		});
+
+		await set_data({ value: null });
+
+		await waitFor(() => {
+			expect(queryByTestId("model3d")).not.toBeInTheDocument();
+		});
+	});
+
+	test("round-trip: set_data then get_data returns same value", async () => {
+		const { set_data, get_data } = await render(Model3D, {
+			...base_props,
+			value: null
+		});
+
+		await set_data({ value: TEST_GLTF });
+		const data = await get_data();
+		expect(data.value).toEqual(TEST_GLTF);
+	});
+
+	test("user clear reflected in get_data (interactive)", async () => {
+		const { getByLabelText, get_data } = await render(Model3D, {
+			...interactive_props,
+			value: TEST_GLTF
+		});
+
+		const clear_btn = await waitFor(() => getByLabelText("common.clear"));
+		await event.click(clear_btn);
+
+		const data = await get_data();
+		expect(data.value).toBeNull();
+	});
+
+	test("set_data switches file type and get_data reflects it", async () => {
+		const { set_data, get_data } = await render(Model3D, {
+			...base_props,
+			value: TEST_GLTF
+		});
+
+		await set_data({ value: TEST_PLY });
+		const data = await get_data();
+		expect(data.value).toEqual(TEST_PLY);
+	});
+
+	test("set_data in interactive mode reflects in get_data", async () => {
+		const { set_data, get_data } = await render(Model3D, {
+			...interactive_props,
+			value: null
+		});
+
+		await set_data({ value: TEST_GLTF });
+		const data = await get_data();
+		expect(data.value).toEqual(TEST_GLTF);
+	});
+});
+
+describe("Edge cases", () => {
+	afterEach(() => cleanup());
+
+	test("value transition null → set → null renders correctly", async () => {
+		const { set_data, getByTestId, queryByTestId } = await render(Model3D, {
+			...base_props,
+			value: null
+		});
+
+		await set_data({ value: TEST_GLTF });
+		await waitFor(() => {
+			expect(getByTestId("model3d")).toBeInTheDocument();
+		});
+
+		await set_data({ value: null });
+		await waitFor(() => {
+			expect(queryByTestId("model3d")).not.toBeInTheDocument();
+		});
+	});
+
+	test("switching from gltf to ply removes undo button", async () => {
+		const { set_data, getByTestId, getByLabelText, queryByLabelText } =
+			await render(Model3D, {
+				...base_props,
+				value: TEST_GLTF
+			});
+
+		await waitFor(() => {
+			expect(getByLabelText("Undo")).toBeInTheDocument();
+		});
+
+		await set_data({ value: TEST_PLY });
+		await waitFor(() => {
+			expect(getByTestId("model3d")).toBeInTheDocument();
+		});
+		expect(queryByLabelText("Undo")).not.toBeInTheDocument();
+	});
+
+	test("switching from ply to gltf restores undo button", async () => {
+		const { set_data, getByTestId, getByLabelText, queryByLabelText } =
+			await render(Model3D, {
+				...base_props,
+				value: TEST_PLY
+			});
+
+		await waitFor(() => {
+			expect(getByTestId("model3d")).toBeInTheDocument();
+		});
+		expect(queryByLabelText("Undo")).not.toBeInTheDocument();
+
+		await set_data({ value: TEST_GLTF });
+		await waitFor(() => {
+			expect(getByLabelText("Undo")).toBeInTheDocument();
+		});
+	});
+});
+
+test.todo(
+	"VISUAL: display_mode='solid' renders a solid-shaded mesh — needs Playwright visual regression screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: display_mode='point_cloud' renders the mesh as points — needs Playwright visual regression screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: display_mode='wireframe' renders the mesh as wireframe — needs Playwright visual regression screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: clear_color sets the scene background colour — needs Playwright visual regression screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: zoom_speed affects wheel zoom sensitivity — needs Playwright interaction + screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: camera_position sets initial alpha/beta/radius of the camera — needs Playwright visual regression screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: height prop resizes the Block containing the viewer — needs Playwright visual regression screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: pan_speed affects drag pan sensitivity — needs Playwright interaction + screenshot comparison"
+);

package/dist/shared/Canvas3DGS.svelte

@@ -18,10 +18,10 @@
 	let canvas: HTMLCanvasElement;
 	let scene: SPLAT.Scene;
 	let camera: SPLAT.Camera;
-	let renderer = $state<SPLAT.WebGLRenderer | null>(null);
+	let renderer: SPLAT.WebGLRenderer | null = null;
 	let controls: SPLAT.OrbitControls;
 	let mounted = $state(false);
-	let frameId = $state<number | null>(null);
+	let frameId: number | null = null;
 
 	function reset_scene(): void {
 		if (frameId !== null) {

package/dist/shared/Model3D.svelte

@@ -98,6 +98,7 @@
 				href={value.url}
 				target={window.__is_colab__ ? "_blank" : null}
 				download={window.__is_colab__ ? null : value.orig_name || value.path}
+				data-testid="model3d-download-link"
 			>
 				<IconButton Icon={Download} label={i18n("common.download")} />
 			</a>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/model3d",
-  "version": "0.16.8",
+  "version": "0.17.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -13,12 +13,12 @@
     "@types/babylon": "^6.16.9",
     "dequal": "^2.0.3",
     "gsplat": "^1.2.9",
-    "@gradio/atoms": "^0.23.1",
+    "@gradio/atoms": "^0.24.0",
     "@gradio/client": "^2.2.0",
-    "@gradio/icons": "^0.15.1",
-    "@gradio/statustracker": "^0.14.0",
-    "@gradio/upload": "^0.17.8",
-    "@gradio/utils": "^0.12.2"
+    "@gradio/statustracker": "^0.14.1",
+    "@gradio/upload": "^0.17.9",
+    "@gradio/utils": "^0.12.2",
+    "@gradio/icons": "^0.15.1"
   },
   "devDependencies": {
     "@gradio/preview": "^0.16.2"

package/shared/Canvas3DGS.svelte

@@ -18,10 +18,10 @@
 	let canvas: HTMLCanvasElement;
 	let scene: SPLAT.Scene;
 	let camera: SPLAT.Camera;
-	let renderer = $state<SPLAT.WebGLRenderer | null>(null);
+	let renderer: SPLAT.WebGLRenderer | null = null;
 	let controls: SPLAT.OrbitControls;
 	let mounted = $state(false);
-	let frameId = $state<number | null>(null);
+	let frameId: number | null = null;
 
 	function reset_scene(): void {
 		if (frameId !== null) {

package/shared/Model3D.svelte

@@ -98,6 +98,7 @@
 				href={value.url}
 				target={window.__is_colab__ ? "_blank" : null}
 				download={window.__is_colab__ ? null : value.orig_name || value.path}
+				data-testid="model3d-download-link"
 			>
 				<IconButton Icon={Download} label={i18n("common.download")} />
 			</a>