playwright test - Test brand is used correctly within revealjs framework

cderv · cderv · commit acf64952612f · 2025-06-18T16:49:34.000+02:00
diff --git a/tests/docs/playwright/revealjs/brand/custom.scss b/tests/docs/playwright/revealjs/brand/custom.scss
@@ -0,0 +1,2 @@
+/*-- scss:defaults --*/
+$body-bg: $brand-dark-teal;
diff --git a/tests/docs/playwright/revealjs/brand/project/.gitignore b/tests/docs/playwright/revealjs/brand/project/.gitignore
@@ -0,0 +1 @@
+/.quarto/
diff --git a/tests/docs/playwright/revealjs/brand/project/_brand.yml b/tests/docs/playwright/revealjs/brand/project/_brand.yml
@@ -0,0 +1,3 @@
+color:
+  palette:
+    dark-teal: "#005E5E"
diff --git a/tests/docs/playwright/revealjs/brand/project/_quarto.yml b/tests/docs/playwright/revealjs/brand/project/_quarto.yml
@@ -0,0 +1,2 @@
+project:
+  type: default
diff --git a/tests/docs/playwright/revealjs/brand/project/custom.scss b/tests/docs/playwright/revealjs/brand/project/custom.scss
@@ -0,0 +1,2 @@
+/*-- scss:defaults --*/
+$body-bg: $brand-dark-teal;
diff --git a/tests/docs/playwright/revealjs/brand/project/index.qmd b/tests/docs/playwright/revealjs/brand/project/index.qmd
@@ -0,0 +1,10 @@
+---
+title: test
+format: 
+  revealjs:
+    theme: [custom.scss, brand]
+---
+
+# content
+
+content
diff --git a/tests/docs/playwright/revealjs/brand/project/subdir/custom.scss b/tests/docs/playwright/revealjs/brand/project/subdir/custom.scss
@@ -0,0 +1,2 @@
+/*-- scss:defaults --*/
+$body-bg: $brand-dark-teal;
diff --git a/tests/docs/playwright/revealjs/brand/project/subdir/index.qmd b/tests/docs/playwright/revealjs/brand/project/subdir/index.qmd
@@ -0,0 +1,10 @@
+---
+title: test
+format: 
+  revealjs:
+    theme: [custom.scss, brand]
+---
+
+# content
+
+content
diff --git a/tests/docs/playwright/revealjs/brand/single.qmd b/tests/docs/playwright/revealjs/brand/single.qmd
@@ -0,0 +1,14 @@
+---
+title: test
+format: 
+  revealjs:
+    theme: [custom.scss, brand]
+brand:
+  color:
+    palette:
+      dark-teal: "#005E5E"
+---
+
+# content
+
+content
diff --git a/tests/docs/playwright/revealjs/brand/subdir/custom.scss b/tests/docs/playwright/revealjs/brand/subdir/custom.scss
@@ -0,0 +1,2 @@
+/*-- scss:defaults --*/
+$body-bg: $brand-dark-teal;
diff --git a/tests/docs/playwright/revealjs/brand/subdir/index.qmd b/tests/docs/playwright/revealjs/brand/subdir/index.qmd
@@ -0,0 +1,14 @@
+---
+title: test
+format: 
+  revealjs:
+    theme: [custom.scss, brand]
+brand:
+  color:
+    palette:
+      dark-teal: "#005E5E"
+---
+
+# content
+
+content
diff --git a/tests/integration/playwright/src/utils.ts b/tests/integration/playwright/src/utils.ts
@@ -233,6 +233,10 @@ export async function checkBorderProperties(element: Locator, side: string, colo
   await expect(element).toHaveCSS(`border-${side}-width`, width);
 }
 
+export async function checkBackgroundColorProperty(element: Locator, color: RGBColor) {
+  await checkColor(element, `background-color`, color);
+}
+
 export function useDarkLightMode(mode: 'dark' | 'light'): Partial<PlaywrightTestOptions> {
   return {
     colorScheme: mode
diff --git a/tests/integration/playwright/tests/revealjs-brand.spec.ts b/tests/integration/playwright/tests/revealjs-brand.spec.ts
@@ -0,0 +1,51 @@
+import { test, expect, Locator } from '@playwright/test';
+import { asRGB, checkBackgroundColorProperty, checkColor, checkColorIdentical, checkFontSizeSimilar, getCSSProperty, hexToRgb, RGBColor } from '../src/utils';
+
+async function getRevealBrandColorVar(page: any, suffix: string): Promise<string> {
+  return await getCSSProperty(page.locator('body'), `--quarto-scss-export-brand-${suffix}`, false) as string;
+}
+
+// specific function to check the branded background color for revealjs/brand/ tests
+// They use `color.palette.dark-teal` as brand color
+async function checkBrandedBackgroundColor(page: any) {
+  const brandColor = await getRevealBrandColorVar(page, 'dark-teal');
+  await checkBackgroundColorProperty(page.locator('body'), hexToRgb(brandColor));
+}
+
+// Define test cases with their URLs to reduce duplication
+const brandTestCases = [
+  { 
+    name: 'project file using _brand.yml configuration', 
+    url: './revealjs/brand/project/index.html',
+    description: 'Tests a file within a project that uses _brand.yml for branding'
+  },
+  { 
+    name: 'nested file within project inheriting project branding', 
+    url: './revealjs/brand/project/subdir/index.html',
+    description: 'Tests a file in a subdirectory that inherits project branding from _brand.yml' 
+  },
+  { 
+    name: 'standalone file with inline brand configuration', 
+    url: './revealjs/brand/single.html',
+    description: 'Tests a standalone file with inline brand configuration in YAML frontmatter'
+  },
+  { 
+    name: 'file in subdirectory with inline brand configuration', 
+    url: './revealjs/brand/subdir/index.html',
+    description: 'Tests a file in subdirectory with its own inline brand configuration' 
+  }
+];
+
+// Run all test cases with the same pattern
+for (const testCase of brandTestCases) {
+  test(testCase.name, async ({ page }, testInfo) => {
+    // Add the description as an annotation to the test report
+    testInfo.annotations.push({
+      type: 'description',
+      description: testCase.description
+    });
+
+    await page.goto(testCase.url);
+    await checkBrandedBackgroundColor(page);
+  });
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+/-- scss:defaults --/`
	`2`	`+$body-bg: $brand-dark-teal;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+color:`
	`2`	`+ palette:`
	`3`	`+ dark-teal: "#005E5E"`