From 28bea791ddfa798d7af13a264565c43fa78d7f17 Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Thu, 12 Jan 2023 13:00:55 +0530
Subject: [PATCH] Added playwright tests for portal links

refs https://github.com/TryGhost/Team/issues/2371
---
 .../admin/app/components/gh-portal-links.hbs  | 102 ++++++++++++---
 .../app/components/modal-portal-settings.hbs  |   3 +-
 .../e2e-browser/admin/portal-settings.spec.js | 119 ++++++++++++++++++
 3 files changed, 205 insertions(+), 19 deletions(-)
 create mode 100644 ghost/core/test/e2e-browser/admin/portal-settings.spec.js

diff --git a/ghost/admin/app/components/gh-portal-links.hbs b/ghost/admin/app/components/gh-portal-links.hbs
index 8bf1e4ea05..bf24928403 100644
--- a/ghost/admin/app/components/gh-portal-links.hbs
+++ b/ghost/admin/app/components/gh-portal-links.hbs
@@ -9,7 +9,12 @@
                     <td>
                         <div class='toggle-header'>
                             <h4>{{this.sectionHeaderLabel}}</h4>
-                            <h4 role="button" class='gh-portal-links-cell toggle' {{on "click" this.toggleShowLinks}}>{{this.toggleValue}}</h4>
+                            <h4  role="button"
+                                class='gh-portal-links-cell toggle' {{on "click" this.toggleShowLinks}}
+                                data-test-toggle="portal-links-data-attr-toggle"
+                            >
+                                {{this.toggleValue}}
+                            </h4>
                         </div>
                     </td>
                 </tr>
@@ -21,22 +26,27 @@
                 <tr>
                     <td class="pagename">Default</td>
                     <td class='page-url'>
-                        <div class="gh-portal-page-url-container">
+                        <div class="gh-portal-page-url-container" data-test--page-url="default">
                             {{#if this.isLink}}
                                 <input class="gh-input page-url-field"
                                     type="text"
+                                    data-test-input="portal-link-default"
                                     value="{{this.siteUrl}}/#/portal"
                                     disabled="true"
                                     aria-label="Default Portal link">
                             {{else}}
                                 <input class="gh-input page-url-field"
                                     type="text"
+                                    data-test-input="portal-data-attr-default"
                                     value="data-portal"
                                     disabled="true"
                                     aria-label="Default Portal data attribute">
                             {{/if}}
 
-                            <button type="button" {{action (perform this.copyStaticLink '')}} class="gh-portal-setting-copy">
+                            <button
+                                type="button" {{action (perform this.copyStaticLink '')}} class="gh-portal-setting-copy"
+                                data-test-button="copy-url-attr"
+                            >
                                 {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice ""))}}
                                     {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                                 {{else}}
@@ -52,21 +62,26 @@
                 <tr>
                     <td class='pagename'>Sign in</td>
                     <td class='page-url'>
-                        <div class="gh-portal-page-url-container">
+                        <div class="gh-portal-page-url-container" data-test-page-url="signin">
                             {{#if this.isLink}}
                                 <input class="gh-input page-url-field"
                                     type="text"
+                                    data-test-input="portal-link-signin"
                                     value="{{this.siteUrl}}/#/portal/signin"
                                     disabled="true"
                                     aria-label="Sign in Portal link">
                             {{else}}
                                 <input class="gh-input page-url-field"
                                     type="text"
+                                    data-test-input="portal-data-attr-signin"
                                     value='data-portal="signin"'
                                     disabled="true"
                                     aria-label="Sign in Portal data attribute">
                             {{/if}}
-                            <button type="button" {{action (perform this.copyStaticLink "signin")}} class="gh-portal-setting-copy">
+                            <button
+                                type="button" {{action (perform this.copyStaticLink "signin")}} class="gh-portal-setting-copy"
+                                data-test-button="copy-url-attr"
+                            >
                                 {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signin"))}}
                                     {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                                 {{else}}
@@ -79,21 +94,26 @@
                 <tr>
                     <td class='pagename'>Sign up</td>
                     <td class='page-url'>
-                        <div class="gh-portal-page-url-container">
+                        <div class="gh-portal-page-url-container" data-test-page-url="signup">
                             {{#if this.isLink}}
                                 <input class="gh-input page-url-field"
                                     type="text"
+                                    data-test-input="portal-link-signup"
                                     value="{{this.siteUrl}}/#/portal/signup"
                                     disabled="true"
                                     aria-label="Sign up Portal link">
                             {{else}}
                                 <input class="gh-input page-url-field"
+                                    data-test-input="portal-data-attr-signup"
                                     type="text"
                                     value='data-portal="signup"'
                                     disabled="true"
                                     aria-label="Sign up Portal data attribute">
                             {{/if}}
-                            <button type="button" {{action (perform this.copyStaticLink "signup")}} class="gh-portal-setting-copy">
+                            <button
+                                type="button" {{action (perform this.copyStaticLink "signup")}} class="gh-portal-setting-copy"
+                                data-test-button="copy-url-attr"
+                            >
                                 {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signup"))}}
                                     {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                                 {{else}}
@@ -116,6 +136,7 @@
                                     tabindex="0"
                                 >
                                     <OneWaySelect
+                                        data-test-select="portal-tier-select"
                                         @id="portal-tier-link"
                                         @name="portal[tier-link]"
                                         @options={{this.tierOptions}}
@@ -131,21 +152,26 @@
                     <tr>
                         <td class='pagename'>Sign up/Monthly</td>
                         <td class='page-url'>
-                            <div class="gh-portal-page-url-container">
+                            <div class="gh-portal-page-url-container" data-test-page-url="{{this.selectedTierIdPath}}">
                                 {{#if this.isLink}}
                                 <input class="gh-input page-url-field"
                                     type="text"
+                                    data-test-input="portal-tier-link-monthly"
                                     value="{{this.siteUrl}}/#/portal/signup{{this.selectedTierIdPath}}/monthly"
                                     disabled="true"
                                     aria-label="Monthly sign up Portal link">
                                 {{else}}
                                     <input class="gh-input page-url-field"
                                         type="text"
+                                        data-test-input="portal-tier-data-attr-monthly"
                                         value='data-portal="signup{{this.selectedTierIdPath}}/monthly"'
                                         disabled="true"
                                         aria-label="Monthly sign up Portal data attribute">
                                 {{/if}}
-                                <button type="button" {{action (perform this.copyTierSignupLink "monthly")}} class="gh-portal-setting-copy">
+                                <button
+                                    type="button" {{action (perform this.copyTierSignupLink "monthly")}} class="gh-portal-setting-copy"
+                                    data-test-button="copy-url-attr"
+                                >
                                     {{#if (and this.copyTierSignupLink.isRunning (eq this.copiedSignupInterval "monthly"))}}
                                         {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                                     {{else}}
@@ -158,21 +184,26 @@
                     <tr>
                         <td class='pagename'>Sign up/Yearly</td>
                         <td class='page-url'>
-                            <div class="gh-portal-page-url-container">
+                            <div class="gh-portal-page-url-container" data-test-page-url="{{this.selectedTierIdPath}}">
                                 {{#if this.isLink}}
                                 <input class="gh-input page-url-field"
                                     type="text"
+                                    data-test-input="portal-tier-link-yearly"
                                     value="{{this.siteUrl}}/#/portal/signup{{this.selectedTierIdPath}}/yearly"
                                     disabled="true"
                                     aria-label="Yearly sign up Portal link">
                                 {{else}}
                                     <input class="gh-input page-url-field"
                                         type="text"
+                                        data-test-input="portal-tier-data-attr-yearly"
                                         value='data-portal="signup{{this.selectedTierIdPath}}/yearly"'
                                         disabled="true"
                                         aria-label="Yearly sign up Portal data attribute">
                                 {{/if}}
-                                <button type="button" {{action (perform this.copyTierSignupLink "yearly")}} class="gh-portal-setting-copy">
+                                <button
+                                    type="button" {{action (perform this.copyTierSignupLink "yearly")}} class="gh-portal-setting-copy"
+                                    data-test-button="copy-url-attr"
+                                >
                                     {{#if (and this.copyTierSignupLink.isRunning (eq this.copiedSignupInterval "yearly"))}}
                                         {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                                     {{else}}
@@ -189,17 +220,22 @@
                                 {{#if this.isLink}}
                                 <input class="gh-input page-url-field"
                                     type="text"
+                                    data-test-input="portal-tier-link-free"
                                     value="{{this.siteUrl}}/#/portal/signup/free"
                                     disabled="true"
                                     aria-label="Free sign up Portal link">
                                 {{else}}
                                     <input class="gh-input page-url-field"
                                         type="text"
+                                        data-test-input="portal-tier-data-attr-free"
                                         value='data-portal="signup/free"'
                                         disabled="true"
                                         aria-label="Free sign up Portal data attribute">
                                 {{/if}}
-                                <button type="button" {{action (perform this.copyStaticLink "signup/free")}} class="gh-portal-setting-copy">
+                                <button
+                                    type="button" {{action (perform this.copyStaticLink "signup/free")}} class="gh-portal-setting-copy"
+                                    data-test-button="copy-url-attr"
+                                >
                                     {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signup/free"))}}
                                         {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                                     {{else}}
@@ -217,17 +253,22 @@
                                 {{#if this.isLink}}
                                 <input class="gh-input page-url-field"
                                     type="text"
+                                    data-test-input="portal-tier-link-monthly"
                                     value="{{this.siteUrl}}/#/portal/signup/monthly"
                                     disabled="true"
                                     aria-label="Monthly sign up Portal link">
                                 {{else}}
                                     <input class="gh-input page-url-field"
                                         type="text"
+                                        data-test-input="portal-tier-data-attr-monthly"
                                         value='data-portal="signup/monthly"'
                                         disabled="true"
                                         aria-label="Monthly sign up Portal data attribute">
                                 {{/if}}
-                                <button type="button" {{action (perform this.copyStaticLink "signup/monthly")}} class="gh-portal-setting-copy">
+                                <button
+                                    type="button" {{action (perform this.copyStaticLink "signup/monthly")}} class="gh-portal-setting-copy"
+                                    data-test-button="copy-url-attr"
+                                >
                                     {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signup/monthly"))}}
                                         {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                                     {{else}}
@@ -244,17 +285,22 @@
                                 {{#if this.isLink}}
                                 <input class="gh-input page-url-field"
                                     type="text"
+                                    data-test-input="portal-tier-link-yearly"
                                     value="{{this.siteUrl}}/#/portal/signup/yearly"
                                     disabled="true"
                                     aria-label="Yearly sign up Portal link">
                                 {{else}}
                                     <input class="gh-input page-url-field"
                                         type="text"
+                                        data-test-input="portal-tier-data-attr-yearly"
                                         value='data-portal="signup/yearly"'
                                         disabled="true"
                                         aria-label="Yearly sign up Portal data attribute">
                                 {{/if}}
-                                <button type="button" {{action (perform this.copyStaticLink "signup/yearly")}} class="gh-portal-setting-copy">
+                                <button
+                                    type="button" {{action (perform this.copyStaticLink "signup/yearly")}} class="gh-portal-setting-copy"
+                                    data-test-button="copy-url-attr"
+                                >
                                     {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signup/yearly"))}}
                                         {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                                     {{else}}
@@ -271,17 +317,22 @@
                                 {{#if this.isLink}}
                                 <input class="gh-input page-url-field"
                                     type="text"
+                                    data-test-input="portal-tier-link-free"
                                     value="{{this.siteUrl}}/#/portal/signup/free"
                                     disabled="true"
                                     aria-label="Free sign up Portal link">
                                 {{else}}
                                     <input class="gh-input page-url-field"
                                         type="text"
+                                        data-test-input="portal-tier-data-attr-free"
                                         value='data-portal="signup/free"'
                                         disabled="true"
                                         aria-label="Free sign up Portal data attribute">
                                 {{/if}}
-                                <button type="button" {{action (perform this.copyStaticLink "signup/free")}} class="gh-portal-setting-copy">
+                                <button
+                                    type="button" {{action (perform this.copyStaticLink "signup/free")}} class="gh-portal-setting-copy"
+                                    data-test-button="copy-url-attr"
+                                >
                                     {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signup/free"))}}
                                         {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                                     {{else}}
@@ -302,17 +353,22 @@
                             {{#if this.isLink}}
                             <input class="gh-input page-url-field"
                                 type="text"
+                                data-test-input="portal-tier-link-account"
                                 value="{{this.siteUrl}}/#/portal/account"
                                 disabled="true"
                                 aria-label="Account Portal link">
                             {{else}}
                                 <input class="gh-input page-url-field"
                                     type="text"
+                                    data-test-input="portal-tier-data-attr-account"
                                     value='data-portal="account"'
                                     disabled="true"
                                     aria-label="Account Portal data attribute">
                             {{/if}}
-                            <button type="button" {{action (perform this.copyStaticLink "account")}} class="gh-portal-setting-copy">
+                            <button
+                                type="button" {{action (perform this.copyStaticLink "account")}} class="gh-portal-setting-copy"
+                                data-test-button="copy-url-attr"
+                            >
                                 {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "account"))}}
                                     {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                                 {{else}}
@@ -329,17 +385,22 @@
                             {{#if this.isLink}}
                             <input class="gh-input page-url-field"
                                 type="text"
+                                data-test-input="portal-tier-link-account-plans"
                                 value="{{this.siteUrl}}/#/portal/account/plans"
                                 disabled="true"
                                 aria-label="Account/Plans Portal link">
                             {{else}}
                                 <input class="gh-input page-url-field"
                                     type="text"
+                                    data-test-input="portal-tier-data-attr-account-plans"
                                     value='data-portal="account/plans"'
                                     disabled="true"
                                     aria-label="Account/Plans Portal data attribute">
                             {{/if}}
-                            <button type="button" {{action (perform this.copyStaticLink "account/plans")}} class="gh-portal-setting-copy">
+                            <button
+                                type="button" {{action (perform this.copyStaticLink "account/plans")}} class="gh-portal-setting-copy"
+                                data-test-button="copy-url-attr"
+                            >
                                 {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "account/plans"))}}
                                     {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                                 {{else}}
@@ -356,17 +417,22 @@
                             {{#if this.isLink}}
                             <input class="gh-input page-url-field"
                                 type="text"
+                                data-test-input="portal-tier-link-account-profile"
                                 value="{{this.siteUrl}}/#/portal/account/profile"
                                 disabled="true"
                                 aria-label="Account/Profile Portal link">
                             {{else}}
                                 <input class="gh-input page-url-field"
                                     type="text"
+                                    data-test-input="portal-tier-data-attr-account-profile"
                                     value='data-portal="account/profile"'
                                     disabled="true"
                                     aria-label="Account/Profile Portal data attribute">
                             {{/if}}
-                            <button type="button" {{action (perform this.copyStaticLink "account/profile")}} class="gh-portal-setting-copy">
+                            <button
+                                type="button" {{action (perform this.copyStaticLink "account/profile")}} class="gh-portal-setting-copy"
+                                data-test-button="copy-url-attr"
+                            >
                                 {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "account/profile"))}}
                                     {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                                 {{else}}
diff --git a/ghost/admin/app/components/modal-portal-settings.hbs b/ghost/admin/app/components/modal-portal-settings.hbs
index e1e850a7d4..414e5b83c0 100644
--- a/ghost/admin/app/components/modal-portal-settings.hbs
+++ b/ghost/admin/app/components/modal-portal-settings.hbs
@@ -304,8 +304,9 @@
         <div class="gh-portal-settings-main">
             <div class="gh-portal-settings-previewheader">
 
-                <div class="gh-select gh-preview-page-selector">
+                <div class="gh-select gh-preview-page-selector" data-test-select="preview-page-selector">
                     <OneWaySelect
+                        @data-test-select="page-selector"
                         @value={{this.page}}
                         @options={{this.availablePages}}
                         @optionValuePath="name"
diff --git a/ghost/core/test/e2e-browser/admin/portal-settings.spec.js b/ghost/core/test/e2e-browser/admin/portal-settings.spec.js
new file mode 100644
index 0000000000..883365c4ac
--- /dev/null
+++ b/ghost/core/test/e2e-browser/admin/portal-settings.spec.js
@@ -0,0 +1,119 @@
+const {expect, test} = require('@playwright/test');
+
+test.describe('Portal Settings', () => {
+    test.describe('Links', () => {
+        test('can open portal on default page', async ({page}) => {
+            await page.goto('/ghost');
+            // Navigate to the member settings
+            await page.locator('[data-test-nav="settings"]').click();
+            await page.locator('[data-test-nav="members-membership"]').click();
+
+            // open portal settings
+            await page.locator('[data-test-toggle="portal-settings"]').click();
+
+            // open links preview page
+            await page.locator('[data-test-select="page-selector"]').first().selectOption('links');
+
+            // fetch portal default url from input
+            const portalUrl = await page.locator('[data-test-input="portal-link-default"]').inputValue();
+            await page.goto(portalUrl);
+
+            const portalFrame = page.locator('[data-testid="portal-popup-frame"]');
+
+            // check portal popup is opened
+            await expect(portalFrame).toBeVisible();
+        });
+
+        test('can open portal on signin page', async ({page}) => {
+            await page.goto('/ghost');
+            // Navigate to the member settings
+            await page.locator('[data-test-nav="settings"]').click();
+            await page.locator('[data-test-nav="members-membership"]').click();
+
+            // open portal settings
+            await page.locator('[data-test-toggle="portal-settings"]').click();
+
+            // open links preview page
+            await page.locator('[data-test-select="page-selector"]').first().selectOption('links');
+
+            // fetch portal signin url from input
+            const portalUrl = await page.locator('[data-test-input="portal-link-signin"]').inputValue();
+            await page.goto(portalUrl);
+
+            const portalFrame = page.locator('[data-testid="portal-popup-frame"]');
+            const portalFrameLocator = page.frameLocator('[data-testid="portal-popup-frame"]');
+
+            // check portal popup is opened
+            await expect(portalFrame).toBeVisible();
+            // check signin page is opened in portal
+            await expect(portalFrameLocator.getByRole('heading', {name: 'Sign in'})).toBeVisible();
+        });
+
+        test('can open portal on signup page', async ({page}) => {
+            await page.goto('/ghost');
+            // Navigate to the member settings
+            await page.locator('[data-test-nav="settings"]').click();
+            await page.locator('[data-test-nav="members-membership"]').click();
+
+            // open portal settings
+            await page.locator('[data-test-toggle="portal-settings"]').click();
+
+            // open links preview page
+            await page.locator('[data-test-select="page-selector"]').first().selectOption('links');
+
+            // fetch portal signup url from input
+            const portalUrl = await page.locator('[data-test-input="portal-link-signup"]').inputValue();
+            await page.goto(portalUrl);
+
+            const portalFrame = page.locator('[data-testid="portal-popup-frame"]');
+            const portalFrameLocator = page.frameLocator('[data-testid="portal-popup-frame"]');
+
+            // check portal popup is opened
+            await expect(portalFrame).toBeVisible();
+            // check signup page is opened in portal
+            await expect(portalFrameLocator.locator('.gh-portal-signup')).toBeVisible();
+        });
+
+        test('can open portal directly on monthly signup', async ({page}) => {
+            await page.goto('/ghost');
+            // Navigate to the member settings
+            await page.locator('[data-test-nav="settings"]').click();
+            await page.locator('[data-test-nav="members-membership"]').click();
+
+            // open portal settings
+            await page.locator('[data-test-toggle="portal-settings"]').click();
+
+            // open links preview page
+            await page.locator('[data-test-select="page-selector"]').first().selectOption('links');
+
+            // fetch and go to portal directly monthly signup url
+            const portalUrl = await page.locator('[data-test-input="portal-tier-link-monthly"]').inputValue();
+            await page.goto(portalUrl);
+
+            // expect stripe checkout to have opeened
+            await page.waitForNavigation();
+            await expect(page).toHaveURL(/^https:\/\/checkout.stripe.com/);
+        });
+
+        test('can open portal directly on yearly signup', async ({page}) => {
+            await page.goto('/ghost');
+            // Navigate to the member settings
+            await page.locator('[data-test-nav="settings"]').click();
+            await page.locator('[data-test-nav="members-membership"]').click();
+
+            // open portal settings
+            await page.locator('[data-test-toggle="portal-settings"]').click();
+
+            // open links preview page
+            await page.locator('[data-test-select="page-selector"]').first().selectOption('links');
+
+            // fetch and go to portal directly monthly signup url
+            const portalUrl = await page.locator('[data-test-input="portal-tier-link-yearly"]').inputValue();
+            await page.goto(portalUrl);
+
+            // expect stripe checkout to have opeened
+            await page.waitForNavigation();
+            await expect(page).toHaveURL(/^https:\/\/checkout.stripe.com/);
+        });
+    });
+});