Migrated Portal signup link tests (#26888)

9larsons · web-flow · commit fd06558ed8b1 · 2026-03-19T17:23:59.000Z
no ref
diff --git a/e2e/helpers/pages/admin/settings/sections/portal-section.ts b/e2e/helpers/pages/admin/settings/sections/portal-section.ts
@@ -1,11 +1,14 @@
 import {BasePage} from '@/helpers/pages';
 import {Locator, Page} from '@playwright/test';
 
+type PaidSignupCadence = 'monthly' | 'yearly';
+
 export class PortalSection extends BasePage {
     readonly section: Locator;
     readonly customizeButton: Locator;
     readonly portalModal: Locator;
     readonly linksTab: Locator;
+    readonly linksTierSelectControl: Locator;
     readonly freeTierToggleLabel: Locator;
 
     constructor(page: Page) {
@@ -15,6 +18,7 @@ export class PortalSection extends BasePage {
         this.customizeButton = this.section.getByRole('button', {name: 'Customize'});
         this.portalModal = page.getByTestId('portal-modal');
         this.linksTab = this.portalModal.getByRole('tab', {name: 'Links'});
+        this.linksTierSelectControl = this.portalModal.locator('span:has-text("Tier:") + div').first();
         this.freeTierToggleLabel = this.portalModal.locator('label').filter({hasText: 'Free'}).first();
     }
 
@@ -31,6 +35,38 @@ export class PortalSection extends BasePage {
         await this.linksTab.click();
     }
 
+    async selectLinksTier(name: string): Promise<void> {
+        await this.openLinksTab();
+        await this.linksTierSelectControl.scrollIntoViewIfNeeded();
+        await this.linksTierSelectControl.click();
+        await this.page.getByRole('option', {name, exact: true}).click();
+    }
+
+    async getPaidSignupLinkForTier(name: string, tierId: string, cadence: PaidSignupCadence): Promise<string> {
+        await this.selectLinksTier(name);
+
+        const label = cadence === 'monthly' ? 'Signup / Monthly' : 'Signup / Yearly';
+        const linkInput = this.portalModal.getByLabel(label);
+        await linkInput.waitFor({state: 'visible'});
+        const inputId = await linkInput.getAttribute('id');
+
+        if (!inputId) {
+            throw new Error(`Portal ${cadence} signup link input was not found`);
+        }
+
+        await this.page.waitForFunction(({expectedTierId, targetInputId}: {expectedTierId: string; targetInputId: string}) => {
+            const element = document.getElementById(targetInputId);
+            return element instanceof HTMLInputElement && element.value.includes(expectedTierId);
+        }, {
+            expectedTierId: tierId,
+            targetInputId: inputId
+        }, {
+            timeout: 5000
+        });
+
+        return await linkInput.inputValue();
+    }
+
     async getLinkValue(label: string): Promise<string> {
         await this.openLinksTab();
         const linkInput = this.portalModal.getByLabel(label);
diff --git a/e2e/helpers/pages/index.ts b/e2e/helpers/pages/index.ts
@@ -2,4 +2,4 @@ export * from './base-page';
 export * from './admin';
 export * from './portal';
 export * from './public';
-
+export * from './stripe';
diff --git a/e2e/helpers/pages/portal/sign-up-page.ts b/e2e/helpers/pages/portal/sign-up-page.ts
@@ -6,6 +6,9 @@ export class SignUpPage extends PortalPage {
     readonly nameInput: Locator;
     readonly signupButton: Locator;
     readonly signinLink: Locator;
+    readonly paidTierCard: Locator;
+    readonly paidTierSelectButton: Locator;
+    readonly continueButton: Locator;
 
     constructor(page: Page) {
         super(page);
@@ -14,6 +17,9 @@ export class SignUpPage extends PortalPage {
         this.emailInput = this.portalFrame.getByRole('textbox', {name: 'Email'});
         this.signupButton = this.portalFrame.getByRole('button', {name: 'Sign up'});
         this.signinLink = this.portalFrame.getByRole('button', {name: 'Sign in'});
+        this.paidTierCard = this.portalFrame.locator('[data-test-tier="paid"]').first();
+        this.paidTierSelectButton = this.paidTierCard.locator('[data-test-button="select-tier"]');
+        this.continueButton = this.portalFrame.getByRole('button', {name: 'Continue'});
     }
 
     async fillAndSubmit(email: string, name?: string): Promise<void> {
@@ -23,4 +29,24 @@ export class SignUpPage extends PortalPage {
         await this.emailInput.fill(email);
         await this.signupButton.click();
     }
-}
+
+    async fillAndSubmitPaidSignup(email: string, name?: string): Promise<void> {
+        if (name) {
+            await this.nameInput.fill(name);
+        }
+        await this.emailInput.fill(email);
+        await this.selectPaidTier();
+        await this.continueIfVisible();
+    }
+
+    async selectPaidTier(): Promise<void> {
+        await this.paidTierCard.waitFor({state: 'visible'});
+        await this.paidTierSelectButton.click();
+    }
+
+    async continueIfVisible(): Promise<void> {
+        if (await this.continueButton.isVisible()) {
+            await this.continueButton.click();
+        }
+    }
+}
diff --git a/e2e/helpers/pages/public/home-page.ts b/e2e/helpers/pages/public/home-page.ts
@@ -20,7 +20,12 @@ export class HomePage extends PublicPage {
         await this.portalRoot.waitFor({state: 'attached'});
     }
 
+    async openPortal(): Promise<void> {
+        await this.openPortalViaSubscribeButton();
+    }
+
     async openAccountPortal(): Promise<void> {
+        await this.accountButton.waitFor({state: 'visible'});
         await this.portal.clickLinkAndWaitForPopup(this.accountButton);
     }
 
diff --git a/e2e/helpers/pages/stripe/fake-checkout-page.ts b/e2e/helpers/pages/stripe/fake-checkout-page.ts
@@ -0,0 +1,16 @@
+import {BasePage} from '@/helpers/pages';
+import {Locator, Page} from '@playwright/test';
+
+export class FakeStripeCheckoutPage extends BasePage {
+    readonly title: Locator;
+
+    constructor(page: Page) {
+        super(page);
+
+        this.title = page.getByRole('heading', {name: 'Fake Stripe Checkout'});
+    }
+
+    async waitUntilLoaded(): Promise<void> {
+        await this.title.waitFor({state: 'visible'});
+    }
+}
diff --git a/e2e/helpers/pages/stripe/index.ts b/e2e/helpers/pages/stripe/index.ts
@@ -0,0 +1 @@
+export * from './fake-checkout-page';
diff --git a/e2e/helpers/playwright/flows/index.ts b/e2e/helpers/playwright/flows/index.ts
@@ -1,2 +1,3 @@
 export * from './sign-in';
 export * from './signup';
+export * from './tiers';
diff --git a/e2e/helpers/playwright/flows/signup.ts b/e2e/helpers/playwright/flows/signup.ts
@@ -1,11 +1,13 @@
+import {FakeStripeCheckoutPage, HomePage} from '@/helpers/pages';
 import {Page} from '@playwright/test';
-import {PublicPage} from '@/public-pages';
 import {SignUpPage, SignUpSuccessPage} from '@/portal-pages';
 import {faker} from '@faker-js/faker';
+import type {StripeTestService} from '@/helpers/services/stripe';
 
 export async function signupViaPortal(page: Page): Promise<{emailAddress: string; name: string}> {
-    const publicPage = new PublicPage(page);
-    await publicPage.openPortalViaSubscribeButton();
+    const homePage = new HomePage(page);
+    await homePage.goto();
+    await homePage.openPortal();
 
     const signUpPage = new SignUpPage(page);
     const emailAddress = `test${faker.string.uuid()}@ghost.org`;
@@ -18,3 +20,30 @@ export async function signupViaPortal(page: Page): Promise<{emailAddress: string
 
     return {emailAddress, name};
 }
+
+export async function completePaidSignupViaPortal(page: Page, stripe: StripeTestService, opts?: {emailAddress?: string; name?: string}): Promise<{emailAddress: string; name: string}> {
+    const homePage = new HomePage(page);
+    await homePage.goto();
+    await homePage.openPortal();
+
+    const signUpPage = new SignUpPage(page);
+    const emailAddress = opts?.emailAddress ?? `test${faker.string.uuid()}@ghost.org`;
+    const name = opts?.name ?? faker.person.fullName();
+
+    await signUpPage.waitForPortalToOpen();
+    await signUpPage.fillAndSubmitPaidSignup(emailAddress, name);
+
+    const fakeCheckoutPage = new FakeStripeCheckoutPage(page);
+    await fakeCheckoutPage.waitUntilLoaded();
+    await stripe.completeLatestSubscriptionCheckout({name});
+
+    const latestCheckoutSession = stripe.getCheckoutSessions().at(-1);
+    const successUrl = latestCheckoutSession?.response.success_url;
+    if (!successUrl) {
+        throw new Error('Latest Stripe checkout session does not include a success URL');
+    }
+
+    await page.goto(successUrl);
+
+    return {emailAddress, name};
+}
diff --git a/e2e/helpers/playwright/flows/tiers.ts b/e2e/helpers/playwright/flows/tiers.ts
@@ -0,0 +1,21 @@
+import {SettingsService} from '@/helpers/services/settings/settings-service';
+import {TiersService} from '@/helpers/services/tiers/tiers-service';
+import type {AdminTier, TierCreateInput} from '@/helpers/services/tiers/tiers-service';
+import type {HttpClient} from '@/data-factory';
+
+export async function createPaidPortalTier(
+    request: HttpClient,
+    input: Omit<TierCreateInput, 'visibility'> & Partial<Pick<TierCreateInput, 'visibility'>>
+): Promise<AdminTier> {
+    const tiersService = new TiersService(request);
+    const settingsService = new SettingsService(request);
+
+    const tier = await tiersService.createTier({
+        ...input,
+        visibility: input.visibility ?? 'public'
+    });
+
+    await settingsService.setPortalPlans(['free', 'monthly', 'yearly']);
+
+    return tier;
+}
diff --git a/e2e/helpers/services/settings/settings-service.ts b/e2e/helpers/services/settings/settings-service.ts
@@ -2,7 +2,7 @@ import {HttpClient as APIRequest} from '@/data-factory';
 
 export interface Setting {
     key: string;
-    value: string | boolean | null;
+    value: string | boolean | string[] | null;
 }
 
 export interface SettingsResponse {
@@ -11,6 +11,7 @@ export interface SettingsResponse {
 
 export type CommentsEnabled = 'all' | 'paid' | 'off';
 export type MembersSignupAccess = 'all' | 'invite' | 'paid' | 'none';
+export type PortalPlan = 'free' | 'monthly' | 'yearly';
 
 export class SettingsService {
     private readonly request: APIRequest;
@@ -58,6 +59,10 @@ export class SettingsService {
         return await this.updateSettings([{key: 'members_signup_access', value}]);
     }
 
+    async setPortalPlans(value: PortalPlan[]) {
+        return await this.updateSettings([{key: 'portal_plans', value}]);
+    }
+
     /**
      * Set Stripe keys to simulate a connected Stripe account
      * Uses direct Stripe keys (not Connect) as they're not filtered by the API
diff --git a/e2e/helpers/services/stripe/stripe-service.ts b/e2e/helpers/services/stripe/stripe-service.ts
@@ -55,6 +55,19 @@ export class StripeTestService {
         return this.server.getCheckoutSessions();
     }
 
+    async completeLatestSubscriptionCheckout(opts: {name?: string} = {}): Promise<CreatedPaidMember> {
+        const session = this.getCheckoutSessions().at(-1);
+
+        if (!session) {
+            throw new Error('No recorded Stripe checkout session found');
+        }
+
+        return await this.completeSubscriptionCheckout({
+            sessionId: session.response.id,
+            name: opts.name
+        });
+    }
+
     async createPaidMemberViaWebhooks(opts: {email: string; name: string}): Promise<CreatedPaidMember> {
         // Build Stripe objects
         const customer = buildCustomer({email: opts.email, name: opts.name});
@@ -77,23 +90,8 @@ export class StripeTestService {
         debug('Seeded server with customer=%s, subscription=%s, paymentMethod=%s',
             customer.id, subscription.id, paymentMethod.id);
 
-        // Send checkout.session.completed webhook
-        const checkoutEvent = buildCheckoutSessionCompletedEvent({customerId: customer.id});
-        const checkoutResponse = await this.webhookClient.sendWebhook(checkoutEvent);
-        debug('checkout.session.completed webhook response: %d', checkoutResponse.status);
-        if (!checkoutResponse.ok) {
-            const body = await checkoutResponse.text();
-            throw new Error(`checkout.session.completed webhook failed (${checkoutResponse.status}): ${body}`);
-        }
-
-        // Send customer.subscription.created webhook
-        const subscriptionEvent = buildSubscriptionCreatedEvent({subscription});
-        const subscriptionResponse = await this.webhookClient.sendWebhook(subscriptionEvent);
-        debug('customer.subscription.created webhook response: %d', subscriptionResponse.status);
-        if (!subscriptionResponse.ok) {
-            const body = await subscriptionResponse.text();
-            throw new Error(`customer.subscription.created webhook failed (${subscriptionResponse.status}): ${body}`);
-        }
+        await this.sendCheckoutSessionCompletedWebhook(customer.id);
+        await this.sendSubscriptionCreatedWebhook(subscription);
 
         return {customer, subscription, price, paymentMethod};
     }
@@ -146,4 +144,88 @@ export class StripeTestService {
             throw new Error(`invoice.payment_succeeded webhook failed (${response.status}): ${body}`);
         }
     }
+
+    private async completeSubscriptionCheckout(opts: {sessionId: string; name?: string}): Promise<CreatedPaidMember> {
+        const session = this.getCheckoutSessions().find(item => item.response.id === opts.sessionId);
+
+        if (!session) {
+            throw new Error(`No recorded Stripe checkout session found for ${opts.sessionId}`);
+        }
+
+        const priceId = session.request.subscription_data?.items[0]?.plan;
+        if (!priceId) {
+            throw new Error(`Checkout session ${opts.sessionId} does not include a subscription price`);
+        }
+
+        const price = this.getPrices().find(item => item.id === priceId);
+        if (!price) {
+            throw new Error(`No recorded Stripe price found for ${priceId}`);
+        }
+
+        const customer = this.resolveCheckoutCustomer(session, opts.name);
+        const paymentMethod = buildPaymentMethod({name: opts.name ?? customer.name});
+        const subscription = buildSubscription({
+            customerId: customer.id,
+            price,
+            paymentMethod
+        });
+
+        customer.subscriptions.data.push(subscription);
+        session.response.customer = customer.id;
+
+        this.server.upsertCustomer(customer);
+        this.server.upsertPaymentMethod(paymentMethod);
+        this.server.upsertSubscription(subscription);
+        this.server.upsertCheckoutSession(session);
+
+        await this.sendCheckoutSessionCompletedWebhook(customer.id, session.response.metadata);
+        await this.sendSubscriptionCreatedWebhook(subscription);
+
+        return {customer, subscription, price, paymentMethod};
+    }
+
+    private resolveCheckoutCustomer(session: RecordedStripeCheckoutSession, name?: string): StripeCustomer {
+        const email = session.response.customer_email;
+        const existingCustomer = this.getCustomers().find((customer) => {
+            return customer.id === session.response.customer || (email ? customer.email === email : false);
+        });
+
+        if (existingCustomer) {
+            return existingCustomer;
+        }
+
+        if (!email) {
+            throw new Error(`Checkout session ${session.response.id} does not include a customer email`);
+        }
+
+        const customer = buildCustomer({
+            id: session.response.customer ?? undefined,
+            email,
+            name: name ?? 'Test User'
+        });
+
+        this.server.upsertCustomer(customer);
+
+        return customer;
+    }
+
+    private async sendCheckoutSessionCompletedWebhook(customerId: string, metadata?: Record<string, string>): Promise<void> {
+        const checkoutEvent = buildCheckoutSessionCompletedEvent({customerId, metadata});
+        const checkoutResponse = await this.webhookClient.sendWebhook(checkoutEvent);
+        debug('checkout.session.completed webhook response: %d', checkoutResponse.status);
+        if (!checkoutResponse.ok) {
+            const body = await checkoutResponse.text();
+            throw new Error(`checkout.session.completed webhook failed (${checkoutResponse.status}): ${body}`);
+        }
+    }
+
+    private async sendSubscriptionCreatedWebhook(subscription: StripeSubscription): Promise<void> {
+        const subscriptionEvent = buildSubscriptionCreatedEvent({subscription});
+        const subscriptionResponse = await this.webhookClient.sendWebhook(subscriptionEvent);
+        debug('customer.subscription.created webhook response: %d', subscriptionResponse.status);
+        if (!subscriptionResponse.ok) {
+            const body = await subscriptionResponse.text();
+            throw new Error(`customer.subscription.created webhook failed (${subscriptionResponse.status}): ${body}`);
+        }
+    }
 }
diff --git a/e2e/tests/admin/members/impersonation.test.ts b/e2e/tests/admin/members/impersonation.test.ts
@@ -26,7 +26,6 @@ test.describe('Ghost Admin - Member Impersonation', () => {
         await memberDetailsPage.goto(magicLink);
 
         const homePage = new HomePage(page);
-        await homePage.waitUntilLoaded();
         await homePage.openAccountPortal();
 
         const portal = new PortalPage(page);
diff --git a/e2e/tests/admin/settings/portal-settings.test.ts b/e2e/tests/admin/settings/portal-settings.test.ts
diff --git a/e2e/tests/public/portal-tiers.test.ts b/e2e/tests/public/portal-tiers.test.ts
diff --git a/e2e/tests/public/stripe-webhook-subscription-lifecycle.test.ts b/e2e/tests/public/stripe-webhook-subscription-lifecycle.test.ts
diff --git a/ghost/core/test/e2e-browser/admin/portal-settings.spec.js b/ghost/core/test/e2e-browser/admin/portal-settings.spec.js
diff --git a/ghost/core/test/e2e-browser/portal/tiers.spec.js b/ghost/core/test/e2e-browser/portal/tiers.spec.js

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,12 @@ export class HomePage extends PublicPage {`
`20`	`20`	`await this.portalRoot.waitFor({state: 'attached'});`
`21`	`21`	`}`
`22`	`22`
	`23`	`+ async openPortal(): Promise<void> {`
	`24`	`+ await this.openPortalViaSubscribeButton();`
	`25`	`+ }`
	`26`	`+`
`23`	`27`	`async openAccountPortal(): Promise<void> {`
	`28`	`+ await this.accountButton.waitFor({state: 'visible'});`
`24`	`29`	`await this.portal.clickLinkAndWaitForPopup(this.accountButton);`
`25`	`30`	`}`
`26`	`31`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`export * from './sign-in';`
`2`	`2`	`export * from './signup';`
	`3`	`+export * from './tiers';`