Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Fixed labels for signup form

Browse source 
fixes https://github.com/TryGhost/Team/issues/3316
fixes https://github.com/TryGhost/Team/issues/3313

Instead of using a comma separated list of labels, we now use multiple data properties: data-label-1, data-label-2, etc.
This commit is contained in:
Simon Backx 2023-05-30 14:05:13 +02:00
parent c62d73578b
commit 644051e3e9
4 changed files with 45 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ghost/admin/app/components/settings/signup-form-embed.js
View file

@ -40,15 +40,15 @@ export default class SignupFormEmbed extends Component {
const siteUrl = this.config.blogUrl;
const scriptUrl = this.config.signupForm.url.replace('{version}', this.config.signupForm.version);
// We need to fallback to name if slug is not set, because of newly created labels
const labels = this.labels.map(l => l.slug || l.name).join(',');
const options = {
site: siteUrl,
labels,
color: this.settings.accentColor
};
for (const [i, label] of this.labels.entries()) {
options[`label-${i + 1}`] = label.name;
}
if (this.style === 'all-in-one') {
options.logo = this.settings.icon;
options.title = this.settings.title;

24
ghost/signup-form/src/utils/options.tsx
View file

@ -2,14 +2,22 @@ import React from 'react';
import {SignupFormOptions} from '../AppContext';
export function useOptions(scriptTag: HTMLElement) {
const buildOptions = React.useCallback(() => ({
title: scriptTag.dataset.title || undefined,
description: scriptTag.dataset.description || undefined,
logo: scriptTag.dataset.logo || undefined,
color: scriptTag.dataset.color || undefined,
site: scriptTag.dataset.site || window.location.origin,
labels: scriptTag.dataset.labels ? scriptTag.dataset.labels.split(',') : []
}), [scriptTag]);
const buildOptions = React.useCallback(() => {
const labels = [];
while (scriptTag.dataset[`label-${labels.length + 1}`]) {
labels.push(scriptTag.dataset[`label-${labels.length + 1}`] as string);
}
return {
title: scriptTag.dataset.title || undefined,
description: scriptTag.dataset.description || undefined,
logo: scriptTag.dataset.logo || undefined,
color: scriptTag.dataset.color || undefined,
site: scriptTag.dataset.site || window.location.origin,
labels
};
}, [scriptTag]);
const [options, setOptions] = React.useState<SignupFormOptions>(buildOptions());

27
ghost/signup-form/test/e2e/form.test.ts
View file

@ -77,7 +77,7 @@ test.describe('Form', async () => {
});
test('Send a label when submitting the form', async ({page}) => {
const {frame, lastApiRequest} = await initialize({page, title: 'Sign up', labels: 'Hello world'});
const {frame, lastApiRequest} = await initialize({page, title: 'Sign up', 'label-1': 'Hello world'});
// Fill out the form
const emailInput = frame.getByTestId('input');
@ -96,8 +96,8 @@ test.describe('Form', async () => {
expect(lastApiRequest.body).toHaveProperty('email', 'jamie@example.com');
});
test('Send multiple labels when submitting the form', async ({page}) => {
const {frame, lastApiRequest} = await initialize({page, title: 'Sign up', labels: 'Hello world,and another one'});
test('Sends multiple labels when submitting the form', async ({page}) => {
const {frame, lastApiRequest} = await initialize({page, title: 'Sign up', 'label-1': 'Hello world', 'label-2': 'and another one'});
// Fill out the form
const emailInput = frame.getByTestId('input');
@ -116,6 +116,27 @@ test.describe('Form', async () => {
expect(lastApiRequest.body).toHaveProperty('email', 'hey@example.com');
});
test('Does not send labels when not the right numbering is used', async ({page}) => {
// Skip setting label-1, so label-2 is ignored
const {frame, lastApiRequest} = await initialize({page, title: 'Sign up', 'label-2': 'and another one'});
// Fill out the form
const emailInput = frame.getByTestId('input');
await emailInput.fill('hey@example.com');
// Click the submit button
const submitButton = frame.getByTestId('button');
await submitButton.click();
// Showing the success page
await expect(frame.getByTestId('success-page')).toHaveCount(1);
// Check the request body
expect(lastApiRequest.body).not.toBeNull();
expect(lastApiRequest.body).toHaveProperty('labels', []);
expect(lastApiRequest.body).toHaveProperty('email', 'hey@example.com');
});
test('Cannot submit the form with invalid email address', async ({page}) => {
const {frame, lastApiRequest} = await initialize({page, title: 'Sign up'});

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, labels?: string}) {
export async function initialize({page, ...options}: {page: any; title?: string, description?: string, logo?: string, color?: string, site?: string, 'label-1'?: string, 'label-2'?: string}) {
const url = `http://localhost:${E2E_PORT}/signup-form.min.js`;
await page.goto('about:blank');