gradio

1
import { test, expect } from "@gradio/tootils";
2

3
test("File Explorer is interactive and re-runs the server_fn when root is updated", async ({
4
	page
5
}) => {
6
	await page
7
		.locator("span")
8
		.filter({ hasText: "bar.txt" })
9
		.getByRole("checkbox")
10
		.check();
11
	await page
12
		.locator("span")
13
		.filter({ hasText: "foo.txt" })
14
		.getByRole("checkbox")
15
		.check();
16

17
	await page.getByLabel("Select File Explorer Root").click();
18
	await page.getByLabel(new RegExp("/dir2$"), { exact: true }).first().click();
19
	await page
20
		.locator("span")
21
		.filter({ hasText: "baz.png" })
22
		.getByRole("checkbox")
23
		.check();
24
	await page
25
		.locator("span")
26
		.filter({ hasText: "foo.png" })
27
		.getByRole("checkbox")
28
		.check();
29

30
	await page.locator("#input-box").getByTestId("textbox").fill("test");
31

32
	await expect(
33
		page.locator("span").filter({ hasText: "baz.png" }).getByRole("checkbox")
34
	).toBeChecked();
35

36
	await expect(
37
		page.locator("span").filter({ hasText: "foo.png" }).getByRole("checkbox")
38
	).toBeChecked();
39

40
	await page
41
		.locator("span")
42
		.filter({ hasText: "foo.png" })
43
		.getByRole("checkbox")
44
		.uncheck();
45

46
	await expect(page.locator("#total-changes input")).toHaveValue("3");
47
});
48

49
test("File Explorer correctly displays both directories and files. Directories included in value.", async ({
50
	page
51
}) => {
52
	await page.getByLabel("Select File Explorer Root").click();
53
	await page.getByLabel(new RegExp("/dir3$"), { exact: true }).first().click();
54

55
	await page
56
		.locator("span")
57
		.filter({ hasText: "dir4" })
58
		.getByLabel("expand directory")
59
		.click();
60

61
	await page
62
		.locator("li")
63
		.filter({ hasText: "dir4 . dir5 dir7 dir_4_bar.log dir_4_foo.txt" })
64
		.getByRole("checkbox")
65
		.first()
66
		.check();
67

68
	await page
69
		.locator("span")
70
		.filter({ hasText: "dir_4_foo.txt" })
71
		.getByRole("checkbox")
72
		.check();
73

74
	await page
75
		.locator("span")
76
		.filter({ hasText: "dir3_foo.txt" })
77
		.getByRole("checkbox")
78
		.check();
79

80
	await page.getByRole("button", { name: "Run" }).click();
81
	const directory_paths_displayed = async () => {
82
		const value = await page.getByLabel("Selected Directory").inputValue();
83
		const files = value.split(",");
84

85
		return (
86
			files.some((f) => f.endsWith("dir4")) &&
87
			files.some((f) => f.endsWith("dir_4_foo.txt")) &&
88
			files.some((f) => f.endsWith("dir3_foo.txt"))
89
		);
90
	};
91

92
	await expect.poll(directory_paths_displayed).toBe(true);
93
});
94

95
test("File Explorer selects all children when top level directory is selected.", async ({
96
	page
97
}) => {
98
	await page.getByLabel("Select File Explorer Root").click();
99
	await page.getByLabel(new RegExp("/dir3$"), { exact: true }).first().click();
100

101
	await page
102
		.locator("span")
103
		.filter({ hasText: "dir4" })
104
		.getByRole("checkbox")
105
		.check();
106

107
	await Promise.all([page.getByRole("button", { name: "Run" }).click()]);
108

109
	async function directory_paths_displayed() {
110
		const value = await page.getByLabel("Selected Directory").inputValue();
111
		const files_and_dirs = value.split(",");
112

113
		return files_and_dirs.length === 7;
114
	}
115
	await expect.poll(directory_paths_displayed).toBe(true);
116
});
117

118
test("File Explorer correctly displays only text files", async ({ page }) => {
119
	const check = page.getByRole("checkbox", {
120
		name: "Show only text files",
121
		exact: true
122
	});
123
	await check.click();
124

125
	await page.getByLabel("Select File Explorer Root").click();
126
	await page.getByLabel(new RegExp("/dir3$"), { exact: true }).first().click();
127

128
	await page
129
		.locator("span")
130
		.filter({ hasText: "dir4" })
131
		.getByRole("checkbox")
132
		.check();
133
	await page.getByRole("button", { name: "Run" }).click();
134

135
	async function text_files_displayed() {
136
		const value = await page.getByLabel("Selected Directory").inputValue();
137
		const dirs = value.split(",");
138
		return dirs.length === 3 && dirs.every((d) => d.endsWith(".txt"));
139
	}
140

141
	await expect.poll(text_files_displayed).toBe(true);
142
});
143

144
test("File Explorer correctly excludes text files when ignore_glob is '*.txt'.", async ({
145
	page
146
}) => {
147
	const check = page.getByRole("checkbox", {
148
		name: "Ignore text files in glob",
149
		exact: true
150
	});
151
	await check.click();
152

153
	await page.getByLabel("Select File Explorer Root").click();
154
	await page.getByLabel(new RegExp("/dir3$"), { exact: true }).first().click();
155

156
	await page
157
		.locator("span")
158
		.filter({ hasText: "dir4" })
159
		.getByRole("checkbox")
160
		.check();
161
	await page.getByRole("button", { name: "Run" }).click();
162

163
	const only_files_displayed = async () => {
164
		const value = await page.getByLabel("Selected Directory").inputValue();
165
		const files = value.split(",");
166
		return (
167
			files.length === 4 &&
168
			files.some((f) => f.endsWith(".log")) &&
169
			!files.some((f) => f.endsWith(".txt"))
170
		);
171
	};
172

173
	await expect.poll(only_files_displayed).toBe(true);
174
});
175