Slightly more complete test for Shiny UI in startup message

Author: cpsievert

tests/playwright/shiny/components/chat/shiny_input/app.py

@@ -1,26 +1,48 @@
 from shiny import reactive
 from shiny.express import input, ui
 
-ui.page_opts(
-    title="Hello input bindings in Chat",
-    fillable=True,
-    fillable_mobile=True,
-)
-
-welcome = f"""
-**Hello! Here are some inputs:**
+ui.page_opts(title="Testing input bindings in Chat", gap="3rem")
 
-{ui.input_select("select", "", choices=["a", "b", "c"])}
-{ui.input_slider("slider", "", min=0, max=100, value=50)}
-"""
+welcome = ui.TagList(
+    "**Hello! Here are a couple inputs:**",
+    ui.div(
+        ui.input_select("select", "", choices=["a", "b", "c"], width="fit-content"),
+        ui.input_switch("toggle", "Toggle", width="fit-content"),
+        ui.input_action_button("insert_input", "Insert input"),
+        class_="d-flex gap-5",
+    ),
+    ui.div(
+        ui.head_content(ui.tags.style("#chat { color: #29465B; }")),
+    ),
+)
 
 chat = ui.Chat(
     id="chat",
     messages=[welcome],
 )
-chat.ui()
+chat.ui(class_="mb-5")
+
+
+@reactive.effect
+async def _():
+    await chat.append_message(f"Now selected: {input.select()} and {input.toggle()}")
+
+
+@reactive.effect
+@reactive.event(input.insert_input)
+async def _():
+    await chat.append_message_stream(
+        [
+            "Here's ",
+            "another ",
+            "input: ",
+            ui.input_numeric("numeric", "", value=0),
+        ]
+    )
+    ui.update_action_button("insert_input", disabled=True)
 
 
 @reactive.effect
+@reactive.event(input.numeric, ignore_init=True)
 async def _():
-    await chat.append_message(f"Now selected: {input.select()} and {input.slider()}")
+    await chat.append_message(f"Numeric value: {input.numeric()}")

tests/playwright/shiny/components/chat/shiny_input/test_chat_shiny_input.py

@@ -13,16 +13,29 @@ def test_validate_chat_shiny_output(page: Page, local_app: ShinyAppProc) -> None
 
     chat = controller.Chat(page, "chat")
     expect(chat.loc).to_be_visible(timeout=TIMEOUT)
+    expect(chat.loc).to_have_css("color", "rgb(41, 70, 91)")
 
     select = controller.InputSelect(page, "select")
-    slider = controller.InputSlider(page, "slider")
+    toggle = controller.InputSwitch(page, "toggle")
     expect(select.loc).to_be_visible(timeout=TIMEOUT)
-    expect(slider.loc).to_be_visible(timeout=TIMEOUT)
+    expect(toggle.loc).to_be_visible(timeout=TIMEOUT)
 
-    chat.expect_latest_message("Now selected: a and 50")
+    chat.expect_latest_message("Now selected: a and False")
 
     select.set("b")
-    chat.expect_latest_message("Now selected: b and 50")
+    chat.expect_latest_message("Now selected: b and False")
 
-    slider.set("5")
-    chat.expect_latest_message("Now selected: b and 5")
+    toggle.set(True)
+    chat.expect_latest_message("Now selected: b and True")
+
+    btn = controller.InputActionButton(page, "insert_input")
+    expect(btn.loc).to_be_visible(timeout=TIMEOUT)
+    btn.click()
+
+    chat.expect_latest_message("Numeric value: 0")
+
+    numeric = controller.InputNumeric(page, "numeric")
+    expect(numeric.loc).to_be_visible(timeout=TIMEOUT)
+    numeric.set("42")
+
+    chat.expect_latest_message("Numeric value: 42")