Back to Repositories

Testing Mini Leaderboard Component Functionality in Gradio

This test suite validates the functionality of a mini leaderboard component in the Gradio application, focusing on search, filtering, and column management features. The tests ensure proper data display and user interaction with the leaderboard interface.

Test Coverage Overview

The test suite provides comprehensive coverage of the mini leaderboard’s core functionality:

Search functionality validation with specific model filtering
Dynamic column management (addition and removal)
Model type filtering using checkbox controls
Viewport visibility verification for UI elements

Implementation Analysis

The tests utilize a page-object model approach with Playwright’s test framework. They implement async/await patterns for handling UI interactions and employ expect assertions to verify element visibility and state changes.

Key testing patterns include viewport checks, element interaction simulation, and state verification through DOM queries.

Technical Details

Testing Infrastructure:

Playwright test runner for browser automation
Custom test utilities from @self/tootils
TestID and role-based element selection
Viewport-based visibility assertions
Checkbox and text input interaction methods

Best Practices Demonstrated

The test suite exemplifies several testing best practices:

Isolated test cases for specific functionality
Consistent element selection strategies
Clear test case naming conventions
Proper async/await usage for UI interactions
Reliable element visibility assertions

gradio-app/gradio

js/spa/test/mini_leaderboard.spec.ts

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

test("Search bar filters dataframe correctly.", async ({ page }) => {
	await page.getByTestId("textbox").fill("yam-peleg");
	await page.getByTestId("textbox").press("Enter");
	await expect(
		page
			.getByRole("button", { name: "yam-peleg/Experiment26-7B", exact: true })
			.first()
	).toBeInViewport();
});

test("Column selection adds columns to the dataframe.", async ({ page }) => {
	await expect(
		page
			.locator("#leaderboard-table svelte-virtual-table-viewport")
			.getByRole("button", { name: "Type" })
	).not.toBeInViewport();
	await page.getByLabel("Type").check();
	await expect(
		page
			.locator("#leaderboard-table svelte-virtual-table-viewport")
			.getByRole("button", { name: "Type" })
	).toBeInViewport();
});

test("Column selection removes columns to the dataframe.", async ({ page }) => {
	await expect(
		page
			.locator("#leaderboard-table svelte-virtual-table-viewport")
			.getByRole("button", { name: "ARC" })
	).toBeInViewport();
	await page.getByLabel("ARC", { exact: true }).uncheck();
	await expect(
		page
			.locator("#leaderboard-table svelte-virtual-table-viewport")
			.getByRole("button", { name: "ARC" })
	).not.toBeInViewport();
});

test("Model Types Checkbox filters models from the table", async ({ page }) => {
	await expect(
		page.getByRole("button", { name: "Qwen/Qwen-72B", exact: true }).first()
	).not.toBeInViewport();
	await page.getByLabel("🔶").uncheck();
	await page.getByLabel("💬").uncheck();
	await page.getByLabel("🤝").uncheck();
	await expect(
		page.getByRole("button", { name: "Qwen/Qwen-72B", exact: true }).first()
	).toBeInViewport();
});