TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-24 11:22:19 +03:00
Code Issues Projects Releases Wiki Activity

Added E2E test for colorScheme in comments-ui

Browse Source 
refs https://github.com/TryGhost/Team/issues/3504
This commit is contained in:
Simon Backx 2023-06-27 16:06:58 +02:00 committed by Simon Backx
parent 23fc00ae60
commit e6fe60ed37
2 changed files with 92 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
apps/comments-ui/test/e2e/options.test.ts
View File

@ -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)');
});
});
});

16
apps/comments-ui/test/utils/e2e.ts
View File

@ -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>`
});
});