mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 20:03:12 +03:00
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
This commit is contained in:
parent
93c9035c49
commit
59a1b8a31f
@ -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>
|
||||
|
@ -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>
|
||||
@ -188,4 +188,4 @@
|
||||
{{/liquid-if}}
|
||||
{{/let}}
|
||||
</div>
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
|
@ -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>
|
||||
@ -119,4 +119,4 @@
|
||||
{{/liquid-if}}
|
||||
{{/let}}
|
||||
</div>
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
|
@ -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">
|
||||
|
@ -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);
|
||||
|
8
ghost/admin/mirage/fixtures/newsletters.js
Normal file
8
ghost/admin/mirage/fixtures/newsletters.js
Normal file
@ -0,0 +1,8 @@
|
||||
/* eslint-disable camelcase */
|
||||
export default [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Default newsletter',
|
||||
slug: 'default-newsletter'
|
||||
}
|
||||
];
|
@ -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\)/
|
||||
});
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user