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

220 lines
7.3 KiB
TypeScript
Raw Normal View History

import {MockedApi, initialize} from '../utils/e2e';
import {expect, test} from '@playwright/test';
function rgbToHsl(r: number, g: number, b: number) {
r /= 255;
g /= 255;
b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0; // achromatic
} else {
var d = max - min;
s = Math.round(l > 0.5 ? d / (2 - max - min) : d / (max + min) * 100) / 100;
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, l];
}
test.describe('Options', async () => {
test('Shows the title and count', async ({page}) => {
const mockedApi = new MockedApi({});
mockedApi.addComments(2);
const {frame} = await initialize({
mockedApi,
page,
title: 'Leave a comment',
publication: 'Publisher Weekly',
count: true
});
// Check text 'Leave a comment' is present
await expect(frame.getByTestId('title')).toHaveText('Leave a comment');
await expect(frame.getByTestId('count')).toHaveText('2 comments');
});
test('Shows the title and singular count', async ({page}) => {
const mockedApi = new MockedApi({});
mockedApi.addComments(1);
const {frame} = await initialize({
mockedApi,
page,
title: 'Leave a comment',
publication: 'Publisher Weekly',
count: true
});
// Check text 'Leave a comment' is present
await expect(frame.getByTestId('title')).toHaveText('Leave a comment');
await expect(frame.getByTestId('count')).toHaveText('1 comment');
});
test('Shows the title but hides the count', async ({page}) => {
const mockedApi = new MockedApi({});
mockedApi.addComments(2);
const {frame} = await initialize({
mockedApi,
page,
title: 'Leave a comment',
publication: 'Publisher Weekly',
count: false
});
// Check text 'Leave a comment' is present
await expect(frame.getByTestId('title')).toHaveText('Leave a comment');
// Check count is hidden
await expect(frame.getByTestId('count')).not.toBeVisible();
});
test('Hides title and count', async ({page}) => {
const mockedApi = new MockedApi({});
mockedApi.addComments(2);
const {frame} = await initialize({
mockedApi,
page,
publication: 'Publisher Weekly'
});
await expect(frame.getByTestId('title')).not.toBeVisible();
await expect(frame.getByTestId('count')).not.toBeVisible();
});
test.describe('Avatar saturation', () => {
test('Defaults to avatarSaturation of 50', async ({page}) => {
const mockedApi = new MockedApi({});
mockedApi.addComment();
const {frame} = await initialize({
mockedApi,
page,
publication: 'Publisher Weekly'
});
const avatars = await frame.getByTestId('avatar-background').first();
// Get computed background color
const color = await avatars.evaluate((node) => {
const style = window.getComputedStyle(node);
return style.getPropertyValue('background-color');
});
// Convert rgb to hsl
const [r, g, b] = color.match(/\d+/g);
const [,saturation] = rgbToHsl(parseInt(r), parseInt(g), parseInt(b));
expect(saturation).toBe(0.5);
});
test('Defaults to avatarSaturation of 50 when invalid number', async ({page}) => {
const mockedApi = new MockedApi({});
mockedApi.addComment();
const {frame} = await initialize({
mockedApi,
page,
publication: 'Publisher Weekly',
avatarSaturation: 'invalid'
});
const avatars = await frame.getByTestId('avatar-background').first();
// Get computed background color
const color = await avatars.evaluate((node) => {
const style = window.getComputedStyle(node);
return style.getPropertyValue('background-color');
});
// Convert rgb to hsl
const [r, g, b] = color.match(/\d+/g);
const [,saturation] = rgbToHsl(parseInt(r), parseInt(g), parseInt(b));
expect(saturation).toBe(0.5);
});
test('Saturation of 70%', async ({page}) => {
const mockedApi = new MockedApi({});
mockedApi.addComment();
const {frame} = await initialize({
mockedApi,
page,
publication: 'Publisher Weekly',
avatarSaturation: '70'
});
const avatars = await frame.getByTestId('avatar-background').first();
// Get computed background color
const color = await avatars.evaluate((node) => {
const style = window.getComputedStyle(node);
return style.getPropertyValue('background-color');
});
// Convert rgb to hsl
const [r, g, b] = color.match(/\d+/g);
const [,saturation] = rgbToHsl(parseInt(r), parseInt(g), parseInt(b));
expect(saturation).toBe(0.7);
});
test('Uses zero avatarSaturation', async ({page}) => {
const mockedApi = new MockedApi({});
mockedApi.addComment();
const {frame} = await initialize({
mockedApi,
page,
publication: 'Publisher Weekly',
avatarSaturation: '0'
});
const avatars = await frame.getByTestId('avatar-background').first();
// Get computed background color
const color = await avatars.evaluate((node) => {
const style = window.getComputedStyle(node);
return style.getPropertyValue('background-color');
});
// Convert rgb to hsl
const [r, g, b] = color.match(/\d+/g);
const [,saturation] = rgbToHsl(parseInt(r), parseInt(g), parseInt(b));
expect(saturation).toBe(0);
});
test('Uses 100 avatarSaturation', async ({page}) => {
const mockedApi = new MockedApi({});
mockedApi.addComment();
const {frame} = await initialize({
mockedApi,
page,
publication: 'Publisher Weekly',
avatarSaturation: '100'
});
const avatars = await frame.getByTestId('avatar-background').first();
// Get computed background color
const color = await avatars.evaluate((node) => {
const style = window.getComputedStyle(node);
return style.getPropertyValue('background-color');
});
// Get saturation of color = rgb(x, y, z)
const [r, g, b] = color.match(/\d+/g);
const [,saturation] = rgbToHsl(parseInt(r), parseInt(g), parseInt(b));
expect(saturation).toBe(1);
});
});
});