tests: Reflect input value back in output text

Author: gadenbuie

tests/playwright/shiny/inputs/input_text_update_on/app.py

@@ -69,11 +69,20 @@ def random_value(
 def text_input_ui(update_on: Literal["change", "blur"] = "change"):
     return ui.TagList(
         ui.h2(f'updateOn="{update_on}"'),
-        ui.input_text("txt", "Text", value="Hello", update_on=update_on),
-        ui.input_text_area("txtarea", "Text Area", update_on=update_on),
-        ui.input_numeric("num", "Numeric", value=1, update_on=update_on),
-        ui.input_password("pwd", "Password", update_on=update_on),
-        ui.output_text_verbatim("value"),
+        ui.layout_columns(
+            ui.input_text("txt", "Text", value="Hello", update_on=update_on),
+            ui.div("Text", ui.output_text_verbatim("value_txt")),
+
+            ui.input_text_area("txtarea", "Text Area", update_on=update_on),
+            ui.div("Text Area", ui.output_text_verbatim("value_txtarea")),
+
+            ui.input_numeric("num", "Numeric", value=1, update_on=update_on),
+            ui.div("Numeric", ui.output_text_verbatim("value_num")),
+
+            ui.input_password("pwd", "Password", update_on=update_on),
+            ui.div("Password", ui.output_text_verbatim("value_pwd")),
+            col_widths=6,
+        ),
         ui.input_action_button("update_text", "Update Text"),
         ui.input_action_button("update_text_area", "Update Text Area"),
         ui.input_action_button("update_number", "Update Number"),
@@ -84,19 +93,20 @@ def text_input_ui(update_on: Literal["change", "blur"] = "change"):
 @module.server
 def text_input_server(input: Inputs, output: Outputs, session: Session):
     @render.text
-    def value() -> str:
-        return "\n".join(
-            [
-                "---- Text ----",
-                input.txt(),
-                "---- Text Area ----",
-                input.txtarea(),
-                "---- Numeric ----",
-                str(input.num()),
-                "---- Password ----",
-                input.pwd(),
-            ]
-        )
+    def value_txt() -> str:
+        return input.txt()
+
+    @render.text
+    def value_txtarea() -> str:
+        return input.txtarea()
+
+    @render.text
+    def value_num() -> str:
+        return str(input.num())
+
+    @render.text
+    def value_pwd() -> str:
+        return input.pwd()
 
     @reactive.effect
     @reactive.event(input.update_text)

tests/playwright/shiny/inputs/input_text_update_on/test_input_text_update_on.py

@@ -8,73 +8,79 @@
 from shiny.run import ShinyAppProc
 
 
+def click_action_button(page: Page, x: controller.InputActionButton):
+    """Click the button without moving focus (changes input, doesn't change value)"""
+    page.evaluate(
+        "([id]) => document.getElementById(id).click()", [x.id]
+    )
+
 def test_text_input_change(page: Page, local_app: ShinyAppProc):
     page.goto(local_app.url)
 
     input = controller.InputText(page, "change-txt")
+    output = controller.OutputTextVerbatim(page, "change-value_txt")
     update = controller.InputActionButton(page, "change-update_text")
 
     # Test textInput() -- updateOn='change'
     the_value = "Hello"
     input.set(the_value)
-    input.expect_value(the_value)
+    output.expect_value(the_value)
 
     input.loc.press("End")
     input.loc.type(", world")
 
     time.sleep(0.5)
     the_value = "Hello, world"
-    input.expect_value(the_value)
+    output.expect_value(the_value)
     expect(input.loc).to_be_focused()
 
-    update.click()
+    click_action_button(page, update)
     the_value = "serendipity ephemeral"
-    input.expect_value(the_value)
+    output.expect_value(the_value)
 
 
 def test_text_input_blur(page: Page, local_app: ShinyAppProc):
     page.goto(local_app.url)
 
     # Test textInput() -- updateOn='blur'
     input = controller.InputText(page, "blur-txt")
+    output = controller.OutputTextVerbatim(page, "blur-value_txt")
     update = controller.InputActionButton(page, "blur-update_text")
 
     the_value = "Hello"
     input.set(the_value)
-    input.expect_value(the_value)
+    output.expect_value(the_value)
 
     input.loc.focus()
     input.loc.press("End")
     input.loc.type(", world")
 
-    input.expect_value(the_value)  # has not changed yet!
+    output.expect_value(the_value)  # has not changed yet!
 
     the_value = "Hello, world"
     input.loc.blur()
-    input.expect_value(the_value)
+    output.expect_value(the_value)  # changes on blur
 
     input.loc.focus()
     input.loc.press("End")
     input.loc.type("!")
-    input.expect_value(the_value)  # still hasn't changed yet
-    input.loc.press("Enter")
+    output.expect_value(the_value)  # still hasn't changed yet
 
     the_value = "Hello, world!"
-    input.expect_value(the_value)
+    input.loc.press("Enter")
+    output.expect_value(the_value)  # changes after Enter
 
-    page.evaluate(
-        "element => element.click()", update.loc
-    )  # hopefully doesn't move focus
-    input.expect_value(the_value)
+    click_action_button(page, update)
+    input.expect_value("serendipity ephemeral")
+    output.expect_value(the_value)
 
-    page.evaluate(
-        "element => element.click()", update.loc
-    )  # hopefully doesn't move focus
-    input.expect_value(the_value)
+    click_action_button(page, update)
+    input.expect_value("ephemeral mellifluous")
+    output.expect_value(the_value)
 
-    input.loc.press("Enter")  # now it changes
     the_value = "ephemeral mellifluous"
-    input.expect_value(the_value)
+    input.loc.press("Enter")  # changes again after Enter
+    output.expect_value(the_value)
 
 
 # Add similar tests for textAreaInput(), numericInput(), and passwordInput()