Back to Repositories

Testing Dynamic Country Selection and Filtering in gradio-app

This test suite implements comprehensive validation of country filtering and random country selection functionality in a Gradio application. It focuses on testing UI interactions, state changes, and dynamic content updates using Playwright test framework.

Test Coverage Overview

The test suite provides thorough coverage of two main features: country filtering and random country selection.

Key functionality tested includes:

Country list filtering with range slider
Alphabetical ordering toggle
Random country generation
Start/Stop functionality for random selection

Edge cases covered include empty state validation and value persistence checks.

Implementation Analysis

The testing approach utilizes Playwright’s page object model and async/await patterns for robust UI testing. Tests leverage getByTestId and getByLabel selectors for reliable element targeting.

Technical implementation includes:

Async test functions with page fixture
Element interaction assertions
Wait timeouts for dynamic content
Value comparison checks

Technical Details

Testing tools and configuration:

Playwright test runner
Custom @self/tootils package integration
TestId and accessibility label selectors
Async timeout handling
Element state and value assertions

Best Practices Demonstrated

The test suite exemplifies strong testing practices through clear test organization and robust assertion patterns.

Notable practices include:

Descriptive test naming
Isolated test cases
Accessibility-first selector strategy
Comprehensive state validation
Proper async/await usage

gradio-app/gradio

js/spa/test/function_values.spec.ts

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

test("Test Country Filter", async ({ page }) => {
	const countries_list = page.getByTestId("json");
	await expect(countries_list).toContainText("Algeria");
	await expect(countries_list).not.toContainText("Argentina");
	await page.getByLabel("range slider for Country Count").fill("3");
	await expect(countries_list).toContainText("Algeria");
	await expect(countries_list).toContainText("Argentina");
	await page.getByLabel("Alphabetical Order").uncheck();
	await expect(countries_list).not.toContainText("Algeria");
	await expect(countries_list).toContainText("Sudan");
});

test("Test Random Country List", async ({ page }) => {
	const random_country_box = page.getByLabel("Random Country");
	const random_countries_box = page.getByLabel("Random Countries");
	await expect(random_country_box).not.toBeEmpty();
	await expect(random_countries_box).not.toBeEmpty();
	const first_country_value = await random_country_box.inputValue();
	const first_countries_value = await random_countries_box.inputValue();
	await expect(random_country_box).not.toHaveValue(
		first_country_value as string
	);
	await expect(random_countries_box).not.toHaveValue(
		first_countries_value as string
	);
	await page.getByRole("button", { name: "Stop" }).click();
	await page.waitForTimeout(2000);
	const current_country_value = await random_country_box.inputValue();
	const current_countries_value = await random_countries_box.inputValue();
	await expect(random_country_box).toHaveValue(current_country_value as string);
	await expect(random_countries_box).toHaveValue(
		current_countries_value as string
	);
	await page.getByRole("button", { name: "Start" }).click();
	await expect(random_country_box).not.toHaveValue(
		current_country_value as string
	);
	await expect(random_countries_box).not.toHaveValue(
		current_countries_value as string
	);
});