@gradio/code 0.17.6 → 0.17.7

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @gradio/code
 
+## 0.17.7
+
+### Features
+
+- [#13222](https://github.com/gradio-app/gradio/pull/13222) [`10b22a0`](https://github.com/gradio-app/gradio/commit/10b22a02b7cccccbd2cfee624040b3092a4347f0) - code tests.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.23.1
+- @gradio/statustracker@0.14.0
+
 ## 0.17.6
 
 ### Dependency updates

package/Code.test.ts

@@ -0,0 +1,440 @@
+import { test, describe, afterEach, expect, vi } from "vitest";
+import { cleanup, render, fireEvent, waitFor } from "@self/tootils/render";
+import { run_shared_prop_tests } from "@self/tootils/shared-prop-tests";
+import event from "@testing-library/user-event";
+
+import Code from "./Index.svelte";
+
+const default_props = {
+	value: "print('hello')",
+	language: "python",
+	lines: 5,
+	interactive: true,
+	show_label: true,
+	label: "Code"
+};
+
+// Code uses BlockLabel (not BlockTitle/block-info) and conditionally renders it
+// via {#if show_label}, so the shared show_label:false test (which expects the
+// label to remain in the DOM with sr-only) does not apply. Custom label tests
+// are written below in the "Props: show_label" describe block.
+run_shared_prop_tests({
+	component: Code,
+	name: "Code",
+	base_props: {
+		value: "print('hello')",
+		language: "python",
+		lines: 5
+	},
+	has_label: false
+});
+
+describe("Props: show_label", () => {
+	afterEach(() => cleanup());
+
+	test("show_label=true renders the label text", async () => {
+		const { getByText } = await render(Code, {
+			...default_props,
+			label: "My Code Editor",
+			show_label: true
+		});
+		expect(getByText("My Code Editor")).toBeVisible();
+	});
+
+	test("show_label=false hides the label from view", async () => {
+		const { queryByText } = await render(Code, {
+			...default_props,
+			label: "My Code Editor",
+			show_label: false
+		});
+		// Code uses {#if show_label} so the BlockLabel is not rendered at all.
+		expect(queryByText("My Code Editor")).toBeNull();
+	});
+
+	test("label text is derived from the label prop", async () => {
+		const { getByText } = await render(Code, {
+			...default_props,
+			label: "Custom Label Text",
+			show_label: true
+		});
+		expect(getByText("Custom Label Text")).toBeTruthy();
+	});
+});
+
+describe("Code", () => {
+	afterEach(() => cleanup());
+
+	test("renders the code editor when a value is provided", async () => {
+		const { getByLabelText } = await render(Code, default_props);
+		expect(getByLabelText("Code input container")).toBeTruthy();
+	});
+
+	test("renders the editor when interactive with no value", async () => {
+		const { getByLabelText } = await render(Code, {
+			...default_props,
+			value: ""
+		});
+		expect(getByLabelText("Code input container")).toBeTruthy();
+	});
+
+	test("renders empty state (no editor) when value is empty and not interactive", async () => {
+		const { queryByLabelText } = await render(Code, {
+			...default_props,
+			value: "",
+			interactive: false
+		});
+		expect(queryByLabelText("Code input container")).toBeNull();
+	});
+
+	test("renders the editor (not empty state) when value is present and not interactive", async () => {
+		const { getByLabelText } = await render(Code, {
+			...default_props,
+			interactive: false
+		});
+		expect(getByLabelText("Code input container")).toBeTruthy();
+	});
+});
+
+describe("Props: interactive", () => {
+	afterEach(() => cleanup());
+
+	test("interactive=true makes the editor contenteditable", async () => {
+		const { getByLabelText } = await render(Code, {
+			...default_props,
+			interactive: true
+		});
+		const editor = getByLabelText("Code input container");
+		expect(editor).toHaveAttribute("contenteditable", "true");
+	});
+
+	test("interactive=false makes the editor read-only", async () => {
+		const { getByLabelText } = await render(Code, {
+			...default_props,
+			interactive: false
+		});
+		const editor = getByLabelText("Code input container");
+		expect(editor).toHaveAttribute("contenteditable", "false");
+	});
+});
+
+describe("Props: buttons", () => {
+	afterEach(() => cleanup());
+
+	test("default (null) shows both copy and download buttons", async () => {
+		const { getByLabelText, getByRole } = await render(Code, {
+			...default_props,
+			buttons: null
+		});
+		expect(getByLabelText("Copy")).toBeTruthy();
+		expect(getByLabelText("Download")).toBeTruthy();
+	});
+
+	test("buttons=['copy', 'download'] shows both buttons", async () => {
+		const { getByLabelText } = await render(Code, {
+			...default_props,
+			buttons: ["copy", "download"]
+		});
+		expect(getByLabelText("Copy")).toBeTruthy();
+		expect(getByLabelText("Download")).toBeTruthy();
+	});
+
+	test("buttons=['copy'] shows only the copy button", async () => {
+		const { getByLabelText, queryByLabelText } = await render(Code, {
+			...default_props,
+			buttons: ["copy"]
+		});
+		expect(getByLabelText("Copy")).toBeTruthy();
+		expect(queryByLabelText("Download")).toBeNull();
+	});
+
+	test("buttons=['download'] shows only the download button", async () => {
+		const { getByLabelText, queryByLabelText } = await render(Code, {
+			...default_props,
+			buttons: ["download"]
+		});
+		expect(getByLabelText("Download")).toBeTruthy();
+		expect(queryByLabelText("Copy")).toBeNull();
+	});
+
+	test("buttons=[] shows no copy or download buttons", async () => {
+		const { queryByLabelText } = await render(Code, {
+			...default_props,
+			buttons: []
+		});
+		expect(queryByLabelText("Copy")).toBeNull();
+		expect(queryByLabelText("Download")).toBeNull();
+	});
+
+	test("custom button is rendered in the toolbar", async () => {
+		const { getByRole } = await render(Code, {
+			...default_props,
+			buttons: [{ id: 42, value: "Run", icon: null }]
+		});
+		expect(getByRole("button", { name: "Run" })).toBeTruthy();
+	});
+
+	test("clicking a custom button fires custom_button_click with the button id", async () => {
+		const { listen, getByRole } = await render(Code, {
+			...default_props,
+			buttons: [{ id: 99, value: "Execute", icon: null }]
+		});
+		const custom = listen("custom_button_click");
+		await fireEvent.click(getByRole("button", { name: "Execute" }));
+		expect(custom).toHaveBeenCalledTimes(1);
+		expect(custom).toHaveBeenCalledWith({ id: 99 });
+	});
+});
+
+describe("Props: language", () => {
+	afterEach(() => cleanup());
+
+	const languages = [
+		"python",
+		"javascript",
+		"typescript",
+		"json",
+		"html",
+		"css",
+		"markdown",
+		"shell",
+		"sql",
+		"yaml",
+		"dockerfile",
+		"r",
+		"c",
+		"cpp"
+	] as const;
+
+	for (const lang of languages) {
+		test(`language='${lang}' renders without error`, async () => {
+			const { getByLabelText } = await render(Code, {
+				...default_props,
+				language: lang
+			});
+			expect(getByLabelText("Code input container")).toBeTruthy();
+		});
+	}
+
+	test("language=null renders without error", async () => {
+		const { getByLabelText } = await render(Code, {
+			...default_props,
+			language: null
+		});
+		expect(getByLabelText("Code input container")).toBeTruthy();
+	});
+});
+
+test.todo(
+	"VISUAL: lines=10 sets the minimum visible height of the editor to 10 line-heights — needs Playwright screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: max_lines=3 caps the editor height at 3 line-heights and enables scrolling for longer content — needs Playwright screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: show_line_numbers=true renders the line number gutter — needs Playwright screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: show_line_numbers=false hides the line number gutter — needs Playwright screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: wrap_lines=true wraps long lines within the container width instead of scrolling — needs Playwright screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: wrap_lines=false lets long lines overflow horizontally — needs Playwright screenshot comparison"
+);
+
+test.todo(
+	"VISUAL: autocomplete=true shows an autocompletion dropdown when typing in supported languages — needs Playwright interaction test"
+);
+
+describe("Events", () => {
+	afterEach(() => cleanup());
+
+	test("change: not fired on initial mount", async () => {
+		const { listen } = await render(Code, default_props);
+		// retrospective: true replays any events buffered during render
+		const change = listen("change", { retrospective: true });
+		expect(change).not.toHaveBeenCalled();
+	});
+
+	test("change: fired when value is updated via set_data", async () => {
+		const { listen, set_data } = await render(Code, default_props);
+		const change = listen("change");
+		await set_data({ value: "print('world')" });
+		expect(change).toHaveBeenCalledTimes(1);
+	});
+
+	test("change: not fired when the same value is set twice", async () => {
+		const { listen, set_data } = await render(Code, default_props);
+		const change = listen("change");
+		await set_data({ value: "x = 1" });
+		await set_data({ value: "x = 1" });
+		expect(change).toHaveBeenCalledTimes(1);
+	});
+
+	test("input: fired when the user types in the editor", async () => {
+		const { listen, getByLabelText } = await render(Code, default_props);
+		const input = listen("input");
+		const editor = getByLabelText("Code input container");
+		editor.focus();
+		await event.keyboard("a");
+		await waitFor(() => expect(input).toHaveBeenCalledTimes(1));
+	});
+
+	test("focus: fired when the editor gains focus", async () => {
+		const { listen, getByLabelText } = await render(Code, default_props);
+		const focus = listen("focus");
+		const editor = getByLabelText("Code input container");
+		editor.focus();
+		expect(focus).toHaveBeenCalledTimes(1);
+	});
+
+	test("blur: fired when the editor loses focus", async () => {
+		const { listen, getByLabelText } = await render(Code, default_props);
+		const blur = listen("blur");
+		const editor = getByLabelText("Code input container");
+		editor.focus();
+		editor.blur();
+		expect(blur).toHaveBeenCalledTimes(1);
+	});
+
+	test("custom_button_click: carries the button id in the payload", async () => {
+		const { listen, getByRole } = await render(Code, {
+			...default_props,
+			buttons: [{ id: 7, value: "Go", icon: null }]
+		});
+		const custom = listen("custom_button_click");
+		await fireEvent.click(getByRole("button", { name: "Go" }));
+		expect(custom).toHaveBeenCalledWith({ id: 7 });
+	});
+});
+
+describe("get_data / set_data", () => {
+	afterEach(() => cleanup());
+
+	test("get_data returns the initial value", async () => {
+		const { get_data } = await render(Code, default_props);
+		const data = await get_data();
+		expect(data.value).toBe("print('hello')");
+	});
+
+	test("set_data updates the value returned by get_data", async () => {
+		const { get_data, set_data } = await render(Code, default_props);
+		await set_data({ value: "x = 42" });
+		const data = await get_data();
+		expect(data.value).toBe("x = 42");
+	});
+
+	test("set_data / get_data round-trip", async () => {
+		const { get_data, set_data } = await render(Code, default_props);
+		const new_value = "def foo():\n    return 1";
+		await set_data({ value: new_value });
+		const data = await get_data();
+		expect(data.value).toBe(new_value);
+	});
+
+	test("user typing is reflected in get_data", async () => {
+		const { get_data, getByLabelText } = await render(Code, {
+			...default_props,
+			value: ""
+		});
+		const editor = getByLabelText("Code input container");
+		editor.focus();
+		await event.keyboard("hi");
+		await waitFor(async () => {
+			const data = await get_data();
+			expect(data.value).toContain("hi");
+		});
+	});
+});
+
+describe("Copy button", () => {
+	afterEach(() => cleanup());
+
+	test("clicking the copy button writes the code value to the clipboard", async () => {
+		// navigator.clipboard is unavailable in insecure (non-HTTPS) test origins
+		// so we mock writeText to prevent the silent no-op in Copy.svelte's `if
+		// ("clipboard" in navigator)` guard. This mock makes clipboard available.
+		Object.defineProperty(navigator, "clipboard", {
+			value: { writeText: vi.fn().mockResolvedValue(undefined) },
+			writable: true,
+			configurable: true
+		});
+
+		const { getByLabelText } = await render(Code, {
+			...default_props,
+			value: "my code"
+		});
+		await fireEvent.click(getByLabelText("Copy"));
+		expect(navigator.clipboard.writeText).toHaveBeenCalledWith("my code");
+	});
+
+	test.todo(
+		"VISUAL: copy button icon changes from Copy to Check for ~2 seconds after clicking — needs Playwright screenshot comparison"
+	);
+});
+
+describe("Download button", () => {
+	afterEach(() => cleanup());
+
+	test("download link has filename extension matching the language", async () => {
+		const { getByRole } = await render(Code, {
+			...default_props,
+			language: "python",
+			value: "print('hello')"
+		});
+		// The Download button is inside an <a download="file.py"> anchor
+		const link = getByRole("link");
+		expect(link).toHaveAttribute("download", "file.py");
+	});
+
+	test("download link href is a blob URL", async () => {
+		const { getByRole } = await render(Code, {
+			...default_props,
+			value: "some code"
+		});
+		const link = getByRole("link");
+		expect(link.getAttribute("href")).toMatch(/^blob:/);
+	});
+
+	test.todo(
+		"VISUAL: download button icon changes from Download to Check for ~2 seconds after clicking — needs Playwright screenshot comparison"
+	);
+});
+
+describe("Edge cases", () => {
+	afterEach(() => cleanup());
+
+	test("null value renders without error", async () => {
+		const { queryByLabelText } = await render(Code, {
+			...default_props,
+			value: null
+		});
+		// null value with non-interactive should show empty state (no editor)
+		// but with interactive=true, editor is shown
+		expect(queryByLabelText("Code input container")).toBeTruthy();
+	});
+
+	test("empty string value with interactive=true shows the editor", async () => {
+		const { getByLabelText } = await render(Code, {
+			...default_props,
+			value: "",
+			interactive: true
+		});
+		expect(getByLabelText("Code input container")).toBeTruthy();
+	});
+
+	test("value with leading and trailing whitespace is displayed", async () => {
+		const { get_data } = await render(Code, {
+			...default_props,
+			value: "  hello  "
+		});
+		const data = await get_data();
+		expect(data.value).toBe("  hello  ");
+	});
+});

package/Download.test.ts

@@ -0,0 +1,121 @@
+/**
+ * Tests for Download.svelte's language → file-extension mapping.
+ *
+ * Download.svelte is not a Gradio component so the tootils render() utility
+ * cannot mount it with props correctly (non-shared props are wrapped under a
+ * `props` key rather than spread at the top level). We therefore test the
+ * extension mapping through the full Code component, which is the realistic
+ * usage path anyway.
+ */
+import { test, describe, afterEach, expect } from "vitest";
+import { cleanup, render } from "@self/tootils/render";
+
+import Code from "./Index.svelte";
+
+const base_props = {
+	value: "// code",
+	lines: 5,
+	interactive: false,
+	show_label: false,
+	label: "Code",
+	buttons: ["download"] as const
+};
+
+function get_download_link(container: HTMLElement): HTMLAnchorElement {
+	// The Download component renders an <a download="file.ext"> anchor.
+	// No accessible name or role distinguishes it better than the download
+	// attribute itself, so querySelector is used as the last-resort query.
+	const link = container.querySelector<HTMLAnchorElement>("a[download]");
+	if (!link) throw new Error("No download link found in rendered output");
+	return link;
+}
+
+describe("Download: language → file extension mapping", () => {
+	afterEach(() => cleanup());
+
+	const cases: Array<[string, string]> = [
+		["python", "py"],
+		["py", "py"],
+		["javascript", "js"],
+		["js", "js"],
+		["typescript", "ts"],
+		["ts", "ts"],
+		["shell", "sh"],
+		["sh", "sh"],
+		["markdown", "md"],
+		["md", "md"],
+		["json", "json"],
+		["html", "html"],
+		["css", "css"],
+		["yaml", "yaml"],
+		["yml", "yml"],
+		["dockerfile", "dockerfile"],
+		["latex", "tex"],
+		["r", "r"],
+		["c", "c"],
+		["cpp", "cpp"]
+	];
+
+	for (const [language, expected_ext] of cases) {
+		test(`language='${language}' produces download filename 'file.${expected_ext}'`, async () => {
+			const { container } = await render(Code, {
+				...base_props,
+				language
+			});
+			const link = get_download_link(container);
+			expect(link).toHaveAttribute("download", `file.${expected_ext}`);
+		});
+	}
+
+	test("unknown language falls back to 'file.txt'", async () => {
+		const { container } = await render(Code, {
+			...base_props,
+			language: "brainfuck"
+		});
+		const link = get_download_link(container);
+		expect(link).toHaveAttribute("download", "file.txt");
+	});
+
+	test("null language falls back to 'file.txt'", async () => {
+		const { container } = await render(Code, {
+			...base_props,
+			language: null
+		});
+		const link = get_download_link(container);
+		expect(link).toHaveAttribute("download", "file.txt");
+	});
+});
+
+describe("Download: link structure", () => {
+	afterEach(() => cleanup());
+
+	test("download link href is a blob URL", async () => {
+		const { container } = await render(Code, {
+			...base_props,
+			language: "python"
+		});
+		const link = get_download_link(container);
+		expect(link.getAttribute("href")).toMatch(/^blob:/);
+	});
+
+	test("download link is visible", async () => {
+		const { container } = await render(Code, {
+			...base_props,
+			language: "python"
+		});
+		const link = get_download_link(container);
+		expect(link).toBeVisible();
+	});
+
+	test("download link contains a button with label 'Download'", async () => {
+		const { getByLabelText } = await render(Code, {
+			...base_props,
+			language: "python"
+		});
+		expect(getByLabelText("Download")).toBeTruthy();
+	});
+
+	test.todo(
+		"VISUAL: clicking the download link changes the icon from Download to Check for ~2 seconds — needs Playwright screenshot comparison"
+	);
+});

package/Index.svelte

@@ -23,7 +23,7 @@
 
 	let label = $derived(gradio.shared.label || gradio.i18n("code.code"));
 	let old_value = $state(gradio.props.value);
-	let first_change = true;
+	let first_change = $state(true);
 
 	$effect(() => {
 		if (first_change) {

package/dist/Index.svelte

@@ -23,7 +23,7 @@
 
 	let label = $derived(gradio.shared.label || gradio.i18n("code.code"));
 	let old_value = $state(gradio.props.value);
-	let first_change = true;
+	let first_change = $state(true);
 
 	$effect(() => {
 		if (first_change) {

package/dist/shared/Copy.svelte

@@ -32,4 +32,4 @@
 	});
 </script>
 
-<IconButton Icon={copied ? Check : Copy} onclick={handle_copy} />
+<IconButton Icon={copied ? Check : Copy} label="Copy" onclick={handle_copy} />

package/dist/shared/Download.svelte

@@ -63,5 +63,5 @@
 	href={download_value}
 	onclick={copy_feedback}
 >
-	<IconButton Icon={copied ? Check : Download} />
+	<IconButton Icon={copied ? Check : Download} label="Download" />
 </DownloadLink>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/code",
-  "version": "0.17.6",
+  "version": "0.17.7",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -27,11 +27,11 @@
     "cm6-theme-basic-dark": "^0.2.0",
     "cm6-theme-basic-light": "^0.2.0",
     "codemirror": "^6.0.2",
-    "@gradio/atoms": "^0.23.0",
-    "@gradio/utils": "^0.12.2",
+    "@gradio/atoms": "^0.23.1",
+    "@gradio/statustracker": "^0.14.0",
     "@gradio/icons": "^0.15.1",
     "@gradio/upload": "^0.17.8",
-    "@gradio/statustracker": "^0.13.1"
+    "@gradio/utils": "^0.12.2"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/Copy.svelte

@@ -32,4 +32,4 @@
 	});
 </script>
 
-<IconButton Icon={copied ? Check : Copy} onclick={handle_copy} />
+<IconButton Icon={copied ? Check : Copy} label="Copy" onclick={handle_copy} />

package/shared/Download.svelte

@@ -63,5 +63,5 @@
 	href={download_value}
 	onclick={copy_feedback}
 >
-	<IconButton Icon={copied ? Check : Download} />
+	<IconButton Icon={copied ? Check : Download} label="Download" />
 </DownloadLink>