gradio/js/spa/test/super_html.spec.ts at a998fa94e24d025e0f57aa593f60c783f1675510 · gradio-app/gradio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import { test, expect } from "@self/tootils";

test("test HTML components", async ({ page }) => {
	await expect(page.locator("#simple")).toContainText("Hello, World!");

	await page.getByLabel("Name").first().fill("Sam");
	await expect(page.locator("#templated")).toContainText(
		"Hello, Sam! 3 letters"
	);

	await page.getByLabel("Person").fill("Carl");
	await page.getByText("Bold Text").click();
	await page.getByRole("button", { name: "Update HTML" }).click();
	await expect(page.locator("#css")).toContainText("Hello, Carl!");
	const html = await page.locator("#css").innerHTML();
	expect(html).toContain("<li>C</li>");
	expect(html).toContain("<li>a</li>");

	await page.locator("#A").click();
	await expect(page.getByLabel("Clicked")).toHaveValue("A");
	await page.locator("#B").click();
	await expect(page.getByLabel("Clicked")).toHaveValue("B");

	await page.locator("#text-input").fill("testing");
	await page.locator("button:has-text('submit')").click();
	await expect(page.locator("#form")).toContainText("letters");
	await page.locator("button:has-text('clear')").click();
	await expect(page.locator("#form")).toContainText("0 letters");

	await expect(page.locator("#fruits")).toContainText("Apple");
	await expect(page.locator("#vegetables")).toContainText("Carrot");

	await page.getByRole("button", { name: "Make Ordered" }).click();
	await expect(async () => {
		const fruitsOrderedHtml = await page.locator("#fruits").innerHTML();
		expect(fruitsOrderedHtml).toContain("<ol>");
	}).toPass();
	await expect(async () => {
		const vegetablesOrderedHtml = await page.locator("#vegetables").innerHTML();
		expect(vegetablesOrderedHtml).toContain("<ol>");
	}).toPass();

	await page.getByRole("button", { name: "Make Unordered" }).click();
	await expect(async () => {
		const fruitsUnorderedHtml = await page.locator("#fruits").innerHTML();
		expect(fruitsUnorderedHtml).toContain("<ul>");
	}).toPass();
	await expect(async () => {
		const vegetablesUnorderedHtml = await page
			.locator("#vegetables")
			.innerHTML();
		expect(vegetablesUnorderedHtml).toContain("<ul>");
	}).toPass();

	// Watch API test
	await expect(page.locator("#watch_demo")).toContainText("currently 0");
	const incButton = page.locator("#watch_demo .inc");
	for (let i = 0; i < 10; i++) {
		await incButton.click();
	}
	await expect(page.locator("#watch_demo")).toContainText("currently 10");
	await expect(page.getByLabel("Watch Output")).toHaveValue("10");
	await page.locator("#watch_demo .reset").click();
	await expect(page.locator("#watch_demo")).toContainText("currently 0");

	await expect(page.locator("body")).toContainText("Zalue is not defined");

	const secondTodoCheckbox = page
		.locator("#todo input[type='checkbox']")
		.nth(1);
	const secondTodoItem = page.locator("#todo li").nth(1);

	await expect(secondTodoItem).toHaveCSS("text-decoration", /line-through/);
	await secondTodoCheckbox.click();
	await expect(secondTodoItem).not.toHaveCSS("text-decoration", /line-through/);
	await secondTodoCheckbox.click();
	await expect(secondTodoItem).toHaveCSS("text-decoration", /line-through/);

	await expect(page.locator("#children_form")).toContainText("Contact Form");
	await page.getByLabel("Your Name").fill("Alice");
	await page.getByLabel("Your Email").fill("alice@example.com");
	await page.locator("#children_form .send").click();
	await expect(page.getByLabel("Children Output")).toHaveValue(
		"Name: Alice, Email: alice@example.com"
	);

	const file_input = page.locator("#upload_html #html-file-input");
	await file_input.setInputFiles("./test/files/alphabet.txt");
	await page.locator("#upload_html #html-upload-btn").click();
	await expect(async () => {
		const status = await page
			.locator("#upload_html #html-upload-status")
			.textContent();
		expect(status).toMatch(/^Uploaded: /);
	}).toPass();
	await expect(page.getByLabel("Upload Result")).not.toHaveValue("");

	await page.locator("#server-fn-load").click();
	await expect(async () => {
		const treeContent = await page.locator("#server-fn-tree").textContent();
		expect(treeContent).toContain("run.py");
	}).toPass();

	await page.keyboard.press("a");
	await expect(page.getByLabel("Key Pressed")).toHaveValue("a");
	await page.keyboard.press("Enter");
	await expect(page.getByLabel("Key Pressed")).toHaveValue("Enter");
});