Add success e2e test (#4688)

* Add success e2e test

* add demo notebook

* Fix

* Fix test

* Make modifications

* Dont use timeouts

* Format

* Success e2e test fix (#4698)

* try this

* tweak

* tweak

* tweak

* cleanup

* cleanup

---------

Co-authored-by: pngwn <hello@pngwn.io>

demo/blocks_chained_events/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_chained_events"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "\n", "def failure():\n", "    raise gr.Error(\"This should fail!\")\n", "\n", "def exception():\n", "    raise ValueError(\"Something went wrong\")\n", "\n", "def success():\n", "    return True\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"Used in E2E tests of success event trigger. The then event covered in chatbot E2E tests.\"\n", "                \" Also testing that the status modals show up.\")\n", "    with gr.Row():\n", "        result = gr.Textbox(label=\"Result\")\n", "        result_2 = gr.Textbox(label=\"Consecutive Event\")\n", "    with gr.Row():\n", "        success_btn = gr.Button(value=\"Trigger Success\")\n", "        success_btn_2 = gr.Button(value=\"Trigger Consecutive Success\")\n", "        failure_btn = gr.Button(value=\"Trigger Failure\")\n", "        failure_exception = gr.Button(value=\"Trigger Failure With ValueError\")\n", "\n", "        success_btn_2.click(success, None, None).success(lambda: \"First Event Trigered\", None, result).success(lambda: \"Consecutive Event Triggered\", None, result_2)\n", "        success_btn.click(success, None, None).success(lambda: \"Success event triggered\", inputs=None, outputs=result)\n", "        failure_btn.click(failure, None, None).success(lambda: \"Should not be triggered\", inputs=None, outputs=result)\n", "        failure_exception.click(exception, None, None)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch(show_error=True)"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/blocks_chained_events/run.py

@@ -0,0 +1,31 @@
+import gradio as gr
+
+
+def failure():
+    raise gr.Error("This should fail!")
+
+def exception():
+    raise ValueError("Something went wrong")
+
+def success():
+    return True
+
+with gr.Blocks() as demo:
+    gr.Markdown("Used in E2E tests of success event trigger. The then event covered in chatbot E2E tests."
+                " Also testing that the status modals show up.")
+    with gr.Row():
+        result = gr.Textbox(label="Result")
+        result_2 = gr.Textbox(label="Consecutive Event")
+    with gr.Row():
+        success_btn = gr.Button(value="Trigger Success")
+        success_btn_2 = gr.Button(value="Trigger Consecutive Success")
+        failure_btn = gr.Button(value="Trigger Failure")
+        failure_exception = gr.Button(value="Trigger Failure With ValueError")
+
+        success_btn_2.click(success, None, None).success(lambda: "First Event Trigered", None, result).success(lambda: "Consecutive Event Triggered", None, result_2)
+        success_btn.click(success, None, None).success(lambda: "Success event triggered", inputs=None, outputs=result)
+        failure_btn.click(failure, None, None).success(lambda: "Should not be triggered", inputs=None, outputs=result)
+        failure_exception.click(exception, None, None)
+
+if __name__ == "__main__":
+    demo.launch(show_error=True)

js/app/src/components/StatusTracker/Error.svelte

@@ -20,6 +20,7 @@
 <div
 	class="toast-body"
 	role="alert"
+	data-testid="error-toast"
 	on:click|stopPropagation
 	on:keydown|stopPropagation
 	in:fade={{ duration: 200, delay: 100 }}
@@ -57,6 +58,7 @@
 		class="toast-close"
 		type="button"
 		aria-label="Close"
+		data-testid="error-close"
 	>
 		<span aria-hidden="true">×</span>
 	</button>

js/app/test/blocks_chained_events.spec.ts

@@ -0,0 +1,75 @@
+import { test, expect } from "@gradio/tootils";
+import type { Response } from "@playwright/test";
+
+test(".success event runs after function successfully completes. .success should not run if function fails", async ({
+	page
+}) => {
+	const textbox = page.getByLabel("Result");
+	await expect(textbox).toHaveValue("");
+
+	await Promise.all([
+		page.waitForResponse("**/run/predict"),
+		page.click("text=Trigger Failure")
+	]);
+	expect(textbox).toHaveValue("");
+
+	await Promise.all([
+		page.click("text=Trigger Success"),
+		page.waitForResponse("**/run/predict")
+	]);
+
+	expect(textbox).toHaveValue("Success event triggered");
+});
+
+test("Consecutive .success event is triggered successfully", async ({
+	page
+}) => {
+	const textbox = page.getByLabel("Consecutive Event");
+	const first = page.getByLabel("Result");
+
+	async function predicate(url: Response) {
+		const is_json =
+			(await url.headerValue("content-type")) === "application/json";
+		if (!is_json) return false;
+
+		const data = (await url.json()).data[0];
+		return data === "Consecutive Event Triggered";
+	}
+
+	await Promise.all([
+		page.waitForResponse(predicate),
+		page.click("text=Trigger Consecutive Success")
+	]);
+
+	await expect(textbox).toHaveValue("Consecutive Event Triggered");
+	expect(first).toHaveValue("First Event Trigered");
+});
+
+test("gr.Error makes the toast show up", async ({ page }) => {
+	await Promise.all([
+		page.waitForResponse("**/run/predict"),
+		page.click("text=Trigger Failure")
+	]);
+
+	const toast = page.getByTestId("error-toast");
+	expect(toast).toContainText("Something went wrong");
+	const close = page.getByTestId("error-close");
+	await close.click();
+	await expect(page.getByTestId("error-toast")).toHaveCount(0);
+});
+
+test("ValueError makes the toast show up when show_error=True", async ({
+	page
+}) => {
+	await Promise.all([
+		page.waitForResponse("**/run/predict"),
+		page.click("text=Trigger Failure With ValueError")
+	]);
+
+	const toast = page.getByTestId("error-toast");
+
+	expect(toast).toContainText("Something went wrong");
+	const close = page.getByTestId("error-close");
+	await close.click();
+	await expect(page.getByTestId("error-toast")).toHaveCount(0);
+});