Back to Repositories

Testing Gallery Component Media Rendering in gradio-app/gradio

This test suite validates the Gallery component functionality in the Gradio application, focusing on image and video rendering capabilities and change event handling. The tests ensure proper media display and event triggering behavior.

Test Coverage Overview

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

Key areas tested include:

Image rendering verification
Video content display
Change event handling logic
Component state management

Edge cases covered include duplicate content handling and event trigger conditions.

Implementation Analysis

The testing approach utilizes Vitest and custom rendering utilities for component validation. The implementation employs modern TypeScript patterns with strong typing for loading status and media content structures.

Framework-specific features utilized include:

Vitest’s test and describe blocks
Custom render utility for Svelte components
Cleanup hooks for test isolation
Mock timer management

Technical Details

Testing tools and configuration:

Vitest as the test runner
Custom @self/tootils rendering utility
TypeScript for type safety
i18n setup for internationalization support
LoadingStatus interface implementation
Test data fixtures for media content

Best Practices Demonstrated

The test suite exemplifies high-quality testing practices through consistent structure and thorough validation approaches.

Notable practices include:

Proper test isolation with afterEach cleanup
Strong typing for component props
Comprehensive assertion coverage
Clear test case organization
Meaningful test descriptions

gradio-app/gradio

js/gallery/Gallery.test.ts

            
import { test, describe, assert, afterEach, vi } from "vitest";
import { cleanup, render } from "@self/tootils";
import { setupi18n } from "../core/src/i18n";

import Gallery from "./Index.svelte";
import type { LoadingStatus } from "@gradio/statustracker";

const loading_status: LoadingStatus = {
	eta: 0,
	queue_position: 1,
	queue_size: 1,
	status: "complete" as LoadingStatus["status"],
	scroll_to_output: false,
	visible: true,
	fn_index: 0,
	show_progress: "full"
};

describe("Gallery", () => {
	afterEach(() => {
		cleanup();
		vi.useRealTimers();
	});
	beforeEach(() => {
		setupi18n();
	});
	test("renders the image provided", async () => {
		const { getByTestId } = await render(Gallery, {
			show_label: true,
			label: "Gallery",
			loading_status: loading_status,
			preview: true,
			value: [
				{
					image: {
						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg",
						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg"
					},
					caption: null
				}
			]
		});
		let item = getByTestId("detailed-image") as HTMLImageElement;
		assert.equal(
			item.src,
			"https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg"
		);
	});

	test("renders the video provided", async () => {
		const { getByTestId } = await render(Gallery, {
			show_label: true,
			label: "Gallery",
			loading_status: loading_status,
			preview: true,
			value: [
				{
					video: {
						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/world.mp4",
						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/world.mp4"
					},
					caption: null
				}
			]
		});
		let item = getByTestId("detailed-video") as HTMLVideoElement;
		assert.equal(
			item.src,
			"https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/world.mp4"
		);
	});

	test("triggers the change event if and only if the images change", async () => {
		const { listen, component } = await render(Gallery, {
			show_label: true,
			label: "Gallery",
			loading_status: loading_status,
			preview: true,
			value: [
				{
					image: {
						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg",
						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg"
					},
					caption: null
				}
			]
		});
		const change_event = listen("change");

		await component.$set({
			value: [
				{
					image: {
						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg",
						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg"
					},
					caption: null
				}
			]
		});
		assert.equal(change_event.callCount, 0);
	});
});