Back to Repositories

Testing Markdown URL Rendering Functionality in Gradio

This test suite validates the Markdown component’s URL rendering functionality in the Gradio application, focusing on both valid and invalid URL handling within markdown text content.

Test Coverage Overview

The test suite provides comprehensive coverage of Markdown URL rendering scenarios.

Key areas tested include:

Valid URL rendering with proper href attributes
Invalid URL handling and display
Markdown link syntax parsing
Component props validation

Implementation Analysis

The testing approach utilizes Vitest and custom rendering utilities to validate Markdown component behavior. Tests employ component rendering with controlled props, asserting expected DOM structure and link attributes. The implementation leverages TypeScript for type safety and Jest-like syntax for assertions.

Technical Details

Testing stack includes:

Vitest for test execution
Custom render utility for component mounting
TypeScript for type definitions
LoadingStatus interface implementation
DOM assertion utilities

Best Practices Demonstrated

The test suite exemplifies strong testing practices through isolated test cases, proper cleanup between tests, and type-safe assertions. Notable practices include:

Consistent test structure and naming
Proper component cleanup after each test
Strong typing with TypeScript
Clear test case separation for different scenarios

gradio-app/gradio

js/markdown/Markdown.test.ts

            
import { test, describe, assert, afterEach } from "vitest";
import { cleanup, render } from "@self/tootils";

import Markdown from "./Index.svelte";
import type { LoadingStatus } from "@gradio/statustracker";

const loading_status: LoadingStatus = {
	eta: 0,
	queue_position: 1,
	queue_size: 1,
	status: "complete" as LoadingStatus["status"],
	scroll_to_output: false,
	visible: true,
	fn_index: 0,
	show_progress: "full"
};

describe("Markdown", () => {
	afterEach(() => cleanup());

	test("renders valid URL", async () => {
		const { getByText } = await render(Markdown, {
			show_label: true,
			max_lines: 1,
			loading_status,
			lines: 1,
			value: "Visit [Gradio](https://www.gradio.app/) for more information.",
			label: "Markdown",
			interactive: false
		});

		const link: HTMLAnchorElement = getByText("Gradio") as HTMLAnchorElement;
		assert.equal(link.href, "https://www.gradio.app/");
	});

	test("renders invalid URL", async () => {
		const { getByText } = await render(Markdown, {
			show_label: true,
			max_lines: 1,
			loading_status,
			lines: 1,
			value: "Visit [Invalid URL](https://) for more information.",
			label: "Markdown",
			interactive: false
		});

		const link: HTMLAnchorElement = getByText(
			"Invalid URL"
		) as HTMLAnchorElement;
		assert.equal(link.href, "https://");
	});
});