fix: change input type in error_boundary example

examples/error_boundary/e2e/tests/clear_number.spec.ts

@@ -6,6 +6,7 @@ test.describe("Clear Number", () => {
     const ui = new HomePage(page);
     await ui.goto();
 
+    await ui.enterValue("7");
     await ui.clearInput();
 
     await expect(ui.errorMessage).toHaveText("Not a number! Errors: ");
@@ -14,6 +15,7 @@ test.describe("Clear Number", () => {
     const ui = new HomePage(page);
     await ui.goto();
 
+    await ui.enterValue("7");
     await ui.clearInput();
 
     await expect(ui.errorList).toHaveText(

examples/error_boundary/e2e/tests/fixtures/home_page.ts

@@ -3,7 +3,7 @@ import { expect, Locator, Page } from "@playwright/test";
 export class HomePage {
   readonly page: Page;
   readonly pageTitle: Locator;
-  readonly numberInput: Locator;
+  readonly valueInput: Locator;
   readonly successMessage: Locator;
   readonly errorMessage: Locator;
 
@@ -13,7 +13,7 @@ export class HomePage {
     this.page = page;
 
     this.pageTitle = page.locator("h1");
-    this.numberInput = page.getByLabel(
+    this.valueInput = page.getByLabel(
       "Type a number (or something that's not a number!)"
     );
     this.successMessage = page.locator("label p");
@@ -25,32 +25,17 @@ export class HomePage {
     await this.page.goto("/");
   }
 
-  async enterNumber(count: string, index: number = 0) {
+  async enterValue(value: string) {
     await Promise.all([
-      this.numberInput.waitFor(),
-      this.numberInput.fill(count),
-    ]);
-  }
-
-  async clickUpArrow() {
-    await Promise.all([
-      this.numberInput.waitFor(),
-      this.numberInput.press("ArrowUp"),
-    ]);
-  }
-
-  async clickDownArrow() {
-    await Promise.all([
-      this.numberInput.waitFor(),
-      this.numberInput.press("ArrowDown"),
+      this.valueInput.waitFor(),
+      this.valueInput.fill(value),
     ]);
   }
 
   async clearInput() {
     await Promise.all([
-      this.numberInput.waitFor(),
-      this.clickUpArrow(),
-      this.numberInput.press("Backspace"),
+      this.valueInput.waitFor(),
+      this.valueInput.press("Backspace"),
     ]);
   }
 }

examples/error_boundary/e2e/tests/type_number.spec.ts

@@ -6,7 +6,7 @@ test.describe("Type Number", () => {
     const ui = new HomePage(page);
     await ui.goto();
 
-    await ui.enterNumber("7");
+    await ui.enterValue("7");
 
     await expect(ui.successMessage).toHaveText("You entered 7");
   });

examples/error_boundary/e2e/tests/type_string.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from "@playwright/test";
+import { HomePage } from "./fixtures/home_page";
+
+test.describe("Type String", () => {
+  test("should see the error message", async ({ page }) => {
+    const ui = new HomePage(page);
+    await ui.goto();
+
+    await ui.enterValue("leptos");
+
+    await expect(ui.errorMessage).toHaveText("Not a number! Errors: ");
+  });
+  test("should see the error list", async ({ page }) => {
+    const ui = new HomePage(page);
+    await ui.goto();
+
+    await ui.enterValue("leptos");
+
+    await expect(ui.errorList).toHaveText(
+      "invalid digit found in string"
+    );
+  });
+});

examples/error_boundary/src/lib.rs

@@ -11,7 +11,7 @@ pub fn App() -> impl IntoView {
         <h1>"Error Handling"</h1>
         <label>
             "Type a number (or something that's not a number!)"
-            <input type="number" on:input=on_input/>
+            <input on:input=on_input/>
             // If an `Err(_) had been rendered inside the <ErrorBoundary/>,
             // the fallback will be displayed. Otherwise, the children of the
             // <ErrorBoundary/> will be displayed.