Added Playwright tests for donations (#17699)

fixes https://github.com/TryGhost/Product/issues/3723

This also fixes usage of localhost instead of 127.0.0.1 as a test URL
for playwright. This caused issues for cookies because the member
impersonation navigated to 127.0.0.1 instead of localhost, meaning that
the next page.goto call would go to localhost and lose the cookies.

ghost/admin/app/components/settings/tips-and-donations.hbs

@@ -15,7 +15,7 @@
         </div>
         {{#if (feature "tipsAndDonations")}}
             {{#if this.membersUtils.isStripeEnabled}}
-                <button type="button" class="gh-btn" {{on "click" (toggle-action "tipsAndDonationsOpen" this)}}>
+                <button type="button" class="gh-btn" {{on "click" (toggle-action "tipsAndDonationsOpen" this)}} data-testid="expand-tips-and-donations">
                     <span>{{if this.tipsAndDonationsOpen "Close" "Expand"}}</span>
                 </button>
             {{else}}
@@ -48,6 +48,7 @@
                                     <input
                                         type="number"
                                         id="gh-tips-and-donations-amount"
+                                        data-testid="tips-and-donations-amount"
                                         class="gh-input"
                                         name="amount"
                                         min="0"

ghost/core/playwright.config.js

@@ -11,7 +11,7 @@ const config = {
         // Use a single browser since we can't simultaneously test multiple browsers
         browserName: 'chromium',
         headless: !process.env.PLAYWRIGHT_DEBUG,
-        baseURL: process.env.TEST_URL ?? 'http://localhost:2369',
+        baseURL: process.env.TEST_URL ?? 'http://127.0.0.1:2369',
         // TODO: Where to put this
         storageState: 'playwright-state.json'
     },

ghost/core/test/e2e-browser/portal/donations.spec.js

@@ -0,0 +1,64 @@
+const {expect, test} = require('@playwright/test');
+const {createMember, impersonateMember, completeStripeSubscription} = require('../utils');
+
+test.describe('Portal', () => {
+    test.describe('Donations', () => {
+        test('Can donate as an anonymous member', async ({page}) => {
+            // go to website and open portal
+            await page.goto('/#/portal/support');
+
+            await page.locator('#customUnitAmount').fill('12.50');
+            await page.locator('#email').fill('member-donation-test-1@ghost.org');
+            await completeStripeSubscription(page);
+
+            // Check success message
+            const portalFrame = page.frameLocator('[data-testid="portal-popup-frame"]');
+            await expect(portalFrame.getByText('Thank you!')).toBeVisible();
+        });
+
+        // This test is broken because the impersonate is not working!
+        test('Can donate as a logged in free member', async ({page}) => {
+            // create a new free member
+            await createMember(page, {
+                name: 'Test Member Donations',
+                email: 'test.member.donations@example.com',
+                note: 'Test Member'
+            });
+
+            // impersonate the member on frontend
+            await impersonateMember(page);
+
+            await page.goto('#/portal/support');
+
+            // Don't need to fill email as it's already filled
+            await page.locator('#customUnitAmount').fill('12.50');
+            await completeStripeSubscription(page);
+
+            // Check success message
+            const portalFrame = page.frameLocator('[data-testid="portal-popup-frame"]');
+            await expect(portalFrame.getByText('Thank you!')).toBeVisible();
+        });
+
+        test('Can donate with a fixed amount set and different currency', async ({page}) => {
+            await page.goto('/ghost/#/settings/members');
+            await page.getByTestId('expand-tips-and-donations').click();
+            await page.getByTestId('tips-and-donations-amount').fill('98');
+            await page.locator('#gh-tips-and-donations-currency').selectOption('EUR');
+            await page.locator('[data-test-button="save-settings"]').click();
+
+            // go to website and open portal
+            await page.goto('/#/portal/support');
+
+            await page.locator('#email').fill('member-donation-test-3@ghost.org');
+
+            const totalAmount = page.getByTestId('product-summary-total-amount');
+            await expect(totalAmount).toHaveText('€98.00');
+
+            await completeStripeSubscription(page);
+
+            // Check success message
+            const portalFrame = page.frameLocator('[data-testid="portal-popup-frame"]');
+            await expect(portalFrame.getByText('Thank you!')).toBeVisible();
+        });
+    });
+});

ghost/core/test/e2e-browser/utils/e2e-browser-utils.js

@@ -133,6 +133,7 @@ const enableLabs = async (page) => {
     await page.locator('.gh-setting-group').filter({hasText: 'Labs'}).click();
     const alphaList = page.locator('.gh-main-section').filter({hasText: 'Alpha Features'});
     await alphaList.locator('label[for="labs-webmentions"]').click();
+    await alphaList.locator('label[for="labs-tipsAndDonations"]').click();
 };
 
 /**
@@ -366,6 +367,9 @@ const completeStripeSubscription = async (page) => {
     await fillInputIfExists(page, '#billingAddressLine2', 'Apt 1');
     await fillInputIfExists(page, '#billingLocality', 'Testville');
 
+    // Wait for submit button complete
+    await page.waitForSelector('[data-testid="hosted-payment-submit-button"].SubmitButton--complete', {state: 'attached'});
+
     await page.getByTestId('hosted-payment-submit-button').click();
 
     await page.waitForLoadState('networkidle');

ghost/core/test/utils/fixtures/default-settings-browser.json

@@ -502,5 +502,43 @@
             },
             "type": "boolean"
         }
+    },
+    "pintura": {
+        "pintura": {
+            "defaultValue": "true",
+            "validations": {
+                "isIn": [
+                    [
+                        "true",
+                        "false"
+                    ]
+                ]
+            },
+            "type": "boolean"
+        },
+        "pintura_js_url": {
+            "defaultValue": null,
+            "type": "string"
+        },
+        "pintura_css_url": {
+            "defaultValue": null,
+            "type": "string"
+        }
+    },
+    "donations": {
+        "donations_currency": {
+            "defaultValue": "USD",
+            "validations": {
+                "isEmpty": false
+            },
+            "type": "string"
+        },
+        "donations_suggested_amount": {
+            "defaultValue": 0,
+            "validations": {
+                "isEmpty": false
+            },
+            "type": "number"
+        }
     }
 }