Add tests for sidebar

Author: karangattu

shiny/playwright/controller/_layout.py

@@ -7,6 +7,7 @@
 
 from .._types import PatternOrStr, Timeout
 from ..expect._internal import expect_class_to_have_value as _expect_class_to_have_value
+from ..expect._internal import expect_style_to_have_value as _expect_style_to_have_value
 from ._base import UiWithContainer, WidthLocM
 
 
@@ -32,6 +33,14 @@ class Sidebar(
     """
     Playwright `Locator` for the position of the sidebar.
     """
+    loc_content: Locator
+    """
+    Playwright `Locator` for the content of the sidebar.
+    """
+    loc_title: Locator
+    """
+    Playwright `Locator` for the title of the sidebar.
+    """
 
     def __init__(self, page: Page, id: str) -> None:
         """
@@ -52,6 +61,8 @@ def __init__(self, page: Page, id: str) -> None:
         )
         self.loc_handle = self.loc_container.locator("button.collapse-toggle")
         self.loc_position = self.loc.locator("..")
+        self.loc_content = self.loc.locator("> div.sidebar-content")
+        self.loc_title = self.loc_content.locator("> header.sidebar-title")
 
     def expect_text(self, value: PatternOrStr, *, timeout: Timeout = None) -> None:
         """
@@ -64,7 +75,92 @@ def expect_text(self, value: PatternOrStr, *, timeout: Timeout = None) -> None:
         timeout
             The maximum time to wait for the text to appear. Defaults to `None`.
         """
-        playwright_expect(self.loc).to_have_text(value, timeout=timeout)
+        playwright_expect(self.loc_content).to_have_text(value, timeout=timeout)
+
+    def expect_class(
+        self,
+        class_name: str,
+        *,
+        has_class: bool = True,
+        timeout: Timeout = None,
+    ) -> None:
+        """
+        Asserts that the sidebar has or does not have a CSS class.
+
+        Parameters
+        ----------
+        class_name
+            The CSS class to check for.
+        has_class
+            `True` if the sidebar should have the CSS class, `False` otherwise.
+        timeout
+            The maximum time to wait for the sidebar to appear. Defaults to `None`.
+        """
+        _expect_class_to_have_value(
+            self.loc,
+            class_name,
+            has_class=has_class,
+            timeout=timeout,
+        )
+
+    def expect_gap(self, value: PatternOrStr, *, timeout: Timeout = None) -> None:
+        """
+        Asserts that the sidebar has the expected gap.
+
+        Parameters
+        ----------
+        value
+            The expected gap of the sidebar.
+        timeout
+            The maximum time to wait for the gap to appear. Defaults to `None`.
+        """
+        _expect_style_to_have_value(self.loc_content, "gap", value, timeout=timeout)
+
+    def expect_bg_color(self, value: PatternOrStr, *, timeout: Timeout = None) -> None:
+        """
+        Asserts that the sidebar has the expected background color.
+
+        Parameters
+        ----------
+        value
+            The expected background color of the sidebar.
+        timeout
+            The maximum time to wait for the background color to appear. Defaults to `None`.
+        """
+        _expect_style_to_have_value(
+            self.loc_container, "--_sidebar-bg", value, timeout=timeout
+        )
+
+    def expect_title(self, value: PatternOrStr, *, timeout: Timeout = None) -> None:
+        """
+        Asserts that the sidebar has the expected title.
+
+        Parameters
+        ----------
+        value
+            The expected title of the sidebar.
+        timeout
+            The maximum time to wait for the title to appear. Defaults to `None`.
+        """
+        playwright_expect(self.loc_title).to_have_text(value, timeout=timeout)
+
+    def expect_padding(
+        self, value: list[PatternOrStr], *, timeout: Timeout = None
+    ) -> None:
+        """
+        Asserts that the sidebar has the expected padding.
+
+        Parameters
+        ----------
+        value
+            The expected padding of the sidebar.
+        timeout
+            The maximum time to wait for the padding to appear. Defaults to `None`.
+        """
+        padding_val = " ".join(map(str, value))
+        _expect_style_to_have_value(
+            self.loc_content, "padding", padding_val, timeout=timeout
+        )
 
     def expect_position(
         self,

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

@@ -0,0 +1,67 @@
+from shiny.express import input, render, ui
+
+ui.page_opts(fillable=True)
+
+with ui.card():
+    with ui.layout_sidebar():
+        with ui.sidebar(
+            id="sidebar_left",
+            open="desktop",
+            title="Left sidebar",
+            bg="dodgerBlue",
+            class_="text-white",
+            max_height_mobile="175px",
+            gap="20px",
+            padding="10px",
+        ):
+            "Left sidebar content"
+
+        @render.code
+        def state_left():
+            return f"input.sidebar_left(): {input.sidebar_left()}"
+
+
+with ui.card():
+    with ui.layout_sidebar():
+        with ui.sidebar(
+            id="sidebar_right",
+            position="right",
+            open="desktop",
+            padding=["10px", "20px"],
+            bg="SlateBlue",
+        ):
+            "Right sidebar content"
+
+        @render.code
+        def state_right():
+            return f"input.sidebar_right(): {input.sidebar_right()}"
+
+
+with ui.card():
+    with ui.layout_sidebar():
+        with ui.sidebar(
+            id="sidebar_closed",
+            open="closed",
+            bg="LightCoral",
+            padding=["10px", "20px", "30px"],
+        ):
+            "Closed sidebar content"
+
+        @render.code
+        def state_closed():
+            return f"input.sidebar_closed(): {input.sidebar_closed()}"
+
+
+with ui.card():
+    with ui.layout_sidebar():
+        with ui.sidebar(
+            id="sidebar_always",
+            open="always",
+            bg="PeachPuff",
+            padding=["10px", "20px", "30px", "40px"],
+        ):
+            "Always sidebar content"
+
+        @render.code
+        def state_always():
+            return f"input.sidebar_always(): {input.sidebar_always()}"

tests/playwright/shiny/inputs/sidebar_kitchensink/test_sidebar_kitchensink.py

@@ -0,0 +1,38 @@
+from playwright.sync_api import Page
+
+from shiny.playwright import controller
+from shiny.run import ShinyAppProc
+
+
+def test_sidebar_position_and_open(page: Page, local_app: ShinyAppProc) -> None:
+    page.goto(local_app.url)
+
+    left_sidebar = controller.Sidebar(page, "sidebar_left")
+    output_txt_left = controller.OutputTextVerbatim(page, "state_left")
+    left_sidebar.set(True)
+    left_sidebar.expect_padding(["10px"])
+    left_sidebar.expect_title("Left sidebar")
+    left_sidebar.expect_gap("20px")
+    left_sidebar.expect_class("text-white", has_class=True)
+    left_sidebar.expect_bg_color("dodgerBlue")
+    output_txt_left.expect_value("input.sidebar_left(): True")
+    left_sidebar.expect_open(True)
+    left_sidebar.set(False)
+    output_txt_left.expect_value("input.sidebar_left(): False")
+    left_sidebar.expect_handle(True)
+    left_sidebar.expect_open(False)
+    left_sidebar.loc_handle.click()
+    left_sidebar.expect_open(True)
+    output_txt_left.expect_value("input.sidebar_left(): True")
+
+    right_sidebar = controller.Sidebar(page, "sidebar_right")
+    right_sidebar.expect_padding(["10px", "20px"])
+    right_sidebar.expect_bg_color("SlateBlue")
+
+    closed_sidebar = controller.Sidebar(page, "sidebar_closed")
+    closed_sidebar.expect_padding(["10px", "20px", "30px"])
+    closed_sidebar.expect_bg_color("LightCoral")
+
+    always_sidebar = controller.Sidebar(page, "sidebar_always")
+    always_sidebar.expect_padding(["10px", "20px", "30px", "40px"])
+    always_sidebar.expect_bg_color("PeachPuff")