Fix remaining doc tests

demo/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
       crossorigin="anonymous"
     />
   </head>

docs/components_page/components/__tests__/test_carousel.py

@@ -13,6 +13,8 @@
 
 def test_r_carousel(dashr):
     r_app = load_r_app((HERE.parent / "carousel" / "callback.R"), "carousel")
+    with open("app.R", "w") as f:
+        f.write(r_app)
     dashr.start_server(r_app)
     check_carousel_callbacks(dashr)
 
@@ -35,9 +37,9 @@ def check_carousel_callbacks(runner):
         lambda: len(
             {"carousel-item", "active"}
             - set(
-                runner.find_elements("div.carousel-item")[1].get_attribute(
-                    "class"
-                )
+                runner.find_elements("div.carousel-item")[1]
+                .get_attribute("class")
+                .split()
             )
         )
         == 0,

docs/components_page/components/__tests__/test_modal.py

@@ -58,7 +58,7 @@ def check_modal_size_callbacks(runner):
         timeout=4,
     )
 
-    runner.find_element("#close-sm").click()
+    runner.find_element(".btn-close").click()
     wait.until(
         lambda: len(runner.find_elements(".modal-content")) == 0,
         timeout=4,
@@ -70,7 +70,7 @@ def check_modal_size_callbacks(runner):
         timeout=4,
     )
 
-    runner.find_element("#close-lg").click()
+    runner.find_element(".btn-close").click()
     wait.until(
         lambda: len(runner.find_elements(".modal-content")) == 0,
         timeout=4,
@@ -82,7 +82,7 @@ def check_modal_size_callbacks(runner):
         timeout=4,
     )
 
-    runner.find_element("#close-xl").click()
+    runner.find_element(".btn-close").click()
     wait.until(
         lambda: len(runner.find_elements(".modal-content")) == 0,
         timeout=4,

docs/components_page/components/__tests__/test_offcanvas.py

@@ -4,12 +4,45 @@
 from pathlib import Path
 
 import dash.testing.wait as wait
+from selenium.webdriver.common.by import By
+from selenium.webdriver.common.keys import Keys
+from selenium.webdriver.support import expected_conditions as EC
+from selenium.webdriver.support.ui import WebDriverWait
 
 from .helpers import load_jl_app, load_r_app
 
 HERE = Path(__file__).parent
 
 
+def _click_open_button(runner, button_id):
+    btn = WebDriverWait(runner.driver, 5).until(
+        EC.presence_of_element_located((By.ID, button_id))
+    )
+    btn.click()
+    assert WebDriverWait(runner.driver, 5).until(
+        EC.presence_of_element_located((By.CSS_SELECTOR, ".offcanvas.show"))
+    )
+
+
+def _dismiss_with_esc(runner):
+    offcanvas = WebDriverWait(runner.driver, 5).until(
+        EC.presence_of_element_located((By.CLASS_NAME, "offcanvas"))
+    )
+    offcanvas.send_keys(Keys.ESCAPE)
+    assert WebDriverWait(runner.driver, 5).until_not(
+        EC.presence_of_element_located((By.CLASS_NAME, "offcanvas"))
+    )
+
+
+def _click_radio(runner, radio_id, option):
+    label_id = f"_dbcprivate_radioitems_{radio_id}_input_{option}"
+    wait.until(
+        lambda: len(runner.find_elements(f"#{label_id}")) != 0,
+        timeout=8,
+    )
+    runner.driver.find_element_by_id(label_id).click()
+
+
 def test_r_offcanvas_simple(dashr):
     r_app = load_r_app((HERE.parent / "offcanvas" / "simple.R"), "offcanvas")
     dashr.start_server(r_app)
@@ -25,34 +58,9 @@ def test_jl_offcanvas_simple(dashjl):
 
 
 def check_offcanvas_simple_callbacks(runner):
-    runner.find_element("#open-offcanvas").click()
-    wait.until(
-        lambda: len(runner.find_elements(".offcanvas")) != 0,
-        timeout=4,
-    )
-
-    # When offcanvas-header.btn-close is clicked, the offcanvas disappears
-    runner.find_element(".offcanvas-header .btn-close").click()
-    wait.until(
-        lambda: len(runner.find_elements(".offcanvas")) == 0,
-        timeout=4,
-    )
-
-    runner.find_element("#open-offcanvas").click()
-    wait.until(
-        lambda: len(runner.find_elements(".offcanvas")) != 0,
-        timeout=4,
-    )
-
-    # When modal-backdrop (to change to offcanvas-backdrop) is clicked,
-    # the offcanvas disappears
-    # TODO: Once react-bootstrap has fixed this, need to change to
-    # offcanvas-backdrop
-    runner.find_element(".modal-backdrop").click()
-    wait.until(
-        lambda: len(runner.find_elements(".offcanvas")) == 0,
-        timeout=4,
-    )
+    # When offcanvas-backdrop is clicked, the offcanvas disappears
+    _click_open_button(runner, "open-offcanvas")
+    _dismiss_with_esc(runner)
 
 
 # ------------------------------
@@ -73,49 +81,13 @@ def test_jl_offcanvas_backdrop(dashjl):
 
 
 def check_offcanvas_backdrop_callbacks(runner):
-    runner.find_element("#open-offcanvas-backdrop").click()
-    wait.until(
-        lambda: len(runner.find_elements(".offcanvas")) != 0,
-        timeout=4,
-    )
+    _click_open_button(runner, "open-offcanvas-backdrop")
+    assert len(runner.find_elements(".offcanvas-backdrop")) != 0
+    _dismiss_with_esc(runner)
 
-    runner.find_element("#offcanvas-backdrop-selector").selectByValue(False)
-    wait.until(
-        # TODO: Once react-bootstrap has fixed this, need to change to
-        # offcanvas-backdrop
-        lambda: len(runner.find_elements(".modal-backdrop")) == 0,
-        timeout=4,
-    )
-
-    runner.find_element("#offcanvas-backdrop-selector").selectByValue(True)
-    wait.until(
-        # TODO: Once react-bootstrap has fixed this, need to change to
-        # offcanvas-backdrop
-        lambda: len(runner.find_elements(".modal-backdrop")) != 0,
-        timeout=4,
-    )
-
-    runner.find_element("#offcanvas-backdrop-selector").selectByValue(False)
-    wait.until(
-        # TODO: Once react-bootstrap has fixed this, need to change to
-        # offcanvas-backdrop
-        lambda: len(runner.find_elements(".modal-backdrop")) == 0,
-        timeout=4,
-    )
-
-    runner.find_element("#offcanvas-backdrop-selector").selectByValue("static")
-    wait.until(
-        # TODO: Once react-bootstrap has fixed this, need to change to
-        # offcanvas-backdrop
-        lambda: len(runner.find_elements(".modal-backdrop")) != 0,
-        timeout=4,
-    )
-
-    runner.find_element("#close-offcanvas-backdrop").click()
-    wait.until(
-        lambda: len(runner.find_elements(".offcanvas")) == 0,
-        timeout=4,
-    )
+    _click_radio(runner, "offcanvas-backdrop-selector", "false")
+    _click_open_button(runner, "open-offcanvas-backdrop")
+    assert len(runner.find_elements(".offcanvas-backdrop")) == 0
 
 
 # ------------------------------
@@ -138,20 +110,7 @@ def test_jl_offcanvas_scrollable(dashjl):
 
 
 def check_offcanvas_scrollable_callbacks(runner):
-    import time
-
-    time.sleep(3)
-    runner.find_element("#open-offcanvas-scrollable").click()
-    wait.until(
-        lambda: len(runner.find_elements(".offcanvas")) != 0,
-        timeout=4,
-    )
-
-    runner.find_element("#close-offcanvas-scrollable").click()
-    wait.until(
-        lambda: len(runner.find_elements(".offcanvas")) == 0,
-        timeout=4,
-    )
+    _click_open_button(runner, "open-offcanvas-scrollable")
 
 
 # ------------------------------
@@ -174,24 +133,8 @@ def test_jl_offcanvas_placement(dashjl):
 
 
 def check_offcanvas_placement_callbacks(runner):
-    runner.find_element("#open-offcanvas-placement").click()
-    wait.until(
-        lambda: len(runner.find_elements(".offcanvas")) != 0,
-        timeout=4,
-    )
-
-    # Changing placement
     for option in ["end", "top", "bottom", "start"]:
-        runner.find_element("#offcanvas-placement-selector").selectByValue(
-            option
-        )
-        wait.until(
-            lambda: len(runner.find_elements(f".offcanvas-{option}")) != 0,
-            timeout=4,
-        )
-
-    runner.find_element("#close-offcanvas-placement").click()
-    wait.until(
-        lambda: len(runner.find_elements(".offcanvas")) == 0,
-        timeout=4,
-    )
+        _click_radio(runner, "offcanvas-placement-selector", option)
+        _click_open_button(runner, "open-offcanvas-placement")
+        assert len(runner.find_elements(f".offcanvas-{option}")) != 0
+        _dismiss_with_esc(runner)

docs/components_page/components/__tests__/test_popover.py

@@ -27,7 +27,6 @@ def test_jl_popover(dashjl):
 
 
 def check_popover_callbacks(runner):
-
     assert len(runner.find_elements("#popover")) == 0
     runner.find_element("#toggle").click()
     wait.until(

docs/components_page/components/modal/backdrop.R

@@ -16,7 +16,8 @@ modal <- htmlDiv(
           inline = TRUE,
           value = TRUE,
         )
-      )
+      ),
+      class_name = "mb-2"
     ),
     dbcButton("Open modal", id = "open-backdrop", n_clicks = 0),
     dbcModal(

docs/components_page/components/modal/backdrop.jl

@@ -1,19 +1,22 @@
 using DashBootstrapComponents, DashHtmlComponents
 
 modal = html_div([
-    html_div([
-        dbc_label("Backdrop:"),
-        dbc_radioitems(
-            id = "backdrop-selector",
-            options = [
-                Dict("label" => "True (default)", "value" => true),
-                Dict("label" => "False", "value" => false),
-                Dict("label" => "'static'", "value" => "static"),
-            ],
-            inline = true,
-            value = true,
-        ),
-    ]),
+    html_div(
+        [
+            dbc_label("Backdrop:"),
+            dbc_radioitems(
+                id = "backdrop-selector",
+                options = [
+                    Dict("label" => "True (default)", "value" => true),
+                    Dict("label" => "False", "value" => false),
+                    Dict("label" => "'static'", "value" => "static"),
+                ],
+                inline = true,
+                value = true,
+            ),
+        ],
+        class_name = "mb-2",
+    ),
     dbc_button("Open modal", id = "open-backdrop", n_clicks = 0),
     dbc_modal(
         [

docs/components_page/components/modal/backdrop.py

@@ -17,7 +17,8 @@
                     inline=True,
                     value=True,
                 ),
-            ]
+            ],
+            class_name="mb-2",
         ),
         dbc.Button("Open modal", id="open-backdrop", n_clicks=0),
         dbc.Modal(

docs/components_page/components/modal/fullscreen.R

@@ -10,7 +10,7 @@ modal <- htmlDiv(
         dbcModalBody("Wow this thing takes up a lot of space...")
       ),
       id = "modal-fs",
-      fullscreen=TRUE
+      fullscreen = TRUE
     )
   )
 )

docs/components_page/components/modal/fullscreen.jl

@@ -8,7 +8,7 @@ modal = html_div([
             dbc_modalbody("Wow this thing takes up a lot of space..."),
         ],
         id = "modal-fs",
-        fullscreen=true
+        fullscreen = true,
     ),
 ])
 

docs/components_page/components/modal/size.R

@@ -37,8 +37,8 @@ modal <- htmlDiv(
 )
 
 
-toggle_modal <- function(n1, n2, is_open) {
-  if (n1 > 0 | n2 > 0) {
+toggle_modal <- function(n1, is_open) {
+  if (n1 > 0) {
     return(!is_open)
   }
   return(is_open)
@@ -48,7 +48,6 @@ app$callback(
   output("modal-sm", "is_open"),
   list(
     input("open-sm", "n_clicks"),
-    input("close-sm", "n_clicks"),
     state("modal-sm", "is_open")
   ),
   toggle_modal
@@ -58,7 +57,6 @@ app$callback(
   output("modal-lg", "is_open"),
   list(
     input("open-lg", "n_clicks"),
-    input("close-lg", "n_clicks"),
     state("modal-lg", "is_open")
   ),
   toggle_modal
@@ -68,7 +66,6 @@ app$callback(
   output("modal-xl", "is_open"),
   list(
     input("open-xl", "n_clicks"),
-    input("close-xl", "n_clicks"),
     state("modal-xl", "is_open")
   ),
   toggle_modal