Back to Repositories

Testing Gallery Component Event Handling in Gradio

This test suite validates the Gallery component functionality in Gradio, focusing on preview mode, selection events, and file upload capabilities. The tests ensure proper display of media content, accurate event handling, and seamless user interactions.

Test Coverage Overview

The test suite provides comprehensive coverage of the Gallery component’s core features.

Key functionality tested includes:

Preview mode rendering of images and videos
Selection event value validation
Download functionality verification
Upload event handling
Clear functionality and change events

Integration points cover file system interactions, DOM events, and media handling.

Implementation Analysis

The testing approach utilizes Playwright’s page object model for browser interaction simulation. The implementation follows an event-driven pattern, testing both UI elements and underlying functionality.

Technical patterns include:

Async/await for handling asynchronous operations
Promise-based file chooser events
Role-based element selection
Attribute verification for media sources

Technical Details

Testing tools and setup:

Playwright test runner for browser automation
Custom @self/tootils framework integration
File system access for upload testing
Event listeners for download and file chooser interactions
TestID and ARIA label selectors for reliable element targeting

Best Practices Demonstrated

The test suite exhibits strong testing practices through isolated test cases and clear assertions. Each test focuses on a specific feature set with appropriate setup and verification.

Notable practices include:

Atomic test cases with single responsibility
Consistent use of async/await patterns
Robust element selection strategies
Comprehensive event handling verification
Clear test case naming conventions

gradio-app/gradio

js/spa/test/gallery_component_events.spec.ts

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

test("Gallery preview mode displays all images/videos correctly.", async ({
	page
}) => {
	await page.getByRole("button", { name: "Run" }).click();
	await page.getByLabel("Thumbnail 2 of 3").click();

	await expect(
		await page.getByTestId("detailed-video").getAttribute("src")
	).toEqual("https://gradio-static-files.s3.amazonaws.com/world.mp4");

	await expect(
		await page.getByTestId("thumbnail 1").getAttribute("src")
	).toEqual("https://gradio-builds.s3.amazonaws.com/assets/cheetah-003.jpg");
});

test("Gallery select event returns the right value and the download button works correctly", async ({
	page
}) => {
	await page.getByRole("button", { name: "Run" }).click();
	await page.getByLabel("Thumbnail 2 of 3").click();
	await expect(page.getByLabel("Select Data")).toHaveValue(
		"https://gradio-static-files.s3.amazonaws.com/world.mp4"
	);

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

test("Gallery click-to-upload, upload and change events work correctly", async ({
	page
}) => {
	const [fileChooser] = await Promise.all([
		page.waitForEvent("filechooser"),
		page
			.getByRole("button", { name: "Drop Media Here - or - Click to Upload" })
			.first()
			.click()
	]);
	await fileChooser.setFiles([
		"./test/files/cheetah1.jpg",
		"./test/files/cheetah1.jpg"
	]);

	await expect(page.getByLabel("Num Upload")).toHaveValue("1");
	await page.getByLabel("Clear").first().click();
	await expect(page.getByLabel("Num Change")).toHaveValue("1");
});