fix-tests

.changeset/tired-pants-relax.md

@@ -0,0 +1,9 @@
+---
+"@gradio/app": minor
+"@gradio/lite": minor
+"@gradio/tootils": minor
+"@gradio/wasm": minor
+"gradio": minor
+---
+
+feat:fix-tests

.config/playwright.config.js

@@ -29,14 +29,18 @@ normal.projects = undefined; // Explicitly unset this field due to https://githu
 
 const lite = defineConfig(base, {
 	webServer: {
-		command: "pnpm --filter @gradio/app dev:lite",
-		url: "http://localhost:9876/lite.html",
+		command: "python -m http.server 8000 --directory ../js/lite",
+		url: "http://localhost:8000/",
 		reuseExistingServer: !process.env.CI
 	},
-	testMatch: [
-		"**/file_component_events.spec.ts",
-		"**/chatbot_multimodal.spec.ts",
-		"**/kitchen_sink.spec.ts"
+	testIgnore: [
+		"**/audio_component_events.spec.ts", // Uploading a file requires ffprobe on the server-side, which is not supported in lite.
+		"**/cancel_events.spec.ts", // This sample app uses `time.sleep` which is not supported on Pyodide.
+		"**/custom_css.spec.ts", // Media queries is not working somehow.
+		"**/clear_components.spec.ts", // `gr.Image()` with remote image is not supported in lite because it calls `httpx.stream` through `processing_utils.save_url_to_cache()`.
+		"**/load_space.spec.ts", // `gr.load()`, which calls `httpx.get` is not supported in lite.
+		"**/gradio_pdf_demo.spec.ts", // The PDF component is not working on Lite, https://github.com/gradio-app/gradio/issues/7476
+		"**/queue_full_e2e_test.spec.ts" // In Lite, there is only one event loop, so multiple requests are pushed to the queue sequentially, which is not the case in normal mode.
 	],
 	workers: 1
 });

.github/workflows/test-functional.yml

@@ -73,7 +73,18 @@ jobs:
         run: |
           . venv/bin/activate
           pnpm run test:ct
-      # - run: pnpm --filter @gradio/app test:browser:lite
+
+      - name: Build Lite
+        run: |
+          . venv/bin/activate
+          python -m pip install build
+          pnpm --filter @gradio/app build:lite
+
+      - name: Run Lite E2E tests
+        run: |
+          . venv/bin/activate
+          pnpm --filter @gradio/app test:browser:lite
+
       - name: do check
         if: always()
         uses: "gradio-app/github/actions/commit-status@main"

gradio/components/gallery.py

@@ -12,7 +12,7 @@
 from gradio_client.documentation import document
 from gradio_client.utils import is_http_url_like
 
-from gradio import processing_utils, utils
+from gradio import processing_utils, utils, wasm_utils
 from gradio.components.base import Component
 from gradio.data_classes import FileData, GradioModel, GradioRootModel
 from gradio.events import Events
@@ -201,9 +201,13 @@ def _save(img):
                 caption=caption,
             )
 
-        with ThreadPoolExecutor() as executor:
-            for o in executor.map(_save, value):
-                output.append(o)
+        if wasm_utils.IS_WASM:
+            for img in value:
+                output.append(_save(img))
+        else:
+            with ThreadPoolExecutor() as executor:
+                for o in executor.map(_save, value):
+                    output.append(o)
         return GalleryData(root=output)
 
     @staticmethod

js/app/src/lite/custom-element/index.ts

@@ -1,4 +1,6 @@
-import { create, type Options } from "..";
+// NOTE: We should only import the types from ".." to avoid the circular dependency of implementations,
+// which causes repeated executions of the ".." module in †he dev mode and can lead to multiple instances of the dev app.
+import type { create as createLiteAppFunc, Options } from "..";
 
 interface GradioComponentOptions {
 	info: Options["info"];
@@ -28,7 +30,9 @@ function parseRequirementsTxt(content: string): string[] {
 		.filter((r) => r !== "");
 }
 
-export function bootstrap_custom_element(): void {
+export function bootstrap_custom_element(
+	create: typeof createLiteAppFunc
+): void {
 	const CUSTOM_ELEMENT_NAME = "gradio-lite";
 
 	if (customElements.get(CUSTOM_ELEMENT_NAME)) {

js/app/src/lite/dev/App.svelte

@@ -79,12 +79,8 @@ def hi(name):
 			controlPageTitle: false,
 			appMode: true
 		});
-		// @ts-ignore
-		window.controller = controller; // For Playwright
 	});
 	onDestroy(() => {
-		// @ts-ignore
-		window.controller = undefined;
 		controller.unmount();
 	});
 

js/app/src/lite/index.ts

@@ -258,15 +258,37 @@ export function create(options: Options): GradioAppController {
 // @ts-ignore
 globalThis.createGradioApp = create;
 
-bootstrap_custom_element();
+bootstrap_custom_element(create);
 
 declare let BUILD_MODE: string;
+declare let GRADIO_E2E_TEST_LITE: string;
 if (BUILD_MODE === "dev") {
-	(async function () {
-		const DevApp = (await import("./dev/App.svelte")).default;
-
-		const app = new DevApp({
-			target: document.getElementById("dev-app")!
+	if (GRADIO_E2E_TEST_LITE) {
+		// For the Playwright E2E tests, we create an app and expose the controller to the global scope.
+		const controller = create({
+			target: document.getElementById("gradio-app")!,
+			code: "import gradio as gr; demo = gr.Interface(lambda x: x, 'text', 'text'); demo.launch()",
+			requirements: [],
+			sharedWorkerMode: true,
+			info: true,
+			container: true,
+			isEmbed: false,
+			initialHeight: "300px",
+			eager: false,
+			themeMode: null,
+			autoScroll: false,
+			controlPageTitle: false,
+			appMode: true
 		});
-	})();
+		// @ts-ignore
+		window.controller = controller;
+	} else {
+		(async function () {
+			const DevApp = (await import("./dev/App.svelte")).default;
+
+			const app = new DevApp({
+				target: document.getElementById("dev-app")!
+			});
+		})();
+	}
 }

js/app/test/file_explorer_component_events.spec.ts

@@ -100,14 +100,18 @@ test("File Explorer selects all children when top level directory is selected.",
 		.getByRole("checkbox")
 		.check();
 
-	const res = page.waitForEvent("response", {
-		predicate: async (response) => {
-			return (await response.text()).indexOf("process_completed") !== -1;
-		}
-	});
-	await page.getByRole("button", { name: "Run" }).click();
-
-	await res;
+	if (!process.env.GRADIO_E2E_TEST_LITE) {
+		const res = page.waitForEvent("response", {
+			predicate: async (response) => {
+				return (await response.text()).indexOf("process_completed") !== -1;
+			}
+		});
+		await page.getByRole("button", { name: "Run" }).click();
+		await res;
+	} else {
+		// Lite hooks the HTTP requests, so we can't observe the response in this case.
+		await page.getByRole("button", { name: "Run" }).click();
+	}
 
 	const directory_paths_displayed = async () => {
 		const value = await page.getByLabel("Selected Directory").inputValue();

js/app/test/image_component_events.spec.ts

@@ -66,11 +66,14 @@ test("Image copy from clipboard dispatches upload event.", async ({ page }) => {
 	});
 
 	await page.getByLabel("Paste from clipboard").click();
-	await Promise.all([
-		page.waitForResponse(
-			(resp) => resp.url().includes("/clipboard.png") && resp.status() === 200
-		)
-	]);
+	if (!process.env.GRADIO_E2E_TEST_LITE) {
+		// Lite hooks the HTTP request to the image, so we can't wait for it.
+		await Promise.all([
+			page.waitForResponse(
+				(resp) => resp.url().includes("/clipboard.png") && resp.status() === 200
+			)
+		]);
+	}
 	await expect(page.getByLabel("# Change Events").first()).toHaveValue("1");
 	await expect(page.getByLabel("# Upload Events")).toHaveValue("1");
 });

js/app/vite.config.ts

@@ -100,6 +100,7 @@ export default defineConfig(({ mode }) => {
 
 		define: {
 			BUILD_MODE: production ? JSON.stringify("prod") : JSON.stringify("dev"),
+			GRADIO_E2E_TEST_LITE: process.env.GRADIO_E2E_TEST_LITE,
 			BACKEND_URL: production
 				? JSON.stringify("")
 				: JSON.stringify("http://localhost:7860/"),

js/lite/for_e2e.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<!-- A demo HTML file to test the bundled JS and CSS files -->
+<html style="margin: 0; padding: 0; height: 100%">
+	<head>
+		<meta charset="utf-8" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
+		/>
+
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link
+			rel="preconnect"
+			href="https://fonts.gstatic.com"
+			crossorigin="anonymous"
+		/>
+
+		<script type="module" crossorigin src="./dist/lite.js"></script>
+		<link rel="stylesheet" href="./dist/lite.css" />
+	</head>
+
+	<body style="margin: 0; padding: 0; height: 100%">
+		<div id="gradio-app"></div>
+
+		<script type="module">
+			// type="module" is necessary to use `createGradioApp()`, which is loaded with <script type="module" /> tag above.
+			// For the Playwright tests, set the controller to the global scope.
+			window.controller = createGradioApp({
+				target: document.getElementById("gradio-app"),
+				code: `
+import gradio as gr
+
+def greet(name):
+		return "Hello, " + name + "!"
+
+gr.Interface(fn=greet, inputs="text", outputs="text").launch()
+`,
+				info: true,
+				container: true,
+				isEmbed: false,
+				initialHeight: "300px",
+				eager: false,
+				themeMode: null,
+				autoScroll: false,
+				controlPageTitle: false,
+				appMode: true
+			});
+		</script>
+	</body>
+</html>

js/tootils/src/index.ts

@@ -37,7 +37,7 @@ const test_normal = base.extend<{ setup: void }>({
 	]
 });
 
-const lite_url = "http://localhost:9876/lite.html";
+const lite_url = "http://localhost:8000/for_e2e.html";
 // LIte taks a long time to initialize, so we share the page across tests, sacrificing the test isolation.
 let shared_page_for_lite: Page;
 const test_lite = base.extend<{ setup: void }>({

js/wasm/src/webworker/index.ts

@@ -80,7 +80,7 @@ async function initializeEnvironment(
 	await micropip.install(["markdown-it-py[linkify]~=2.2.0"]); // On 3rd June 2023, markdown-it-py 3.0.0 has been released. The `gradio` package depends on its `>=2.0.0` version so its 3.x will be resolved. However, it conflicts with `mdit-py-plugins`'s dependency `markdown-it-py >=1.0.0,<3.0.0` and micropip currently can't resolve it. So we explicitly install the compatible version of the library here.
 	await micropip.install(["anyio==3.*"]); // `fastapi` depends on `anyio>=3.4.0,<5` so its 4.* can be installed, but it conflicts with the anyio version `httpx` depends on, `==3.*`. Seems like micropip can't resolve it for now, so we explicitly install the compatible version of the library here.
 	await micropip.add_mock_package("pydantic", "2.4.2"); // PydanticV2 is not supported on Pyodide yet. Mock it here for installing the `gradio` package to pass the version check. Then, install PydanticV1 below.
-	await micropip.add_mock_package("ruff", "0.1.7"); // `ruff` was added to the requirements of `gradio` for the custom components (https://github.com/gradio-app/gradio/pull/7030), but it's not working on PYodide yet. Also Lite doesn't need it, so mock it here for installing the `gradio` package to pass the version check.
+	await micropip.add_mock_package("ruff", "0.2.2"); // `ruff` was added to the requirements of `gradio` for the custom components (https://github.com/gradio-app/gradio/pull/7030), but it's not working on PYodide yet. Also Lite doesn't need it, so mock it here for installing the `gradio` package to pass the version check.
 	await micropip.install.callKwargs(gradioWheelUrls, {
 		keep_going: true
 	});

js/wasm/svelte/DownloadLink.svelte

@@ -33,7 +33,7 @@
 			throw new Error("Wasm worker proxy is not available.");
 		}
 
-		const url = new URL(href);
+		const url = new URL(href, window.location.href);
 		const path = url.pathname;
 
 		is_downloading = true;

js/wasm/svelte/file-url.ts

@@ -9,7 +9,7 @@ export function should_proxy_wasm_src(src: MediaSrc): boolean {
 		return false;
 	}
 
-	const url = new URL(src);
+	const url = new URL(src, window.location.href);
 	if (!is_self_host(url)) {
 		// `src` is not accessing a local server resource, so we don't need to proxy this request to the Wasm worker.
 		return false;
@@ -33,7 +33,7 @@ export async function resolve_wasm_src(src: MediaSrc): Promise<MediaSrc> {
 		return src;
 	}
 
-	const url = new URL(src);
+	const url = new URL(src, window.location.href);
 	const path = url.pathname;
 	return maybeWorkerProxy
 		.httpRequest({