Back to Repositories

Testing Blocks Essay Component Functionality in Gradio-app

This test suite validates the frontend-backend interaction and UI behavior of a Gradio blocks essay component. It covers form element state management, input validation, and dynamic UI updates through comprehensive end-to-end tests.

Test Coverage Overview

The test suite provides thorough coverage of the blocks essay component functionality, including:

Text input handling and validation
UI state management for different text modes (short/long/hidden)
Form submission behavior and button states
Dynamic dropdown interactions
Backend data validation and constraints

Implementation Analysis

The testing approach utilizes Playwright’s page object model for UI interaction and assertions. Tests follow an arrange-act-assert pattern with async/await syntax for handling UI events. The implementation leverages Playwright’s built-in selectors and custom label-based element location.

Technical Details

Testing Framework: Playwright with TypeScript
Selector Strategy: Label-based and class-based element location
Assertion Library: Playwright’s expect assertions
Test Structure: Individual test cases for frontend, backend, and interactivity

Best Practices Demonstrated

The test suite exemplifies several testing best practices:

Isolated test cases for specific functionality
Consistent element selection strategies
Comprehensive state validation
Clear test case organization
Proper async/await handling

gradio-app/gradio

js/spa/test/blocks_essay.spec.ts

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

test("updates frontend correctly", async ({ page }) => {
	const short_btn = await page.getByLabel("short");
	const long_btn = await page.getByLabel("long");
	const hidden_btn = await page.getByLabel("none");
	const textbox = await page.locator("textarea").first();

	textbox.fill("hello world");
	await long_btn.check();
	await expect(textbox).toHaveValue("Lorem ipsum dolor sit amet");
	await expect(textbox).toHaveAttribute("rows", "8");

	textbox.fill("hello world");
	await short_btn.check();
	await expect(textbox).toHaveValue("hello world");
	await expect(textbox).toHaveAttribute("rows", "2");

	await hidden_btn.check();
	await expect(textbox).toBeHidden();
});

test("updates interactivity correctly", async ({ page }) => {
	const short_btn = await page.getByLabel("short");
	const hidden_btn = await page.getByLabel("none");
	const submit_tn = await page.locator("button.primary").first();

	await hidden_btn.check();
	await expect(submit_tn).toHaveAttribute("disabled");

	await short_btn.check();
	await expect(submit_tn).not.toHaveAttribute("disabled");
});

test("updates backend correctly", async ({ page }) => {
	const min_slider = await page.getByLabel("number input for min");
	const num = await page.getByLabel("input").first();
	const output = await page.getByLabel("output");

	await min_slider.fill("10");
	await num.fill("15");
	await num.press("Enter");
	await expect(output).toHaveValue("15");

	await num.fill("25");
	await num.press("Enter");
	await expect(output).toHaveValue("25");

	await num.fill("5");
	await num.press("Enter");
	await expect(output).toHaveValue("25");
});

test("updates dropdown choices correctly", async ({ page }) => {
	const country = await page.getByLabel("Country").first();
	const city = await page.getByLabel("Cities").first();

	await country.fill("Canada");
	await country.press("Enter");
	await expect(city).toHaveValue("Toronto");

	await country.fill("Pakistan");
	await country.press("Enter");
	await expect(city).toHaveValue("Karachi");
});