Added tests for unsaved newsletter changes

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

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

@@ -43,7 +43,7 @@
 
             <div class="modal-fullsettings-main">
                 <div class="modal-fullsettings-main-topbar-labs">
-                    <button class="gh-btn mr3" type="button" {{on "click" @close}}>
+                    <button class="gh-btn mr3" type="button" {{on "click" @close}} data-test-button="cancel-newsletter">
                         <span>Cancel</span>
                     </button>
 

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

@@ -79,7 +79,7 @@
                         <GhFormGroup @classNames="gh-stack-item gh-setting">
                             <label class="modal-fullsettings-title">Publication title</label>
                             <div class="for-switch small">
-                                <label class="switch" for="show-title">
+                                <label class="switch" for="show-title" data-test-toggle="showHeaderTitle">
                                     <input
                                         type="checkbox"
                                         checked={{@newsletter.showHeaderTitle}}
@@ -94,7 +94,7 @@
                         <GhFormGroup @classNames="gh-stack-item gh-setting">
                             <label class="modal-fullsettings-title">Newsletter name</label>
                             <div class="for-switch small">
-                                <label class="switch" for="show-header-name">
+                                <label class="switch" for="show-header-name" data-test-toggle="showHeaderName">
                                     <input
                                         type="checkbox"
                                         checked={{@newsletter.showHeaderName}}
@@ -122,13 +122,13 @@
                         <GhFormGroup @classNames="gh-stack-item">
                             <label class="modal-fullsettings-title">Newsletter title style</label>
                             <div class="gh-email-design-typography-wrapper header">
-                                <div class="modal-fullsettings-radiogroup gh-email-design-typography">
+                                <div class="modal-fullsettings-radiogroup gh-email-design-typography" data-test-input="titleFontCategory">
                                     <GhFontSelector
                                         @selected={{@newsletter.titleFontCategory}}
                                         @onChange={{fn this.changeSetting "titleFontCategory"}}
                                     />
                                 </div>
-                                <div class="gh-btn-group icons">
+                                <div class="gh-btn-group icons" id="newsletter-title-alignment">
                                     <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "left")}}><span>{{svg-jar "align-left"}}</span></button>
                                     <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "center")}}><span>{{svg-jar "align-center"}}</span></button>
                                 </div>
@@ -137,7 +137,7 @@
                         <GhFormGroup @classNames="gh-stack-item">
                             <label class="modal-fullsettings-title">Body style</label>
                             <div class="gh-email-design-typography-wrapper">
-                                <div class="modal-fullsettings-radiogroup gh-email-design-typography">
+                                <div class="modal-fullsettings-radiogroup gh-email-design-typography" data-test-input="bodyFontCategory">
                                     <GhFontSelector
                                         @selected={{@newsletter.bodyFontCategory}}
                                         @onChange={{fn this.changeSetting "bodyFontCategory"}}

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

@@ -101,7 +101,7 @@
                 <div class="modal-fullsettings-tab-expanded">
                     <div class="gh-stack">
                         <GhFormGroup @classNames="gh-stack-item gh-setting">
-                            <label for="subscribe-on-signup" class="modal-fullsettings-title">Subscribe new members on signup</label>
+                            <label for="subscribe-on-signup" class="modal-fullsettings-title" data-test-toggle="subscribeOnSignup">Subscribe new members on signup</label>
                             <div class="for-switch small">
                                 <div class="container">
                                     <input

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

@@ -80,6 +80,21 @@ describe('Acceptance: Settings - Newsletters', function () {
         expect(find(`[data-test-modal="${name}-newsletter"]`), 'Newsletter modal should disappear after saving').to.not.exist;
     }
 
+    async function checkCancel(options) {
+        const name = options.edit ? 'edit' : 'create';
+
+        // Create the newsletter
+        await click('[data-test-button="cancel-newsletter"]');
+
+        if (options.shouldConfirm) {
+            expect(find('[data-test-modal="unsaved-settings"]'), 'Confirm unsaved settings modal should be visible').to.exist;
+            await click('[data-test-leave-button]');
+        }
+
+        // Check if modal closes on save
+        expect(find(`[data-test-modal="${name}-newsletter"]`), 'Newsletter modal should disappear after canceling').to.not.exist;
+    }
+
     async function openTab(name, optional = true) {
         const generalToggleSelector = '[data-test-nav-toggle="' + name + '"]';
         const generalToggle = find(generalToggleSelector);
@@ -251,4 +266,113 @@ describe('Acceptance: Settings - Newsletters', function () {
             verifyEmail: /previous email address \(test@example\.com\)/
         });
     });
+
+    it('does not ask to confirm saved changes', 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;
+
+        // Make no changes
+
+        // Everything should be valid
+        await checkCancel({
+            edit: true,
+            shouldConfirm: false
+        });
+    });
+
+    it('asks to confirm unsaved changes', async function () {
+        async function doCheck(tabName, field) {
+            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;
+
+            // Make a change
+            await openTab(tabName, false);
+            if (field.input) {
+                await fillIn(field.input, field.value ?? 'my changed value');
+            } else if (field.toggle) {
+                await click(field.toggle);
+            } else if (field.dropdown) {
+                // Open dropdown
+                await click(`${field.dropdown} .ember-basic-dropdown-trigger`);
+
+                // Click first not-selected option
+                await click(`${field.dropdown} li.ember-power-select-option[aria-current="false"]`);
+            }
+
+            // Everything should be valid
+            await checkCancel({
+                edit: true,
+                shouldConfirm: true
+            });
+        }
+
+        // General name
+        await doCheck('general.name', {
+            input: '#newsletter-title'
+        });
+
+        await doCheck('general.name', {
+            input: '#newsletter-description'
+        });
+
+        // General email
+        await doCheck('general.email', {
+            input: '#newsletter-sender-name'
+        });
+
+        await doCheck('general.email', {
+            input: '#newsletter-sender-email'
+        });
+
+        await doCheck('general.email', {
+            input: '#newsletter-reply-to',
+            value: 'support'
+        });
+
+        // Member settings
+        await doCheck.call(this, 'general.member', {
+            toggle: '[data-test-toggle="subscribeOnSignup"]'
+        });
+
+        // Design header
+        await doCheck.call(this, 'design.header', {
+            toggle: '[data-test-toggle="showHeaderTitle"]'
+        });
+
+        await doCheck.call(this, 'design.header', {
+            toggle: '[data-test-toggle="showHeaderName"]'
+        });
+
+        // Design body
+        await doCheck.call(this, 'design.body', {
+            dropdown: '[data-test-input="titleFontCategory"]'
+        });
+
+        await doCheck.call(this, 'design.body', {
+            toggle: '#newsletter-title-alignment button:not(.gh-btn-group-selected)'
+        });
+
+        await doCheck.call(this, 'design.body', {
+            dropdown: '[data-test-input="bodyFontCategory"]'
+        });
+
+        await doCheck.call(this, 'design.body', {
+            toggle: '#show-feature-image'
+        });
+
+        // Design footer
+        await doCheck('design.footer', {
+            input: '[contenteditable="true"]'
+        });
+    });
 });