Back to Repositories

Testing Model3D Component File Operations in Gradio

This test suite validates the Model3D component functionality in Gradio, focusing on file upload interactions and event handling. The tests verify both click-to-upload and drag-and-drop capabilities, along with associated event counters and download functionality.

Test Coverage Overview

The test suite provides comprehensive coverage of Model3D component interactions.

Key areas tested include:

Click-to-upload functionality
Drag-and-drop file upload
Event counter validation (change, upload, clear events)
File download capabilities
Component state management

Implementation Analysis

The testing approach utilizes Playwright’s page object model for browser interaction simulation. The implementation leverages custom utilities like drag_and_drop_file for complex interactions, while maintaining clear assertions for event counting and state verification.

Technical patterns include:

Async/await pattern for handling file operations
Event listener validation
File upload simulation
Download event interception

Technical Details

Testing infrastructure includes:

Playwright test runner
Custom utilities (@self/tootils)
File input handling
Event tracking mechanisms
Download event listeners
Component state assertions

Best Practices Demonstrated

The test suite exemplifies robust testing practices through clear separation of concerns and comprehensive validation.

Notable practices include:

Isolated test cases for different upload methods
Event counter validation
File operation verification
Clear component state management
Explicit success criteria

gradio-app/gradio

js/spa/test/model3d_component_events.spec.ts

            
import { test, expect, drag_and_drop_file } from "@self/tootils";

test("Model3D click-to-upload uploads file successfuly. Upload and clear events work correctly. Downloading works.", async ({
	page
}) => {
	await page
		.getByRole("button", { name: "Drop File Here - or - Click to Upload" })
		.click();
	const uploader = await page.locator("input[type=file]");
	const change_counter = await page.getByLabel("# Change Events");
	const upload_counter = await page.getByLabel("# Upload Events");
	const clear_counter = await page.getByLabel("# Clear Events");

	await uploader.setInputFiles("./test/files/face.obj");

	await expect(change_counter).toHaveValue("1");
	await expect(upload_counter).toHaveValue("1");

	await page.getByLabel("Clear").nth(0).click();
	await expect(change_counter).toHaveValue("2");
	await expect(clear_counter).toHaveValue("1");
	await expect(await page.getByLabel("Clear Value")).toHaveValue("");

	const downloadPromise = page.waitForEvent("download");
	await page.getByLabel("Download").click();
	const download = await downloadPromise;
	await expect(download.suggestedFilename()).toBe("face.obj");
});

test("Model3D drag-and-drop uploads a file to the server correctly.", async ({
	page
}) => {
	await drag_and_drop_file(
		page,
		"input[type=file]",
		"./test/files/face.obj",
		"face.obj"
	);
	await expect(await page.getByLabel("# Change Events")).toHaveValue("1");
	await expect(await page.getByLabel("# Upload Events")).toHaveValue("1");
});