quarto-cli/tests/integration/playwright/tests/html-dark-mode.spec.ts at 113e809d96f6fd26e2ddf518a1117a2912541a5e · quarto-dev/quarto-cli · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import { test, expect } from '@playwright/test';

async function check_theme_overrides(page) {
  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)');
}
// themes used in these documents have background colors

test('Dark and light brand before user themes', async ({ page }) => {
  // theme will override brand
  await page.goto('./html/dark-brand/brand-before-theme.html');
  await check_theme_overrides(page);
});

// project tests

test('Project brand before user themes', async ({ page }) => {
  // theme will override brand
  await page.goto('./html/dark-brand/project-dark/brand-under-theme.html');
  await check_theme_overrides(page);
});

test('Brand false remove project brand', async ({ page }) => {
  // theme will override brand
  await page.goto('./html/dark-brand/project-dark/brand-false.html');
  const locatr = await page.locator('body').first();
  await expect(locatr).toHaveClass('fullcontent quarto-light');
  await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)');
  // no toggle
  expect(await page.locator('a.quarto-color-scheme-toggle').count()).toEqual(0);
});


test('Syntax highlighting, a11y, with 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/syntax-highlighting/a11y-syntax-highlighting.html');
  const locatr = await page.locator('body').first();
  await expect(locatr).toHaveClass('fullcontent quarto-light');
  await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)');
  const importKeyword = await page.locator('span.im').first();
  // light highlight stylesheet
  await expect(importKeyword).toHaveCSS('color', 'rgb(84, 84, 84)');
  await page.locator("a.quarto-color-scheme-toggle").click();
  // dark highlight stylesheet
  await expect(importKeyword).toHaveCSS('color', 'rgb(248, 248, 242)');
});


test('Syntax highlighting, arrow, with 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/syntax-highlighting/arrow-syntax-highlighting.html');
  const locatr = await page.locator('body').first();
  await expect(locatr).toHaveClass('fullcontent quarto-light');
  await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)');
  const link = await page.locator('span.al').first();
  await expect(link).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
});