Back to Repositories

Testing Event Listener Implementation in Gradio Form Components

This test suite validates event listener functionality in a Gradio application’s form interface, focusing on input handling and output validation. The tests verify both button click and Enter key press events for a greeting form component.

Test Coverage Overview

The test suite provides comprehensive coverage of form input event handling.

Key areas tested include:

Button click event handling
Enter key press event handling
Text input validation
Output state verification
Form reset functionality

Implementation Analysis

The testing approach uses page object interaction patterns with TypeScript and Playwright. The implementation leverages locator-based element selection and async/await patterns for handling UI interactions.

Key patterns include:

Sequential text input validation
Multiple textarea element handling
Event trigger verification
State management testing

Technical Details

Testing infrastructure includes:

Playwright for browser automation
TypeScript for type-safe testing
Custom @self/tootils testing utilities
Async test execution environment
Page object model for element interaction

Best Practices Demonstrated

The test implementation showcases several testing best practices.

Notable practices include:

Isolated test scenarios
Clear arrangement of test steps
Explicit expectations
Element state verification
Multiple interaction method testing

gradio-app/gradio

js/spa/test/on_listener_test.spec.ts

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

test("On listener works.", async ({ page }) => {
	const name_box = await page.locator("textarea").nth(0);
	const output_box = await page.locator("textarea").nth(1);
	const trigger1_box = await page.locator("textarea").nth(2);
	const trigger2_box = await page.locator("textarea").nth(3);

	await name_box.fill("Jimmy");
	await page.click("text=Greet");
	await expect(output_box).toHaveValue("Hello Jimmy!");
	await expect(trigger1_box).toHaveValue("Button");
	await expect(name_box).toHaveValue("");
	await expect(trigger2_box).toHaveValue("Button");

	await name_box.fill("Sally");
	await name_box.press("Enter");
	await expect(output_box).toHaveValue("Hello Sally!");
	await expect(trigger1_box).toHaveValue("Textbox");
	await expect(name_box).toHaveValue("");
	await expect(trigger2_box).toHaveValue("Textbox");
});