Back to Repositories

Testing DateTime Component Input Handling and State Management in Gradio

This test suite validates the functionality of the DateTime component in Gradio, focusing on date input handling, formatting, and state management. It ensures proper date value display, user interactions, and timestamp conversions across different datetime formats.

Test Coverage Overview

The test suite provides comprehensive coverage of DateTime component functionality in Gradio.

Key areas tested include:

Date input validation and formatting
Change event handling
Submit event processing
Load state management
Multiple datetime format support

Edge cases covered include invalid date formats and timestamp conversions.

Implementation Analysis

The testing approach utilizes Playwright’s page object model for UI interaction simulation. The implementation follows a sequential pattern testing various datetime scenarios, employing click events, form fills, and value assertions.

Technical patterns include:

Locator-based element selection
Role-based element targeting
Async/await pattern for test flow control
Expect assertions for value verification

Technical Details

Testing tools and setup:

Test Framework: Custom @self/tootils implementation
Browser Automation: Playwright
Component Testing: Page object model
Assertion Library: Expect
Date Formats Supported: ISO datetime, date-only, Unix timestamp

Best Practices Demonstrated

The test suite exemplifies high-quality testing practices with clear structure and comprehensive validation.

Notable practices include:

Isolated test scenarios
Consistent element selection strategy
Thorough state verification
Error case handling
Multiple format testing

gradio-app/gradio

js/spa/test/datetimes.spec.ts

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

test("gr.DateTime shows correct values", async ({ page }) => {
	await page.locator("#date1").getByRole("textbox").first().click();
	await page
		.locator("#date1")
		.getByRole("textbox")
		.first()
		.fill("2020-10-01 10:50:00");
	await page.locator("body").first().click();
	await expect(page.getByLabel("Last Change")).toHaveValue(
		"2020-10-01 10:50:00"
	);
	await expect(page.getByLabel("Last Submit")).toHaveValue("");
	await page.locator("#date1").getByRole("textbox").first().press("Enter");
	await expect(page.getByLabel("Last Submit")).toHaveValue(
		"2020-10-01 10:50:00"
	);
	await expect(page.getByLabel("Last Load")).toHaveValue("");

	await page.locator("#date2").getByRole("textbox").first().click();
	await page.locator("#date2").getByRole("textbox").first().fill("2000-02-22");
	await page.locator("body").first().click();
	await expect(page.getByLabel("Last Change")).toHaveValue("2000-02-22");

	await page.getByRole("button", { name: "Load Date 1" }).click();
	await expect(page.getByLabel("Last Load")).toHaveValue("2020-10-01 10:50:00");
	await page.getByRole("button", { name: "Load Date 2" }).click();
	await expect(page.getByLabel("Last Load")).toHaveValue("2000-02-22");

	await page.locator("#date2").getByRole("textbox").first().click();
	await page
		.locator("#date2")
		.getByRole("textbox")
		.first()
		.fill("2020-05-01xxx");
	await page.locator("body").first().click();
	await expect(page.getByLabel("Last Change")).toHaveValue("2000-02-22");

	await page.locator("#date2").getByRole("textbox").first().click();
	await page.locator("#date2").getByRole("textbox").first().fill("2020-05-02");
	await page.locator("body").first().click();
	await expect(page.getByLabel("Last Change")).toHaveValue("2020-05-02");

	await page.locator("#date3").getByRole("textbox").first().click();
	await page
		.locator("#date3")
		.getByRole("textbox")
		.first()
		.fill("2020-10-10 05:01:01");
	await page.getByRole("button", { name: "Load Date 3" }).click();
	await expect(page.getByLabel("Last Load")).toHaveValue("1602298861.0");
});