TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 05:37:34 +03:00
Code Issues Projects Releases Wiki Activity

Fixed signup form e2e tests to check new colour options

Browse Source 
refs https://github.com/TryGhost/Team/issues/3338
This commit is contained in:
Jono Mingard 2023-06-01 14:55:03 +12:00
parent 80b9030805
commit c63b0e1a1a
3 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ghost/signup-form/src/components/pages/FormView.tsx
View File

@ -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' />}

20
ghost/signup-form/test/e2e/form.test.ts
View File

@ -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

2
ghost/signup-form/test/utils/e2e.ts
View File

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