Added E2E test for colorScheme in comments-ui

refs https://github.com/TryGhost/Team/issues/3504

apps/comments-ui/test/e2e/options.test.ts

@@ -276,5 +276,84 @@ test.describe('Options', async () => {
             expect(textColor).toBe('rgb(255, 211, 100)');
         });
     });
+
+    test.describe('colorScheme', () => {
+        test('Uses white text in dark mode', async ({page}) => {
+            const mockedApi = new MockedApi({});
+            mockedApi.addComment();
+
+            const {frame} = await initialize({
+                mockedApi,
+                page,
+                publication: 'Publisher Weekly',
+                colorScheme: 'dark'
+            });
+
+            const title = await frame.locator('[data-testid="cta-box"] h1');
+            const titleColor = await title.evaluate((node) => {
+                const style = window.getComputedStyle(node);
+                return style.getPropertyValue('color');
+            });
+            expect(titleColor).toBe('rgba(255, 255, 255, 0.85)');
+        });
+
+        test('Uses dark text in light mode', async ({page}) => {
+            const mockedApi = new MockedApi({});
+            mockedApi.addComment();
+
+            const {frame} = await initialize({
+                mockedApi,
+                page,
+                publication: 'Publisher Weekly',
+                colorScheme: 'light'
+            });
+
+            const title = await frame.locator('[data-testid="cta-box"] h1');
+            const titleColor = await title.evaluate((node) => {
+                const style = window.getComputedStyle(node);
+                return style.getPropertyValue('color');
+            });
+            expect(titleColor).toBe('rgb(0, 0, 0)');
+        });
+
+        test('Uses light mode by default', async ({page}) => {
+            const mockedApi = new MockedApi({});
+            mockedApi.addComment();
+
+            const {frame} = await initialize({
+                mockedApi,
+                page,
+                publication: 'Publisher Weekly'
+            });
+
+            const title = await frame.locator('[data-testid="cta-box"] h1');
+            const titleColor = await title.evaluate((node) => {
+                const style = window.getComputedStyle(node);
+                return style.getPropertyValue('color');
+            });
+            expect(titleColor).toBe('rgb(0, 0, 0)');
+        });
+
+        test('Switches to dark mode when text color of parent is light', async ({page}) => {
+            // When the text color of the page is light, it should switch to dark mode automatically
+
+            const mockedApi = new MockedApi({});
+            mockedApi.addComment();
+
+            const {frame} = await initialize({
+                mockedApi,
+                page,
+                publication: 'Publisher Weekly',
+                bodyStyle: 'color: #fff;'
+            });
+
+            const title = await frame.locator('[data-testid="cta-box"] h1');
+            const titleColor = await title.evaluate((node) => {
+                const style = window.getComputedStyle(node);
+                return style.getPropertyValue('color');
+            });
+            expect(titleColor).toBe('rgba(255, 255, 255, 0.85)');
+        });
+    });
 });
 

apps/comments-ui/test/utils/e2e.ts

@@ -5,7 +5,16 @@ import {Page} from '@playwright/test';
 export const MOCKED_SITE_URL = 'https://localhost:1234';
 export {MockedApi};
 
-export async function initialize({mockedApi, page, ...options}: {
+function escapeHtml(unsafe: string) {
+    return unsafe
+        .replace(/&/g, '&')
+        .replace(/"/g, '"')
+        .replace(/'/g, ''')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+
+export async function initialize({mockedApi, page, bodyStyle, ...options}: {
     mockedApi: MockedApi,
     page: Page,
     path?: string;
@@ -20,13 +29,14 @@ export async function initialize({mockedApi, page, ...options}: {
     title?: string,
     count?: boolean,
     publication?: string,
-    postId?: string
+    postId?: string,
+    bodyStyle?: string,
 }) {
     const sitePath = MOCKED_SITE_URL;
     await page.route(sitePath, async (route) => {
         await route.fulfill({
             status: 200,
-            body: '<html><head><meta charset="UTF-8" /></head><body></body></html>'
+            body: `<html><head><meta charset="UTF-8" /></head><body ${bodyStyle ? 'style="' + escapeHtml(bodyStyle) + '"' : ''}></body></html>`
         });
     });