fix: use direct return pattern for navigate in tests to avoid empty button content

When navigate() was rendered as a child of html.button(), the Navigate
component's JS null-render left the button with empty text. Changed tests
to return navigate() at the component level instead.

Author: Archmonger

tests/test_router.py

@@ -364,18 +364,24 @@ async def test_navigate_component_go_back(display: DisplayFixture):
     def nav_btn():
         nav, set_nav = use_state("")
 
+        if nav:
+            return navigate(nav)
+
         return html.button(
-            {"onClick": lambda _: set_nav("/a")},
-            navigate(nav) if nav else "Go to A",
+            {"onClick": lambda _: set_nav("/a"), "id": "nav-to-a"},
+            "Go to A",
         )
 
     @component
     def back_btn():
         delta, set_delta = use_state("")
 
+        if isinstance(delta, int):
+            return navigate(delta)
+
         return html.button(
-            {"onClick": lambda _: set_delta(-1)},
-            navigate(delta) if isinstance(delta, int) else "Go back",
+            {"onClick": lambda _: set_delta(-1), "id": "go-back"},
+            "Go back",
         )
 
     @component
@@ -387,19 +393,20 @@ def sample():
 
     await display.show(sample)
 
-    # Navigate to /a using the link
-    btn = await display.page.wait_for_selector("button")
-    assert await btn.text_content() == "Go to A"
-    await btn.click()
+    # Navigate to /a
+    await display.page.wait_for_selector("#nav-to-a")
+    await display.page.click("#nav-to-a")
+
+    # Wait for the go-back button to appear on route /a
+    await display.page.wait_for_selector("#go-back")
+    assert await display.page.text_content("#go-back") == "Go back"
 
     # Go back using navigate(-1)
-    btn = await display.page.wait_for_selector("button")
-    assert await btn.text_content() == "Go back"
-    await btn.click()
+    await display.page.click("#go-back")
 
     # Verify we're back at the root route
-    btn = await display.page.wait_for_selector("button")
-    assert await btn.text_content() == "Go to A"
+    await display.page.wait_for_selector("#nav-to-a")
+    assert await display.page.text_content("#nav-to-a") == "Go to A"
 
 
 async def test_navigate_component_go_forward(display: DisplayFixture):
@@ -409,18 +416,24 @@ async def test_navigate_component_go_forward(display: DisplayFixture):
     def forward_btn():
         delta, set_delta = use_state("")
 
+        if isinstance(delta, int):
+            return navigate(delta)
+
         return html.button(
             {"onClick": lambda _: set_delta(1), "id": "go-forward"},
-            navigate(delta) if isinstance(delta, int) else "Go forward",
+            "Go forward",
         )
 
     @component
     def back_btn():
         delta, set_delta = use_state("")
 
+        if isinstance(delta, int):
+            return navigate(delta)
+
         return html.button(
             {"onClick": lambda _: set_delta(-1), "id": "go-back"},
-            navigate(delta) if isinstance(delta, int) else "Go back",
+            "Go back",
         )
 
     @component
@@ -434,9 +447,9 @@ def sample():
 
     # Navigate to /a via full page load (builds forward history entry)
     await display.goto("/a")
-    await display.page.wait_for_selector("#go-back")
 
     # Go back to / via navigate(-1)
+    await display.page.wait_for_selector("#go-back")
     await display.page.click("#go-back")
 
     # Should now be at / with the "Go forward" button