fix(306,308,310): Sidebar and accordion updates (#231)

R/data-apps-deps.R

@@ -59,9 +59,9 @@ apps_deps_map <- list(`001-hello` = "rsconnect", `012-datatables` = "ggplot2",
     "sf", "withr"), `302-bootswatch-themes` = c("ggplot2", "progress", 
     "rversions", "sf", "withr"), `304-bslib-card` = c("rlang", 
     "rversions"), `305-bslib-value-box` = c("rlang", "rversions"
-    ), `306-accordion-add-remove` = "magrittr", `308-sidebar-kitchen-sink` = c("lorem", 
-    "rversions", "testthat"), `309-flexdashboard-tabs-navs` = "rmarkdown", 
-    `310-bslib-sidebar-dynamic` = c("rversions", "testthat"), 
+    ), `306-accordion-add-remove` = "magrittr", `308-sidebar-kitchen-sink` = c("jsonlite", 
+    "lorem", "testthat"), `309-flexdashboard-tabs-navs` = "rmarkdown", 
+    `310-bslib-sidebar-dynamic` = c("jsonlite", "testthat"), 
     `311-bslib-sidebar-toggle-methods` = c("rversions", "testthat"
     ), `313-bslib-card-tab-focus` = c("rversions", "testthat", 
     "withr"), `314-bslib-tooltips` = "withr", `315-bslib-input-switch` = "withr", 

R/data-shinyverse.R

@@ -24,6 +24,7 @@ shinyverse_remotes <- c(
   "rstudio/shiny",
   "rstudio/shinymeta",
   "rstudio/shinytest",
+  "rstudio/chromote",
   "rstudio/shinytest2",
   "rstudio/shinythemes",
   "rstudio/shinyvalidate",

README.md

@@ -48,6 +48,7 @@ These GitHub packages will be installed to make sure the latest package developm
 - [rstudio/shiny](http://github.com/rstudio/shiny)
 - [rstudio/shinymeta](http://github.com/rstudio/shinymeta)
 - [rstudio/shinytest](http://github.com/rstudio/shinytest)
+- [rstudio/chromote](http://github.com/rstudio/chromote)
 - [rstudio/shinytest2](http://github.com/rstudio/shinytest2)
 - [rstudio/shinythemes](http://github.com/rstudio/shinythemes)
 - [rstudio/shinyvalidate](http://github.com/rstudio/shinyvalidate)

inst/apps/306-accordion-add-remove/app.R

@@ -14,7 +14,9 @@ ui <- page_sidebar(
     "accordion-icon-color" = "white",
     "accordion-icon-active-color" = "white"
   ) %>%
-    bs_add_rules(".bslib-sidebar-layout .main { background-color: lightgray; }"),
+    bs_add_rules(
+      ".bslib-sidebar-layout .main { background-color: lightgray; }"
+    ),
   sidebar = sidebar(
     bg = "#1E1E1E",
     accordion(

inst/apps/306-accordion-add-remove/tests/testthat/test-shinytest2.R → inst/apps/306-accordion-add-remove/tests/testthat/test-306-accordion-add-remove.R

@@ -8,7 +8,12 @@ test_that("{shinytest2} recording: accordion-select", {
     variant = platform_variant(), name = "accordion-select",
     height = height, width = width,
     view = interactive(),
-    options = list(bslib.precompiled = FALSE)
+    options = list(bslib.precompiled = FALSE),
+    screenshot_args = list(
+      delay = 0.5,
+      selector = "viewport",
+      options = list(captureBeyondViewport = FALSE)
+    )
   )
 
   # Make sure the set_input() calls complete in order

inst/apps/308-sidebar-kitchen-sink/app.R

@@ -7,10 +7,18 @@ plotly_bars <- plot_ly(x = LETTERS[1:3], y = 1:3) %>%
   add_bars()
 
 sidebar_long <- sidebar(lorem::ipsum(3, 3))
-sidebar_short <- sidebar(
-  p("A simple sidebar"),
-  actionButton("foo", "This button does nothing")
-)
+sidebar_short <- local({
+  i <- 0
+  function() {
+    i <<- i + 1
+    sidebar(
+      p("A simple", code("sidebar")),
+      actionButton(sprintf("foo-%d", i), "This button does nothing"),
+      bg = "#1F77B4",
+      `data-bs-theme` = "dark"
+    )
+  }
+})
 
 ui <- page_navbar(
   title = "Sidebar kitchen sink",
@@ -21,12 +29,15 @@ ui <- page_navbar(
     position = "right",
     id = "global_sidebar",
     bg = "#1E1E1E",
+    `data-bs-theme` = "dark",
     shiny::markdown(
       "Learn more about `bslib::sidebar()` [here](https://rstudio.github.io/bslib/articles/sidebars.html)"
     )
   ),
   header = tagList(
-    tags$style(HTML(".plotly .modebar-container { display: none; }")),
+    tags$style(HTML("
+      .plotly .modebar-container { display: none; }
+    ")),
     span("header", class = "bg-dark"),
     span("content", class = "bg-dark")
   ),
@@ -37,10 +48,10 @@ ui <- page_navbar(
   nav_panel(
     "Fill",
     plotly_bars,
-    layout_sidebar(plotly_bars, sidebar = sidebar_short),
+    layout_sidebar(plotly_bars, sidebar = sidebar_short()),
     card(
       card_header("Depth"),
-      layout_sidebar(plotly_bars, sidebar = sidebar_short)
+      layout_sidebar(plotly_bars, sidebar = sidebar_short())
     )
   ),
   nav_panel(

inst/apps/308-sidebar-kitchen-sink/tests/testthat/test-shinytest2.R → inst/apps/308-sidebar-kitchen-sink/tests/testthat/test-308-sidebar-kitchen-sink.R

@@ -1,7 +1,7 @@
 library(shinytest2)
 
 # Only take screenshots on mac + r-release to reduce diff noise
-release <- rversions::r_release()$version
+release <- jsonlite::fromJSON("https://api.r-hub.io/rversions/resolve/release")$version
 release <- paste0(
   strsplit(release, ".", fixed = TRUE)[[1]][1:2],
   collapse = "."
@@ -10,7 +10,8 @@ release <- paste0(
 is_testing_on_ci <- identical(Sys.getenv("CI"), "true") && testthat::is_testing()
 is_mac_release <- identical(paste0("mac-", release), platform_variant())
 
-DO_SCREENSHOT <- is_testing_on_ci && is_mac_release
+DO_SCREENSHOT <- (is_testing_on_ci && is_mac_release) ||
+  identical(Sys.getenv("SHINYTEST2_SCREENSHOT"), "true")
 
 test_that("{shinytest2} recording: 308-sidebar-kitchen-sink", {
   height <- 1200
@@ -22,7 +23,13 @@ test_that("{shinytest2} recording: 308-sidebar-kitchen-sink", {
     view = interactive(),
     seed = 101,
     height = height,
-    width = width
+    width = width,
+    # TODO: rstudio/shinytest2#367
+    screenshot_args = list(
+      selector = "viewport",
+      delay = 0.5,
+      options = list(captureBeyondViewport = FALSE)
+    )
   )
 
   expect_screenshot <- function() {
@@ -35,7 +42,7 @@ test_that("{shinytest2} recording: 308-sidebar-kitchen-sink", {
   expect_screenshot()
 
   # Contents should render to their natural height on mobile
-  app$set_window_size(width = 500, height = 1000)
+  app$set_window_size(width = 500, height = 2000)
   expect_screenshot()
   app$set_window_size(width = width, height = height)
 
@@ -48,6 +55,8 @@ test_that("{shinytest2} recording: 308-sidebar-kitchen-sink", {
   expect_screenshot()
 
   app$click("toggle_sidebar")
-  Sys.sleep(1) # Wait for transition to complete
+  app$wait_for_js("
+    document.querySelector('.bslib-sidebar-layout.transitioning') === null
+  ")
   expect_screenshot()
 })

inst/apps/310-bslib-sidebar-dynamic/tests/testthat/test-310-bslib-sidebar-dynamic.R

@@ -2,7 +2,7 @@ library(shinytest2)
 
 # Only take screenshots on mac + r-release to reduce diff noise
 expect_screenshot_mac_release <- local({
-  release <- rversions::r_release()$version
+  release <- jsonlite::fromJSON("https://api.r-hub.io/rversions/resolve/release")$version
   release <- paste0(
     strsplit(release, ".", fixed = TRUE)[[1]][1:2],
     collapse = "."
@@ -69,7 +69,12 @@ test_that("310-bslib-sidebar-dynamic: dynamically added sidebars are fully funct
     width = 1200,
     view = interactive(),
     options = list(bslib.precompiled = FALSE),
-    expect_values_screenshot_args = FALSE
+    expect_values_screenshot_args = FALSE,
+    screenshot_args = list(
+      selector = "viewport",
+      delay = 0.5,
+      options = list(captureBeyondViewport = FALSE)
+    )
   )
 
   expect_sidebar_hidden <- expect_sidebar_hidden_factory(app)