switch to browser testing in unit tests (#12998)

* switch to browser testing in unit tests

* don't check to media devices that don't exist

* fix client tests

* address comments

* Fix code

---------

Co-authored-by: Freddy Boulton <41651716+freddyaboulton@users.noreply.github.com>

Author: pngwn

.changeset/silly-worms-smoke.md

@@ -0,0 +1,10 @@
+---
+"@gradio/image": minor
+"@gradio/statustracker": minor
+"@gradio/wasm": minor
+"@self/spa": minor
+"@self/tootils": minor
+"gradio": minor
+---
+
+feat:use a real browser environment for unit tests

.github/workflows/tests-js.yml

@@ -50,6 +50,8 @@ jobs:
         uses: "gradio-app/gradio/.github/actions/install-frontend-deps@main"
         with:
           skip_build: true
+      - name: install playwright
+        run: pnpm exec playwright install
       - name: build client
         run: pnpm --filter @gradio/client build
       - name: format check

client/js/package.json

@@ -29,9 +29,9 @@
 		"generate_types": "tsc",
 		"clean": "rm -rf dist",
 		"build": "pnpm clean && pnpm bundle && pnpm bundle:browser && pnpm generate_types",
-		"test": "pnpm test:client && pnpm test:client:node",
-		"test:client": "vitest run -c vite.config.js",
-		"test:client:node": "TEST_MODE=node vitest run -c vite.config.js",
+		"test": "pnpm test:browser && pnpm test:node",
+		"test:browser": "vitest run -c vite.config.ts",
+		"test:node": "NODE_NO_WARNINGS=1 TEST_MODE=node vitest run -c vite.config.ts",
 		"preview:browser": "vite dev --mode=preview"
 	},
 	"engines": {

client/js/src/test/api_info.test.ts

@@ -15,11 +15,14 @@ import {
 import { initialise_server } from "./server";
 import { transformed_api_info } from "./test_data";
 
-const server = initialise_server();
+let server: Awaited<ReturnType<typeof initialise_server>>;
 
-beforeAll(() => server.listen());
+beforeAll(async () => {
+	server = await initialise_server();
+	await server.start({ quiet: true });
+});
 afterEach(() => server.resetHandlers());
-afterAll(() => server.close());
+afterAll(() => server.stop());
 
 describe("handle_message", () => {
 	it("should return type 'data' when msg is 'send_data'", () => {
@@ -447,7 +450,11 @@ describe("process_endpoint", () => {
 		try {
 			await process_endpoint(app_reference, token);
 		} catch (error) {
-			expect(error.message).toEqual(SPACE_METADATA_ERROR_MSG);
+			if (error instanceof Error) {
+				expect(error.message).toEqual(SPACE_METADATA_ERROR_MSG);
+			} else {
+				expect.fail("Error should not be unknown.");
+			}
 		}
 	});
 
@@ -602,7 +609,7 @@ describe("map_data_params", () => {
 	});
 
 	it("should return an empty array when data is an empty array", () => {
-		const data = [];
+		const data: unknown[] = [];
 
 		const result = map_data_to_params(data, endpoint_info);
 		expect(result).toEqual(data);

client/js/src/test/apply_diff.test.ts

@@ -7,6 +7,7 @@ describe("apply_diff", () => {
 			{ content: "Hi", role: "user" },
 			{ content: "How can I assist you?", role: "assistant" }
 		];
+
 		const diff: any = [
 			["delete", [0], null],
 			["delete", [0], null]