Fix functional tests pt 2

js/spa/test/audio_component_events.spec.ts

@@ -57,7 +57,7 @@ test("Audio drag-and-drop displays a warning when the file is of the wrong mime
 		"audio_sample.wav"
 	);
 	const toast = page.getByTestId("toast-body");
-	expect(toast).toContainText("warning");
+	expect(toast).toContainText("Warning");
 });
 
 test.skip("Play, Pause, and stop events work correctly.", async ({ page }) => {

js/spa/test/blocks_chained_events.spec.ts

@@ -31,7 +31,7 @@ test("gr.Error makes the toast show up", async ({ page }) => {
 	await page.click("text=Trigger Failure");
 
 	const toast = page.getByTestId("toast-body");
-	expect(toast).toContainText("error");
+	expect(toast).toContainText("Error");
 	const close = page.getByTestId("toast-close");
 	await close.click();
 	await expect(page.getByTestId("toast-body")).toHaveCount(0);
@@ -43,7 +43,7 @@ test("ValueError makes the toast show up when show_error=True", async ({
 	await page.click("text=Trigger Failure With ValueError");
 
 	const toast = page.getByTestId("toast-body");
-	expect(toast).toContainText("error");
+	expect(toast).toContainText("Error");
 	const close = page.getByTestId("toast-close");
 	await close.click();
 	await expect(page.getByTestId("toast-body")).toHaveCount(0);

js/spa/test/file_component_events.spec.ts

@@ -2,7 +2,7 @@ import { test, expect, drag_and_drop_file } from "@self/tootils";
 
 async function error_modal_showed(page) {
 	const toast = page.getByTestId("toast-body");
-	expect(toast).toContainText("error");
+	expect(toast).toContainText("Error");
 	const close = page.getByTestId("toast-close");
 	await close.click();
 	await expect(page.getByTestId("toast-body")).toHaveCount(0);

js/spa/test/image_component_events.spec.ts

@@ -95,11 +95,6 @@ test("Image copy from clipboard dispatches upload event.", async ({ page }) => {
 	});
 
 	await page.getByLabel("Paste from clipboard").click();
-	await Promise.all([
-		page.waitForResponse(
-			(resp) => resp.url().includes("/clipboard.png") && resp.status() === 200
-		)
-	]);
 	await expect(page.getByLabel("# Change Events").first()).toHaveValue("1");
 	await expect(page.getByLabel("# Upload Events")).toHaveValue("1");
 });

js/spa/test/image_editor_events.spec.ts

@@ -9,61 +9,44 @@ test("upload events work as expected", async ({ page }) => {
 });
 
 test("change events work as expected", async ({ page }) => {
-	await page.getByLabel("Upload button").first().click();
-	const uploader = page.locator("input[type=file]").first();
-	await uploader.setInputFiles(["./test/files/cheetah1.jpg"]);
-
 	const change_text = page.locator("#change h2");
-	await expect(change_text).toContainText("1");
-
-	await page.getByLabel("Draw button").first().click();
-	const canvas = page.locator("#image_editor canvas").first();
-	await canvas.click({ position: { x: 100, y: 100 } });
-	await expect(change_text).toContainText("2");
 
-	await page.getByLabel("Erase button").first().click();
+	await page.getByLabel("Draw button").click();
+	await page.getByLabel("Draw button").click();
+	const canvas = page.locator("canvas");
 	await canvas.click({ position: { x: 100, y: 100 } });
-	await expect(change_text).toContainText("3");
-
-	await page.getByLabel("Clear canvas").first().click();
-	await expect(change_text).toContainText("4");
+	await expect(change_text).toContainText("1");
 });
 
 test("input events work as expected", async ({ page }) => {
-	await page.getByLabel("Upload button").first().click();
-	const uploader = page.locator("input[type=file]").first();
-	await uploader.setInputFiles(["./test/files/cheetah1.jpg"]);
-
 	const input_text = page.locator("#input h2");
-	await expect(input_text).toContainText("1");
 
-	await page.getByLabel("Draw button").first().click();
-	const canvas = page.locator("#image_editor canvas").first();
+	await page.getByLabel("Draw button").click();
+	await page.getByLabel("Draw button").click();
+	const canvas = page.locator("canvas");
 	await canvas.click({ position: { x: 100, y: 100 } });
-	await expect(input_text).toContainText("2");
+	await expect(input_text).toContainText("1");
+});
 
-	await page.getByLabel("Erase button").first().click();
-	await canvas.click({ position: { x: 100, y: 100 } });
-	await expect(input_text).toContainText("3");
+test("erase triggers change and input events", async ({ page }) => {
+	const canvas = page.locator("canvas");
+	const input_text = page.locator("#input h2");
+	const change_text = page.locator("#change h2");
 
-	await page.getByLabel("Clear canvas").first().click();
-	await expect(input_text).toContainText("4");
+	await page.getByLabel("Erase button").click();
+	await canvas.click({ position: { x: 50, y: 50 } });
+	await expect(input_text).toContainText("1");
+	await expect(change_text).toContainText("1");
 });
 
 test("apply events work as expected", async ({ page }) => {
 	const apply_text = page.locator("#apply h2");
 	const apply_button = page.getByLabel("Save changes").first();
 
 	await page.getByLabel("Draw button").first().click();
-	const canvas = page.locator("#image_editor canvas").first();
+	await page.getByLabel("Draw button").first().click();
+	const canvas = page.locator("canvas").first();
 	await canvas.click({ position: { x: 100, y: 100 } });
 	await apply_button.click();
 	await expect(apply_text).toContainText("1");
-
-	await page.getByLabel("Erase button").first().click();
-	await canvas.click({ position: { x: 100, y: 100 } });
-
-	await page.getByLabel("Clear canvas").first().click();
-	await apply_button.click();
-	await expect(apply_text).toContainText("2");
 });

js/spa/test/test_chatinterface.reload.spec.ts

@@ -10,13 +10,13 @@ test.beforeAll(() => {
 	const demo = `
 import gradio as gr
 		
-	def greet(msg, history):
-		return "Hello"
+def greet(msg, history):
+	return "Hello"
 
-	demo = gr.ChatInterface(fn=greet)
+demo = gr.ChatInterface(fn=greet)
 
-	if __name__ == "__main__":
-		demo.launch()
+if __name__ == "__main__":
+	demo.launch()
 	`;
 	// write contents of demo to a local 'run.py' file
 	spawnSync(`echo '${demo}' > ${join(process.cwd(), demo_file)}`, {
@@ -55,15 +55,15 @@ test("gradio dev mode correctly reloads a stateful ChatInterface demo", async ({
 		_process = server_process;
 		console.log("Connected to port", port);
 		const demo = `
-		import gradio as gr
+import gradio as gr
 
-		def greet(msg, history):
-			return f"You typed: {msg}"
+def greet(msg, history):
+	return f"You typed: {msg}"
 
-		demo = gr.ChatInterface(fn=greet, textbox=gr.Textbox(label="foo", placeholder="Type a message..."))
+demo = gr.ChatInterface(fn=greet, textbox=gr.Textbox(label="foo", placeholder="Type a message..."))
 
-		if __name__ == "__main__":
-			demo.launch()
+if __name__ == "__main__":
+	demo.launch()
 		`;
 		// write contents of demo to a local 'run.py' file
 		await page.goto(`http://localhost:${port}`);

js/spa/test/upload_file_limit_test.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from "@self/tootils";
 
 async function error_modal_showed(page) {
 	const toast = page.getByTestId("toast-body");
-	expect(toast).toContainText("error");
+	expect(toast).toContainText("Error");
 	const close = page.getByTestId("toast-close");
 	await close.click();
 	await expect(page.getByTestId("toast-body")).toHaveCount(0);

js/spa/test/video_component_events.spec.ts

@@ -65,5 +65,5 @@ test("Video drag-and-drop displays a warning when the file is of the wrong mime
 		"file_test.ogg"
 	);
 	const toast = page.getByTestId("toast-body");
-	expect(toast).toContainText("warning");
+	expect(toast).toContainText("Warning");
 });