Back to Repositories

Testing Image Component Event Handling in gradio-app/gradio

This test suite validates the Image component functionality in the Gradio application, focusing on change event handling and image value updates. The tests ensure proper event triggering and state management for image displays.

Test Coverage Overview

The test suite covers core image component functionality with emphasis on event handling.

Key areas tested include:

Image value change event triggering
Single event emission verification
Loading status management
Component property handling

Implementation Analysis

The testing approach utilizes Vitest and custom render utilities to validate component behavior. The implementation leverages mock functions for HTMLMediaElement methods and implements i18n setup for internationalization support.

Key patterns include:

Component rendering with comprehensive props
Event listener mocking and validation
Cleanup procedures between tests

Technical Details

Testing tools and configuration:

Vitest for test runner and assertions
Custom render utility for Svelte components
Mock implementations for media elements
i18n setup for localization testing
Automated cleanup procedures

Best Practices Demonstrated

The test suite demonstrates strong testing practices through isolated component testing and proper setup/teardown procedures.

Notable practices include:

Proper test isolation with beforeAll/beforeEach/afterEach hooks
Comprehensive prop testing
Event handling verification
Mock implementation of browser APIs

gradio-app/gradio

js/image/Image.test.ts

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

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

const loading_status = {
	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" as LoadingStatus["show_progress"]
};

describe("Image", () => {
	beforeAll(() => {
		window.HTMLMediaElement.prototype.play = vi.fn();
		window.HTMLMediaElement.prototype.pause = vi.fn();
	});
	beforeEach(setupi18n);
	afterEach(() => cleanup());

	test("image change event trigger fires when value is changed and only fires once", async () => {
		const { component, listen } = await render(Image, {
			show_label: true,
			loading_status,
			value: {
				url: "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png",
				orig_name: "bus.png",
				path: "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"
			},
			streaming: false,
			pending: false,
			label: "Test Label",
			width: 224,
			height: 224,
			mirror_webcam: false,
			// brush_color: "#000000",
			// brush_radius: 5,
			// mask_opacity: 0.5,
			interactive: true
		});

		const mock = listen("change");

		component.value = {
			url: "https://github.com/gradio-app/gradio/blob/main/test/test_files/cheetah1.jpg",
			orig_name: "bus.png",
			path: "https://github.com/gradio-app/gradio/blob/main/test/test_files/cheetah1.jpg"
		};
		assert.equal(mock.callCount, 1);
	});
});