tests(navs): Add PageNavbar and NavsetHidden tests and controllers

shiny/playwright/controller/__init__.py

@@ -61,6 +61,7 @@
     NavsetPillList,
     NavsetTab,
     NavsetUnderline,
+    PageNavbar,
 )
 from ._output import (
     OutputCode,
@@ -121,4 +122,5 @@
     "NavsetUnderline",
     "DownloadButton",
     "DownloadLink",
+    "PageNavbar",
 ]

shiny/playwright/controller/_navs.py

@@ -563,12 +563,12 @@ def __init__(self, page: Page, id: str) -> None:
         )
 
 
-class NavsetBar(
+class _ExpectNavsetCommonM(
     _ExpectNavsetSidebarM,
     _ExpectNavsetTitleM,
     _NavsetBase,
 ):
-    """Controller for :func:`shiny.ui.navset_bar`."""
+    """Mixin class for common expectations of nav bars."""
 
     def __init__(self, page: Page, id: str) -> None:
         """
@@ -695,3 +695,26 @@ def expect_layout(
             playwright_expect(self.loc_container.locator("..")).to_have_class(
                 re.compile("container"), timeout=timeout
             )
+
+
+class NavsetBar(
+    _ExpectNavsetCommonM,
+):
+    """Controller for :func:`shiny.ui.navset_bar`."""
+
+
+class PageNavbar(_ExpectNavsetCommonM):
+    """Controller for :func:`shiny.ui.page_navbar`."""
+
+    def expect_fillable(self, *, timeout: Timeout = None) -> None:
+        """
+        Expects the main content area to be considered a fillable (i.e., flexbox) container
+
+        Parameters
+        ----------
+        timeout
+            The maximum time to wait for the expectation to pass. Defaults to `None`.
+        """
+        playwright_expect(self.get_loc_active_content()).to_have_class(
+            re.compile("html-fill-container"), timeout=timeout
+        )

tests/playwright/shiny/components/nav/app.py

@@ -8,11 +8,6 @@
 from shiny.types import NavSetArg
 from shiny.ui import Sidebar
 
-# TODO-karan; Make test that uses sidebar / no sidebar (where possible)
-# TODO-karan; Make test that has/does not have a header & footer (where possible)
-# TODO-karan; Test for title value (where possible)
-# TODO-karan; Make test that has placement = "above" / "below" (where possible); Test in combination of with/without sidebar
-
 
 def nav_controls(prefix: str) -> List[NavSetArg]:
     return [

tests/playwright/shiny/components/nav/navset_hidden_kitchensink/app.py

@@ -0,0 +1,40 @@
+from shiny import reactive
+from shiny.express import input, ui
+
+ui.input_radio_buttons("controller1", "Controller1", ["1", "2", "3"], selected="2")
+
+with ui.navset_hidden(
+    id="hidden_tabs1",
+    header=ui.tags.div("Navset_hidden_header", id="navset_hidden_header1"),
+    footer=ui.tags.div("Navset_hidden_footer", id="navset_hidden_footer1"),
+    selected="panel2",
+):
+    with ui.nav_panel(None, value="panel1"):
+        "Panel 1 content"
+    with ui.nav_panel(None, value="panel2"):
+        "Panel 2 content"
+    with ui.nav_panel(None, value="panel3"):
+        "Panel 3 content"
+
+ui.markdown("-----")
+ui.input_radio_buttons("controller2", "Controller2", ["4", "5", "6"])
+
+with ui.navset_hidden(id="hidden_tabs2"):
+    with ui.nav_panel(None, value="panel4"):
+        "Panel 4 content"
+    with ui.nav_panel(None, value="panel5"):
+        "Panel 5 content"
+    with ui.nav_panel(None, value="panel6"):
+        "Panel 6 content"
+
+
+@reactive.effect
+@reactive.event(input.controller1)
+def _():
+    ui.update_navs("hidden_tabs1", selected="panel" + str(input.controller1()))
+
+
+@reactive.effect
+@reactive.event(input.controller2)
+def _():
+    ui.update_navs("hidden_tabs2", selected="panel" + str(input.controller2()))

tests/playwright/shiny/components/nav/navset_hidden_kitchensink/test_navset_hidden_kitchensink.py

@@ -0,0 +1,29 @@
+from playwright.sync_api import Page
+
+from shiny.playwright import controller
+from shiny.run import ShinyAppProc
+
+
+def test_navset_hidden_kitchensink(page: Page, local_app: ShinyAppProc) -> None:
+    page.goto(local_app.url)
+
+    navset_hidden_1 = controller.NavsetHidden(page, "hidden_tabs1")
+    radio1 = controller.InputRadioButtons(page, "controller1")
+    navset_hidden_1.expect_value("panel2")
+    navset_hidden_1._expect_content_text("Panel 2 content")
+    # assert the DOM structure for hidden_navset with header and footer is preserved
+    assert (
+        page.locator(
+            "#hidden_tabs1 + #navset_hidden_header1 + .tab-content + #navset_hidden_footer1"
+        ).count()
+        == 1
+    )
+    # assert header and footer contents
+    assert page.locator("#navset_hidden_header1").inner_text() == "Navset_hidden_header"
+    assert page.locator("#navset_hidden_footer1").inner_text() == "Navset_hidden_footer"
+    radio1.set("1")
+    navset_hidden_1.expect_value("panel1")
+    navset_hidden_1._expect_content_text("Panel 1 content")
+
+    navset_hidden_2 = controller.NavsetHidden(page, "hidden_tabs2")
+    navset_hidden_2.expect_value("panel4")

tests/playwright/shiny/components/nav/page_navbar_kitchensink/default_page_navbar/app.py

@@ -0,0 +1,9 @@
+from shiny.express import ui
+
+ui.page_opts(id="default_page_navbar", title="Default Page Navbar")
+
+with ui.nav_panel("Data"):
+    "This page could be used to pick a dataset."
+
+with ui.nav_panel("View"):
+    "This page could be used to view the dataset."

tests/playwright/shiny/components/nav/page_navbar_kitchensink/default_page_navbar/test_app.py

@@ -0,0 +1,11 @@
+from playwright.sync_api import Page
+
+from shiny.playwright import controller
+from shiny.run import ShinyAppProc
+
+
+def test_default_page_navbar(page: Page, local_app: ShinyAppProc) -> None:
+    page.goto(local_app.url)
+
+    default_page_navbar = controller.PageNavbar(page, "default_page_navbar")
+    default_page_navbar.expect_title("Default Page Navbar")

tests/playwright/shiny/components/nav/page_navbar_kitchensink/page_navbar_fillable/app.py

@@ -0,0 +1,9 @@
+from shiny.express import ui
+
+ui.page_opts(id="page_navbar_fillable", fillable=True)
+
+with ui.nav_panel("Data"):
+    "This page could be used to pick a dataset."
+
+with ui.nav_panel("View"):
+    "This page could be used to view the dataset."

tests/playwright/shiny/components/nav/page_navbar_kitchensink/page_navbar_fillable/test_app.py

@@ -0,0 +1,14 @@
+from playwright.sync_api import Page
+
+from shiny.playwright import controller
+from shiny.run import ShinyAppProc
+
+
+def test_page_navbar_fillable(page: Page, local_app: ShinyAppProc) -> None:
+    page.goto(local_app.url)
+
+    page_navbar_fillable = controller.PageNavbar(page, "page_navbar_fillable")
+    page_navbar_fillable._expect_content_text(
+        "This page could be used to pick a dataset."
+    )
+    page_navbar_fillable.expect_fillable()

tests/playwright/shiny/components/nav/page_navbar_kitchensink/page_navbar_fixed_bottom_inverse_bg/app.py

@@ -0,0 +1,15 @@
+from shiny.express import ui
+
+ui.page_opts(
+    id="page_fixed_bottom_inverse_bg",
+    position="fixed-bottom",
+    bg="dodgerBlue",
+    inverse=True,
+    gap="50px",
+)
+
+with ui.nav_panel("Data"):
+    "This page could be used to pick a dataset."
+
+with ui.nav_panel("View"):
+    "This page could be used to view the dataset."

tests/playwright/shiny/components/nav/page_navbar_kitchensink/page_navbar_fixed_bottom_inverse_bg/test_app.py

@@ -0,0 +1,18 @@
+from playwright.sync_api import Page
+
+from shiny.playwright import controller
+from shiny.run import ShinyAppProc
+
+
+def test_page_navbar_fixed_bottom_inverse_bg(
+    page: Page, local_app: ShinyAppProc
+) -> None:
+    page.goto(local_app.url)
+
+    page_navbar_fixed_bottom_inverse_bg = controller.PageNavbar(
+        page, "page_fixed_bottom_inverse_bg"
+    )
+    page_navbar_fixed_bottom_inverse_bg.expect_position("fixed-bottom")
+    page_navbar_fixed_bottom_inverse_bg.expect_inverse()
+    page_navbar_fixed_bottom_inverse_bg.expect_bg("dodgerBlue")
+    # page_navbar_fixed_bottom_inverse_bg.expect_gap("50px") # not working as expected since not showing on app

tests/playwright/shiny/components/nav/page_navbar_kitchensink/page_navbar_header_footer_fixed_top/app.py

@@ -0,0 +1,14 @@
+from shiny.express import ui
+
+ui.page_opts(
+    id="page_navbar_header_footer_fixed_top",
+    header=ui.tags.div("Header", id="page_navbar_header"),
+    footer=ui.tags.div("Footer", id="page_navbar_footer"),
+    position="fixed-top",
+)
+
+with ui.nav_panel("Data"):
+    "This page could be used to pick a dataset."
+
+with ui.nav_panel("View"):
+    "This page could be used to view the dataset."

tests/playwright/shiny/components/nav/page_navbar_kitchensink/page_navbar_header_footer_fixed_top/test_app.py

@@ -0,0 +1,24 @@
+from playwright.sync_api import Page
+
+from shiny.playwright import controller
+from shiny.run import ShinyAppProc
+
+
+def test_page_navbar_header_footer_fixed_top(
+    page: Page, local_app: ShinyAppProc
+) -> None:
+    page.goto(local_app.url)
+
+    page_navbar_header_footer_fixed_top = controller.PageNavbar(
+        page, "page_navbar_header_footer_fixed_top"
+    )
+    page_navbar_header_footer_fixed_top.expect_position("fixed-top")
+    # assert the DOM structure for page_navbar with header and footer is preserved
+    assert (
+        page.locator("#page_navbar_header + .tab-content + #page_navbar_footer").count()
+        == 1
+    )
+    # assert header and footer contents
+    assert page.locator("#page_navbar_header").inner_text() == "Header"
+    assert page.locator("#page_navbar_footer").inner_text() == "Footer"
+    # assert page_navbar_header_footer_fixed_top.expect_layout("fixed") # not working as expected since not showing on app

tests/playwright/shiny/components/nav/page_navbar_kitchensink/page_navbar_selected/app.py

@@ -0,0 +1,9 @@
+from shiny.express import ui
+
+ui.page_opts(id="page_navbar_selected", selected="View", fluid=False)
+
+with ui.nav_panel("Data"):
+    "This page could be used to pick a dataset."
+
+with ui.nav_panel("View"):
+    "This page could be used to view the dataset."

tests/playwright/shiny/components/nav/page_navbar_kitchensink/page_navbar_selected/test_app.py

@@ -0,0 +1,14 @@
+from playwright.sync_api import Page
+
+from shiny.playwright import controller
+from shiny.run import ShinyAppProc
+
+
+def test_page_navbar_selected(page: Page, local_app: ShinyAppProc) -> None:
+    page.goto(local_app.url)
+
+    page_navbar_selected = controller.PageNavbar(page, "page_navbar_selected")
+    page_navbar_selected.expect_value("View")
+    page_navbar_selected._expect_content_text(
+        "This page could be used to view the dataset."
+    )

tests/playwright/shiny/components/nav/page_navbar_kitchensink/page_navbar_sidebar/app.py

@@ -0,0 +1,16 @@
+from shiny.express import ui
+
+
+def navset_sidebar():
+    from shiny import ui as core_ui
+
+    return core_ui.sidebar(core_ui.markdown("Sidebar content"))
+
+
+ui.page_opts(id="page_navbar_sidebar", sidebar=navset_sidebar())
+
+with ui.nav_panel("Data"):
+    "This page could be used to pick a dataset."
+
+with ui.nav_panel("View"):
+    "This page could be used to view the dataset."

tests/playwright/shiny/components/nav/page_navbar_kitchensink/page_navbar_sidebar/test_app.py

@@ -0,0 +1,15 @@
+from playwright.sync_api import Page
+
+from shiny.playwright import controller
+from shiny.run import ShinyAppProc
+
+
+def test_page_navbar_sidebar(page: Page, local_app: ShinyAppProc) -> None:
+    page.goto(local_app.url)
+
+    page_navbar_sidebar = controller.PageNavbar(page, "page_navbar_sidebar")
+    page_navbar_sidebar.expect_value("Data")
+    page_navbar_sidebar._expect_content_text(
+        "This page could be used to pick a dataset."
+    )
+    page_navbar_sidebar.expect_sidebar(True)