tests(popover): Add kitchensink tests for popover and tooltip

CHANGELOG.md

@@ -21,6 +21,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * Added `.expect_widths()` to `NavsetPillList` in `shiny.playwright.controllers` for testing `ui.navset_pill_list(widths=)`. (#1668)
 
+* Added `.expect_title()` for `Popover` controller (#1683)
+
 ### Bug fixes
 
 * A few fixes for `ui.Chat()`, including: 

shiny/playwright/controller/_overlay.py

@@ -212,6 +212,21 @@ def _toggle(self, timeout: Timeout = None) -> None:
         self.loc_trigger.scroll_into_view_if_needed(timeout=timeout)
         self.loc_trigger.click(timeout=timeout)
 
+    def expect_title(self, value: PatternOrStr, *, timeout: Timeout = None) -> None:
+        """
+        Expects the popover title to have the specified text.
+
+        Parameters
+        ----------
+        value
+            The expected text pattern or string.
+        timeout
+            The maximum time to wait for the popover header to appear. Defaults to `None`.
+        """
+        playwright_expect(
+            self.get_loc_overlay_container().locator("> .popover-header")
+        ).to_have_text(value, timeout=timeout)
+
 
 class Tooltip(_OverlayBase):
     """Controller for :func:`shiny.ui.tooltip`."""

tests/playwright/shiny/components/popover/popover_test_kitchen/app.py

@@ -0,0 +1,35 @@
+from shiny.express import ui
+
+ui.page_opts(title="Popover Kitchen sink", id="page_navbar")
+
+ui.br()
+ui.br()
+
+with ui.popover(id="btn_popover_title", title="Popover title"):
+    ui.input_action_button("btn", "A button")
+    "Placement should be auto along with a title"
+
+ui.br()
+ui.br()
+ui.br()
+ui.br()
+
+with ui.popover(id="btn_popover_top", placement="top"):
+    ui.input_action_button("btn2", "A button")
+    "Popover placement should be on the top"
+
+ui.br()
+ui.br()
+ui.br()
+ui.br()
+
+
+with ui.layout_columns(col_widths=[4, 4]):
+
+    with ui.popover(id="btn_popover_right", placement="right"):
+        ui.input_action_button("btn3", "A button")
+        "Popover placement should be on the right"
+
+    with ui.popover(id="btn_popover_left", placement="left"):
+        ui.input_action_button("btn4", "A button")
+        "Popover placement should be on the left"

tests/playwright/shiny/components/popover/popover_test_kitchen/test_popover_kitchensink.py

@@ -0,0 +1,47 @@
+from playwright.sync_api import Page
+
+from shiny.playwright import controller
+from shiny.run import ShinyAppProc
+
+
+def test_popover_kitchensink(page: Page, local_app: ShinyAppProc) -> None:
+    page.goto(local_app.url)
+
+    popover_auto = controller.Popover(page, "btn_popover_title")
+    popover_auto.expect_active(False)
+    popover_auto.set(True)
+    popover_auto.expect_active(True)
+    popover_auto.expect_body("Placement should be auto along with a title")
+    popover_auto.expect_title("Popover title")
+    popover_auto.expect_placement(
+        "right"
+    )  # since there is no space on the top, it defaults to right
+    popover_auto.set(False)
+    popover_auto.expect_active(False)
+
+    popover_top = controller.Popover(page, "btn_popover_top")
+    popover_top.expect_active(False)
+    popover_top.set(True)
+    popover_top.expect_active(True)
+    popover_top.expect_body("Popover placement should be on the top")
+    popover_top.expect_placement("top")
+    popover_top.set(False)
+    popover_top.expect_active(False)
+
+    popover_right = controller.Popover(page, "btn_popover_right")
+    popover_right.expect_active(False)
+    popover_right.set(True)
+    popover_right.expect_active(True)
+    popover_right.expect_body("Popover placement should be on the right")
+    popover_right.expect_placement("right")
+    popover_right.set(False)
+    popover_right.expect_active(False)
+
+    popover_left = controller.Popover(page, "btn_popover_left")
+    popover_left.expect_active(False)
+    popover_left.set(True)
+    popover_left.expect_active(True)
+    popover_left.expect_body("Popover placement should be on the left")
+    popover_left.expect_placement("left")
+    popover_left.set(False)
+    popover_left.expect_active(False)

tests/playwright/shiny/components/tooltip/tooltip_test_kitchen/app.py

@@ -0,0 +1,27 @@
+from shiny.express import ui
+
+with ui.tooltip(id="default_tooltip_auto"):
+    ui.input_action_button("btn", "A button", class_="mt-3")
+    "An auto message"
+
+ui.br()
+ui.br()
+
+with ui.tooltip(id="default_tooltip_top", placement="top"):
+    ui.input_action_button("btn2", "A button", class_="mt-3")
+    "A top message"
+
+ui.br()
+ui.br()
+
+with ui.tooltip(id="default_tooltip_right", placement="right"):
+    ui.input_action_button("btn3", "A button", class_="mt-3")
+    "A right message"
+
+
+ui.br()
+ui.br()
+
+with ui.tooltip(id="default_tooltip_left", placement="left"):
+    ui.input_action_button("btn4", "A button", class_="mt-3")
+    "A left message"

tests/playwright/shiny/components/tooltip/tooltip_test_kitchen/test_tooltip_test_kitchen.py

@@ -0,0 +1,38 @@
+from playwright.sync_api import Page
+
+from shiny.playwright import controller
+from shiny.run import ShinyAppProc
+
+
+def test_tooltip_test_kitchen(page: Page, local_app: ShinyAppProc) -> None:
+    page.goto(local_app.url)
+
+    tooltip_auto = controller.Tooltip(page, "default_tooltip_auto")
+    tooltip_auto.expect_active(False)
+    tooltip_auto.set(True)
+    tooltip_auto.expect_active(True)
+    tooltip_auto.expect_body("An auto message")
+    tooltip_auto.expect_placement(
+        "right"
+    )  # since there is no space on the top, it defaults to right
+
+    tooltip_top = controller.Tooltip(page, "default_tooltip_top")
+    tooltip_top.expect_active(False)
+    tooltip_top.set(True)
+    tooltip_top.expect_active(True)
+    tooltip_top.expect_body("A top message")
+    tooltip_top.expect_placement("top")
+
+    tooltip_right = controller.Tooltip(page, "default_tooltip_right")
+    tooltip_right.expect_active(False)
+    tooltip_right.set(True)
+    tooltip_right.expect_active(True)
+    tooltip_right.expect_body("A right message")
+    tooltip_right.expect_placement("right")
+
+    tooltip_left = controller.Tooltip(page, "default_tooltip_left")
+    tooltip_left.expect_active(False)
+    tooltip_left.set(True)
+    tooltip_left.expect_active(True)
+    tooltip_left.expect_body("A left message")
+    tooltip_left.expect_placement("left")