Back to Repositories

Testing Tab Component Navigation and Interaction in gradio-app/gradio

This test suite validates the functionality of a tab-based interface in the Gradio application, focusing on tab navigation, content visibility, and interactive behavior. The tests ensure proper tab switching, content display, and state management across different user interactions.

Test Coverage Overview

The test suite provides comprehensive coverage of tab component functionality:

Tab navigation and content visibility verification
Selected tab state management
Tab interactivity controls (enabling/disabling)
Cross-tab data flow and persistence
Programmatic tab selection

Implementation Analysis

The testing approach utilizes Playwright’s page object model for browser interaction simulation. Tests employ async/await patterns for handling UI updates and employ role-based selectors for robust element targeting. The implementation validates both UI state and underlying data consistency.

Technical Details

Testing tools and configuration:

Playwright test runner for browser automation
Custom tootils framework integration (@self/tootils)
Role-based element selection
Async event handling with waitForTimeout
Visibility and state assertions

Best Practices Demonstrated

The test suite exemplifies several testing best practices:

Isolation of test cases for specific functionality
Comprehensive state verification
Proper async/await usage for UI interactions
Clear test case naming and organization
Robust element selection strategies

gradio-app/gradio

js/spa/test/tabs.spec.ts

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

test("clicking through tabs shows correct content", async ({ page }) => {
	await page.getByRole("tab", { name: "Tab 2" }).click();
	await expect(page.getByText("Text 1!")).toBeHidden();
	await expect(page.getByText("Text 2!")).toBeVisible();

	await page.getByRole("tab", { name: "Tab 4" }).click();
	await expect(page.getByText("Text 2!")).toBeHidden();
	await expect(page.getByText("Text 4!")).toBeVisible();

	await page.getByRole("tab", { name: "Set 2" }).click();
	await page.getByRole("tab", { name: "Tab 12" }).click();
	await expect(page.getByText("Text 2!")).toBeHidden();
	await expect(page.getByText("Text 12!")).toBeVisible();
});

test("correct selected tab shown", async ({ page }) => {
	await page.getByRole("tab", { name: "Tab 2" }).click();
	await expect(page.getByLabel("Selected Tab")).toHaveValue("Tab 2");

	await page.getByRole("tab", { name: "Tab 5" }).click();
	await expect(page.getByLabel("Selected Tab")).toHaveValue("Tab 5");

	await page
		.getByRole("button", { name: "Make Even Tabs Uninteractive" })
		.click();
	await page.waitForTimeout(1000);

	await expect(page.getByRole("tab", { name: "Tab 2" })).toBeDisabled();

	await page.getByRole("button", { name: "Make All Tabs Interactive" }).click();
	await page.waitForTimeout(1000);

	await page.getByRole("tab", { name: "Tab 2" }).click();
	await expect(page.getByLabel("Selected Tab")).toHaveValue("Tab 2");

	await page.getByRole("button", { name: "Hide Odd Tabs" }).click();
	await page.waitForTimeout(1000);

	await page.getByRole("tab", { name: "Tab 4" }).click();
	await page.getByRole("button", { name: "Show All Tabs" }).click();
	await page.waitForTimeout(1000);

	await page.getByRole("tab", { name: "Tab 9" }).click();
	await expect(page.getByLabel("Selected Tab")).toHaveValue("Tab 9");
});

test("output from one tab to another works", async ({ page }) => {
	await page.getByRole("tab", { name: "Tab 4" }).click();
	await page.getByLabel("Input 4").fill("hi");
	await page.getByLabel("Input 4").press("Enter");

	await page.getByRole("tab", { name: "Set 2" }).click();
	await page.getByRole("tab", { name: "Tab 13" }).click();
	await expect(page.getByLabel("Input 13")).toHaveValue("");
	await expect(page.getByLabel("Input 13")).toBeVisible();
	await expect(page.getByLabel("Input 14")).toBeHidden();

	await page.getByRole("tab", { name: "Tab 14" }).click();
	await expect(page.getByLabel("Input 14")).toBeVisible();
	await expect(page.getByLabel("Input 14")).toHaveValue("hi");
});

test("programmatic selection works", async ({ page }) => {
	await expect(page.getByText("Text 1!")).toBeHidden();
	await expect(page.getByText("Text 3!")).toBeVisible();

	await page.getByLabel("Select Tab #").click();
	await page.getByLabel("Select Tab #").fill("6");
	await page.getByLabel("Select Tab #").press("Enter");

	await expect(page.getByText("Text 3!")).toBeHidden();
	await expect(page.getByText("Text 6!")).toBeVisible();
});