From c63b0e1a1adebbca5b2e3a55f4448251cf6df550 Mon Sep 17 00:00:00 2001
From: Jono Mingard <reason.koan@gmail.com>
Date: Thu, 1 Jun 2023 14:55:03 +1200
Subject: [PATCH] Fixed signup form e2e tests to check new colour options

refs https://github.com/TryGhost/Team/issues/3338
---
 .../src/components/pages/FormView.tsx         |  1 +
 ghost/signup-form/test/e2e/form.test.ts       | 20 +++++++++++++++----
 ghost/signup-form/test/utils/e2e.ts           |  2 +-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/ghost/signup-form/src/components/pages/FormView.tsx b/ghost/signup-form/src/components/pages/FormView.tsx
index 8d0dc5c415..53bf3925e9 100644
--- a/ghost/signup-form/src/components/pages/FormView.tsx
+++ b/ghost/signup-form/src/components/pages/FormView.tsx
@@ -17,6 +17,7 @@ export const FormView: React.FC<FormProps & {
     return (
         <div
             className='flex h-[52vmax] min-h-[320px] flex-col items-center justify-center p-6 md:p-8'
+            data-testid="wrapper"
             style={{backgroundColor, color: backgroundColor && textColorForBackgroundColor(backgroundColor)}}
         >
             {logo && <img alt={title} src={logo} width='100' />}
diff --git a/ghost/signup-form/test/e2e/form.test.ts b/ghost/signup-form/test/e2e/form.test.ts
index c834a45b2f..ddb4215833 100644
--- a/ghost/signup-form/test/e2e/form.test.ts
+++ b/ghost/signup-form/test/e2e/form.test.ts
@@ -1,6 +1,5 @@
-import {expect} from '@playwright/test';
+import {expect, test} from '@playwright/test';
 import {initialize} from '../utils/e2e';
-import {test} from '@playwright/test';
 
 test.describe('Form', async () => {
     test.describe('Display options', () => {
@@ -20,10 +19,23 @@ test.describe('Form', async () => {
             expect(await p.innerText()).toBe('Sign up to get the latest news and updates.');
         });
 
-        test('Uses the accent color', async ({page}) => {
+        test('Uses the background color for full layout', async ({page}) => {
+            // Need rgb notation here, because getComputedStyle returns rgb notation
+            const color = 'rgb(123, 255, 0)';
+            const {frame} = await initialize({page, title: 'Title', backgroundColor: color});
+            const wrapper = frame.getByTestId('wrapper');
+
+            // Check calculated background color of the button
+            const backgroundColor = await wrapper.evaluate((el) => {
+                return window.getComputedStyle(el).backgroundColor;
+            });
+            expect(backgroundColor).toBe(color);
+        });
+
+        test('Uses the button color', async ({page}) => {
             // Need rgb notation here, because getComputedStyle returns rgb notation
             const color = 'rgb(255, 123, 0)';
-            const {frame} = await initialize({page, color});
+            const {frame} = await initialize({page, buttonColor: color});
             const submitButton = frame.getByRole('button');
 
             // Check calculated background color of the button
diff --git a/ghost/signup-form/test/utils/e2e.ts b/ghost/signup-form/test/utils/e2e.ts
index 09ef7db288..2f06866754 100644
--- a/ghost/signup-form/test/utils/e2e.ts
+++ b/ghost/signup-form/test/utils/e2e.ts
@@ -6,7 +6,7 @@ type LastApiRequest = {
     body: null | any
 };
 
-export async function initialize({page, ...options}: {page: any; title?: string, description?: string, logo?: string, color?: string, site?: string, 'label-1'?: string, 'label-2'?: string}) {
+export async function initialize({page, ...options}: {page: any; title?: string, description?: string, logo?: string, backgroundColor?: string, buttonColor?: string, site?: string, 'label-1'?: string, 'label-2'?: string}) {
     const url = `http://localhost:${E2E_PORT}/signup-form.min.js`;
 
     await page.goto('about:blank');