From 03b8f87e1b81d5cfaa37842945dc462e22c0f4ea Mon Sep 17 00:00:00 2001 From: Gordon Woodhull Date: Mon, 24 Mar 2025 13:53:58 -0400 Subject: [PATCH] playwright tests for dark brand for #12319 testing theme/brand integration and dark brand also includes NoJS tests for #12173 --- .../html/dark-brand/blue-background.yml | 3 ++ .../html/dark-brand/brand-after-theme.qmd | 54 +++++++++++++++++++ .../html/dark-brand/brand-before-theme.qmd | 54 +++++++++++++++++++ .../html/dark-brand/red-background.yml | 3 ++ .../tests/html-dark-mode-nojs.spec.ts | 22 ++++++++ .../playwright/tests/html-dark-mode.spec.ts | 26 +++++++++ 6 files changed, 162 insertions(+) create mode 100644 tests/docs/playwright/html/dark-brand/blue-background.yml create mode 100644 tests/docs/playwright/html/dark-brand/brand-after-theme.qmd create mode 100644 tests/docs/playwright/html/dark-brand/brand-before-theme.qmd create mode 100644 tests/docs/playwright/html/dark-brand/red-background.yml create mode 100644 tests/integration/playwright/tests/html-dark-mode-nojs.spec.ts create mode 100644 tests/integration/playwright/tests/html-dark-mode.spec.ts diff --git a/tests/docs/playwright/html/dark-brand/blue-background.yml b/tests/docs/playwright/html/dark-brand/blue-background.yml new file mode 100644 index 00000000000..e905fff2be8 --- /dev/null +++ b/tests/docs/playwright/html/dark-brand/blue-background.yml @@ -0,0 +1,3 @@ +color: + background: "#ccddff" + foreground: "#336644" diff --git a/tests/docs/playwright/html/dark-brand/brand-after-theme.qmd b/tests/docs/playwright/html/dark-brand/brand-after-theme.qmd new file mode 100644 index 00000000000..258a5b610e4 --- /dev/null +++ b/tests/docs/playwright/html/dark-brand/brand-after-theme.qmd @@ -0,0 +1,54 @@ +--- +title: "dark brand - ggplot" +brand: + dark: red-background.yml + light: blue-background.yml +theme: + dark: [cyborg, brand] + light: [simplex, brand] +execute: + echo: false + warning: false +--- + +```{r} +#| echo: false +#| warning: false +library(ggplot2) + +ggplot_theme <- function(bgcolor, fgcolor) { + theme_minimal(base_size = 11) %+% + theme( + panel.border = element_blank(), + panel.grid.major.y = element_blank(), + panel.grid.minor.y = element_blank(), + panel.grid.major.x = element_blank(), + panel.grid.minor.x = element_blank(), + text = element_text(colour = fgcolor), + axis.text = element_text(colour = fgcolor), + rect = element_rect(colour = bgcolor, fill = bgcolor), + plot.background = element_rect(fill = bgcolor, colour = NA), + axis.line = element_line(colour = fgcolor), + axis.ticks = element_line(colour = fgcolor) + ) +} + +brand_ggplot <- function(brand_yml) { + brand <- yaml::yaml.load_file(brand_yml) + ggplot_theme(brand$color$background, brand$color$foreground) +} + +blue_theme <- brand_ggplot("blue-background.yml") +red_theme <- brand_ggplot("red-background.yml") + +colour_scale <- scale_colour_manual(values = c("darkorange", "purple", "cyan4")) +``` + + +```{r} +#| renderings: [light, dark] +ggplot(mtcars, aes(mpg, wt)) + + geom_point(aes(colour = factor(cyl))) + blue_theme + colour_scale +ggplot(mtcars, aes(mpg, wt)) + + geom_point(aes(colour = factor(cyl))) + red_theme + colour_scale +``` diff --git a/tests/docs/playwright/html/dark-brand/brand-before-theme.qmd b/tests/docs/playwright/html/dark-brand/brand-before-theme.qmd new file mode 100644 index 00000000000..9efb99a753c --- /dev/null +++ b/tests/docs/playwright/html/dark-brand/brand-before-theme.qmd @@ -0,0 +1,54 @@ +--- +title: "dark brand - ggplot" +brand: + light: blue-background.yml + dark: red-background.yml +theme: + light: simplex + dark: cyborg # same effect as [brand, cyborg] +execute: + echo: false + warning: false +--- + +```{r} +#| echo: false +#| warning: false +library(ggplot2) + +ggplot_theme <- function(bgcolor, fgcolor) { + theme_minimal(base_size = 11) %+% + theme( + panel.border = element_blank(), + panel.grid.major.y = element_blank(), + panel.grid.minor.y = element_blank(), + panel.grid.major.x = element_blank(), + panel.grid.minor.x = element_blank(), + text = element_text(colour = fgcolor), + axis.text = element_text(colour = fgcolor), + rect = element_rect(colour = bgcolor, fill = bgcolor), + plot.background = element_rect(fill = bgcolor, colour = NA), + axis.line = element_line(colour = fgcolor), + axis.ticks = element_line(colour = fgcolor) + ) +} + +brand_ggplot <- function(brand_yml) { + brand <- yaml::yaml.load_file(brand_yml) + ggplot_theme(brand$color$background, brand$color$foreground) +} + +blue_theme <- brand_ggplot("blue-background.yml") +red_theme <- brand_ggplot("red-background.yml") + +colour_scale <- scale_colour_manual(values = c("darkorange", "purple", "cyan4")) +``` + + +```{r} +#| renderings: [light, dark] +ggplot(mtcars, aes(mpg, wt)) + + geom_point(aes(colour = factor(cyl))) + blue_theme + colour_scale +ggplot(mtcars, aes(mpg, wt)) + + geom_point(aes(colour = factor(cyl))) + red_theme + colour_scale +``` diff --git a/tests/docs/playwright/html/dark-brand/red-background.yml b/tests/docs/playwright/html/dark-brand/red-background.yml new file mode 100644 index 00000000000..6d95abf09fd --- /dev/null +++ b/tests/docs/playwright/html/dark-brand/red-background.yml @@ -0,0 +1,3 @@ +color: + background: "#42070b" + foreground: "#cceedd" diff --git a/tests/integration/playwright/tests/html-dark-mode-nojs.spec.ts b/tests/integration/playwright/tests/html-dark-mode-nojs.spec.ts new file mode 100644 index 00000000000..4ff9a70cee5 --- /dev/null +++ b/tests/integration/playwright/tests/html-dark-mode-nojs.spec.ts @@ -0,0 +1,22 @@ +import { test, expect } from '@playwright/test'; + +test.use({ javaScriptEnabled: false }); + +test('Dark brand default, no JS', async ({ page }) => { + // This document use a custom theme file that change the background color of the title banner + // Same user defined color should be used in both dark and light theme + await page.goto('./html/dark-brand/brand-after-theme.html'); + const locatr = await page.locator('body').first(); + await expect(locatr).toHaveClass('fullcontent quarto-dark'); + await expect(locatr).toHaveCSS('background-color', 'rgb(66, 7, 11)'); +}); + + +test('Light brand default, no JS', async ({ page }) => { + // This document use a custom theme file that change the background color of the title banner + // Same user defined color should be used in both dark and light theme + await page.goto('./html/dark-brand/brand-before-theme.html'); + const locatr = await page.locator('body').first(); + await expect(locatr).toHaveClass('fullcontent quarto-light'); + await expect(locatr).toHaveCSS('background-color', 'rgb(252, 252, 252)'); +}); diff --git a/tests/integration/playwright/tests/html-dark-mode.spec.ts b/tests/integration/playwright/tests/html-dark-mode.spec.ts new file mode 100644 index 00000000000..a79b7064031 --- /dev/null +++ b/tests/integration/playwright/tests/html-dark-mode.spec.ts @@ -0,0 +1,26 @@ +import { test, expect } from '@playwright/test'; + +test('Dark and light brand after user themes', async ({ page }) => { + // This document use a custom theme file that change the background color of the title banner + // Same user defined color should be used in both dark and light theme + await page.goto('./html/dark-brand/brand-after-theme.html'); + const locatr = await page.locator('body').first(); + await expect(locatr).toHaveClass('fullcontent quarto-dark'); + await expect(locatr).toHaveCSS('background-color', 'rgb(66, 7, 11)'); + await page.locator("a.quarto-color-scheme-toggle").click(); + const locatr2 = await page.locator('body').first(); + await expect(locatr2).toHaveCSS('background-color', 'rgb(204, 221, 255)'); +}); + + +test('Dark and light brand before user themes', async ({ page }) => { + // This document use a custom theme file that change the background color of the title banner + // Same user defined color should be used in both dark and light theme + await page.goto('./html/dark-brand/brand-before-theme.html'); + const locatr = await page.locator('body').first(); + await expect(locatr).toHaveClass('fullcontent quarto-light'); + await expect(locatr).toHaveCSS('background-color', 'rgb(252, 252, 252)'); + await page.locator("a.quarto-color-scheme-toggle").click(); + const locatr2 = await page.locator('body').first(); + await expect(locatr2).toHaveCSS('background-color', 'rgb(6, 6, 6)'); +});