Back to Repositories

Testing File Upload Operations in Gradio Client

This test suite validates file upload functionality in the Gradio client, focusing on successful file uploads and error handling scenarios. The tests ensure reliable file processing and proper error management for the client-server communication.

Test Coverage Overview

The test suite provides comprehensive coverage of file upload operations in the Gradio client.

Key areas tested include:

Successful file upload verification
File type handling (JPEG images, text files)
Response validation for uploaded files
Server error scenarios and connection failures

Implementation Analysis

The testing approach utilizes Vitest for TypeScript testing, implementing isolated test cases with mock servers. The implementation employs the Client class connect method and upload_files functionality, with proper setup and teardown procedures using beforeAll and afterAll hooks.

Notable patterns include:

Async/await testing patterns
Mock server initialization
Blob creation for file simulation
Error case handling with .skip functionality

Technical Details

Testing tools and configuration:

Vitest as the primary testing framework
Mock Service Worker for server simulation
TypeScript for type-safe testing
Blob API for file content simulation
Jest-style assertions (expect)
Server handlers for request interception

Best Practices Demonstrated

The test suite exhibits several testing best practices for robust file upload validation.

Notable practices include:

Proper test isolation with server reset between tests
Error case coverage with specific assertions
Clean setup/teardown patterns
Async operation handling
Type-safe testing approaches
Modular test organization

gradio-app/gradio

client/js/src/test/upload_files.test.ts

            
import { describe, it, expect, afterEach, beforeAll, afterAll } from "vitest";

import { Client } from "..";
import { initialise_server } from "./server";

const server = initialise_server();

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

describe("upload_files", () => {
	it("should upload files successfully", async () => {
		const root_url = "https://hmb-hello-world.hf.space";

		const client = await Client.connect("hmb/hello_world", {
			hf_token: "hf_token"
		});

		const files = [new Blob([], { type: "image/jpeg" })];

		const response = await client.upload_files(root_url, files);

		if (!response.files) {
			throw new Error("No files returned");
		}

		expect(response.files).toHaveLength(1);
		expect(response.files[0]).toBe("lion.jpg");
	});

	it.skip("should handle a server error when connected to a running app and uploading files", async () => {
		const client = await Client.connect("hmb/server_test");

		const root_url = "https://hmb-server-test.hf.space";
		const files = [new Blob([""], { type: "text/plain" })];

		await expect(client.upload_files(root_url, files)).rejects.toThrow(
			"Connection errored out. Failed to fetch"
		);
	});
});