Added tests for editing newsletters

refs https://github.com/TryGhost/Team/issues/1477

- Added default test fixture
- Added tests for validation of newsletter when editing
- Added tests for opening and closing tabs

ghost/admin/app/components/modals/newsletters/confirm-newsletter-email.hbs

@@ -1,5 +1,5 @@
-<div class="modal-content">
-    <header class="modal-header" data-test-modal="confirm-newsletter-email">
+<div class="modal-content" data-test-modal="confirm-newsletter-email">
+    <header class="modal-header">
         <h1>Confirm newsletter email address</h1>
     </header>
     <button type="button" class="close" role="button" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>

ghost/admin/app/components/modals/newsletters/edit/design.hbs

@@ -4,7 +4,7 @@
     <div class="modal-fullsettings-section-labs">
 
         {{#let (eq @openSection "design-header") as |isOpen|}}
-            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-header")}} data-test-nav-toggle="general">
+            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-header")}} data-test-nav-toggle="design.header">
                 {{svg-jar "email-header"}} Header
                 <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
             </button>
@@ -112,7 +112,7 @@
         {{/let}}
 
         {{#let (eq @openSection "design-body") as |isOpen|}}
-            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-body")}} data-test-nav-toggle="general">
+            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-body")}} data-test-nav-toggle="design.body">
                 {{svg-jar "email-body"}} Body
                 <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
             </button>
@@ -166,7 +166,7 @@
         {{/let}}
 
         {{#let (eq @openSection "design-footer") as |isOpen|}}
-            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-footer")}} data-test-nav-toggle="general">
+            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-footer")}} data-test-nav-toggle="design.footer">
                 {{svg-jar "email-footer"}} Footer
                 <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
             </button>

ghost/admin/app/components/modals/newsletters/edit/settings.hbs

@@ -3,7 +3,7 @@
         <h4 class="modal-fullsettings-section-title">General settings</h4>
 
         {{#let (eq @openSection "name") as |isOpen|}}
-            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "name")}} data-test-nav-toggle="general">
+            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "name")}} data-test-nav-toggle="general.name">
                 {{svg-jar "email-name"}} Name and description
                 <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
             </button>
@@ -38,7 +38,7 @@
         {{/let}}
 
         {{#let (eq @openSection "email") as |isOpen|}}
-            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "email")}} data-test-nav-toggle="general">
+            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "email")}} data-test-nav-toggle="general.email">
                 {{svg-jar "email-at"}} Email addresses
                 <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
             </button>
@@ -93,7 +93,7 @@
         {{/let}}
 
         {{#let (eq @openSection "members") as |isOpen|}}
-            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "members")}} data-test-nav-toggle="general">
+            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "members")}} data-test-nav-toggle="general.member">
                 {{svg-jar "email-member"}} Member settings
                 <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
             </button>

ghost/admin/app/components/settings/newsletters/newsletter-management.hbs

@@ -53,7 +53,7 @@
                             @isSortable={{true}}
                         >
                             {{svg-jar "grab" class="grab-newsletter"}}
-                            <div class="gh-main-content-card gh-newsletter-card">
+                            <div class="gh-main-content-card gh-newsletter-card" data-test-newsletter="{{newsletter.slug}}">
                                 {{#if this.displayingDefault}}
                                     <div class="gh-newsletter-card-block title-block">
                                         <h3 class="gh-newsletter-card-name">

ghost/admin/mirage/config/newsletters.js

@@ -42,7 +42,8 @@ export default function mockNewsletters(server) {
 
         // sender email can't be changed without verification
         if (newSenderEmail && newSenderEmail !== previousSenderEmail) {
-            attrs.senderEmail = previousSenderEmail;
+            // It doesn't correctly return to the previous email if previousSenderEmail is undefined
+            attrs.senderEmail = previousSenderEmail === undefined ? null : previousSenderEmail;
         }
 
         newsletter.update(attrs);

ghost/admin/mirage/fixtures/newsletters.js

@@ -0,0 +1,8 @@
+/* eslint-disable camelcase */
+export default [
+    {
+        id: 1,
+        name: 'Default newsletter',
+        slug: 'default-newsletter'
+    }
+];

ghost/admin/tests/acceptance/settings/newsletters-test.js

@@ -10,7 +10,7 @@ describe('Acceptance: Settings - Newsletters', function () {
     setupMirage(hooks);
 
     beforeEach(async function () {
-        this.server.loadFixtures('configs');
+        this.server.loadFixtures('configs', 'newsletters');
 
         const role = this.server.create('role', {name: 'Owner'});
         this.server.create('user', {roles: [role]});
@@ -37,12 +37,20 @@ describe('Acceptance: Settings - Newsletters', function () {
         expect(this.server.db.settings.findBy({key: 'email_track_opens'}).value).to.equal(false);
     });
 
-    async function checkValidationError(regexp) {
+    async function checkValidationError(errors) {
         // Create the newsletter
         await click('[data-test-button="save-newsletter"]');
 
-        expect(findAll('.error > .response').length, 'error message is displayed').to.equal(1);
-        expect(find('.error > .response').textContent).to.match(regexp);
+        // @todo: at the moment, the tabs don't open on error automatically
+        // we need to remove these lines when this is fixed
+        // and replace it with something like ± checkTabOpen('genexral')
+        // await openTab('general.name');
+
+        for (const selector of Object.keys(errors)) {
+            expect(findAll(selector).length, 'field ' + selector + ' is not visible').to.equal(1);
+            expect(findAll(selector + ' + .response').length, 'error message is displayed').to.equal(1);
+            expect(find(selector + ' + .response').textContent).to.match(errors[selector]);
+        }
 
         // Check button is in error state
         expect(find('[data-test-button="save-newsletter"] > [data-test-task-button-state="failure"]')).to.exist;
@@ -57,8 +65,14 @@ describe('Acceptance: Settings - Newsletters', function () {
         // No errors
         expect(findAll('.error > .response').length, 'error message is displayed').to.equal(0);
 
-        if (options.shouldVerifyEmail) {
+        if (options.verifyEmail) {
             expect(find('[data-test-modal="confirm-newsletter-email"]'), 'Confirm email modal').to.exist;
+
+            // Check message
+            if (typeof verifyEmail !== 'boolean') {
+                const t = find('[data-test-modal="confirm-newsletter-email"] p').textContent.trim().replace(/\s+/g, ' ');
+                expect(t).to.match(options.verifyEmail, t);
+            }
             await click('[data-test-button="confirm-newsletter-email"]');
         }
 
@@ -66,7 +80,44 @@ describe('Acceptance: Settings - Newsletters', function () {
         expect(find(`[data-test-modal="${name}-newsletter"]`), 'Newsletter modal should disappear after saving').to.not.exist;
     }
 
+    async function openTab(name, optional = true) {
+        const generalToggleSelector = '[data-test-nav-toggle="' + name + '"]';
+        const generalToggle = find(generalToggleSelector);
+        const doesExist = !!generalToggle;
+
+        if (!doesExist && !optional) {
+            throw new Error('Expected tab ' + name + ' to exist');
+        }
+
+        if (doesExist && !generalToggle.classList.contains('active')) {
+            await click(generalToggleSelector);
+
+            if (!generalToggle.classList.contains('active')) {
+                throw new Error('Could not open ' + name + ' tab');
+            }
+        }
+    }
+
+    async function closeTab(name, optional = true) {
+        const generalToggleSelector = '[data-test-nav-toggle="' + name + '"]';
+        const generalToggle = find(generalToggleSelector);
+        const doesExist = !!generalToggle;
+
+        if (!doesExist && !optional) {
+            throw new Error('Expected tab ' + name + ' to exist');
+        }
+
+        if (doesExist && generalToggle.classList.contains('active')) {
+            await click(generalToggleSelector);
+
+            if (generalToggle.classList.contains('active')) {
+                throw new Error('Could not close ' + name + ' tab');
+            }
+        }
+    }
+
     async function fillName(name) {
+        await openTab('general.name');
         await fillIn('input#newsletter-title', name);
     }
 
@@ -94,7 +145,7 @@ describe('Acceptance: Settings - Newsletters', function () {
         expect(find('[data-test-modal="create-newsletter"]'), 'Create newsletter modal').to.exist;
 
         // Invalid name error when you try to save
-        await checkValidationError(/Please enter a name./);
+        await checkValidationError({'input#newsletter-title': /Please enter a name./});
 
         // Fill in the newsletter name
         await fillName('My new newsletter');
@@ -103,34 +154,101 @@ describe('Acceptance: Settings - Newsletters', function () {
         await checkSave({});
     });
 
-    /*it('validates edit fields before saving', async function () {
+    it('can edit via menu if multiple newsletters', async function () {
+        // Create an extra newsletter
+        this.server.create('newsletter', {status: 'active', name: 'test newsletter', slug: 'test-newsletter'});
         await visit('/settings/newsletters');
 
-        // This one is only needed because we already created a second newsletter in previous test
         await click('[data-test-newsletter-menu-trigger]');
         await click('[data-test-button="customize-newsletter"]');
 
         // Check if modal opens
         expect(find('[data-test-modal="edit-newsletter"]'), 'Edit newsletter modal').to.exist;
+    });
+
+    it('validates edit fields before saving', async function () {
+        await visit('/settings/newsletters');
+
+        // When we only have a single newsletter, the customize button is shown instead of the menu button
+        await click('[data-test-button="customize-newsletter"]');
+
+        // Check if modal opens
+        expect(find('[data-test-modal="edit-newsletter"]'), 'Edit newsletter modal').to.exist;
+
+        // Clear newsletter name
+        await fillName('');
 
         // Invalid name error when you try to save
-        await checkValidationError(/Please enter a name./);
+        await checkValidationError({'input#newsletter-title': /Please enter a name./});
 
         // Fill in the newsletter name
         await fillName('My new newsletter');
 
         // Enter an invalid email
+        await openTab('general.email');
         await fillIn('input#newsletter-sender-email', 'invalid-email');
 
         // Check if it complains about the invalid email
-        await checkValidationError(/Invalid email./);
+        await checkValidationError({
+            'input#newsletter-sender-email': /Invalid email./
+        });
 
         await fillIn('input#newsletter-sender-email', 'valid-email@email.com');
 
         // Everything should be valid
         await checkSave({
             edit: true,
-            shouldVerifyEmail: true
+            verifyEmail: /default email address \(noreply/
         });
-    });*/
+    });
+
+    it('can open / close all tabs', async function () {
+        await visit('/settings/newsletters');
+
+        // When we only have a single newsletter, the customize button is shown instead of the menu button
+        await click('[data-test-button="customize-newsletter"]');
+
+        // Check if modal opens
+        expect(find('[data-test-modal="edit-newsletter"]'), 'Edit newsletter modal').to.exist;
+
+        await openTab('general.name', false);
+        await closeTab('general.name', false);
+
+        await openTab('general.email', false);
+        await closeTab('general.email', false);
+
+        await openTab('general.member', false);
+        await closeTab('general.member', false);
+
+        await openTab('design.header', false);
+        await closeTab('design.header', false);
+
+        await openTab('design.body', false);
+        await closeTab('design.body', false);
+
+        await openTab('design.footer', false);
+        await closeTab('design.footer', false);
+    });
+
+    it('shows current sender email in verify modal', async function () {
+        this.server.create('newsletter', {status: 'active', name: 'test newsletter', slug: 'test-newsletter', senderEmail: 'test@example.com'});
+
+        await visit('/settings/newsletters');
+
+        // Edit the last newsletter
+        await click('[data-test-newsletter="test-newsletter"] [data-test-newsletter-menu-trigger]');
+        await click('[data-test-button="customize-newsletter"]');
+
+        // Check if modal opens
+        expect(find('[data-test-modal="edit-newsletter"]'), 'Edit newsletter modal').to.exist;
+
+        await openTab('general.email');
+        await fillIn('input#newsletter-sender-email', 'valid-email@email.com');
+
+        // Everything should be valid
+        await checkSave({
+            edit: true,
+            verifyEmail: /previous email address \(test@example\.com\)/
+        });
+    });
 });