Back to Repositories

Testing Clear Component Functionality in Gradio-App

This test suite validates the clear component functionality and value management in Gradio’s UI components. It focuses on component value initialization, clearing operations, and visibility controls for the clear button feature.

Test Coverage Overview

The test suite provides comprehensive coverage of component value management and clear functionality.

Key areas tested include:

Component value initialization and validation
Clear button functionality across multiple components
Dynamic visibility control of the clear button
Edge cases for different component types (TextBox, Slider, Dropdown)

Implementation Analysis

The testing approach utilizes Playwright’s page object model for UI interaction testing. The implementation follows a behavior-driven pattern, validating both component state and user interactions.

Technical patterns include:

Async/await pattern for handling UI interactions
Component label-based selection strategy
Value assertion chains for different component types
Visibility state management verification

Technical Details

Testing tools and configuration:

Testing Framework: Custom @self/tootils implementation
UI Testing: Playwright for browser automation
Component Selectors: Label-based and text-based selectors
Assertion Library: Expect assertions for value and state validation

Best Practices Demonstrated

The test suite exemplifies several testing best practices in UI component testing.

Notable practices include:

Isolated test cases for specific functionality
Clear test descriptions and intentions
Consistent component selection strategies
Comprehensive state verification
Proper async/await usage for UI interactions

gradio-app/gradio

js/spa/test/clear_components.spec.ts

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

test("Components value can be set via callable to a non-None value", async ({
	page
}) => {
	const textBoxValue = await page.getByLabel(`component_00`).inputValue();
	expect(textBoxValue.length).toBeGreaterThan(1);

	const sliderValue = await page.getByLabel(`component_01`).inputValue();
	expect(parseFloat(sliderValue)).toBeGreaterThan(0);

	const dropDownValue = await page.getByLabel(`component_07`).inputValue();
	expect(Array("a", "b", "c").includes(dropDownValue)).toBeTruthy();
});

test("gr.ClearButton clears every component's value", async ({ page }) => {
	await page.click("text=Get Values");
	await expect(page.getByLabel("Are all cleared?")).toHaveValue("False");
	await page.click("text=Clear");
	await page.click("text=Get Values");
	await expect(page.getByLabel("Are all cleared?")).toHaveValue("True");
});

test("gr.ClearButton can be made hidden and unhidden", async ({ page }) => {
	await page.click("text=Hide");
	const button = await page.locator("button", { hasText: "Clear" });
	await expect(button).toBeHidden();
	await page.click("text=Reveal");
	await expect(button).not.toBeHidden();
});