Added E2E test for avatarSaturation on comments-ui

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

apps/comments-ui/src/components/content/Avatar.tsx

@@ -87,10 +87,10 @@ export const Avatar: React.FC<AvatarProps> = ({comment}) => {
     let avatarEl = (
         <>
             {memberName ?
-                (<div className={`flex items-center justify-center rounded-full ${dimensionClasses}`} style={avatarStyle}>
+                (<div className={`flex items-center justify-center rounded-full ${dimensionClasses}`} data-testid="avatar-background" style={avatarStyle}>
                     <p className="font-sans text-lg font-semibold text-white">{ commentGetInitials() }</p>
                 </div>) :
-                (<div className={`flex items-center justify-center rounded-full bg-neutral-900 dark:bg-[rgba(255,255,255,0.7)] ${dimensionClasses}`}>
+                (<div className={`flex items-center justify-center rounded-full bg-neutral-900 dark:bg-[rgba(255,255,255,0.7)] ${dimensionClasses}`} data-testid="avatar-background" >
                     <AvatarIcon className="stroke-white dark:stroke-[rgba(0,0,0,0.6)]" />
                 </div>)}
             {commentMember && <img alt="Avatar" className={`absolute left-0 top-0 rounded-full ${dimensionClasses}`} src={commentMember.avatar_image}/>}

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

@@ -1,6 +1,32 @@
 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({});
@@ -68,5 +94,126 @@ test.describe('Options', async () => {
         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);
+        });
+    });
 });