Added non-Stripe members setting screen acceptance tests

refs TryGhost/Product#1358 - added acceptance tests for members settings screen - subscription access management - default post access management - free tier management - fixed `enableLabsFlag()` test helper overwriting existing flag settings when enabling another one - updated API mocks and fixtures - matched product fixtures to default tiers-enabled products - updated product API mocks to include benefit handling
TryGhost · Feb 18, 2022 · b58ec2a · b58ec2a
1 parent 792f10f
commit b58ec2a
Show file tree

Hide file tree

Showing 22 changed files with 505 additions and 89 deletions.
diff --git a/.lint-todo b/.lint-todo
@@ -1831,3 +1831,8 @@ remove|ember-template-lint|no-action|7|12|7|12|fada170dae44678cba8240b4ae3233c63
 remove|ember-template-lint|no-action|17|12|17|12|b75d66d02a33b108a64bb94d494fa194434c82f9|1644364800000|1646956800000|1649545200000|lib/koenig-editor/addon/components/koenig-toolbar.hbs
 remove|ember-template-lint|no-action|28|16|28|16|e5e787868d089ae3141666004a914deff774b489|1644364800000|1646956800000|1649545200000|lib/koenig-editor/addon/components/koenig-toolbar.hbs
 remove|ember-template-lint|no-action|70|12|70|12|03d2eaf613eae8cb3ea3c821ba63544c730364c8|1644364800000|1646956800000|1649545200000|lib/koenig-editor/addon/components/koenig-toolbar.hbs
+remove|ember-template-lint|no-duplicate-landmark-elements|126|24|126|24|a19c12d5f0d5fa9b890943214b862502d9f2dcee|1643760000000|1646352000000|1648940400000|app/components/modal-product.hbs
+remove|ember-template-lint|no-nested-landmark|126|24|126|24|a19c12d5f0d5fa9b890943214b862502d9f2dcee|1643760000000|1646352000000|1648940400000|app/components/modal-product.hbs
+remove|ember-template-lint|no-duplicate-attributes|9|4|9|4|6b5f76f812df2b84f2ed9ee5a557ca1bf98710df|1643760000000|1646352000000|1648940400000|app/components/gh-post-settings-menu/visibility-segment-select.hbs
+add|ember-template-lint|no-duplicate-landmark-elements|131|24|131|24|9eb7d301f1f50334e793aafab8f6b9e8905125ab|1645142400000|1647734400000|1650322800000|app/components/modal-product.hbs
+add|ember-template-lint|no-nested-landmark|131|24|131|24|9eb7d301f1f50334e793aafab8f6b9e8905125ab|1645142400000|1647734400000|1650322800000|app/components/modal-product.hbs
diff --git a/app/components/gh-benefit-item.hbs b/app/components/gh-benefit-item.hbs
@@ -21,19 +21,22 @@
             @input={{action "updateLabel" value="target.value"}}
             @keyPress={{action "clearLabelErrors"}}
             @stopEnterKeyDownPropagation={{true}}
-            @focus-out={{action "updateLabel" this.name}} data-test-input="name" />
+            @focus-out={{action "updateLabel" this.name}}
+            data-test-input="benefit-label" />
+
         <GhErrorMessage
             @errors={{this.benefitItem.errors}}
-            @property="name" data-test-error="name" />
+            @property="name"
+            data-test-error="benefit-label" />
     </GhValidationStatusContainer>
 </div>
 
 {{#if this.benefitItem.isNew}}
-    <button type="button" class="gh-blognav-add" {{action "addItem" this.benefitItem}}>
+    <button type="button" class="gh-blognav-add" {{action "addItem" this.benefitItem}} data-test-button="add-benefit">
         {{svg-jar "add"}}<span class="sr-only">Add</span>
     </button>
 {{else}}
-    <button type="button" class="gh-blognav-delete" {{action "deleteItem" this.benefitItem}}>
+    <button type="button" class="gh-blognav-delete" {{action "deleteItem" this.benefitItem}} data-test-button="delete-benefit">
         {{svg-jar "trash"}}<span class="sr-only">Delete</span>
     </button>
 {{/if}}
diff --git a/app/components/gh-post-settings-menu/visibility-segment-select.hbs b/app/components/gh-post-settings-menu/visibility-segment-select.hbs
@@ -6,12 +6,11 @@
     @allowCreation={{false}}
     @renderInPlace={{this.renderInPlace}}
     @onChange={{this.setSegment}}
-    @disabled={{@disabled}}
     @class="select-members"
     @placeholder="Select a tier"
     as |option|
 >
-    {{option.name}}
+    <span data-test-visibility-segment-option={{option.name}}>{{option.name}}</span>
 </GhTokenInput>
 
 <GhMembersSegmentCount

diff --git a/app/components/gh-product-card.hbs b/app/components/gh-product-card.hbs
@@ -1,32 +1,32 @@
-<div class="gh-main-content-card gh-product-card">
+<div class="gh-main-content-card gh-product-card" data-test-product-card={{@product.slug}}>
     <div class="gh-product-card-block title-block">
-        <h3 class="gh-product-card-name">
-            {{this.product.name}}
+        <h3 class="gh-product-card-name" data-test-name>
+            {{@product.name}}
         </h3>
-        <p class="gh-product-card-description">
-        {{#if this.product.description.length}}
-            {{this.product.description}}
+        <p class="gh-product-card-description" data-test-description>
+        {{#if @product.description.length}}
+            {{@product.description}}
         {{else}}
             No description added for this tier.
         {{/if}}
         </p>
     </div>
-    <div class="gh-product-card-block benefits-block">
-        <h4>Benefits <span class="counter">({{if this.product.benefits.length this.product.benefits.length "0"}})</span></h4>
-        {{#if this.product.benefits.length}}
+    <div class="gh-product-card-block benefits-block" data-test-benefits>
+        <h4>Benefits <span class="counter">({{or @product.benefits.length "0"}})</span></h4>
+        {{#if @product.benefits.length}}
             <ul class="benefits">
-                {{#each this.product.benefits as |benefit|}}
+                {{#each @product.benefits as |benefit|}}
                     <li>{{svg-jar "check"}} {{benefit.name}} </li>
                 {{/each}}
             </ul>
         {{else}}
             <p class="gh-product-card-description">No benefits added for this tier.</p>
         {{/if}}
     </div>
-    {{#if (eq this.product.type "free" )}}
+    {{#if (eq @product.type "free" )}}
         <div class="gh-product-card-block">
             <div class="gh-product-price-container">
-                <div class="gh-product-card-price">
+                <div class="gh-product-card-price" data-test-free-price>
                     <div class="flex items-start">
                         <span class="currency">{{currency-symbol this.productCurrency}}</span>
                         <span class="amount">0</span>
@@ -35,31 +35,31 @@
             </div>
         </div>
     {{/if}}
-    {{#if (eq this.product.type "paid" )}}
+    {{#if (eq @product.type "paid" )}}
         <div class="gh-product-card-block">
             <div class="gh-product-price-container">
-                <div class="gh-product-card-price">
+                <div class="gh-product-card-price" data-test-monthly-price>
                     <div class="flex items-start">
                         <span class="currency">{{currency-symbol this.productCurrency}}</span>
-                        <span class="amount">{{gh-price-amount this.product.monthlyPrice.amount}}</span>
+                        <span class="amount">{{gh-price-amount @product.monthlyPrice.amount}}</span>
                     </div>
                     <div class="period">Monthly</div>
                 </div>
-                <div class="gh-product-card-price">
+                <div class="gh-product-card-price" data-test-yearly-price>
                     <div class="flex items-start">
                         <span class="currency">{{currency-symbol this.productCurrency}}</span>
-                        <span class="amount">{{gh-price-amount this.product.yearlyPrice.amount}}</span>
+                        <span class="amount">{{gh-price-amount @product.yearlyPrice.amount}}</span>
                     </div>
                     <div class="period">Yearly</div>
                 </div>
             </div>
         </div>
     {{/if}}
-    {{#if (eq this.product.type "paid" )}}
+    {{#if (eq @product.type "paid" )}}
     <div class="gh-product-card-button-container">
         <span class="dropdown">
             <GhDropdownButton
-                @dropdownName="tiers-actions-menu-{{this.product.name}}"
+                @dropdownName="tiers-actions-menu-{{@product.name}}"
                 @classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-actions-button icon-only"
                 @title="Tiers Actions"
                 data-test-button="tiers-actions"
@@ -70,19 +70,19 @@
                 </span>
             </GhDropdownButton>
                 <GhDropdown
-                    @name="tiers-actions-menu-{{this.product.name}}"
+                    @name="tiers-actions-menu-{{@product.name}}"
                     @tagName="ul"
                     @classNames="gh-tier-actions-menu dropdown-menu dropdown-triangle-top-right"
                 >
                     <li>
-                        <button class="mr2" type="button" {{on "click" (fn this.openEditProduct this.product)}}>
+                        <button class="mr2" type="button" {{on "click" (fn this.openEditProduct @product)}}>
                             <span>Edit</span>
                         </button>
                     </li>
                     {{#if this.showArchiveOption}}
                         <li>
                             <Settings::Members::ArchiveTier
-                                @product={{this.product}}
+                                @product={{@product}}
                                 @onUnarchive={{@onUnarchive}}
                             />
                         </li>
@@ -92,7 +92,7 @@
     </div>
     {{else}}
     <div class="gh-product-card-button-container">
-        <button type="button" {{on "click" (fn this.openEditProduct this.product)}} class="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-edit-button icon-only">
+        <button type="button" {{on "click" (fn this.openEditProduct @product)}} class="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-edit-button icon-only" data-test-button="edit-product">
             <span>
                 {{svg-jar "pen"}}
             </span>

diff --git a/app/components/gh-product-card.js b/app/components/gh-product-card.js
@@ -12,7 +12,6 @@ export default class extends Component {
     @service config;
 
     @tracked showProductModal = false;
-    @tracked productModel = null;
 
     get product() {
         return this.args.product;

diff --git a/app/components/gh-url-input.hbs b/app/components/gh-url-input.hbs
@@ -4,5 +4,6 @@
     @input={{this.setValue}}
     @focus-out={{this.validateUrlInput}}
     @placeholder={{this.placeholder}}
+    ...attributes
 />
 
diff --git a/app/components/modal-product.hbs b/app/components/modal-product.hbs
@@ -2,8 +2,8 @@
     {{svg-jar "close"}}
 </button>
 
-<div class="gh-product-modal-content">
-    <header class="modal-header" data-test-modal="webhook-form">
+<div class="gh-product-modal-content" data-test-modal="edit-product">
+    <header class="modal-header">
         <h1 data-test-text="title">{{this.title}}</h1>
     </header>
 
@@ -14,19 +14,21 @@
                 <h4 class="gh-main-section-header small bn">Basic</h4>
                 <div class="gh-main-section-content grey gh-product-priceform-block">
                     {{#unless this.isFreeProduct}}
-                        <GhFormGroup @errors={{this.errors}} @property="name">
+                        <GhFormGroup @errors={{this.errors}} @property="name" data-test-formgroup="name">
                             <label for="name" class="fw6">Name</label>
                             <GhTextInput
                                 @value={{readonly this.product.name}}
                                 @input={{action (mut this.product.name) value="target.value"}}
                                 @name="name"
                                 @placeholder="Bronze"
                                 @id="name"
-                                @class="gh-input" />
+                                @class="gh-input"
+                                data-test-input="product-name" />
                             <GhErrorMessage @errors={{this.errors}} @property="name" />
                         </GhFormGroup>
                     {{/unless}}
-                    <GhFormGroup @errors={{this.errors}} @property="description">
+
+                    <GhFormGroup @errors={{this.errors}} @property="description" data-test-formgroup="description">
                         <label for="description" class="fw6">Description</label>
                         {{#if this.isFreeProduct}}
                             <GhTextInput
@@ -35,20 +37,23 @@
                                 @name="description"
                                 @placeholder="Free preview of {{this.settings.title}}"
                                 @id="description"
-                                @class="gh-input" />
+                                @class="gh-input"
+                                data-test-input="free-product-description" />
                         {{else}}
                             <GhTextInput
                                 @value={{readonly this.product.description}}
                                 @input={{action (mut this.product.description) value="target.value"}}
                                 @name="description"
                                 @placeholder="Full access to premium content"
                                 @id="description"
-                                @class="gh-input" />
+                                @class="gh-input"
+                                data-test-input="product-description" />
                         {{/if}}
                         <GhErrorMessage @errors={{this.errors}} @property="description" />
                     </GhFormGroup>
+
                     {{#unless this.isFreeProduct}}
-                        <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices">
+                        <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices" data-test-formgroup="prices">
                             <div class="gh-settings-members-pricelabelcont">
                                 <label for="monthlyPrice">Prices</label>
                                 <span>–</span>
@@ -138,7 +143,7 @@
                                             @focusItem={{action "focusItem"}}
                                             @deleteItem={{action "deleteBenefit"}}
                                             @updateLabel={{action "updateLabel"}}
-                                            data-test-navitem={{index}} />
+                                            data-test-benefit-item={{index}} />
                                     </DraggableObject>
                                 {{/each}}
                             </SortableObjects>
@@ -148,58 +153,58 @@
                                 @addItem={{action "addBenefit"}}
                                 @deleteItem={{action "deleteBenefit"}}
                                 @updateLabel={{action "updateLabel"}}
-                                data-test-navitem="new" />
+                                data-test-benefit-item="new" />
                         </form>
                     </div>
                 </div>
             </div>
-            <div class="gh-main-section-block gh-product-form-tierpreview">
+            <div class="gh-main-section-block gh-product-form-tierpreview" data-test-tierpreview>
                 <div class="gh-product-form-tierpreview-content">
                     {{#if this.isFreeProduct}}
-                        <h4 class="gh-main-section-header small bn">Free Membership Preview</h4>
+                        <h4 class="gh-main-section-header small bn" data-test-tierpreview-title>Free Membership Preview</h4>
                     {{else}}
-                        <h4 class="gh-main-section-header small bn">Tier Preview</h4>
+                        <h4 class="gh-main-section-header small bn" data-test-tierpreview-title>Tier Preview</h4>
                     {{/if}}
                     <div class="gh-main-section-content" style="border-color: {{this.settings.accentColor}}">
                         <span class="checkmark" style="background-color: {{this.settings.accentColor}}"></span>
 
                         {{#if this.product.name}}
-                            <h4>{{this.product.name}}</h4>
+                            <h4 data-test-tierpreview-name>{{this.product.name}}</h4>
                         {{else}}
-                            <h4 class="placeholder">Bronze</h4>
+                            <h4 class="placeholder" data-test-tierpreview-name>Bronze</h4>
                         {{/if}}
 
                         {{#if this.product.description}}
-                            <p>{{this.product.description}}</p>
+                            <p data-test-tierpreview-description>{{this.product.description}}</p>
                         {{else}}
                             {{#if this.isFreeProduct}}
-                                <p class="placeholder">Free preview of {{this.settings.title}}</p>
+                                <p class="placeholder" data-test-tierpreview-description>Free preview of {{this.settings.title}}</p>
                             {{else}}
-                                <p class="placeholder">Full access to premium content</p>
+                                <p class="placeholder" data-test-tierpreview-description>Full access to premium content</p>
                             {{/if}}
                         {{/if}}
 
                         {{#if this.benefits}}
-                            <ul>
+                            <ul data-test-tierpreview-benefits>
                             {{#each this.benefits as |benefitItem index|}}
                                 <li>{{svg-jar "check-2"}} <span>{{benefitItem.name}}</span></li>
                             {{/each}}
                             </ul>
                         {{else}}
-                            <ul class="placeholder">
+                            <ul class="placeholder" data-test-tierpreview-benefits>
                                 {{#if this.isFreeProduct}}
                                     <li>{{svg-jar "check-2"}} <span>Access to all public posts</span></li>
                                 {{else}}
                                     <li>{{svg-jar "check-2"}} <span>Expert analysis</span></li>
                                 {{/if}}
                             </ul>
                         {{/if}}
-                        <div class="price">
+                        <div class="price" data-test-tierpreview-price>
                             {{#if this.isFreeProduct}}
-                            <span class="monthly-price">
-                                <span class="currency">{{currency-symbol this.currency}}</span>
-                                0
-                            </span>
+                                <span class="monthly-price">
+                                    <span class="currency">{{currency-symbol this.currency}}</span>
+                                    0
+                                </span>
                             {{else}}
                                 {{#if this.stripeMonthlyAmount}}
                                     <span class="monthly-price">

diff --git a/app/components/settings/members-default-post-access.hbs b/app/components/settings/members-default-post-access.hbs
@@ -1,4 +1,4 @@
-<div class="mb4 gh-setting-large-dropdown">
+<div class="mb4 gh-setting-large-dropdown" data-test-default-post-access>
     <div class="gh-expandable-header">
         <div>
             <h4 class="gh-expandable-title">Default post access</h4>
@@ -15,7 +15,7 @@
         @dropdownClass="gh-setting-dropdown-list"
         as |option|
     >
-        <div class="gh-setting-dropdown-content">
+        <div class="gh-setting-dropdown-content" data-test-default-post-access-option={{option.value}}>
             {{svg-jar option.icon class=(concat "w8 h8 mr2 fill-" (or option.icon_color "green"))}}
             <div class="gh-radio-label">
                 {{option.name}}<br>
@@ -24,7 +24,7 @@
         </div>
     </PowerSelect>
     {{#if this.hasVisibilityFilter}}
-        <div class="mt2">
+        <div class="mt2" data-test-default-post-access-tiers>
             <GhPostSettingsMenu::VisibilitySegmentSelect
                 @selectDefaultProduct={{true}}
                 @tiers={{this.visibilityTiers}}

diff --git a/app/components/settings/members-default-post-access.js b/app/components/settings/members-default-post-access.js
@@ -46,7 +46,7 @@ export default class SettingsMembersDefaultPostAccess extends Component {
 
     get visibilityTiers() {
         const visibilityTiersData = this.settings.get('defaultContentVisibilityTiers');
-        return visibilityTiersData.map((id) => {
+        return (visibilityTiersData || []).map((id) => {
             return {id};
         });
     }

diff --git a/app/components/settings/members-subscription-access.hbs b/app/components/settings/members-subscription-access.hbs
@@ -1,4 +1,4 @@
-<div class="gh-setting-richdd-container">
+<div class="gh-setting-richdd-container" data-test-members-subscription-access>
     <div class="gh-expandable-header">
         <div>
             <h4 class="gh-expandable-title">Subscription access</h4>
@@ -14,7 +14,7 @@
         @dropdownClass="gh-setting-dropdown-list"
         as |option|
     >
-        <div class="gh-setting-dropdown-content">
+        <div class="gh-setting-dropdown-content" data-test-members-subscription-option={{option.value}}>
             {{svg-jar option.icon class=(concat "w8 h8 mr2 fill-" (or option.icon_color "green"))}}
             <div class="gh-radio-label">
                 {{option.name}}<br>