Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Integrate newsletter editor tests

Browse Source
This commit is contained in:
Tautvidas Sipavičius
2015-08-26 18:24:43 +03:00
parent 4d1fd2b2d8
commit 21a4843a48
29 changed files with 3116 additions and 2805 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/js/src/newsletter_editor/behaviors/ColorPickerBehavior.js
View File

@ -6,7 +6,7 @@
define('newsletter_editor/behaviors/ColorPickerBehavior', [
'backbone.marionette',
'newsletter_editor/behaviors/BehaviorsLookup',
'spectrum-colorpicker',
'spectrum',
], function(Marionette, BehaviorsLookup) {
BehaviorsLookup.ColorPickerBehavior = Marionette.Behavior.extend({

2
assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js
View File

@ -9,7 +9,7 @@ define('newsletter_editor/behaviors/ContainerDropZoneBehavior', [
'backbone.marionette',
'underscore',
'newsletter_editor/behaviors/BehaviorsLookup',
'interact.js',
'interact',
], function(Marionette, _, BehaviorsLookup, interact) {
BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({

2
assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js
View File

@ -7,7 +7,7 @@
define('newsletter_editor/behaviors/DraggableBehavior', [
'backbone.marionette',
'newsletter_editor/behaviors/BehaviorsLookup',
'interact.js',
'interact',
], function(Marionette, BehaviorsLookup, interact) {
BehaviorsLookup.DraggableBehavior = Marionette.Behavior.extend({

2
assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js
View File

@ -6,7 +6,7 @@
define('newsletter_editor/behaviors/ResizableBehavior', [
'backbone.marionette',
'newsletter_editor/behaviors/BehaviorsLookup',
'interact.js',
'interact',
], function(Marionette, BehaviorsLookup, interact) {
BehaviorsLookup.ResizableBehavior = Marionette.Behavior.extend({

1
assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
View File

@ -66,7 +66,6 @@ define('newsletter_editor/blocks/automatedLatestContent', [
},
fetchPosts: function() {
var that = this;
console.log('automatedLatestContent.fetchPosts disabled');
// TODO: Migrate to new AJAX queries
//mailpoet_post_wpi('automated_latest_content.php', this.toJSON(), function(response) {
//console.log('ALC fetched', arguments);

2
assets/js/src/newsletter_editor/blocks/posts.js
View File

@ -76,7 +76,6 @@ define('newsletter_editor/blocks/posts', [
},
fetchAvailablePosts: function() {
var that = this;
console.log('posts.fetchAvailablePosts disabled');
// TODO: Move this logic to new AJAX query format
//mailpoet_post_wpi('posts.php', this.toJSON(), function(response) {
//console.log('Posts fetched', arguments);
@ -112,7 +111,6 @@ define('newsletter_editor/blocks/posts', [
if (data.posts.length === 0) return;
console.log('posts._insertSelectedPosts disabled');
// TODO: Move query logic to new AJAX format
//mailpoet_post_wpi('automated_latest_content.php', data, function(response) {
//console.log('Available posts fetched', arguments);

1
assets/js/src/newsletter_editor/components/save.js
View File

@ -16,7 +16,6 @@ define('newsletter_editor/components/save', [
// save newsletter
console.log('save disabled');
// TODO: Migrate logic to new AJAX format
//mailpoet_post_wpi('newsletter_save.php', json, function(response) {
//if(response.success !== undefined && response.success === true) {

1
assets/js/src/newsletter_editor/components/sidebar.js
View File

@ -220,7 +220,6 @@ define('newsletter_editor/components/sidebar', [
// send test email
MailPoet.Modal.loading(true);
console.log('sendPreview disabled');
// TODO: Migrate logic to new AJAX format
//mailpoet_post_wpi('newsletter_preview.php', data, function(response) {
//if(response.success !== undefined && response.success === true) {

28
tests/javascript/loadHelpers.js Normal file
View File

@ -0,0 +1,28 @@
var fs = require('fs');
module.exports = {
loadFileToContainer: function (path, window, containerTagName, options) {
var contents = fs.readFileSync(path),
container = window.document.createElement(containerTagName);
options = options || {};
container.innerHTML = contents;
if (options.type) {
container.type = options.type;
}
if (options.id) {
container.id = options.id;
}
global.window.document.body.appendChild(container);
},
loadScript: function (scriptPath, window, options) {
this.loadFileToContainer(scriptPath, window, 'script', options);
},
loadTemplate: function (path, window, options) {
var w = window || global.window;
options = options || {};
options.type = "text/x-handlebars-template";
this.loadScript("views/newsletter/templates/" + path, w, options);
},
};

175
tests/javascript/mochaTestHelper.js
View File

@ -27,4 +27,179 @@ if (!global.document || !global.window) {
};
}
global.testHelpers = require('./loadHelpers.js');
global.$ = global.jQuery = global.window.jQuery = require('jquery');
testHelpers.loadScript('tests/javascript/testBundles/vendor.js', global.window);
global.Handlebars = global.window.Handlebars;
// Stub out interact.js
global.interact = function () {
return {
draggable: global.interact,
restrict: global.interact,
resizable: global.interact,
on: global.interact,
dropzone: global.interact,
preventDefault: global.interact,
};
};
jQuery.fn.spectrum = global.spectrum = function() { return this; };
jQuery.fn.stick_in_parent = function() { return this; };
// Add global stubs for convenience
// TODO: Extract those to a separate file
global.stubChannel = function (EditorApplication, returnObject) {
EditorApplication.getChannel = sinon.stub().returns(_.defaults(returnObject || {}, {
trigger: function () {
},
on: function () {
},
}));
};
global.stubConfig = function (EditorApplication, config) {
config = config || {};
EditorApplication.getConfig = sinon.stub().returns(new Backbone.SuperModel(config));
};
global.stubAvailableStyles = function (EditorApplication, styles) {
styles = styles || {};
EditorApplication.getAvailableStyles = sinon.stub().returns(new Backbone.SuperModel(styles));
};
testHelpers.loadTemplate('blocks/base/toolsGeneric.hbs', window, {id: 'newsletter_editor_template_tools_generic'});
testHelpers.loadTemplate('blocks/automatedLatestContent/block.hbs', window, {id: 'newsletter_editor_template_automated_latest_content_block'});
testHelpers.loadTemplate('blocks/automatedLatestContent/widget.hbs', window, {id: 'newsletter_editor_template_automated_latest_content_widget'});
testHelpers.loadTemplate('blocks/automatedLatestContent/settings.hbs', window, {id: 'newsletter_editor_template_automated_latest_content_settings'});
testHelpers.loadTemplate('blocks/button/block.hbs', window, {id: 'newsletter_editor_template_button_block'});
testHelpers.loadTemplate('blocks/button/widget.hbs', window, {id: 'newsletter_editor_template_button_widget'});
testHelpers.loadTemplate('blocks/button/settings.hbs', window, {id: 'newsletter_editor_template_button_settings'});
testHelpers.loadTemplate('blocks/container/block.hbs', window, {id: 'newsletter_editor_template_container_block'});
testHelpers.loadTemplate('blocks/container/emptyBlock.hbs', window, {id: 'newsletter_editor_template_container_block_empty'});
testHelpers.loadTemplate('blocks/container/oneColumnLayoutWidget.hbs', window, {id: 'newsletter_editor_template_container_one_column_widget'});
testHelpers.loadTemplate('blocks/container/twoColumnLayoutWidget.hbs', window, {id: 'newsletter_editor_template_container_two_column_widget'});
testHelpers.loadTemplate('blocks/container/threeColumnLayoutWidget.hbs', window, {id: 'newsletter_editor_template_container_three_column_widget'});
testHelpers.loadTemplate('blocks/container/settings.hbs', window, {id: 'newsletter_editor_template_container_settings'});
testHelpers.loadTemplate('blocks/divider/block.hbs', window, {id: 'newsletter_editor_template_divider_block'});
testHelpers.loadTemplate('blocks/divider/widget.hbs', window, {id: 'newsletter_editor_template_divider_widget'});
testHelpers.loadTemplate('blocks/divider/settings.hbs', window, {id: 'newsletter_editor_template_divider_settings'});
testHelpers.loadTemplate('blocks/footer/block.hbs', window, {id: 'newsletter_editor_template_footer_block'});
testHelpers.loadTemplate('blocks/footer/widget.hbs', window, {id: 'newsletter_editor_template_footer_widget'});
testHelpers.loadTemplate('blocks/footer/settings.hbs', window, {id: 'newsletter_editor_template_footer_settings'});
testHelpers.loadTemplate('blocks/header/block.hbs', window, {id: 'newsletter_editor_template_header_block'});
testHelpers.loadTemplate('blocks/header/widget.hbs', window, {id: 'newsletter_editor_template_header_widget'});
testHelpers.loadTemplate('blocks/header/settings.hbs', window, {id: 'newsletter_editor_template_header_settings'});
testHelpers.loadTemplate('blocks/image/block.hbs', window, {id: 'newsletter_editor_template_image_block'});
testHelpers.loadTemplate('blocks/image/widget.hbs', window, {id: 'newsletter_editor_template_image_widget'});
testHelpers.loadTemplate('blocks/image/settings.hbs', window, {id: 'newsletter_editor_template_image_settings'});
testHelpers.loadTemplate('blocks/posts/block.hbs', window, {id: 'newsletter_editor_template_posts_block'});
testHelpers.loadTemplate('blocks/posts/widget.hbs', window, {id: 'newsletter_editor_template_posts_widget'});
testHelpers.loadTemplate('blocks/posts/settings.hbs', window, {id: 'newsletter_editor_template_posts_settings'});
testHelpers.loadTemplate('blocks/posts/settingsDisplayOptions.hbs', window, {id: 'newsletter_editor_template_posts_settings_display_options'});
testHelpers.loadTemplate('blocks/posts/settingsSelection.hbs', window, {id: 'newsletter_editor_template_posts_settings_selection'});
testHelpers.loadTemplate('blocks/posts/settingsSelectionEmpty.hbs', window, {id: 'newsletter_editor_template_posts_settings_selection_empty'});
testHelpers.loadTemplate('blocks/posts/settingsSinglePost.hbs', window, {id: 'newsletter_editor_template_posts_settings_single_post'});
testHelpers.loadTemplate('blocks/social/block.hbs', window, {id: 'newsletter_editor_template_social_block'});
testHelpers.loadTemplate('blocks/social/blockIcon.hbs', window, {id: 'newsletter_editor_template_social_block_icon'});
testHelpers.loadTemplate('blocks/social/widget.hbs', window, {id: 'newsletter_editor_template_social_widget'});
testHelpers.loadTemplate('blocks/social/settings.hbs', window, {id: 'newsletter_editor_template_social_settings'});
testHelpers.loadTemplate('blocks/social/settingsIcon.hbs', window, {id: 'newsletter_editor_template_social_settings_icon'});
testHelpers.loadTemplate('blocks/social/settingsIconSelector.hbs', window, {id: 'newsletter_editor_template_social_settings_icon_selector'});
testHelpers.loadTemplate('blocks/social/settingsStyles.hbs', window, {id: 'newsletter_editor_template_social_settings_styles'});
testHelpers.loadTemplate('blocks/spacer/block.hbs', window, {id: 'newsletter_editor_template_spacer_block'});
testHelpers.loadTemplate('blocks/spacer/widget.hbs', window, {id: 'newsletter_editor_template_spacer_widget'});
testHelpers.loadTemplate('blocks/spacer/settings.hbs', window, {id: 'newsletter_editor_template_spacer_settings'});
testHelpers.loadTemplate('blocks/text/block.hbs', window, {id: 'newsletter_editor_template_text_block'});
testHelpers.loadTemplate('blocks/text/widget.hbs', window, {id: 'newsletter_editor_template_text_widget'});
testHelpers.loadTemplate('blocks/text/settings.hbs', window, {id: 'newsletter_editor_template_text_settings'});
testHelpers.loadTemplate('components/heading.hbs', window, {id: 'newsletter_editor_template_heading'});
testHelpers.loadTemplate('components/save.hbs', window, {id: 'newsletter_editor_template_save'});
testHelpers.loadTemplate('components/styles.hbs', window, {id: 'newsletter_editor_template_styles'});
testHelpers.loadTemplate('components/sidebar/sidebar.hbs', window, {id: 'newsletter_editor_template_sidebar'});
testHelpers.loadTemplate('components/sidebar/content.hbs', window, {id: 'newsletter_editor_template_sidebar_content'});
testHelpers.loadTemplate('components/sidebar/layout.hbs', window, {id: 'newsletter_editor_template_sidebar_layout'});
testHelpers.loadTemplate('components/sidebar/preview.hbs', window, {id: 'newsletter_editor_template_sidebar_preview'});
testHelpers.loadTemplate('components/sidebar/styles.hbs', window, {id: 'newsletter_editor_template_sidebar_styles'});
global.templates = {
styles: Handlebars.compile(jQuery('#newsletter_editor_template_styles').html()),
save: Handlebars.compile(jQuery('#newsletter_editor_template_save').html()),
heading: Handlebars.compile(jQuery('#newsletter_editor_template_heading').html()),
sidebar: Handlebars.compile(jQuery('#newsletter_editor_template_sidebar').html()),
sidebarContent: Handlebars.compile(jQuery('#newsletter_editor_template_sidebar_content').html()),
sidebarLayout: Handlebars.compile(jQuery('#newsletter_editor_template_sidebar_layout').html()),
sidebarStyles: Handlebars.compile(jQuery('#newsletter_editor_template_sidebar_styles').html()),
sidebarPreview: Handlebars.compile(jQuery('#newsletter_editor_template_sidebar_preview').html()),
genericBlockTools: Handlebars.compile(jQuery('#newsletter_editor_template_tools_generic').html()),
containerBlock: Handlebars.compile(jQuery('#newsletter_editor_template_container_block').html()),
containerEmpty: Handlebars.compile(jQuery('#newsletter_editor_template_container_block_empty').html()),
oneColumnLayoutInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_container_one_column_widget').html()),
twoColumnLayoutInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_container_two_column_widget').html()),
threeColumnLayoutInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_container_three_column_widget').html()),
containerBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_container_settings').html()),
buttonBlock: Handlebars.compile(jQuery('#newsletter_editor_template_button_block').html()),
buttonInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_button_widget').html()),
buttonBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_button_settings').html()),
dividerBlock: Handlebars.compile(jQuery('#newsletter_editor_template_divider_block').html()),
dividerInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_divider_widget').html()),
dividerBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_divider_settings').html()),
footerBlock: Handlebars.compile(jQuery('#newsletter_editor_template_footer_block').html()),
footerInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_footer_widget').html()),
footerBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_footer_settings').html()),
headerBlock: Handlebars.compile(jQuery('#newsletter_editor_template_header_block').html()),
headerInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_header_widget').html()),
headerBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_header_settings').html()),
imageBlock: Handlebars.compile(jQuery('#newsletter_editor_template_image_block').html()),
imageInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_image_widget').html()),
imageBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_image_settings').html()),
socialBlock: Handlebars.compile(jQuery('#newsletter_editor_template_social_block').html()),
socialIconBlock: Handlebars.compile(jQuery('#newsletter_editor_template_social_block_icon').html()),
socialInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_social_widget').html()),
socialBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_social_settings').html()),
socialSettingsIconSelector: Handlebars.compile(jQuery('#newsletter_editor_template_social_settings_icon_selector').html()),
socialSettingsIcon: Handlebars.compile(jQuery('#newsletter_editor_template_social_settings_icon').html()),
socialSettingsStyles: Handlebars.compile(jQuery('#newsletter_editor_template_social_settings_styles').html()),
spacerBlock: Handlebars.compile(jQuery('#newsletter_editor_template_spacer_block').html()),
spacerInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_spacer_widget').html()),
spacerBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_spacer_settings').html()),
automatedLatestContentBlock: Handlebars.compile(jQuery('#newsletter_editor_template_automated_latest_content_block').html()),
automatedLatestContentInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_automated_latest_content_widget').html()),
automatedLatestContentBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_automated_latest_content_settings').html()),
postsBlock: Handlebars.compile(jQuery('#newsletter_editor_template_posts_block').html()),
postsInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_posts_widget').html()),
postsBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_posts_settings').html()),
postSelectionPostsBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_posts_settings_selection').html()),
emptyPostPostsBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_posts_settings_selection_empty').html()),
singlePostPostsBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_posts_settings_single_post').html()),
displayOptionsPostsBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_posts_settings_display_options').html()),
textBlock: Handlebars.compile(jQuery('#newsletter_editor_template_text_block').html()),
textInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_text_widget').html()),
textBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_text_settings').html()),
};

673
tests/javascript/newsletter_editor/blocks/automatedLatestContent.spec.js
View File

@ -1,394 +1,401 @@
describe('Automated latest content', function () {
describe('model', function () {
var model;
define('test/newsletter_editor/blocks/automatedLatestContent', [
'newsletter_editor/App',
'newsletter_editor/blocks/automatedLatestContent'
], function(EditorApplication) {
beforeEach(function () {
global.stubChannel();
global.stubConfig();
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.SuperModel);
global.mailpoet_post_wpi = sinon.stub();
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
});
describe('Automated latest content', function () {
describe('model', function () {
var model;
afterEach(function () {
delete EditorApplication.getChannel;
});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.SuperModel);
global.mailpoet_post_wpi = sinon.stub();
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
});
it('has automatedLatestContent type', function () {
expect(model.get('type')).to.equal('automatedLatestContent');
});
afterEach(function () {
delete EditorApplication.getChannel;
});
it('has post amount limit', function () {
expect(model.get('amount')).to.match(/^\d+$/);
});
it('has automatedLatestContent type', function () {
expect(model.get('type')).to.equal('automatedLatestContent');
});
it('has post type filter', function () {
expect(model.get('contentType')).to.match(/^(post|page|mailpoet_page)$/);
});
it('has post amount limit', function () {
expect(model.get('amount')).to.match(/^\d+$/);
});
it('has terms filter', function () {
expect(model.get('terms')).to.have.length(0);
});
it('has post type filter', function () {
expect(model.get('contentType')).to.match(/^(post|page|mailpoet_page)$/);
});
it('has inclusion filter', function () {
expect(model.get('inclusionType')).to.match(/^(include|exclude)$/);
});
it('has terms filter', function () {
expect(model.get('terms')).to.have.length(0);
});
it('has display type', function () {
expect(model.get('displayType')).to.match(/^(excerpt|full|titleOnly)$/);
});
it('has inclusion filter', function () {
expect(model.get('inclusionType')).to.match(/^(include|exclude)$/);
});
it('has title heading format', function () {
expect(model.get('titleFormat')).to.match(/^(h1|h2|h3|ul)$/);
});
it('has display type', function () {
expect(model.get('displayType')).to.match(/^(excerpt|full|titleOnly)$/);
});
it('has title position', function () {
expect(model.get('titlePosition')).to.match(/^(inTextBlock|aboveBlock)$/);
});
it('has title heading format', function () {
expect(model.get('titleFormat')).to.match(/^(h1|h2|h3|ul)$/);
});
it('has title alignment', function () {
expect(model.get('titleAlignment')).to.match(/^(left|center|right)$/);
});
it('has title position', function () {
expect(model.get('titlePosition')).to.match(/^(inTextBlock|aboveBlock)$/);
});
it('optionally has title as link', function () {
expect(model.get('titleIsLink')).to.be.a('boolean');
});
it('has title alignment', function () {
expect(model.get('titleAlignment')).to.match(/^(left|center|right)$/);
});
it('has image width', function () {
expect(model.get('imagePadded')).to.be.a('boolean');
});
it('optionally has title as link', function () {
expect(model.get('titleIsLink')).to.be.a('boolean');
});
it('has an option to display author', function () {
expect(model.get('showAuthor')).to.match(/^(no|aboveText|belowText)$/);
});
it('has image width', function () {
expect(model.get('imagePadded')).to.be.a('boolean');
});
it('has text preceding author', function () {
expect(model.get('authorPrecededBy')).to.be.a('string');
});
it('has an option to display author', function () {
expect(model.get('showAuthor')).to.match(/^(no|aboveText|belowText)$/);
});
it('has an option to display categories', function () {
expect(model.get('showCategories')).to.match(/^(no|aboveText|belowText)$/);
});
it('has text preceding author', function () {
expect(model.get('authorPrecededBy')).to.be.a('string');
});
it('has text preceding categories', function () {
expect(model.get('categoriesPrecededBy')).to.be.a('string');
});
it('has an option to display categories', function () {
expect(model.get('showCategories')).to.match(/^(no|aboveText|belowText)$/);
});
it('has a link or a button type for read more', function () {
expect(model.get('readMoreType')).to.match(/^(link|button)$/);
});
it('has text preceding categories', function () {
expect(model.get('categoriesPrecededBy')).to.be.a('string');
});
it('has read more text', function () {
expect(model.get('readMoreText')).to.be.a('string');
});
it('has a link or a button type for read more', function () {
expect(model.get('readMoreType')).to.match(/^(link|button)$/);
});
it('has a read more button', function () {
expect(model.get('readMoreButton')).to.be.instanceof(Backbone.Model);
});
it('has read more text', function () {
expect(model.get('readMoreText')).to.be.a('string');
});
it('has sorting', function () {
expect(model.get('sortBy')).to.match(/^(newest|oldest)$/);
});
it('has a read more button', function () {
expect(model.get('readMoreButton')).to.be.instanceof(Backbone.Model);
});
it('has an option to display divider', function () {
expect(model.get('showDivider')).to.be.a('boolean');
});
it('has sorting', function () {
expect(model.get('sortBy')).to.match(/^(newest|oldest)$/);
});
it('has a divider', function () {
expect(model.get('divider')).to.be.instanceof(Backbone.Model);
});
it('has an option to display divider', function () {
expect(model.get('showDivider')).to.be.a('boolean');
});
it("uses defaults from config when they are set", function () {
global.stubConfig({
blockDefaults: {
automatedLatestContent: {
amount: '17',
contentType: 'mailpoet_page', // 'post'|'page'|'mailpoet_page'
inclusionType: 'exclude', // 'include'|'exclude'
displayType: 'full', // 'excerpt'|'full'|'titleOnly'
titleFormat: 'h3', // 'h1'|'h2'|'h3'|'ul'
titlePosition: 'aboveBlock', // 'inTextBlock'|'aboveBlock',
titleAlignment: 'right', // 'left'|'center'|'right'
titleIsLink: true, // false|true
imagePadded: false, // true|false
showAuthor: 'belowText', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Custom config author preceded by',
showCategories: 'belowText', // 'no'|'aboveText'|'belowText'
categoriesPrecededBy: 'Custom config categories preceded by',
readMoreType: 'button', // 'link'|'button'
readMoreText: 'Custom Config read more text',
readMoreButton: {
text: 'Custom config read more',
url: '[postLink]',
styles: {
block: {
backgroundColor: '#123456',
borderColor: '#234567',
},
link: {
fontColor: '#345678',
fontFamily: 'Tahoma',
fontSize: '37px',
},
},
},
sortBy: 'oldest', // 'newest'|'oldest',
showDivider: true, // true|false
divider: {
src: 'http://example.org/someConfigDividerImage.png',
styles: {
block: {
backgroundColor: '#456789',
padding: '38px',
},
},
},
},
},
});
var model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
it('has a divider', function () {
expect(model.get('divider')).to.be.instanceof(Backbone.Model);
});
expect(model.get('amount')).to.equal('17');
expect(model.get('contentType')).to.equal('mailpoet_page');
expect(model.get('inclusionType')).to.equal('exclude');
expect(model.get('displayType')).to.equal('full');
expect(model.get('titleFormat')).to.equal('h3');
expect(model.get('titlePosition')).to.equal('aboveBlock');
expect(model.get('titleAlignment')).to.equal('right');
expect(model.get('titleIsLink')).to.equal(true);
expect(model.get('imagePadded')).to.equal(false);
expect(model.get('showAuthor')).to.equal('belowText');
expect(model.get('authorPrecededBy')).to.equal('Custom config author preceded by');
expect(model.get('showCategories')).to.equal('belowText');
expect(model.get('categoriesPrecededBy')).to.equal('Custom config categories preceded by');
expect(model.get('readMoreType')).to.equal('button');
expect(model.get('readMoreText')).to.equal('Custom Config read more text');
expect(model.get('readMoreButton.text')).to.equal('Custom config read more');
expect(model.get('readMoreButton.url')).to.equal('[postLink]');
expect(model.get('readMoreButton.styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('readMoreButton.styles.block.borderColor')).to.equal('#234567');
expect(model.get('readMoreButton.styles.link.fontColor')).to.equal('#345678');
expect(model.get('readMoreButton.styles.link.fontFamily')).to.equal('Tahoma');
expect(model.get('readMoreButton.styles.link.fontSize')).to.equal('37px');
expect(model.get('sortBy')).to.equal('oldest');
expect(model.get('showDivider')).to.equal(true);
expect(model.get('divider.src')).to.equal('http://example.org/someConfigDividerImage.png');
expect(model.get('divider.styles.block.backgroundColor')).to.equal('#456789');
expect(model.get('divider.styles.block.padding')).to.equal('38px');
});
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
automatedLatestContent: {
amount: '17',
contentType: 'mailpoet_page', // 'post'|'page'|'mailpoet_page'
inclusionType: 'exclude', // 'include'|'exclude'
displayType: 'full', // 'excerpt'|'full'|'titleOnly'
titleFormat: 'h3', // 'h1'|'h2'|'h3'|'ul'
titlePosition: 'aboveBlock', // 'inTextBlock'|'aboveBlock',
titleAlignment: 'right', // 'left'|'center'|'right'
titleIsLink: true, // false|true
imagePadded: false, // true|false
showAuthor: 'belowText', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Custom config author preceded by',
showCategories: 'belowText', // 'no'|'aboveText'|'belowText'
categoriesPrecededBy: 'Custom config categories preceded by',
readMoreType: 'button', // 'link'|'button'
readMoreText: 'Custom Config read more text',
readMoreButton: {
text: 'Custom config read more',
url: '[postLink]',
styles: {
block: {
backgroundColor: '#123456',
borderColor: '#234567',
},
link: {
fontColor: '#345678',
fontFamily: 'Tahoma',
fontSize: '37px',
},
},
},
sortBy: 'oldest', // 'newest'|'oldest',
showDivider: true, // true|false
divider: {
src: 'http://example.org/someConfigDividerImage.png',
styles: {
block: {
backgroundColor: '#456789',
padding: '38px',
},
},
},
},
},
});
var model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
describe('block view', function () {
var model, view;
expect(model.get('amount')).to.equal('17');
expect(model.get('contentType')).to.equal('mailpoet_page');
expect(model.get('inclusionType')).to.equal('exclude');
expect(model.get('displayType')).to.equal('full');
expect(model.get('titleFormat')).to.equal('h3');
expect(model.get('titlePosition')).to.equal('aboveBlock');
expect(model.get('titleAlignment')).to.equal('right');
expect(model.get('titleIsLink')).to.equal(true);
expect(model.get('imagePadded')).to.equal(false);
expect(model.get('showAuthor')).to.equal('belowText');
expect(model.get('authorPrecededBy')).to.equal('Custom config author preceded by');
expect(model.get('showCategories')).to.equal('belowText');
expect(model.get('categoriesPrecededBy')).to.equal('Custom config categories preceded by');
expect(model.get('readMoreType')).to.equal('button');
expect(model.get('readMoreText')).to.equal('Custom Config read more text');
expect(model.get('readMoreButton.text')).to.equal('Custom config read more');
expect(model.get('readMoreButton.url')).to.equal('[postLink]');
expect(model.get('readMoreButton.styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('readMoreButton.styles.block.borderColor')).to.equal('#234567');
expect(model.get('readMoreButton.styles.link.fontColor')).to.equal('#345678');
expect(model.get('readMoreButton.styles.link.fontFamily')).to.equal('Tahoma');
expect(model.get('readMoreButton.styles.link.fontSize')).to.equal('37px');
expect(model.get('sortBy')).to.equal('oldest');
expect(model.get('showDivider')).to.equal(true);
expect(model.get('divider.src')).to.equal('http://example.org/someConfigDividerImage.png');
expect(model.get('divider.styles.block.backgroundColor')).to.equal('#456789');
expect(model.get('divider.styles.block.padding')).to.equal('38px');
});
});
beforeEach(function () {
global.stubChannel();
global.stubConfig();
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
EditorApplication.getBlockTypeView = sinon.stub().returns(Backbone.View);
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockView)({model: model});
});
describe('block view', function () {
var model, view;
afterEach(function () {
delete EditorApplication.getChannel;
});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
EditorApplication.getBlockTypeView = sinon.stub().returns(Backbone.View);
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
});
afterEach(function () {
delete EditorApplication.getChannel;
});
describe('block settings view', function () {
var model, view;
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
});
before(function () {
global.stubChannel();
global.stubConfig({
blockDefaults: {},
});
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
EditorApplication.getBlockTypeView = sinon.stub().returns(Backbone.View);
});
describe('block settings view', function () {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockSettingsView)({model: model});
});
before(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
EditorApplication.getBlockTypeView = sinon.stub().returns(Backbone.View);
});
after(function () {
delete EditorApplication.getChannel;
});
beforeEach(function() {
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockSettingsView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
});
after(function () {
delete EditorApplication.getChannel;
});
describe('once rendered', function () {
beforeEach(function() {
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockSettingsView)({model: model});
view.render();
});
it('renders', function () {
expect(view.render).to.not.throw();
});
it('changes the model if post amount changes', function () {
var newValue = '11';
view.$('.mailpoet_automated_latest_content_show_amount').val(newValue).keyup();
expect(model.get('amount')).to.equal(newValue);
});
describe('once rendered', function () {
beforeEach(function() {
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockSettingsView)({model: model});
view.render();
});
it('changes the model if post type changes', function () {
var newValue = 'mailpoet_page';
view.$('.mailpoet_automated_latest_content_content_type').val(newValue).change();
expect(model.get('contentType')).to.equal(newValue);
});
it('changes the model if post amount changes', function () {
var newValue = '11';
view.$('.mailpoet_automated_latest_content_show_amount').val(newValue).keyup();
expect(model.get('amount')).to.equal(newValue);
});
it('changes the model if inclusion type changes', function () {
var newValue = 'exclude';
view.$('.mailpoet_automated_latest_content_include_or_exclude').val(newValue).change();
expect(model.get('inclusionType')).to.equal(newValue);
});
it('changes the model if post type changes', function () {
var newValue = 'mailpoet_page';
view.$('.mailpoet_automated_latest_content_content_type').val(newValue).change();
expect(model.get('contentType')).to.equal(newValue);
});
it('changes the model if display type changes', function () {
var newValue = 'full';
view.$('.mailpoet_automated_latest_content_display_type').val(newValue).change();
expect(model.get('displayType')).to.equal(newValue);
});
it('changes the model if inclusion type changes', function () {
var newValue = 'exclude';
view.$('.mailpoet_automated_latest_content_include_or_exclude').val(newValue).change();
expect(model.get('inclusionType')).to.equal(newValue);
});
it('changes the model if title format changes', function () {
var newValue = 'h3';
view.$('.mailpoet_automated_latest_content_title_format').val(newValue).change();
expect(model.get('titleFormat')).to.equal(newValue);
});
it('changes the model if display type changes', function () {
var newValue = 'full';
view.$('.mailpoet_automated_latest_content_display_type').val(newValue).change();
expect(model.get('displayType')).to.equal(newValue);
});
it('changes the model if title position changes', function () {
var newValue = 'aboveBlock';
view.$('.mailpoet_automated_latest_content_title_position').val(newValue).change();
expect(model.get('titlePosition')).to.equal(newValue);
});
it('changes the model if title format changes', function () {
var newValue = 'h3';
view.$('.mailpoet_automated_latest_content_title_format').val(newValue).change();
expect(model.get('titleFormat')).to.equal(newValue);
});
it('changes the model if title alignment changes', function () {
var newValue = 'right';
view.$('.mailpoet_automated_latest_content_title_alignment').val(newValue).change();
expect(model.get('titleAlignment')).to.equal(newValue);
});
it('changes the model if title position changes', function () {
var newValue = 'aboveBlock';
view.$('.mailpoet_automated_latest_content_title_position').val(newValue).change();
expect(model.get('titlePosition')).to.equal(newValue);
});
it('changes the model if title link changes', function () {
var newValue = true;
view.$('.mailpoet_automated_latest_content_title_as_links').val(newValue).change();
expect(model.get('titleIsLink')).to.equal(newValue);
});
it('changes the model if title alignment changes', function () {
var newValue = 'right';
view.$('.mailpoet_automated_latest_content_title_alignment').val(newValue).change();
expect(model.get('titleAlignment')).to.equal(newValue);
});
it('changes the model if image alignment changes', function () {
var newValue = false;
view.$('.mailpoet_automated_latest_content_image_padded').val(newValue).change();
expect(model.get('imagePadded')).to.equal(newValue);
});
it('changes the model if title link changes', function () {
var newValue = true;
view.$('.mailpoet_automated_latest_content_title_as_links').val(newValue).change();
expect(model.get('titleIsLink')).to.equal(newValue);
});
it('changes the model if show author changes', function () {
var newValue = 'belowText';
view.$('.mailpoet_automated_latest_content_show_author').val(newValue).change();
expect(model.get('showAuthor')).to.equal(newValue);
});
it('changes the model if image alignment changes', function () {
var newValue = false;
view.$('.mailpoet_automated_latest_content_image_padded').val(newValue).change();
expect(model.get('imagePadded')).to.equal(newValue);
});
it('changes the model if author preceded by changes', function () {
var newValue = 'New author preceded by test';
view.$('.mailpoet_automated_latest_content_author_preceded_by').val(newValue).keyup();
expect(model.get('authorPrecededBy')).to.equal(newValue);
});
it('changes the model if show author changes', function () {
var newValue = 'belowText';
view.$('.mailpoet_automated_latest_content_show_author').val(newValue).change();
expect(model.get('showAuthor')).to.equal(newValue);
});
it('changes the model if show categories changes', function () {
var newValue = 'belowText';
view.$('.mailpoet_automated_latest_content_show_categories').val(newValue).change();
expect(model.get('showCategories')).to.equal(newValue);
});
it('changes the model if author preceded by changes', function () {
var newValue = 'New author preceded by test';
view.$('.mailpoet_automated_latest_content_author_preceded_by').val(newValue).keyup();
expect(model.get('authorPrecededBy')).to.equal(newValue);
});
it('changes the model if categories preceded by changes', function () {
var newValue = 'New categories preceded by test';
view.$('.mailpoet_automated_latest_content_categories').val(newValue).keyup();
expect(model.get('categoriesPrecededBy')).to.equal(newValue);
});
it('changes the model if show categories changes', function () {
var newValue = 'belowText';
view.$('.mailpoet_automated_latest_content_show_categories').val(newValue).change();
expect(model.get('showCategories')).to.equal(newValue);
});
it('changes the model if read more button type changes', function () {
var newValue = 'link';
view.$('.mailpoet_automated_latest_content_read_more_type').val(newValue).change();
expect(model.get('readMoreType')).to.equal(newValue);
});
it('changes the model if categories preceded by changes', function () {
var newValue = 'New categories preceded by test';
view.$('.mailpoet_automated_latest_content_categories').val(newValue).keyup();
expect(model.get('categoriesPrecededBy')).to.equal(newValue);
});
it('changes the model if read more text changes', function () {
var newValue = 'New read more text';
view.$('.mailpoet_automated_latest_content_read_more_text').val(newValue).keyup();
expect(model.get('readMoreText')).to.equal(newValue);
});
it('changes the model if read more button type changes', function () {
var newValue = 'link';
view.$('.mailpoet_automated_latest_content_read_more_type').val(newValue).change();
expect(model.get('readMoreType')).to.equal(newValue);
});
it('changes the model if sort by changes', function () {
var newValue = 'oldest';
view.$('.mailpoet_automated_latest_content_sort_by').val(newValue).change();
expect(model.get('sortBy')).to.equal(newValue);
});
it('changes the model if read more text changes', function () {
var newValue = 'New read more text';
view.$('.mailpoet_automated_latest_content_read_more_text').val(newValue).keyup();
expect(model.get('readMoreText')).to.equal(newValue);
});
it('changes the model if show divider changes', function () {
var newValue = true;
view.$('.mailpoet_automated_latest_content_show_divider').val(newValue).change();
expect(model.get('showDivider')).to.equal(newValue);
});
it('changes the model if sort by changes', function () {
var newValue = 'oldest';
view.$('.mailpoet_automated_latest_content_sort_by').val(newValue).change();
expect(model.get('sortBy')).to.equal(newValue);
});
describe('when "title only" display type is selected', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockSettingsView)({model: model});
view.render();
view.$('.mailpoet_automated_latest_content_display_type').val('titleOnly').change();
});
it('changes the model if show divider changes', function () {
var newValue = true;
view.$('.mailpoet_automated_latest_content_show_divider').val(newValue).change();
expect(model.get('showDivider')).to.equal(newValue);
});
it('shows "title as list" option', function () {
expect(view.$('.mailpoet_automated_latest_content_title_as_list')).to.not.have.$class('mailpoet_hidden');
});
describe('when "title only" display type is selected', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockSettingsView)({model: model});
view.render();
view.$('.mailpoet_automated_latest_content_display_type').val('titleOnly').change();
});
describe('when "title as list" is selected', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockSettingsView)({model: model});
view.render();
view.$('.mailpoet_automated_latest_content_display_type').val('titleOnly').change();
view.$('.mailpoet_automated_latest_content_title_format').val('ul').change();
});
it('shows "title as list" option', function () {
expect(view.$('.mailpoet_automated_latest_content_title_as_list')).to.not.have.$class('mailpoet_hidden');
});
describe('"title is link" option', function () {
it('is hidden', function () {
expect(view.$('.mailpoet_automated_latest_content_title_as_link')).to.have.$class('mailpoet_hidden');
});
describe('when "title as list" is selected', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockModel)();
view = new (EditorApplication.module('blocks.automatedLatestContent').AutomatedLatestContentBlockSettingsView)({model: model});
view.render();
view.$('.mailpoet_automated_latest_content_display_type').val('titleOnly').change();
view.$('.mailpoet_automated_latest_content_title_format').val('ul').change();
});
it('is set to "yes"', function() {
expect(model.get('titleIsLink')).to.equal(true);
});
});
});
describe('"title is link" option', function () {
it('is hidden', function () {
expect(view.$('.mailpoet_automated_latest_content_title_as_link')).to.have.$class('mailpoet_hidden');
});
describe('when "title as list" is deselected', function() {
before(function() {
view.$('.mailpoet_automated_latest_content_title_format').val('ul').change();
view.$('.mailpoet_automated_latest_content_title_format').val('h3').change();
});
it('is set to "yes"', function() {
expect(model.get('titleIsLink')).to.equal(true);
});
});
});
describe('"title is link" option', function () {
it('is visible', function () {
expect(view.$('.mailpoet_automated_latest_content_title_as_link')).to.not.have.$class('mailpoet_hidden');
});
});
});
});
describe('when "title as list" is deselected', function() {
before(function() {
view.$('.mailpoet_automated_latest_content_title_format').val('ul').change();
view.$('.mailpoet_automated_latest_content_title_format').val('h3').change();
});
describe('"title is link" option', function () {
it('is visible', function () {
expect(view.$('.mailpoet_automated_latest_content_title_as_link')).to.not.have.$class('mailpoet_hidden');
});
});
});
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
it('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});

835
tests/javascript/newsletter_editor/blocks/button.spec.js
View File

@ -1,415 +1,422 @@
describe("Button", function () {
describe("model", function () {
var model;
beforeEach(function () {
global.stubChannel();
global.stubConfig({
blockDefaults: {},
});
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)();
});
afterEach(function () {
delete EditorApplication.getChannel;
});
it("has a button type", function () {
expect(model.get('type')).to.equal('button');
});
it("has a label", function () {
expect(model.get('text')).to.be.a('string');
});
it("has a url", function () {
expect(model.get('url')).to.be.a('string');
});
it("has a block background color", function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("has a block border color", function () {
expect(model.get('styles.block.borderColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("has a block border width", function () {
expect(model.get('styles.block.borderWidth')).to.match(/^\d+px$/);
});
it("has block border radius", function () {
expect(model.get('styles.block.borderRadius')).to.match(/^\d+px$/);
});
it("has block border style", function () {
expect(model.get('styles.block.borderStyle')).to.equal('solid');
});
it("has a text color", function () {
expect(model.get('styles.block.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("has a text font family", function () {
expect(model.get('styles.block.fontFamily')).to.be.a('string');
});
it("has a text size", function () {
expect(model.get('styles.block.fontSize')).to.match(/^\d+px$/);
});
it("has width", function () {
expect(model.get('styles.block.width')).to.match(/^\d+px$/);
});
it("has line height", function () {
expect(model.get('styles.block.lineHeight')).to.match(/^\d+px$/);
});
it("changes attributes with set", function () {
var newText = 'Some new text';
model.set('text', newText);
expect(model.get('text')).to.equal(newText);
});
it("triggers autosave if any attribute changes", function () {
var mock = sinon.mock().exactly(11).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
model.set('text', 'some other text');
model.set('url', 'some url');
model.set('styles.block.backgroundColor', '#123456');
model.set('styles.block.borderColor', '#234567');
model.set('styles.block.borderWidth', '3px');
model.set('styles.block.borderRadius', '8px');
model.set('styles.block.width', '400px');
model.set('styles.block.lineHeight', '100px');
model.set('styles.block.fontColor', '#345678');
model.set('styles.block.fontFamily', 'Some other style');
model.set('styles.block.fontSize', '10px');
mock.verify();
});
it("uses defaults from config when they are set", function () {
global.stubConfig({
blockDefaults: {
button: {
text: 'Some new text',
url: 'http://somenewurl.com',
styles: {
block: {
backgroundColor: '#123456',
borderColor: '#234567',
borderWidth: '11px',
borderRadius: '13px',
borderStyle: 'solid',
width: '371px',
lineHeight: '107px',
fontColor: '#345678',
fontFamily: 'Tahoma',
fontSize: '30px',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.button').ButtonBlockModel)();
expect(model.get('text')).to.equal('Some new text');
expect(model.get('url')).to.equal('http://somenewurl.com');
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('styles.block.borderColor')).to.equal('#234567');
expect(model.get('styles.block.borderWidth')).to.equal('11px');
expect(model.get('styles.block.borderRadius')).to.equal('13px');
expect(model.get('styles.block.borderStyle')).to.equal('solid');
expect(model.get('styles.block.width')).to.equal('371px');
expect(model.get('styles.block.lineHeight')).to.equal('107px');
expect(model.get('styles.block.fontColor')).to.equal('#345678');
expect(model.get('styles.block.fontFamily')).to.equal('Tahoma');
expect(model.get('styles.block.fontSize')).to.equal('30px');
});
});
describe('block view', function () {
var model;
beforeEach(function () {
global.stubChannel();
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)();
});
it('renders', function () {
var view = new (EditorApplication.module('blocks.button').ButtonBlockView)({model: model});
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_editor_button')).to.have.length(1);
});
it('rerenders when attributes change', function () {
var view = new (EditorApplication.module('blocks.button').ButtonBlockView)({model: model});
view.render();
model.set('text', 'Some new text');
expect(view.$('.mailpoet_editor_button').text()).to.equal('Some new text');
});
describe('once rendered', function () {
var model, view;
before(function () {
global.stubChannel();
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)({
text: 'Some button',
url: 'http://example.org',
styles: {
block: {
backgroundColor: '#123456',
borderColor: '#234567',
borderWidth: '7px',
borderRadius: '8px',
borderStyle: 'solid',
width: '123px',
lineHeight: '45px',
fontColor: '#345678',
fontFamily: 'Arial',
fontSize: '12px',
},
},
});
view = new (EditorApplication.module('blocks.button').ButtonBlockView)({model: model});
view.render();
});
it('has a specified text', function () {
expect(view.$('.mailpoet_editor_button').text()).to.equal(model.get('text'));
});
it('has a specified button url', function () {
expect(view.$('.mailpoet_editor_button').attr('href')).to.equal(model.get('url'));
});
it('has a specified background color', function () {
// jQuery colors appear in rgb format, not hex6
expect(view.$('.mailpoet_editor_button').css('background-color')).to.equal('rgb(18, 52, 86)');
});
it('has a specified border color', function () {
expect(view.$('.mailpoet_editor_button').css('border-color')).to.equal(model.get('styles.block.borderColor'));
});
it('has a specified border width', function () {
expect(view.$('.mailpoet_editor_button').css('border-width')).to.equal(model.get('styles.block.borderWidth'));
});
it('has a specified border radius', function () {
expect(view.$('.mailpoet_editor_button').css('border-radius')).to.equal(model.get('styles.block.borderRadius'));
});
it('has a specified border style', function () {
expect(view.$('.mailpoet_editor_button').css('border-style')).to.equal(model.get('styles.block.borderStyle'));
});
it('has a specified width', function () {
expect(view.$('.mailpoet_editor_button').css('width')).to.equal(model.get('styles.block.width'));
});
it('has a specified line height', function () {
expect(view.$('.mailpoet_editor_button').css('lineHeight')).to.equal(model.get('styles.block.lineHeight'));
});
it('has a specified font color', function () {
// jQuery colors appear in rgb format, not hex6
expect(view.$('.mailpoet_editor_button').css('color')).to.equal('rgb(52, 86, 120)');
});
it('has a specified font family', function () {
expect(view.$('.mailpoet_editor_button').css('font-family')).to.equal(model.get('styles.block.fontFamily'));
});
it('has a specified font size', function () {
expect(view.$('.mailpoet_editor_button').css('font-size')).to.equal(model.get('styles.block.fontSize'));
});
});
});
describe('block settings view', function () {
var model;
beforeEach(function () {
global.stubChannel();
global.stubAvailableStyles({
fonts: ['Arial', 'Tahoma'],
headingSizes: ['16px', '20px'],
});
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)({
type: 'button',
text: 'Some random text',
});
});
it('renders', function () {
var view = new (EditorApplication.module('blocks.button').ButtonBlockSettingsView)({model: model});
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
var model, view;
before(function() {
global.stubChannel();
global.stubConfig();
global.stubAvailableStyles({
fonts: ['Arial', 'Tahoma'],
headingSizes: ['16px', '20px'],
});
});
beforeEach(function() {
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)({
type: 'button',
text: 'Some random text',
});
view = new (EditorApplication.module('blocks.button').ButtonBlockSettingsView)({model: model});
view.render();
});
it('updates the model when text is changed', function () {
var newValue = 'something else';
view.$('.mailpoet_field_button_text').val(newValue).keyup();
expect(model.get('text')).to.equal(newValue);
});
it('updates the model when link is changed', function () {
var newValue = 'http://google.com/?q=123456';
view.$('.mailpoet_field_button_url').val(newValue).keyup();
expect(model.get('url')).to.equal(newValue);
});
it('updates the model when font color changes', function () {
var newValue = '#cccccc';
view.$('.mailpoet_field_button_font_color').val(newValue).change();
expect(model.get('styles.block.fontColor')).to.equal(newValue);
});
it('updates the model when font family changes', function () {
var newValue = 'Tahoma';
view.$('.mailpoet_field_button_font_family').val(newValue).change();
expect(model.get('styles.block.fontFamily')).to.equal(newValue);
});
it('updates the model when font size changes', function () {
var newValue = '20px';
view.$('.mailpoet_field_button_font_size').val(newValue).change();
expect(model.get('styles.block.fontSize')).to.equal(newValue);
});
it('updates the model when background color changes', function () {
var newValue = '#cccccc';
view.$('.mailpoet_field_button_background_color').val(newValue).change();
expect(model.get('styles.block.backgroundColor')).to.equal(newValue);
});
it('updates the model when border color changes', function () {
var newValue = '#cccccc';
view.$('.mailpoet_field_button_border_color').val(newValue).change();
expect(model.get('styles.block.borderColor')).to.equal(newValue);
});
it('updates the model when border width changes', function () {
view.$('.mailpoet_field_button_border_width').val('3').change();
expect(model.get('styles.block.borderWidth')).to.equal('3px');
});
it('updates the range slider when border width input changes', function () {
view.$('.mailpoet_field_button_border_width_input').val('5').keyup();
expect(view.$('.mailpoet_field_button_border_width').val()).to.equal('5');
});
it('updates the input when border width range slider changes', function () {
view.$('.mailpoet_field_button_border_width').val('4').change();
expect(view.$('.mailpoet_field_button_border_width_input').val()).to.equal('4');
});
it('updates the model when border radius changes', function () {
view.$('.mailpoet_field_button_border_radius').val('7').change();
expect(model.get('styles.block.borderRadius')).to.equal('7px');
});
it('updates the range slider when border radius input changes', function () {
view.$('.mailpoet_field_button_border_radius_input').val('7').keyup();
expect(view.$('.mailpoet_field_button_border_radius').val()).to.equal('7');
});
it('updates the input when border radius range slider changes', function () {
view.$('.mailpoet_field_button_border_radius').val('7').change();
expect(view.$('.mailpoet_field_button_border_radius_input').val()).to.equal('7');
});
it('updates the model when width changes', function () {
view.$('.mailpoet_field_button_width').val('127').change();
expect(model.get('styles.block.width')).to.equal('127px');
});
it('updates the range slider when width input changes', function () {
view.$('.mailpoet_field_button_width_input').val('127').keyup();
expect(view.$('.mailpoet_field_button_width').val()).to.equal('127');
});
it('updates the input when width range slider changes', function () {
view.$('.mailpoet_field_button_width').val('127').change();
expect(view.$('.mailpoet_field_button_width_input').val()).to.equal('127');
});
it('updates the model when line height changes', function () {
view.$('.mailpoet_field_button_line_height').val('37').change();
expect(model.get('styles.block.lineHeight')).to.equal('37px');
});
it('updates the range slider when line height input changes', function () {
view.$('.mailpoet_field_button_line_height_input').val('37').keyup();
expect(view.$('.mailpoet_field_button_line_height').val()).to.equal('37');
});
it('updates the input when line height range slider changes', function () {
view.$('.mailpoet_field_button_line_height').val('37').change();
expect(view.$('.mailpoet_field_button_line_height_input').val()).to.equal('37');
});
it('does not display link option when `hideLink` option is active', function() {
view = new (EditorApplication.module('blocks.button').ButtonBlockSettingsView)({
model: model,
renderOptions: {
hideLink: true,
},
});
view.render();
expect(view.$('.mailpoet_field_button_url').length).to.equal(0);
});
it('does not display "Apply to all" option when `hideApplyToAll` option is active', function() {
view = new (EditorApplication.module('blocks.button').ButtonBlockSettingsView)({
model: model,
renderOptions: {
hideApplyToAll: true,
},
});
view.render();
expect(view.$('.mailpoet_field_button_replace_all_styles').length).to.equal(0);
});
it('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
define('test/newsletter_editor/blocks/button', [
'newsletter_editor/App',
'newsletter_editor/blocks/button'
], function(EditorApplication) {
describe("Button", function () {
describe("model", function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)();
});
afterEach(function () {
delete EditorApplication.getChannel;
});
it("has a button type", function () {
expect(model.get('type')).to.equal('button');
});
it("has a label", function () {
expect(model.get('text')).to.be.a('string');
});
it("has a url", function () {
expect(model.get('url')).to.be.a('string');
});
it("has a block background color", function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("has a block border color", function () {
expect(model.get('styles.block.borderColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("has a block border width", function () {
expect(model.get('styles.block.borderWidth')).to.match(/^\d+px$/);
});
it("has block border radius", function () {
expect(model.get('styles.block.borderRadius')).to.match(/^\d+px$/);
});
it("has block border style", function () {
expect(model.get('styles.block.borderStyle')).to.equal('solid');
});
it("has a text color", function () {
expect(model.get('styles.block.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("has a text font family", function () {
expect(model.get('styles.block.fontFamily')).to.be.a('string');
});
it("has a text size", function () {
expect(model.get('styles.block.fontSize')).to.match(/^\d+px$/);
});
it("has width", function () {
expect(model.get('styles.block.width')).to.match(/^\d+px$/);
});
it("has line height", function () {
expect(model.get('styles.block.lineHeight')).to.match(/^\d+px$/);
});
it("changes attributes with set", function () {
var newText = 'Some new text';
model.set('text', newText);
expect(model.get('text')).to.equal(newText);
});
it("triggers autosave if any attribute changes", function () {
var mock = sinon.mock().exactly(11).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
model.set('text', 'some other text');
model.set('url', 'some url');
model.set('styles.block.backgroundColor', '#123456');
model.set('styles.block.borderColor', '#234567');
model.set('styles.block.borderWidth', '3px');
model.set('styles.block.borderRadius', '8px');
model.set('styles.block.width', '400px');
model.set('styles.block.lineHeight', '100px');
model.set('styles.block.fontColor', '#345678');
model.set('styles.block.fontFamily', 'Some other style');
model.set('styles.block.fontSize', '10px');
mock.verify();
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
button: {
text: 'Some new text',
url: 'http://somenewurl.com',
styles: {
block: {
backgroundColor: '#123456',
borderColor: '#234567',
borderWidth: '11px',
borderRadius: '13px',
borderStyle: 'solid',
width: '371px',
lineHeight: '107px',
fontColor: '#345678',
fontFamily: 'Tahoma',
fontSize: '30px',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.button').ButtonBlockModel)();
expect(model.get('text')).to.equal('Some new text');
expect(model.get('url')).to.equal('http://somenewurl.com');
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('styles.block.borderColor')).to.equal('#234567');
expect(model.get('styles.block.borderWidth')).to.equal('11px');
expect(model.get('styles.block.borderRadius')).to.equal('13px');
expect(model.get('styles.block.borderStyle')).to.equal('solid');
expect(model.get('styles.block.width')).to.equal('371px');
expect(model.get('styles.block.lineHeight')).to.equal('107px');
expect(model.get('styles.block.fontColor')).to.equal('#345678');
expect(model.get('styles.block.fontFamily')).to.equal('Tahoma');
expect(model.get('styles.block.fontSize')).to.equal('30px');
});
});
describe('block view', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)();
});
it('renders', function () {
var view = new (EditorApplication.module('blocks.button').ButtonBlockView)({model: model});
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_editor_button')).to.have.length(1);
});
it('rerenders when attributes change', function () {
var view = new (EditorApplication.module('blocks.button').ButtonBlockView)({model: model});
view.render();
model.set('text', 'Some new text');
expect(view.$('.mailpoet_editor_button').text()).to.equal('Some new text');
});
describe('once rendered', function () {
var model, view;
before(function () {
global.stubChannel(EditorApplication);
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)({
text: 'Some button',
url: 'http://example.org',
styles: {
block: {
backgroundColor: '#123456',
borderColor: '#234567',
borderWidth: '7px',
borderRadius: '8px',
borderStyle: 'solid',
width: '123px',
lineHeight: '45px',
fontColor: '#345678',
fontFamily: 'Arial',
fontSize: '12px',
},
},
});
view = new (EditorApplication.module('blocks.button').ButtonBlockView)({model: model});
view.render();
});
it('has a specified text', function () {
expect(view.$('.mailpoet_editor_button').text()).to.equal(model.get('text'));
});
it('has a specified button url', function () {
expect(view.$('.mailpoet_editor_button').attr('href')).to.equal(model.get('url'));
});
it('has a specified background color', function () {
// jQuery colors appear in rgb format, not hex6
expect(view.$('.mailpoet_editor_button').css('background-color')).to.equal('rgb(18, 52, 86)');
});
it('has a specified border color', function () {
expect(view.$('.mailpoet_editor_button').css('border-color')).to.equal(model.get('styles.block.borderColor'));
});
it('has a specified border width', function () {
expect(view.$('.mailpoet_editor_button').css('border-width')).to.equal(model.get('styles.block.borderWidth'));
});
it('has a specified border radius', function () {
expect(view.$('.mailpoet_editor_button').css('border-radius')).to.equal(model.get('styles.block.borderRadius'));
});
it('has a specified border style', function () {
expect(view.$('.mailpoet_editor_button').css('border-style')).to.equal(model.get('styles.block.borderStyle'));
});
it('has a specified width', function () {
expect(view.$('.mailpoet_editor_button').css('width')).to.equal(model.get('styles.block.width'));
});
it('has a specified line height', function () {
expect(view.$('.mailpoet_editor_button').css('lineHeight')).to.equal(model.get('styles.block.lineHeight'));
});
it('has a specified font color', function () {
// jQuery colors appear in rgb format, not hex6
expect(view.$('.mailpoet_editor_button').css('color')).to.equal('rgb(52, 86, 120)');
});
it('has a specified font family', function () {
expect(view.$('.mailpoet_editor_button').css('font-family')).to.equal(model.get('styles.block.fontFamily'));
});
it('has a specified font size', function () {
expect(view.$('.mailpoet_editor_button').css('font-size')).to.equal(model.get('styles.block.fontSize'));
});
});
});
describe('block settings view', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
headingSizes: ['16px', '20px'],
});
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)({
type: 'button',
text: 'Some random text',
});
});
it('renders', function () {
var view = new (EditorApplication.module('blocks.button').ButtonBlockSettingsView)({model: model});
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
var model, view;
before(function() {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
headingSizes: ['16px', '20px'],
});
});
beforeEach(function() {
model = new (EditorApplication.module('blocks.button').ButtonBlockModel)({
type: 'button',
text: 'Some random text',
});
view = new (EditorApplication.module('blocks.button').ButtonBlockSettingsView)({model: model});
view.render();
});
it('updates the model when text is changed', function () {
var newValue = 'something else';
view.$('.mailpoet_field_button_text').val(newValue).keyup();
expect(model.get('text')).to.equal(newValue);
});
it('updates the model when link is changed', function () {
var newValue = 'http://google.com/?q=123456';
view.$('.mailpoet_field_button_url').val(newValue).keyup();
expect(model.get('url')).to.equal(newValue);
});
it('updates the model when font color changes', function () {
var newValue = '#cccccc';
view.$('.mailpoet_field_button_font_color').val(newValue).change();
expect(model.get('styles.block.fontColor')).to.equal(newValue);
});
it('updates the model when font family changes', function () {
var newValue = 'Tahoma';
view.$('.mailpoet_field_button_font_family').val(newValue).change();
expect(model.get('styles.block.fontFamily')).to.equal(newValue);
});
it('updates the model when font size changes', function () {
var newValue = '20px';
view.$('.mailpoet_field_button_font_size').val(newValue).change();
expect(model.get('styles.block.fontSize')).to.equal(newValue);
});
it('updates the model when background color changes', function () {
var newValue = '#cccccc';
view.$('.mailpoet_field_button_background_color').val(newValue).change();
expect(model.get('styles.block.backgroundColor')).to.equal(newValue);
});
it('updates the model when border color changes', function () {
var newValue = '#cccccc';
view.$('.mailpoet_field_button_border_color').val(newValue).change();
expect(model.get('styles.block.borderColor')).to.equal(newValue);
});
it('updates the model when border width changes', function () {
view.$('.mailpoet_field_button_border_width').val('3').change();
expect(model.get('styles.block.borderWidth')).to.equal('3px');
});
it('updates the range slider when border width input changes', function () {
view.$('.mailpoet_field_button_border_width_input').val('5').keyup();
expect(view.$('.mailpoet_field_button_border_width').val()).to.equal('5');
});
it('updates the input when border width range slider changes', function () {
view.$('.mailpoet_field_button_border_width').val('4').change();
expect(view.$('.mailpoet_field_button_border_width_input').val()).to.equal('4');
});
it('updates the model when border radius changes', function () {
view.$('.mailpoet_field_button_border_radius').val('7').change();
expect(model.get('styles.block.borderRadius')).to.equal('7px');
});
it('updates the range slider when border radius input changes', function () {
view.$('.mailpoet_field_button_border_radius_input').val('7').keyup();
expect(view.$('.mailpoet_field_button_border_radius').val()).to.equal('7');
});
it('updates the input when border radius range slider changes', function () {
view.$('.mailpoet_field_button_border_radius').val('7').change();
expect(view.$('.mailpoet_field_button_border_radius_input').val()).to.equal('7');
});
it('updates the model when width changes', function () {
view.$('.mailpoet_field_button_width').val('127').change();
expect(model.get('styles.block.width')).to.equal('127px');
});
it('updates the range slider when width input changes', function () {
view.$('.mailpoet_field_button_width_input').val('127').keyup();
expect(view.$('.mailpoet_field_button_width').val()).to.equal('127');
});
it('updates the input when width range slider changes', function () {
view.$('.mailpoet_field_button_width').val('127').change();
expect(view.$('.mailpoet_field_button_width_input').val()).to.equal('127');
});
it('updates the model when line height changes', function () {
view.$('.mailpoet_field_button_line_height').val('37').change();
expect(model.get('styles.block.lineHeight')).to.equal('37px');
});
it('updates the range slider when line height input changes', function () {
view.$('.mailpoet_field_button_line_height_input').val('37').keyup();
expect(view.$('.mailpoet_field_button_line_height').val()).to.equal('37');
});
it('updates the input when line height range slider changes', function () {
view.$('.mailpoet_field_button_line_height').val('37').change();
expect(view.$('.mailpoet_field_button_line_height_input').val()).to.equal('37');
});
it('does not display link option when `hideLink` option is active', function() {
view = new (EditorApplication.module('blocks.button').ButtonBlockSettingsView)({
model: model,
renderOptions: {
hideLink: true,
},
});
view.render();
expect(view.$('.mailpoet_field_button_url').length).to.equal(0);
});
it('does not display "Apply to all" option when `hideApplyToAll` option is active', function() {
view = new (EditorApplication.module('blocks.button').ButtonBlockSettingsView)({
model: model,
renderOptions: {
hideApplyToAll: true,
},
});
view.render();
expect(view.$('.mailpoet_field_button_replace_all_styles').length).to.equal(0);
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
});

385
tests/javascript/newsletter_editor/blocks/container.spec.js
View File

@ -1,192 +1,207 @@
describe('Container', function () {
var ModelClass = EditorApplication.module('blocks.container').ContainerBlockModel;
define('test/newsletter_editor/blocks/container', [
'newsletter_editor/App',
'newsletter_editor/blocks/container'
], function(EditorApplication) {
describe('model', function () {
describe('by default', function () {
global.stubConfig();
var model = new ModelClass();
describe('Container', function () {
var ModelClass = EditorApplication.module('blocks.container').ContainerBlockModel;
it('has container type', function () {
expect(model.get('type')).to.equal('container');
describe('model', function () {
describe('by default', function () {
global.stubConfig(EditorApplication);
var model = new ModelClass();
it('has container type', function () {
expect(model.get('type')).to.equal('container');
});
it('has orientation', function () {
expect(model.get('orientation')).to.equal('vertical');
});
it('has a background color', function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has a collection of blocks', function () {
expect(model.get('blocks')).to.be.instanceof(Backbone.Collection);
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
container: {
styles: {
block: {
backgroundColor: '#123456',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)();
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
});
});
describe('when creating with children', function () {
var testModel = {
type: 'sampleType',
someField: 'Some Content',
},
model;
it('will recursively create children', function () {
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
model = new (EditorApplication.module('blocks.container').ContainerBlockModel)({
type: 'container',
blocks: [testModel],
}, {parse: true});
expect(model.get('blocks')).to.have.length(1);
expect(model.get('blocks').at(0).get('type')).to.equal(testModel.type);
expect(model.get('blocks').at(0).get('someField')).to.equal(testModel.someField);
});
it('will create nested containers and their children', function () {
var stub = sinon.stub();
stub.withArgs('container').returns(ModelClass);
stub.withArgs('someType').returns(Backbone.Model);
EditorApplication.getBlockTypeModel = stub;
model = new ModelClass({
type: 'container',
blocks: [
{
type: 'container',
blocks: [
{
type: 'someType',
someField: 'some text',
},
{
type: 'someType',
someField: 'some text 2',
},
],
}
],
}, {parse: true});
expect(model.get('blocks')).to.have.length(1);
expect(model.get('blocks').at(0).get('blocks')).to.have.length(2);
expect(model.get('blocks').at(0).get('blocks').at(1).get('someField')).to.equal('some text 2');
});
});
});
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)(),
view = new (EditorApplication.module('blocks.container').ContainerBlockView)({model: model});
it('renders', function () {
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
describe('on root level', function () {
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)(),
view;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
view = new (EditorApplication.module('blocks.container').ContainerBlockView)({
model: model,
renderOptions: {
depth: 0,
},
});
view.render();
});
it('does not have a deletion tool', function () {
expect(view.$('.mailpoet_delete_block')).to.have.length(0);
});
it('does not have a move tool', function () {
expect(view.$('.mailpoet_move_block')).to.have.length(0);
});
it('does not have a settings tool', function () {
expect(view.$('.mailpoet_edit_block')).to.have.length(0);
});
});
describe.skip('on non-root levels', function () {
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)(),
view;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
view = new (EditorApplication.module('blocks.container').ContainerBlockView)({
model: model,
renderOptions: {
depth: 1,
},
});
view.render();
});
it('has a deletion tool', function () {
expect(view.$('.mailpoet_delete_block')).to.have.length(1);
});
it('has a move tool', function () {
expect(view.$('.mailpoet_move_block')).to.have.length(0);
});
it('has a settings tool', function () {
expect(view.$('.mailpoet_edit_block')).to.have.length(1);
});
});
});
});
describe('settings view', function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)(),
view = new (EditorApplication.module('blocks.container').ContainerBlockSettingsView)({model: model});
it('renders', function () {
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
var model, view;
beforeEach(function() {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
model = new (EditorApplication.module('blocks.container').ContainerBlockModel)();
view = new (EditorApplication.module('blocks.container').ContainerBlockSettingsView)({model: model});
});
it('has orientation', function () {
expect(model.get('orientation')).to.equal('vertical');
});
it('updates the model when background color changes', function () {
view.$('.mailpoet_field_container_background_color').val('#123456').change();
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
});
it('has a background color', function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
it('has a collection of blocks', function () {
expect(model.get('blocks')).to.be.instanceof(Backbone.Collection);
});
it("uses defaults from config when they are set", function () {
global.stubConfig({
blockDefaults: {
container: {
styles: {
block: {
backgroundColor: '#123456',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)();
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
});
});
describe('when creating with children', function () {
var testModel = {
type: 'sampleType',
someField: 'Some Content',
},
model;
it('will recursively create children', function () {
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
model = new (EditorApplication.module('blocks.container').ContainerBlockModel)({
type: 'container',
blocks: [testModel],
}, {parse: true});
expect(model.get('blocks')).to.have.length(1);
expect(model.get('blocks').at(0).get('type')).to.equal(testModel.type);
expect(model.get('blocks').at(0).get('someField')).to.equal(testModel.someField);
});
it('will create nested containers and their children', function () {
var stub = sinon.stub();
stub.withArgs('container').returns(ModelClass);
stub.withArgs('someType').returns(Backbone.Model);
EditorApplication.getBlockTypeModel = stub;
model = new ModelClass({
type: 'container',
blocks: [
{
type: 'container',
blocks: [
{
type: 'someType',
someField: 'some text',
},
{
type: 'someType',
someField: 'some text 2',
},
],
}
],
}, {parse: true});
expect(model.get('blocks')).to.have.length(1);
expect(model.get('blocks').at(0).get('blocks')).to.have.length(2);
expect(model.get('blocks').at(0).get('blocks').at(1).get('someField')).to.equal('some text 2');
});
});
});
describe('block view', function () {
global.stubChannel();
global.stubAvailableStyles();
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)(),
view = new (EditorApplication.module('blocks.container').ContainerBlockView)({model: model});
it('renders', function () {
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
describe('on root level', function () {
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)(),
view;
beforeEach(function () {
global.stubChannel();
global.stubAvailableStyles();
view = new (EditorApplication.module('blocks.container').ContainerBlockView)({
model: model,
renderOptions: {
depth: 0,
},
});
view.render();
});
it('does not have a deletion tool', function () {
expect(view.$('.mailpoet_delete_block')).to.have.length(0);
});
it('does not have a move tool', function () {
expect(view.$('.mailpoet_move_block')).to.have.length(0);
});
it('does not have a settings tool', function () {
expect(view.$('.mailpoet_edit_block')).to.have.length(0);
});
});
describe.skip('on non-root levels', function () {
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)(),
view;
beforeEach(function () {
global.stubChannel();
global.stubAvailableStyles();
view = new (EditorApplication.module('blocks.container').ContainerBlockView)({
model: model,
renderOptions: {
depth: 1,
},
});
view.render();
});
it('has a deletion tool', function () {
expect(view.$('.mailpoet_delete_block')).to.have.length(1);
});
it('has a move tool', function () {
expect(view.$('.mailpoet_move_block')).to.have.length(0);
});
it('has a settings tool', function () {
expect(view.$('.mailpoet_edit_block')).to.have.length(1);
});
});
});
});
describe('settings view', function () {
global.stubChannel();
global.stubAvailableStyles();
var model = new (EditorApplication.module('blocks.container').ContainerBlockModel)(),
view = new (EditorApplication.module('blocks.container').ContainerBlockSettingsView)({model: model});
it('renders', function () {
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
it('updates the model when background color changes', function () {
view.$('.mailpoet_field_container_background_color').val('#123456').change();
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
});
it('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});

335
tests/javascript/newsletter_editor/blocks/divider.spec.js
View File

@ -1,199 +1,206 @@
describe("Divider", function () {
describe("model", function () {
var model;
define('test/newsletter_editor/blocks/divider', [
'newsletter_editor/App',
'newsletter_editor/blocks/divider'
], function(EditorApplication) {
beforeEach(function () {
global.stubChannel();
global.stubConfig({
blockDefaults: {},
});
global.stubAvailableStyles();
model = new (EditorApplication.module('blocks.divider').DividerBlockModel)();
});
describe("Divider", function () {
describe("model", function () {
var model;
afterEach(function () {
delete EditorApplication.getChannel;
});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
global.stubAvailableStyles(EditorApplication);
model = new (EditorApplication.module('blocks.divider').DividerBlockModel)();
});
it("has a divider type", function () {
expect(model.get('type')).to.equal('divider');
});
afterEach(function () {
delete EditorApplication.getChannel;
});
it("has a background color", function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("has a divider type", function () {
expect(model.get('type')).to.equal('divider');
});
it("has padding", function () {
expect(model.get('styles.block.padding')).to.match(/^\d+px$/);
});
it("has a background color", function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has border style', function () {
expect(model.get('styles.block.borderStyle')).to.match(/^(none|dotted|dashed|solid|double|groove|ridge|inset|outset)$/);
});
it("has padding", function () {
expect(model.get('styles.block.padding')).to.match(/^\d+px$/);
});
it('has border width', function () {
expect(model.get('styles.block.borderWidth')).to.match(/^\d+px$/);
});
it('has border style', function () {
expect(model.get('styles.block.borderStyle')).to.match(/^(none|dotted|dashed|solid|double|groove|ridge|inset|outset)$/);
});
it('has border color', function () {
expect(model.get('styles.block.borderColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has border width', function () {
expect(model.get('styles.block.borderWidth')).to.match(/^\d+px$/);
});
it("changes attributes with set", function () {
var newValue = 'outset';
model.set('styles.block.borderStyle', newValue);
expect(model.get('styles.block.borderStyle')).to.equal(newValue);
});
it('has border color', function () {
expect(model.get('styles.block.borderColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("triggers autosave if any attribute changes", function () {
var mock = sinon.mock().exactly(5).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
it("changes attributes with set", function () {
var newValue = 'outset';
model.set('styles.block.borderStyle', newValue);
expect(model.get('styles.block.borderStyle')).to.equal(newValue);
});
model.set('styles.block.backgroundColor', '#000000');
model.set('styles.block.padding', '19px');
model.set('styles.block.borderStyle', 'double');
model.set('styles.block.borderWidth', '17px');
model.set('styles.block.borderColor', '#123456');
it("triggers autosave if any attribute changes", function () {
var mock = sinon.mock().exactly(5).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
mock.verify();
});
model.set('styles.block.backgroundColor', '#000000');
model.set('styles.block.padding', '19px');
model.set('styles.block.borderStyle', 'double');
model.set('styles.block.borderWidth', '17px');
model.set('styles.block.borderColor', '#123456');
it("uses defaults from config when they are set", function () {
global.stubConfig({
blockDefaults: {
divider: {
styles: {
block: {
backgroundColor: '#123456',
padding: '37px',
borderStyle: 'inset',
borderWidth: '7px',
borderColor: '#345678',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.divider').DividerBlockModel)();
mock.verify();
});
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('styles.block.padding')).to.equal('37px');
expect(model.get('styles.block.borderStyle')).to.equal('inset');
expect(model.get('styles.block.borderWidth')).to.equal('7px');
expect(model.get('styles.block.borderColor')).to.equal('#345678');
});
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
divider: {
styles: {
block: {
backgroundColor: '#123456',
padding: '37px',
borderStyle: 'inset',
borderWidth: '7px',
borderColor: '#345678',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.divider').DividerBlockModel)();
describe('block view', function () {
global.stubChannel();
global.stubConfig();
var model = new (EditorApplication.module('blocks.divider').DividerBlockModel)(),
view;
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('styles.block.padding')).to.equal('37px');
expect(model.get('styles.block.borderStyle')).to.equal('inset');
expect(model.get('styles.block.borderWidth')).to.equal('7px');
expect(model.get('styles.block.borderColor')).to.equal('#345678');
});
});
beforeEach(function () {
global.stubChannel();
view = new (EditorApplication.module('blocks.divider').DividerBlockView)({model: model});
});
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
var model = new (EditorApplication.module('blocks.divider').DividerBlockModel)(),
view;
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_divider')).to.have.length(1);
});
beforeEach(function () {
global.stubChannel(EditorApplication);
view = new (EditorApplication.module('blocks.divider').DividerBlockView)({model: model});
});
it('rerenders if model attributes change', function () {
view.render();
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_divider')).to.have.length(1);
});
model.set('styles.block.borderStyle', 'inset');
it('rerenders if model attributes change', function () {
view.render();
expect(view.$('.mailpoet_divider').css('border-top-style')).to.equal('inset');
});
});
model.set('styles.block.borderStyle', 'inset');
describe('settings view', function () {
global.stubChannel();
global.stubAvailableStyles({
dividers: ['solid', 'inset'],
});
var model = new (EditorApplication.module('blocks.divider').DividerBlockModel)(),
view = new (EditorApplication.module('blocks.divider').DividerBlockSettingsView)({model: model});
expect(view.$('.mailpoet_divider').css('border-top-style')).to.equal('inset');
});
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_divider_selector')).to.have.length(1);
});
describe('settings view', function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
dividers: ['solid', 'inset'],
});
var model = new (EditorApplication.module('blocks.divider').DividerBlockModel)(),
view = new (EditorApplication.module('blocks.divider').DividerBlockSettingsView)({model: model});
describe('once rendered', function () {
var model, view;
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_divider_selector')).to.have.length(1);
});
before(function() {
global.stubChannel();
global.stubAvailableStyles({
dividers: ['solid', 'inset'],
});
});
describe('once rendered', function () {
var model, view;
beforeEach(function () {
model = new (EditorApplication.module('blocks.divider').DividerBlockModel)();
view = new (EditorApplication.module('blocks.divider').DividerBlockSettingsView)({model: model});
view.render();
});
before(function() {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
dividers: ['solid', 'inset'],
});
});
it('updates the model when divider style changes', function () {
view.$('.mailpoet_field_divider_style').last().click();
expect(model.get('styles.block.borderStyle')).to.equal('inset');
});
beforeEach(function () {
model = new (EditorApplication.module('blocks.divider').DividerBlockModel)();
view = new (EditorApplication.module('blocks.divider').DividerBlockSettingsView)({model: model});
view.render();
});
it('updates the model when divider width changes', function () {
view.$('.mailpoet_field_divider_border_width').val('17').change();
expect(model.get('styles.block.borderWidth')).to.equal('17px');
});
it('updates the model when divider style changes', function () {
view.$('.mailpoet_field_divider_style').last().click();
expect(model.get('styles.block.borderStyle')).to.equal('inset');
});
it('updates the range slider when divider width input changes', function () {
view.$('.mailpoet_field_divider_border_width_input').val('19').keyup();
expect(view.$('.mailpoet_field_divider_border_width').val()).to.equal('19');
});
it('updates the model when divider width changes', function () {
view.$('.mailpoet_field_divider_border_width').val('17').change();
expect(model.get('styles.block.borderWidth')).to.equal('17px');
});
it('updates the input when divider width range slider changes', function () {
view.$('.mailpoet_field_divider_border_width').val('19').change();
expect(view.$('.mailpoet_field_divider_border_width_input').val()).to.equal('19');
});
it('updates the range slider when divider width input changes', function () {
view.$('.mailpoet_field_divider_border_width_input').val('19').keyup();
expect(view.$('.mailpoet_field_divider_border_width').val()).to.equal('19');
});
it('updates the model when divider color changes', function () {
view.$('.mailpoet_field_divider_border_color').val('#123457').change();
expect(model.get('styles.block.borderColor')).to.equal('#123457');
});
it('updates the input when divider width range slider changes', function () {
view.$('.mailpoet_field_divider_border_width').val('19').change();
expect(view.$('.mailpoet_field_divider_border_width_input').val()).to.equal('19');
});
it('updates the model when divider background color changes', function () {
view.$('.mailpoet_field_divider_background_color').val('#cccccc').change();
expect(model.get('styles.block.backgroundColor')).to.equal('#cccccc');
});
it('updates the model when divider color changes', function () {
view.$('.mailpoet_field_divider_border_color').val('#123457').change();
expect(model.get('styles.block.borderColor')).to.equal('#123457');
});
it ('changes color of available divider styles when actual divider color changes', function() {
var newColor = '#889912';
view.$('.mailpoet_field_divider_border_color').val(newColor).change();
expect(view.$('.mailpoet_field_divider_style div')).to.have.$css('border-top-color', newColor);
});
it('updates the model when divider background color changes', function () {
view.$('.mailpoet_field_divider_background_color').val('#cccccc').change();
expect(model.get('styles.block.backgroundColor')).to.equal('#cccccc');
});
it('does not display "Apply to all" option when `hideApplyToAll` option is active', function() {
view = new (EditorApplication.module('blocks.divider').DividerBlockSettingsView)({
model: model,
renderOptions: {
hideApplyToAll: true,
},
});
view.render();
expect(view.$('.mailpoet_button_divider_apply_to_all').length).to.equal(0);
});
it ('changes color of available divider styles when actual divider color changes', function() {
var newColor = '#889912';
view.$('.mailpoet_field_divider_border_color').val(newColor).change();
expect(view.$('.mailpoet_field_divider_style div')).to.have.$css('border-top-color', newColor);
});
it('does not display "Apply to all" option when `hideApplyToAll` option is active', function() {
view = new (EditorApplication.module('blocks.divider').DividerBlockSettingsView)({
model: model,
renderOptions: {
hideApplyToAll: true,
},
});
view.render();
expect(view.$('.mailpoet_button_divider_apply_to_all').length).to.equal(0);
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
it('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});

347
tests/javascript/newsletter_editor/blocks/footer.spec.js
View File

@ -1,189 +1,200 @@
describe('Footer', function () {
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel();
model = new (EditorApplication.module('blocks.footer').FooterBlockModel)();
});
define('test/newsletter_editor/blocks/footer', [
'newsletter_editor/App',
'newsletter_editor/blocks/footer'
], function(EditorApplication) {
it('has a footer type', function () {
expect(model.get('type')).to.equal('footer');
});
describe('Footer', function () {
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
model = new (EditorApplication.module('blocks.footer').FooterBlockModel)();
});
it('has text', function () {
expect(model.get('text')).to.be.a('string');
});
it('has a footer type', function () {
expect(model.get('type')).to.equal('footer');
});
it('has a background color', function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has text', function () {
expect(model.get('text')).to.be.a('string');
});
it('has a text color', function () {
expect(model.get('styles.text.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has a background color', function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has a font family', function () {
expect(model.get('styles.text.fontFamily')).to.equal('Arial');
});
it('has a text color', function () {
expect(model.get('styles.text.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has a font size', function () {
expect(model.get('styles.text.fontSize')).to.match(/^\d+px$/);
});
it('has a font family', function () {
expect(model.get('styles.text.fontFamily')).to.equal('Arial');
});
it('has text alignment', function () {
expect(model.get('styles.text.textAlign')).to.match(/^(left|center|right|justify)$/);
});
it('has a font size', function () {
expect(model.get('styles.text.fontSize')).to.match(/^\d+px$/);
});
it('has a link color', function () {
expect(model.get('styles.link.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has text alignment', function () {
expect(model.get('styles.text.textAlign')).to.match(/^(left|center|right|justify)$/);
});
it('has link decoration', function () {
expect(model.get('styles.link.textDecoration')).to.match(/^(underline|none)$/);
});
it('has a link color', function () {
expect(model.get('styles.link.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('changes attributes with set', function () {
var newValue = 'Some New Text';
model.set('text', newValue);
expect(model.get('text')).to.equal(newValue);
});
it('has link decoration', function () {
expect(model.get('styles.link.textDecoration')).to.match(/^(underline|none)$/);
});
it('triggers autosave when any of the attributes change', function () {
var mock = sinon.mock().exactly(8).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
it('changes attributes with set', function () {
var newValue = 'Some New Text';
model.set('text', newValue);
expect(model.get('text')).to.equal(newValue);
});
it('triggers autosave when any of the attributes change', function () {
var mock = sinon.mock().exactly(8).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
model.set('text', 'Some new text');
model.set('styles.block.backgroundColor', '#123456');
model.set('styles.text.fontColor', '#123456');
model.set('styles.text.fontFamily', 'SomeFontCT');
model.set('styles.text.fontSize', '23px');
model.set('styles.text.textAlign', 'justify');
model.set('styles.link.fontColor', '#123456');
model.set('styles.link.textDecoration', 'underline');
mock.verify();
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
footer: {
text: 'some custom config text',
styles: {
block: {
backgroundColor: '#123456',
},
text: {
fontColor: '#234567',
fontFamily: 'Tahoma',
fontSize: '37px',
textAlign: 'right',
},
link: {
fontColor: '#345678',
textDecoration: 'underline',
},
},
}
},
});
var model = new (EditorApplication.module('blocks.footer').FooterBlockModel)();
expect(model.get('text')).to.equal('some custom config text');
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('styles.text.fontColor')).to.equal('#234567');
expect(model.get('styles.text.fontFamily')).to.equal('Tahoma');
expect(model.get('styles.text.fontSize')).to.equal('37px');
expect(model.get('styles.text.textAlign')).to.equal('right');
expect(model.get('styles.link.fontColor')).to.equal('#345678');
expect(model.get('styles.link.textDecoration')).to.equal('underline');
});
});
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.footer').FooterBlockModel)(),
view;
beforeEach(function () {
global.stubChannel(EditorApplication);
view = new (EditorApplication.module('blocks.footer').FooterBlockView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
});
describe('settings view', function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
textSizes: ['16px', '20px'],
});
var model = new (EditorApplication.module('blocks.footer').FooterBlockModel)(),
view = new (EditorApplication.module('blocks.footer').FooterBlockSettingsView)({model: model});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_field_footer_text_color')).to.have.length(1);
});
describe('once rendered', function () {
var model, view;
beforeEach(function() {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
textSizes: ['16px', '20px'],
});
model = new (EditorApplication.module('blocks.footer').FooterBlockModel)({});
view = new (EditorApplication.module('blocks.footer').FooterBlockSettingsView)({model: model});
view.render();
});
model.set('text', 'Some new text');
model.set('styles.block.backgroundColor', '#123456');
model.set('styles.text.fontColor', '#123456');
model.set('styles.text.fontFamily', 'SomeFontCT');
model.set('styles.text.fontSize', '23px');
model.set('styles.text.textAlign', 'justify');
model.set('styles.link.fontColor', '#123456');
model.set('styles.link.textDecoration', 'underline');
it('updates the model when text font color changes', function () {
view.$('.mailpoet_field_footer_text_color').val('#123456').change();
expect(model.get('styles.text.fontColor')).to.equal('#123456');
});
mock.verify();
});
it('updates the model when text font family changes', function () {
var value = 'Tahoma';
view.$('.mailpoet_field_footer_text_font_family').val(value).change();
expect(model.get('styles.text.fontFamily')).to.equal(value);
});
it("uses defaults from config when they are set", function () {
global.stubConfig({
blockDefaults: {
footer: {
text: 'some custom config text',
styles: {
block: {
backgroundColor: '#123456',
},
text: {
fontColor: '#234567',
fontFamily: 'Tahoma',
fontSize: '37px',
textAlign: 'right',
},
link: {
fontColor: '#345678',
textDecoration: 'underline',
},
},
}
},
});
var model = new (EditorApplication.module('blocks.footer').FooterBlockModel)();
it('updates the model when text font size changes', function () {
var value = '20px';
view.$('.mailpoet_field_footer_text_size').val(value).change();
expect(model.get('styles.text.fontSize')).to.equal(value);
});
expect(model.get('text')).to.equal('some custom config text');
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('styles.text.fontColor')).to.equal('#234567');
expect(model.get('styles.text.fontFamily')).to.equal('Tahoma');
expect(model.get('styles.text.fontSize')).to.equal('37px');
expect(model.get('styles.text.textAlign')).to.equal('right');
expect(model.get('styles.link.fontColor')).to.equal('#345678');
expect(model.get('styles.link.textDecoration')).to.equal('underline');
});
it('updates the model when link font color changes', function () {
view.$('#mailpoet_field_footer_link_color').val('#123456').change();
expect(model.get('styles.link.fontColor')).to.equal('#123456');
});
});
it('updates the model when link text decoration changes', function () {
view.$('#mailpoet_field_footer_link_underline').prop('checked', true).change();
expect(model.get('styles.link.textDecoration')).to.equal('underline');
});
describe('block view', function () {
global.stubChannel();
global.stubConfig();
global.stubAvailableStyles();
var model = new (EditorApplication.module('blocks.footer').FooterBlockModel)(),
view;
it('updates the model when background color changes', function () {
view.$('.mailpoet_field_footer_alignment').last().prop('checked', true).change();
expect(model.get('styles.text.textAlign')).to.equal('right');
});
beforeEach(function () {
global.stubChannel();
view = new (EditorApplication.module('blocks.footer').FooterBlockView)({model: model});
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
});
describe('settings view', function () {
global.stubChannel();
global.stubAvailableStyles({
fonts: ['Arial', 'Tahoma'],
textSizes: ['16px', '20px'],
});
var model = new (EditorApplication.module('blocks.footer').FooterBlockModel)(),
view = new (EditorApplication.module('blocks.footer').FooterBlockSettingsView)({model: model});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_field_footer_text_color')).to.have.length(1);
});
describe('once rendered', function () {
global.stubChannel();
global.stubAvailableStyles({
fonts: ['Arial', 'Tahoma'],
textSizes: ['16px', '20px'],
});
var model = new (EditorApplication.module('blocks.footer').FooterBlockModel)({}),
view = new (EditorApplication.module('blocks.footer').FooterBlockSettingsView)({model: model});
view.render();
it('updates the model when text font color changes', function () {
view.$('.mailpoet_field_footer_text_color').val('#123456').change();
expect(model.get('styles.text.fontColor')).to.equal('#123456');
});
it('updates the model when text font family changes', function () {
var value = 'Tahoma';
view.$('.mailpoet_field_footer_text_font_family').val(value).change();
expect(model.get('styles.text.fontFamily')).to.equal(value);
});
it('updates the model when text font size changes', function () {
var value = '20px';
view.$('.mailpoet_field_footer_text_size').val(value).change();
expect(model.get('styles.text.fontSize')).to.equal(value);
});
it('updates the model when link font color changes', function () {
view.$('#mailpoet_field_footer_link_color').val('#123456').change();
expect(model.get('styles.link.fontColor')).to.equal('#123456');
});
it('updates the model when link text decoration changes', function () {
view.$('#mailpoet_field_footer_link_underline').prop('checked', true).change();
expect(model.get('styles.link.textDecoration')).to.equal('underline');
});
it('updates the model when background color changes', function () {
view.$('.mailpoet_field_footer_alignment').last().prop('checked', true).change();
expect(model.get('styles.text.textAlign')).to.equal('right');
});
it('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});

353
tests/javascript/newsletter_editor/blocks/header.spec.js
View File

@ -1,192 +1,203 @@
describe('Header', function () {
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel();
stubConfig({
blockDefaults: {},
});
model = new (EditorApplication.module('blocks.header').HeaderBlockModel)();
});
define('test/newsletter_editor/blocks/header', [
'newsletter_editor/App',
'newsletter_editor/blocks/header'
], function(EditorApplication) {
it('has a header type', function () {
expect(model.get('type')).to.equal('header');
});
describe('Header', function () {
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global. stubConfig(EditorApplication, {
blockDefaults: {},
});
model = new (EditorApplication.module('blocks.header').HeaderBlockModel)();
});
it('has text', function () {
expect(model.get('text')).to.be.a('string');
});
it('has a header type', function () {
expect(model.get('type')).to.equal('header');
});
it('has background color', function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has text', function () {
expect(model.get('text')).to.be.a('string');
});
it('has a text color', function () {
expect(model.get('styles.text.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has background color', function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has a text font family', function () {
expect(model.get('styles.text.fontFamily')).to.equal('Arial');
});
it('has a text color', function () {
expect(model.get('styles.text.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has a text font size', function () {
expect(model.get('styles.text.fontSize')).to.match(/^\d+px$/);
});
it('has a text font family', function () {
expect(model.get('styles.text.fontFamily')).to.equal('Arial');
});
it('has text align', function () {
expect(model.get('styles.text.textAlign')).to.match(/^(left|center|right|justify)$/);
});
it('has a text font size', function () {
expect(model.get('styles.text.fontSize')).to.match(/^\d+px$/);
});
it('has link color', function () {
expect(model.get('styles.link.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has text align', function () {
expect(model.get('styles.text.textAlign')).to.match(/^(left|center|right|justify)$/);
});
it('has link text decoration', function () {
expect(model.get('styles.link.textDecoration')).to.match(/^(underline|none)$/);
});
it('has link color', function () {
expect(model.get('styles.link.fontColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("changes attributes with set", function () {
var newValue = 'Some random teeeext';
model.set('text', newValue);
expect(model.get('text')).to.equal(newValue);
});
it('has link text decoration', function () {
expect(model.get('styles.link.textDecoration')).to.match(/^(underline|none)$/);
});
it("triggers autosave if any attribute changes", function () {
var mock = sinon.mock().exactly(8).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
it("changes attributes with set", function () {
var newValue = 'Some random teeeext';
model.set('text', newValue);
expect(model.get('text')).to.equal(newValue);
});
it("triggers autosave if any attribute changes", function () {
var mock = sinon.mock().exactly(8).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
model.set('text', 'Some new text');
model.set('styles.block.backgroundColor', '#123456');
model.set('styles.text.fontColor', '#123456');
model.set('styles.text.fontFamily', 'SomeFontCT');
model.set('styles.text.fontSize', '23px');
model.set('styles.text.textAlign', 'justify');
model.set('styles.link.fontColor', '#123456');
model.set('styles.link.textDecoration', 'none');
mock.verify();
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
header: {
text: 'some custom config text',
styles: {
block: {
backgroundColor: '#123456',
},
text: {
fontColor: '#234567',
fontFamily: 'Tahoma',
fontSize: '37px',
textAlign: 'right',
},
link: {
fontColor: '#345678',
textDecoration: 'underline',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.header').HeaderBlockModel)();
expect(model.get('text')).to.equal('some custom config text');
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('styles.text.fontColor')).to.equal('#234567');
expect(model.get('styles.text.fontFamily')).to.equal('Tahoma');
expect(model.get('styles.text.fontSize')).to.equal('37px');
expect(model.get('styles.text.textAlign')).to.equal('right');
expect(model.get('styles.link.fontColor')).to.equal('#345678');
expect(model.get('styles.link.textDecoration')).to.equal('underline');
});
});
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.header').HeaderBlockModel)(),
view;
beforeEach(function () {
global.stubChannel(EditorApplication);
view = new (EditorApplication.module('blocks.header').HeaderBlockView)({model: model});
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
});
describe('settings view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
textSizes: ['16px', '20px'],
});
var model = new (EditorApplication.module('blocks.header').HeaderBlockModel)(),
view = new (EditorApplication.module('blocks.header').HeaderBlockSettingsView)({model: model});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_field_header_text_color')).to.have.length(1);
});
describe('once rendered', function () {
var model, view;
beforeEach(function() {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
fonts: ['Arial', 'Tahoma'],
textSizes: ['16px', '20px'],
});
model = new (EditorApplication.module('blocks.header').HeaderBlockModel)({});
view = new (EditorApplication.module('blocks.header').HeaderBlockSettingsView)({model: model});
view.render();
});
model.set('text', 'Some new text');
model.set('styles.block.backgroundColor', '#123456');
model.set('styles.text.fontColor', '#123456');
model.set('styles.text.fontFamily', 'SomeFontCT');
model.set('styles.text.fontSize', '23px');
model.set('styles.text.textAlign', 'justify');
model.set('styles.link.fontColor', '#123456');
model.set('styles.link.textDecoration', 'none');
it('updates the model when text font color changes', function () {
view.$('.mailpoet_field_header_text_color').val('#123456').change();
expect(model.get('styles.text.fontColor')).to.equal('#123456');
});
mock.verify();
});
it('updates the model when text font family changes', function () {
var value = 'Tahoma';
view.$('.mailpoet_field_header_text_font_family').val(value).change();
expect(model.get('styles.text.fontFamily')).to.equal(value);
});
it("uses defaults from config when they are set", function () {
global.stubConfig({
blockDefaults: {
header: {
text: 'some custom config text',
styles: {
block: {
backgroundColor: '#123456',
},
text: {
fontColor: '#234567',
fontFamily: 'Tahoma',
fontSize: '37px',
textAlign: 'right',
},
link: {
fontColor: '#345678',
textDecoration: 'underline',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.header').HeaderBlockModel)();
it('updates the model when text font size changes', function () {
var value = '20px';
view.$('.mailpoet_field_header_text_size').val(value).change();
expect(model.get('styles.text.fontSize')).to.equal(value);
});
expect(model.get('text')).to.equal('some custom config text');
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('styles.text.fontColor')).to.equal('#234567');
expect(model.get('styles.text.fontFamily')).to.equal('Tahoma');
expect(model.get('styles.text.fontSize')).to.equal('37px');
expect(model.get('styles.text.textAlign')).to.equal('right');
expect(model.get('styles.link.fontColor')).to.equal('#345678');
expect(model.get('styles.link.textDecoration')).to.equal('underline');
});
});
it('updates the model when link font color changes', function () {
view.$('#mailpoet_field_header_link_color').val('#123456').change();
expect(model.get('styles.link.fontColor')).to.equal('#123456');
});
describe('block view', function () {
global.stubChannel();
global.stubConfig();
global.stubAvailableStyles();
var model = new (EditorApplication.module('blocks.header').HeaderBlockModel)(),
view;
it('updates the model when link text decoration changes', function () {
view.$('#mailpoet_field_header_link_underline').prop('checked', true).change();
expect(model.get('styles.link.textDecoration')).to.equal('underline');
});
beforeEach(function () {
global.stubChannel();
view = new (EditorApplication.module('blocks.header').HeaderBlockView)({model: model});
});
it('updates the model when text alignment changes', function () {
view.$('.mailpoet_field_header_alignment').last().prop('checked', true).change();
expect(model.get('styles.text.textAlign')).to.equal('right');
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
describe('settings view', function () {
global.stubChannel();
global.stubConfig();
global.stubAvailableStyles({
fonts: ['Arial', 'Tahoma'],
textSizes: ['16px', '20px'],
});
var model = new (EditorApplication.module('blocks.header').HeaderBlockModel)(),
view = new (EditorApplication.module('blocks.header').HeaderBlockSettingsView)({model: model});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_field_header_text_color')).to.have.length(1);
});
describe('once rendered', function () {
global.stubChannel();
global.stubAvailableStyles({
fonts: ['Arial', 'Tahoma'],
textSizes: ['16px', '20px'],
});
var model = new (EditorApplication.module('blocks.header').HeaderBlockModel)({}),
view = new (EditorApplication.module('blocks.header').HeaderBlockSettingsView)({model: model});
view.render();
it('updates the model when text font color changes', function () {
view.$('.mailpoet_field_header_text_color').val('#123456').change();
expect(model.get('styles.text.fontColor')).to.equal('#123456');
});
it('updates the model when text font family changes', function () {
var value = 'Tahoma';
view.$('.mailpoet_field_header_text_font_family').val(value).change();
expect(model.get('styles.text.fontFamily')).to.equal(value);
});
it('updates the model when text font size changes', function () {
var value = '20px';
view.$('.mailpoet_field_header_text_size').val(value).change();
expect(model.get('styles.text.fontSize')).to.equal(value);
});
it('updates the model when link font color changes', function () {
view.$('#mailpoet_field_header_link_color').val('#123456').change();
expect(model.get('styles.link.fontColor')).to.equal('#123456');
});
it('updates the model when link text decoration changes', function () {
view.$('#mailpoet_field_header_link_underline').prop('checked', true).change();
expect(model.get('styles.link.textDecoration')).to.equal('underline');
});
it('updates the model when text alignment changes', function () {
view.$('.mailpoet_field_header_alignment').last().prop('checked', true).change();
expect(model.get('styles.text.textAlign')).to.equal('right');
});
it('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});

333
tests/javascript/newsletter_editor/blocks/image.spec.js
View File

@ -1,193 +1,200 @@
describe('Image', function () {
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel();
global.stubConfig({
blockDefaults: {},
});
model = new (EditorApplication.module('blocks.image').ImageBlockModel)();
});
define('test/newsletter_editor/blocks/image', [
'newsletter_editor/App',
'newsletter_editor/blocks/image'
], function(EditorApplication) {
it('has an image type', function () {
expect(model.get('type')).to.equal('image');
});
describe('Image', function () {
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
model = new (EditorApplication.module('blocks.image').ImageBlockModel)();
});
it('has a link', function () {
expect(model.get('link')).to.be.a('string');
});
it('has an image type', function () {
expect(model.get('type')).to.equal('image');
});
it('has an image src', function () {
expect(model.get('src')).to.be.a('string');
});
it('has a link', function () {
expect(model.get('link')).to.be.a('string');
});
it('has alt text', function () {
expect(model.get('alt')).to.be.a('string');
});
it('has an image src', function () {
expect(model.get('src')).to.be.a('string');
});
it('can be padded', function () {
expect(model.get('padded')).to.be.a('boolean');
});
it('has alt text', function () {
expect(model.get('alt')).to.be.a('string');
});
it('has a width', function () {
expect(model.get('width')).to.match(/^\d+px$/);
});
it('can be padded', function () {
expect(model.get('padded')).to.be.a('boolean');
});
it('has a height', function () {
expect(model.get('height')).to.match(/^\d+px$/);
});
it('has a width', function () {
expect(model.get('width')).to.match(/^\d+px$/);
});
it('has alignment', function () {
expect(model.get('styles.block.textAlign')).to.match(/^(left|center|right)$/);
});
it('has a height', function () {
expect(model.get('height')).to.match(/^\d+px$/);
});
it('changes attributes with set', function () {
var newValue = 'someImage.png';
model.set('src', newValue);
expect(model.get('src')).to.equal(newValue);
});
it('has alignment', function () {
expect(model.get('styles.block.textAlign')).to.match(/^(left|center|right)$/);
});
it('triggers autosave when any of the attributes change', function () {
var mock = sinon.mock().exactly(7).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
it('changes attributes with set', function () {
var newValue = 'someImage.png';
model.set('src', newValue);
expect(model.get('src')).to.equal(newValue);
});
model.set('link', 'http://example.net');
model.set('src', 'someNewImage.png');
model.set('alt', 'Some alt text');
model.set('padded', false);
model.set('width', '63px');
model.set('height', '61px');
model.set('styles.block.textAlign', 'right');
it('triggers autosave when any of the attributes change', function () {
var mock = sinon.mock().exactly(7).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
mock.verify();
});
model.set('link', 'http://example.net');
model.set('src', 'someNewImage.png');
model.set('alt', 'Some alt text');
model.set('padded', false);
model.set('width', '63px');
model.set('height', '61px');
model.set('styles.block.textAlign', 'right');
it("uses defaults from config when they are set", function () {
global.stubConfig({
blockDefaults: {
image: {
link: 'http://example.org/customConfigPage',
src: 'http://example.org/someCustomConfigImage.png',
alt: 'Custom config alt',
padded: false,
width: '1234px',
height: '2345px',
styles: {
block: {
textAlign: 'right',
},
},
}
},
});
var model = new (EditorApplication.module('blocks.image').ImageBlockModel)();
mock.verify();
});
expect(model.get('link')).to.equal('http://example.org/customConfigPage');
expect(model.get('src')).to.equal('http://example.org/someCustomConfigImage.png');
expect(model.get('alt')).to.equal('Custom config alt');
expect(model.get('padded')).to.equal(false);
expect(model.get('width')).to.equal('1234px');
expect(model.get('height')).to.equal('2345px');
expect(model.get('styles.block.textAlign')).to.equal('right');
});
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
image: {
link: 'http://example.org/customConfigPage',
src: 'http://example.org/someCustomConfigImage.png',
alt: 'Custom config alt',
padded: false,
width: '1234px',
height: '2345px',
styles: {
block: {
textAlign: 'right',
},
},
}
},
});
var model = new (EditorApplication.module('blocks.image').ImageBlockModel)();
describe('block view', function () {
global.stubChannel();
global.stubConfig();
global.stubAvailableStyles();
var model = new (EditorApplication.module('blocks.image').ImageBlockModel)(),
view;
expect(model.get('link')).to.equal('http://example.org/customConfigPage');
expect(model.get('src')).to.equal('http://example.org/someCustomConfigImage.png');
expect(model.get('alt')).to.equal('Custom config alt');
expect(model.get('padded')).to.equal(false);
expect(model.get('width')).to.equal('1234px');
expect(model.get('height')).to.equal('2345px');
expect(model.get('styles.block.textAlign')).to.equal('right');
});
});
beforeEach(function () {
view = new (EditorApplication.module('blocks.image').ImageBlockView)({model: model});
});
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.image').ImageBlockModel)(),
view;
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
beforeEach(function () {
view = new (EditorApplication.module('blocks.image').ImageBlockView)({model: model});
});
describe('once rendered', function () {
var model = new (EditorApplication.module('blocks.image').ImageBlockModel)({
link: 'http://example.org/somepath',
src: 'http://example.org/someimage.png',
alt: 'some alt',
}),
view;
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
beforeEach(function () {
global.stubChannel();
global.stubAvailableStyles();
view = new (EditorApplication.module('blocks.image').ImageBlockView)({model: model});
view.render();
});
describe('once rendered', function () {
var model = new (EditorApplication.module('blocks.image').ImageBlockModel)({
link: 'http://example.org/somepath',
src: 'http://example.org/someimage.png',
alt: 'some alt',
}),
view;
it('displays the image', function () {
expect(view.$('.mailpoet_content a').attr('href')).to.equal('http://example.org/somepath');
expect(view.$('.mailpoet_content img').attr('src')).to.equal('http://example.org/someimage.png');
expect(view.$('.mailpoet_content img').attr('alt')).to.equal('some alt');
});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
view = new (EditorApplication.module('blocks.image').ImageBlockView)({model: model});
view.render();
});
it('rerenders if attribute changes', function () {
var newValue = 'http://example.org/someNEWimage.png';
expect(view.$('.mailpoet_content img').attr('src')).to.not.equal(newValue);
model.set('src', newValue);
expect(view.$('.mailpoet_content img').attr('src')).to.equal(newValue);
});
});
});
it('displays the image', function () {
expect(view.$('.mailpoet_content a').attr('href')).to.equal('http://example.org/somepath');
expect(view.$('.mailpoet_content img').attr('src')).to.equal('http://example.org/someimage.png');
expect(view.$('.mailpoet_content img').attr('alt')).to.equal('some alt');
});
describe('block settings view', function () {
var model, view;
it('rerenders if attribute changes', function () {
var newValue = 'http://example.org/someNEWimage.png';
expect(view.$('.mailpoet_content img').attr('src')).to.not.equal(newValue);
model.set('src', newValue);
expect(view.$('.mailpoet_content img').attr('src')).to.equal(newValue);
});
});
});
before(function () {
global.stubChannel();
global.stubConfig({
blockDefaults: {},
});
model = new (EditorApplication.module('blocks.image').ImageBlockModel)();
view = new (EditorApplication.module('blocks.image').ImageBlockSettingsView)({model: model});
});
describe('block settings view', function () {
var model, view;
it('renders', function () {
expect(view.render).to.not.throw();
});
before(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
model = new (EditorApplication.module('blocks.image').ImageBlockModel)();
view = new (EditorApplication.module('blocks.image').ImageBlockSettingsView)({model: model});
});
describe('once rendered', function () {
it('updates the model when link changes', function () {
var newValue = 'http://example.org/someNewLink';
view.$('.mailpoet_field_image_link').val(newValue).keyup();
expect(model.get('link')).to.equal(newValue);
});
it('renders', function () {
expect(view.render).to.not.throw();
});
it('updates the model when src changes', function () {
var newValue = 'http://example.org/someNewImage.png';
view.$('.mailpoet_field_image_address').val(newValue).keyup();
expect(model.get('src')).to.equal(newValue);
});
describe('once rendered', function () {
it('updates the model when link changes', function () {
var newValue = 'http://example.org/someNewLink';
view.$('.mailpoet_field_image_link').val(newValue).keyup();
expect(model.get('link')).to.equal(newValue);
});
it('updates the model when alt changes', function () {
var newValue = 'Some new alt text';
view.$('.mailpoet_field_image_alt_text').val(newValue).keyup();
expect(model.get('alt')).to.equal(newValue);
});
it('updates the model when src changes', function () {
var newValue = 'http://example.org/someNewImage.png';
view.$('.mailpoet_field_image_address').val(newValue).keyup();
expect(model.get('src')).to.equal(newValue);
});
it('updates the model when padding changes', function () {
var newValue = 'false';
view.$('.mailpoet_field_image_padded').val(newValue).change();
expect(model.get('padded')).to.equal(false);
});
it('updates the model when alt changes', function () {
var newValue = 'Some new alt text';
view.$('.mailpoet_field_image_alt_text').val(newValue).keyup();
expect(model.get('alt')).to.equal(newValue);
});
it('updates the model when padding changes', function () {
var newValue = 'false';
view.$('.mailpoet_field_image_padded').val(newValue).change();
expect(model.get('padded')).to.equal(false);
});
it.skip('closes the sidepanel after "Done" is clicked', function() {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
it('closes the sidepanel after "Done" is clicked', function() {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});

653
tests/javascript/newsletter_editor/blocks/posts.spec.js
View File

@ -1,381 +1,388 @@
describe('Posts', function () {
Backbone.Radio = {
Requests: {
request: function () {
}, reply: function () {
},
},
};
describe('model', function () {
var model;
define('test/newsletter_editor/blocks/posts', [
'newsletter_editor/App',
'newsletter_editor/blocks/posts'
], function(EditorApplication) {
beforeEach(function () {
global.stubChannel();
global.stubConfig();
global.mailpoet_post_wpi = sinon.stub();
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.SuperModel);
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
});
describe('Posts', function () {
Backbone.Radio = {
Requests: {
request: function () {
}, reply: function () {
},
},
};
describe('model', function () {
var model;
afterEach(function () {
delete EditorApplication.getChannel;
});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.mailpoet_post_wpi = sinon.stub();
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.SuperModel);
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
});
it('has posts type', function () {
expect(model.get('type')).to.equal('posts');
});
afterEach(function () {
delete EditorApplication.getChannel;
});
it('has post amount limit', function () {
expect(model.get('amount')).to.match(/^\d+$/);
});
it('has posts type', function () {
expect(model.get('type')).to.equal('posts');
});
it('has post type filter', function () {
expect(model.get('contentType')).to.match(/^(post|page|mailpoet_page)$/);
});
it('has post amount limit', function () {
expect(model.get('amount')).to.match(/^\d+$/);
});
it('has terms filter', function () {
expect(model.get('terms')).to.have.length(0);
});
it('has post type filter', function () {
expect(model.get('contentType')).to.match(/^(post|page|mailpoet_page)$/);
});
it('has inclusion filter', function () {
expect(model.get('inclusionType')).to.match(/^(include|exclude)$/);
});
it('has terms filter', function () {
expect(model.get('terms')).to.have.length(0);
});
it('has display type', function () {
expect(model.get('displayType')).to.match(/^(excerpt|full|titleOnly)$/);
});
it('has inclusion filter', function () {
expect(model.get('inclusionType')).to.match(/^(include|exclude)$/);
});
it('has title heading format', function () {
expect(model.get('titleFormat')).to.match(/^(h1|h2|h3|ul)$/);
});
it('has display type', function () {
expect(model.get('displayType')).to.match(/^(excerpt|full|titleOnly)$/);
});
it('has title position', function () {
expect(model.get('titlePosition')).to.match(/^(inTextBlock|aboveBlock)$/);
});
it('has title heading format', function () {
expect(model.get('titleFormat')).to.match(/^(h1|h2|h3|ul)$/);
});
it('has title alignment', function () {
expect(model.get('titleAlignment')).to.match(/^(left|center|right)$/);
});
it('has title position', function () {
expect(model.get('titlePosition')).to.match(/^(inTextBlock|aboveBlock)$/);
});
it('optionally has title as link', function () {
expect(model.get('titleIsLink')).to.be.a('boolean');
});
it('has title alignment', function () {
expect(model.get('titleAlignment')).to.match(/^(left|center|right)$/);
});
it('has image specific alignment', function () {
expect(model.get('imagePadded')).to.be.a('boolean');
});
it('optionally has title as link', function () {
expect(model.get('titleIsLink')).to.be.a('boolean');
});
it('has an option to display author', function () {
expect(model.get('showAuthor')).to.match(/^(no|aboveText|belowText)$/);
});
it('has image specific alignment', function () {
expect(model.get('imagePadded')).to.be.a('boolean');
});
it('has text preceding author', function () {
expect(model.get('authorPrecededBy')).to.be.a('string');
});
it('has an option to display author', function () {
expect(model.get('showAuthor')).to.match(/^(no|aboveText|belowText)$/);
});
it('has an option to display categories', function () {
expect(model.get('showCategories')).to.match(/^(no|aboveText|belowText)$/);
});
it('has text preceding author', function () {
expect(model.get('authorPrecededBy')).to.be.a('string');
});
it('has text preceding categories', function () {
expect(model.get('categoriesPrecededBy')).to.be.a('string');
});
it('has an option to display categories', function () {
expect(model.get('showCategories')).to.match(/^(no|aboveText|belowText)$/);
});
it('has a link or a button type for read more', function () {
expect(model.get('readMoreType')).to.match(/^(link|button)$/);
});
it('has text preceding categories', function () {
expect(model.get('categoriesPrecededBy')).to.be.a('string');
});
it('has read more text', function () {
expect(model.get('readMoreText')).to.be.a('string');
});
it('has a link or a button type for read more', function () {
expect(model.get('readMoreType')).to.match(/^(link|button)$/);
});
it('has a read more button', function () {
expect(model.get('readMoreButton')).to.be.instanceof(Backbone.Model);
});
it('has read more text', function () {
expect(model.get('readMoreText')).to.be.a('string');
});
it('has sorting', function () {
expect(model.get('sortBy')).to.match(/^(newest|oldest)$/);
});
it('has a read more button', function () {
expect(model.get('readMoreButton')).to.be.instanceof(Backbone.Model);
});
it('has an option to display divider', function () {
expect(model.get('showDivider')).to.be.a('boolean');
});
it('has sorting', function () {
expect(model.get('sortBy')).to.match(/^(newest|oldest)$/);
});
it('has a divider', function () {
expect(model.get('divider')).to.be.instanceof(Backbone.Model);
});
it('has an option to display divider', function () {
expect(model.get('showDivider')).to.be.a('boolean');
});
it("uses defaults from config when they are set", function () {
global.stubConfig({
blockDefaults: {
posts: {
amount: '17',
contentType: 'mailpoet_page', // 'post'|'page'|'mailpoet_page'
inclusionType: 'exclude', // 'include'|'exclude'
displayType: 'full', // 'excerpt'|'full'|'titleOnly'
titleFormat: 'h3', // 'h1'|'h2'|'h3'|'ul'
titlePosition: 'aboveBlock', // 'inTextBlock'|'aboveBlock',
titleAlignment: 'right', // 'left'|'center'|'right'
titleIsLink: true, // false|true
imagePadded: false, // true|false
//imageAlignment: 'right', // 'centerFull'|'centerPadded'|'left'|'right'|'alternate'|'none'
showAuthor: 'belowText', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Custom config author preceded by',
showCategories: 'belowText', // 'no'|'aboveText'|'belowText'
categoriesPrecededBy: 'Custom config categories preceded by',
readMoreType: 'button', // 'link'|'button'
readMoreText: 'Custom Config read more text',
readMoreButton: {
text: 'Custom config read more',
url: '[postLink]',
styles: {
block: {
backgroundColor: '#123456',
borderColor: '#234567',
},
link: {
fontColor: '#345678',
fontFamily: 'Tahoma',
fontSize: '37px',
},
},
},
sortBy: 'oldest', // 'newest'|'oldest',
showDivider: true, // true|false
divider: {
src: 'http://example.org/someConfigDividerImage.png',
styles: {
block: {
backgroundColor: '#456789',
padding: '38px',
},
},
},
},
},
});
var model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
it('has a divider', function () {
expect(model.get('divider')).to.be.instanceof(Backbone.Model);
});
expect(model.get('amount')).to.equal('17');
expect(model.get('contentType')).to.equal('mailpoet_page');
expect(model.get('inclusionType')).to.equal('exclude');
expect(model.get('displayType')).to.equal('full');
expect(model.get('titleFormat')).to.equal('h3');
expect(model.get('titlePosition')).to.equal('aboveBlock');
expect(model.get('titleAlignment')).to.equal('right');
expect(model.get('titleIsLink')).to.equal(true);
expect(model.get('imagePadded')).to.equal(false);
expect(model.get('showAuthor')).to.equal('belowText');
expect(model.get('authorPrecededBy')).to.equal('Custom config author preceded by');
expect(model.get('showCategories')).to.equal('belowText');
expect(model.get('categoriesPrecededBy')).to.equal('Custom config categories preceded by');
expect(model.get('readMoreType')).to.equal('button');
expect(model.get('readMoreText')).to.equal('Custom Config read more text');
expect(model.get('readMoreButton.text')).to.equal('Custom config read more');
expect(model.get('readMoreButton.url')).to.equal('[postLink]');
expect(model.get('readMoreButton.styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('readMoreButton.styles.block.borderColor')).to.equal('#234567');
expect(model.get('readMoreButton.styles.link.fontColor')).to.equal('#345678');
expect(model.get('readMoreButton.styles.link.fontFamily')).to.equal('Tahoma');
expect(model.get('readMoreButton.styles.link.fontSize')).to.equal('37px');
expect(model.get('sortBy')).to.equal('oldest');
expect(model.get('showDivider')).to.equal(true);
expect(model.get('divider.src')).to.equal('http://example.org/someConfigDividerImage.png');
expect(model.get('divider.styles.block.backgroundColor')).to.equal('#456789');
expect(model.get('divider.styles.block.padding')).to.equal('38px');
});
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
posts: {
amount: '17',
contentType: 'mailpoet_page', // 'post'|'page'|'mailpoet_page'
inclusionType: 'exclude', // 'include'|'exclude'
displayType: 'full', // 'excerpt'|'full'|'titleOnly'
titleFormat: 'h3', // 'h1'|'h2'|'h3'|'ul'
titlePosition: 'aboveBlock', // 'inTextBlock'|'aboveBlock',
titleAlignment: 'right', // 'left'|'center'|'right'
titleIsLink: true, // false|true
imagePadded: false, // true|false
//imageAlignment: 'right', // 'centerFull'|'centerPadded'|'left'|'right'|'alternate'|'none'
showAuthor: 'belowText', // 'no'|'aboveText'|'belowText'
authorPrecededBy: 'Custom config author preceded by',
showCategories: 'belowText', // 'no'|'aboveText'|'belowText'
categoriesPrecededBy: 'Custom config categories preceded by',
readMoreType: 'button', // 'link'|'button'
readMoreText: 'Custom Config read more text',
readMoreButton: {
text: 'Custom config read more',
url: '[postLink]',
styles: {
block: {
backgroundColor: '#123456',
borderColor: '#234567',
},
link: {
fontColor: '#345678',
fontFamily: 'Tahoma',
fontSize: '37px',
},
},
},
sortBy: 'oldest', // 'newest'|'oldest',
showDivider: true, // true|false
divider: {
src: 'http://example.org/someConfigDividerImage.png',
styles: {
block: {
backgroundColor: '#456789',
padding: '38px',
},
},
},
},
},
});
var model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
describe('block view', function () {
var model, view;
expect(model.get('amount')).to.equal('17');
expect(model.get('contentType')).to.equal('mailpoet_page');
expect(model.get('inclusionType')).to.equal('exclude');
expect(model.get('displayType')).to.equal('full');
expect(model.get('titleFormat')).to.equal('h3');
expect(model.get('titlePosition')).to.equal('aboveBlock');
expect(model.get('titleAlignment')).to.equal('right');
expect(model.get('titleIsLink')).to.equal(true);
expect(model.get('imagePadded')).to.equal(false);
expect(model.get('showAuthor')).to.equal('belowText');
expect(model.get('authorPrecededBy')).to.equal('Custom config author preceded by');
expect(model.get('showCategories')).to.equal('belowText');
expect(model.get('categoriesPrecededBy')).to.equal('Custom config categories preceded by');
expect(model.get('readMoreType')).to.equal('button');
expect(model.get('readMoreText')).to.equal('Custom Config read more text');
expect(model.get('readMoreButton.text')).to.equal('Custom config read more');
expect(model.get('readMoreButton.url')).to.equal('[postLink]');
expect(model.get('readMoreButton.styles.block.backgroundColor')).to.equal('#123456');
expect(model.get('readMoreButton.styles.block.borderColor')).to.equal('#234567');
expect(model.get('readMoreButton.styles.link.fontColor')).to.equal('#345678');
expect(model.get('readMoreButton.styles.link.fontFamily')).to.equal('Tahoma');
expect(model.get('readMoreButton.styles.link.fontSize')).to.equal('37px');
expect(model.get('sortBy')).to.equal('oldest');
expect(model.get('showDivider')).to.equal(true);
expect(model.get('divider.src')).to.equal('http://example.org/someConfigDividerImage.png');
expect(model.get('divider.styles.block.backgroundColor')).to.equal('#456789');
expect(model.get('divider.styles.block.padding')).to.equal('38px');
});
});
beforeEach(function () {
global.stubChannel();
global.stubConfig();
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
view = new (EditorApplication.module('blocks.posts').PostsBlockView)({model: model});
describe('block view', function () {
var model, view;
// Disable auto-opening of settings view
view.off('showSettings');
});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
view = new (EditorApplication.module('blocks.posts').PostsBlockView)({model: model});
afterEach(function () {
delete EditorApplication.getChannel;
});
// Disable auto-opening of settings view
view.off('showSettings');
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
});
afterEach(function () {
delete EditorApplication.getChannel;
});
describe('block settings view', function () {
var model, view;
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
});
before(function () {
global.stubChannel();
global.stubConfig({
blockDefaults: {},
});
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
view = new (EditorApplication.module('blocks.posts').PostsBlockSettingsView)({model: model});
});
describe('block settings view', function () {
var model, view;
it('renders', function () {
// Stub out block view requests
model.request = sinon.stub().returns({$el: {}});
before(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
view = new (EditorApplication.module('blocks.posts').PostsBlockSettingsView)({model: model});
});
expect(view.render).to.not.throw();
});
it('renders', function () {
// Stub out block view requests
model.request = sinon.stub().returns({$el: {}});
describe('once rendered', function () {
it('changes the model if post type changes', function () {
var newValue = 'mailpoet_page';
view.$('.mailpoet_settings_posts_content_type').val(newValue).change();
expect(model.get('contentType')).to.equal(newValue);
});
expect(view.render).to.not.throw();
});
it('changes the model if post status changes', function () {
var newValue = 'pending';
view.$('.mailpoet_posts_post_status').val(newValue).change();
expect(model.get('postStatus')).to.equal(newValue);
});
describe('once rendered', function () {
it('changes the model if post type changes', function () {
var newValue = 'mailpoet_page';
view.$('.mailpoet_settings_posts_content_type').val(newValue).change();
expect(model.get('contentType')).to.equal(newValue);
});
it('changes the model if search term changes', function () {
var newValue = 'some New search term';
view.$('.mailpoet_posts_search_term').val(newValue).keyup();
expect(model.get('search')).to.equal(newValue);
});
it('changes the model if post status changes', function () {
var newValue = 'pending';
view.$('.mailpoet_posts_post_status').val(newValue).change();
expect(model.get('postStatus')).to.equal(newValue);
});
it('changes the model if display type changes', function () {
var newValue = 'full';
view.$('.mailpoet_posts_display_type').val(newValue).change();
expect(model.get('displayType')).to.equal(newValue);
});
it('changes the model if search term changes', function () {
var newValue = 'some New search term';
view.$('.mailpoet_posts_search_term').val(newValue).keyup();
expect(model.get('search')).to.equal(newValue);
});
it('changes the model if title format changes', function () {
var newValue = 'h3';
view.$('.mailpoet_posts_title_format').val(newValue).change();
expect(model.get('titleFormat')).to.equal(newValue);
});
it('changes the model if display type changes', function () {
var newValue = 'full';
view.$('.mailpoet_posts_display_type').val(newValue).change();
expect(model.get('displayType')).to.equal(newValue);
});
it('changes the model if title position changes', function () {
var newValue = 'aboveBlock';
view.$('.mailpoet_posts_title_position').val(newValue).change();
expect(model.get('titlePosition')).to.equal(newValue);
});
it('changes the model if title format changes', function () {
var newValue = 'h3';
view.$('.mailpoet_posts_title_format').val(newValue).change();
expect(model.get('titleFormat')).to.equal(newValue);
});
it('changes the model if title alignment changes', function () {
var newValue = 'right';
view.$('.mailpoet_posts_title_alignment').val(newValue).change();
expect(model.get('titleAlignment')).to.equal(newValue);
});
it('changes the model if title position changes', function () {
var newValue = 'aboveBlock';
view.$('.mailpoet_posts_title_position').val(newValue).change();
expect(model.get('titlePosition')).to.equal(newValue);
});
it('changes the model if title link changes', function () {
var newValue = true;
view.$('.mailpoet_posts_title_as_links').val(newValue).change();
expect(model.get('titleIsLink')).to.equal(newValue);
});
it('changes the model if title alignment changes', function () {
var newValue = 'right';
view.$('.mailpoet_posts_title_alignment').val(newValue).change();
expect(model.get('titleAlignment')).to.equal(newValue);
});
it('changes the model if image alignment changes', function () {
var newValue = false;
view.$('.mailpoet_posts_image_padded').val(newValue).change();
expect(model.get('imagePadded')).to.equal(newValue);
});
it('changes the model if title link changes', function () {
var newValue = true;
view.$('.mailpoet_posts_title_as_links').val(newValue).change();
expect(model.get('titleIsLink')).to.equal(newValue);
});
it('changes the model if show author changes', function () {
var newValue = 'belowText';
view.$('.mailpoet_posts_show_author').val(newValue).change();
expect(model.get('showAuthor')).to.equal(newValue);
});
it('changes the model if image alignment changes', function () {
var newValue = false;
view.$('.mailpoet_posts_image_padded').val(newValue).change();
expect(model.get('imagePadded')).to.equal(newValue);
});
it('changes the model if author preceded by changes', function () {
var newValue = 'New author preceded by test';
view.$('.mailpoet_posts_author_preceded_by').val(newValue).keyup();
expect(model.get('authorPrecededBy')).to.equal(newValue);
});
it('changes the model if show author changes', function () {
var newValue = 'belowText';
view.$('.mailpoet_posts_show_author').val(newValue).change();
expect(model.get('showAuthor')).to.equal(newValue);
});
it('changes the model if show categories changes', function () {
var newValue = 'belowText';
view.$('.mailpoet_posts_show_categories').val(newValue).change();
expect(model.get('showCategories')).to.equal(newValue);
});
it('changes the model if author preceded by changes', function () {
var newValue = 'New author preceded by test';
view.$('.mailpoet_posts_author_preceded_by').val(newValue).keyup();
expect(model.get('authorPrecededBy')).to.equal(newValue);
});
it('changes the model if categories preceded by changes', function () {
var newValue = 'New categories preceded by test';
view.$('.mailpoet_posts_categories').val(newValue).keyup();
expect(model.get('categoriesPrecededBy')).to.equal(newValue);
});
it('changes the model if show categories changes', function () {
var newValue = 'belowText';
view.$('.mailpoet_posts_show_categories').val(newValue).change();
expect(model.get('showCategories')).to.equal(newValue);
});
it('changes the model if read more button type changes', function () {
var newValue = 'link';
view.$('.mailpoet_posts_read_more_type').val(newValue).change();
expect(model.get('readMoreType')).to.equal(newValue);
});
it('changes the model if categories preceded by changes', function () {
var newValue = 'New categories preceded by test';
view.$('.mailpoet_posts_categories').val(newValue).keyup();
expect(model.get('categoriesPrecededBy')).to.equal(newValue);
});
it('changes the model if read more text changes', function () {
var newValue = 'New read more text';
view.$('.mailpoet_posts_read_more_text').val(newValue).keyup();
expect(model.get('readMoreText')).to.equal(newValue);
});
it('changes the model if read more button type changes', function () {
var newValue = 'link';
view.$('.mailpoet_posts_read_more_type').val(newValue).change();
expect(model.get('readMoreType')).to.equal(newValue);
});
describe('when "title only" display type is selected', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
model.request = sinon.stub().returns({$el: {}});
view = new (EditorApplication.module('blocks.posts').PostsBlockSettingsView)({model: model});
view.render();
view.$('.mailpoet_posts_display_type').val('titleOnly').change();
});
it('changes the model if read more text changes', function () {
var newValue = 'New read more text';
view.$('.mailpoet_posts_read_more_text').val(newValue).keyup();
expect(model.get('readMoreText')).to.equal(newValue);
});
it('shows "title as list" option', function () {
expect(view.$('.mailpoet_posts_title_as_list')).to.not.have.$class('mailpoet_hidden');
});
describe('when "title only" display type is selected', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
model.request = sinon.stub().returns({$el: {}});
view = new (EditorApplication.module('blocks.posts').PostsBlockSettingsView)({model: model});
view.render();
view.$('.mailpoet_posts_display_type').val('titleOnly').change();
});
describe('when "title as list" is selected', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
model.request = sinon.stub().returns({$el: {}});
view = new (EditorApplication.module('blocks.posts').PostsBlockSettingsView)({model: model});
view.render();
view.$('.mailpoet_posts_display_type').val('titleOnly').change();
view.$('.mailpoet_posts_title_format').val('ul').change();
});
it('shows "title as list" option', function () {
expect(view.$('.mailpoet_posts_title_as_list')).to.not.have.$class('mailpoet_hidden');
});
describe('"title is link" option', function () {
it('is hidden', function () {
expect(view.$('.mailpoet_posts_title_as_link')).to.have.$class('mailpoet_hidden');
});
describe('when "title as list" is selected', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('blocks.posts').PostsBlockModel)();
model.request = sinon.stub().returns({$el: {}});
view = new (EditorApplication.module('blocks.posts').PostsBlockSettingsView)({model: model});
view.render();
view.$('.mailpoet_posts_display_type').val('titleOnly').change();
view.$('.mailpoet_posts_title_format').val('ul').change();
});
it('is set to "yes"', function() {
expect(model.get('titleIsLink')).to.equal(true);
});
});
});
describe('"title is link" option', function () {
it('is hidden', function () {
expect(view.$('.mailpoet_posts_title_as_link')).to.have.$class('mailpoet_hidden');
});
describe('when "title as list" is deselected', function() {
before(function() {
view.$('.mailpoet_posts_title_format').val('ul').change();
view.$('.mailpoet_posts_title_format').val('h3').change();
});
it('is set to "yes"', function() {
expect(model.get('titleIsLink')).to.equal(true);
});
});
});
describe('"title is link" option', function () {
it('is visible', function () {
expect(view.$('.mailpoet_posts_title_as_link')).to.not.have.$class('mailpoet_hidden');
});
});
});
});
describe('when "title as list" is deselected', function() {
before(function() {
view.$('.mailpoet_posts_title_format').val('ul').change();
view.$('.mailpoet_posts_title_format').val('h3').change();
});
describe('"title is link" option', function () {
it('is visible', function () {
expect(view.$('.mailpoet_posts_title_as_link')).to.not.have.$class('mailpoet_hidden');
});
});
});
});
it('changes the model if show divider changes', function () {
var newValue = true;
view.$('.mailpoet_posts_show_divider').val(newValue).change();
expect(model.get('showDivider')).to.equal(newValue);
});
});
});
});
it('changes the model if show divider changes', function () {
var newValue = true;
view.$('.mailpoet_posts_show_divider').val(newValue).change();
expect(model.get('showDivider')).to.equal(newValue);
});
});
});
});

497
tests/javascript/newsletter_editor/blocks/social.spec.js
View File

@ -1,273 +1,280 @@
describe('Social', function () {
describe('block model', function () {
var model;
beforeEach(function () {
global.stubChannel();
global.stubConfig();
model = new (EditorApplication.module('blocks.social').SocialBlockModel)();
});
define('test/newsletter_editor/blocks/social', [
'newsletter_editor/App',
'newsletter_editor/blocks/social'
], function(EditorApplication) {
it('has a social type', function () {
expect(model.get('type')).to.equal('social');
});
describe('Social', function () {
describe('block model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
model = new (EditorApplication.module('blocks.social').SocialBlockModel)();
});
it('has an icon set it uses', function () {
expect(model.get('iconSet')).to.be.a('string');
});
it('has a social type', function () {
expect(model.get('type')).to.equal('social');
});
it('has icons', function () {
expect(model.get('icons')).to.be.an.instanceof(Backbone.Collection);
});
it('has an icon set it uses', function () {
expect(model.get('iconSet')).to.be.a('string');
});
it("uses defaults from config when they are set", function () {
global.stubConfig({
blockDefaults: {
social: {
iconSet: 'customConfigIconSet',
},
},
});
var model = new (EditorApplication.module('blocks.social').SocialBlockModel)();
it('has icons', function () {
expect(model.get('icons')).to.be.an.instanceof(Backbone.Collection);
});
expect(model.get('iconSet')).to.equal('customConfigIconSet');
});
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
social: {
iconSet: 'customConfigIconSet',
},
},
});
var model = new (EditorApplication.module('blocks.social').SocialBlockModel)();
describe('icon model', function () {
var model;
before(function () {
global.stubChannel();
global.stubAvailableStyles({
'socialIconSets.default.custom': 'someimage.jpg',
});
global.stubConfig({
socialIcons: {
custom: {
defaultLink: 'http://example.org',
title: 'sometitle',
}
},
});
model = new (EditorApplication.module('blocks.social').SocialIconModel)();
});
expect(model.get('iconSet')).to.equal('customConfigIconSet');
});
});
it('has a socialIcon type', function () {
expect(model.get('type')).to.equal('socialIcon');
});
describe('icon model', function () {
var model;
before(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
'socialIconSets.default.custom': 'someimage.jpg',
});
global.stubConfig(EditorApplication, {
socialIcons: {
custom: {
defaultLink: 'http://example.org',
title: 'sometitle',
}
},
});
model = new (EditorApplication.module('blocks.social').SocialIconModel)();
});
it('has a link', function () {
expect(model.get('link')).to.be.a('string');
expect(model.get('link')).to.equal('http://example.org');
});
it('has a socialIcon type', function () {
expect(model.get('type')).to.equal('socialIcon');
});
it('has an image', function () {
expect(model.get('image')).to.equal('someimage.jpg');
});
it('has a link', function () {
expect(model.get('link')).to.be.a('string');
expect(model.get('link')).to.equal('http://example.org');
});
it('has height', function () {
expect(model.get('height')).to.equal('32px');
});
it('has an image', function () {
expect(model.get('image')).to.equal('someimage.jpg');
});
it('has width', function () {
expect(model.get('width')).to.equal('32px');
});
it('has height', function () {
expect(model.get('height')).to.equal('32px');
});
it('has text', function () {
expect(model.get('text')).to.equal('sometitle');
});
});
it('has width', function () {
expect(model.get('width')).to.equal('32px');
});
describe('block view', function () {
var model;
it('has text', function () {
expect(model.get('text')).to.equal('sometitle');
});
});
beforeEach(function () {
global.stubChannel();
global.stubAvailableStyles({
socialIconSets: {
'default': {
'custom': 'http://www.sott.net/images/icons/big_x.png',
},
'light': {
'custom': 'http://content.indiainfoline.com/wc/news/ImageGallery/css/close_32x32.png',
},
},
socialIcons: {
'custom': {
title: 'Custom',
linkFieldName: 'Page URL',
defaultLink: 'http://example.org',
},
},
});
model = new (EditorApplication.module('blocks.social').SocialBlockModel)({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: 'somelink.htm',
image: 'someimage.png',
text: 'some text',
}
],
});
});
describe('block view', function () {
var model;
it('renders', function () {
var view = new (EditorApplication.module('blocks.social').SocialBlockView)({model: model});
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_social')).to.have.length(1);
});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
socialIconSets: {
'default': {
'custom': 'http://www.sott.net/images/icons/big_x.png',
},
'light': {
'custom': 'http://content.indiainfoline.com/wc/news/ImageGallery/css/close_32x32.png',
},
},
socialIcons: {
'custom': {
title: 'Custom',
linkFieldName: 'Page URL',
defaultLink: 'http://example.org',
},
},
});
model = new (EditorApplication.module('blocks.social').SocialBlockModel)({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: 'somelink.htm',
image: 'someimage.png',
text: 'some text',
}
],
});
});
describe('once rendered', function () {
var model, view;
it('renders', function () {
var view = new (EditorApplication.module('blocks.social').SocialBlockView)({model: model});
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_social')).to.have.length(1);
});
before(function () {
global.stubChannel();
model = new (EditorApplication.module('blocks.social').SocialBlockModel)({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: 'http://example.org/',
image: 'http://example.org/someimage.png',
text: 'some text',
},
{
type: 'socialIcon',
iconType: 'facebook',
link: 'http://facebook.com/',
image: 'http://facebook.com/icon.png',
text: 'Facebook icon',
},
],
});
view = new (EditorApplication.module('blocks.social').SocialBlockView)({model: model});
view.render();
});
describe('once rendered', function () {
var model, view;
it('shows multiple social icons', function () {
expect(view.$('.mailpoet_social a').eq(0).prop('href')).to.equal('http://example.org/');
expect(view.$('.mailpoet_social img').eq(0).prop('src')).to.equal('http://example.org/someimage.png');
expect(view.$('.mailpoet_social img').eq(0).prop('alt')).to.equal('some text');
before(function () {
global.stubChannel(EditorApplication);
model = new (EditorApplication.module('blocks.social').SocialBlockModel)({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: 'http://example.org/',
image: 'http://example.org/someimage.png',
text: 'some text',
},
{
type: 'socialIcon',
iconType: 'facebook',
link: 'http://facebook.com/',
image: 'http://facebook.com/icon.png',
text: 'Facebook icon',
},
],
});
view = new (EditorApplication.module('blocks.social').SocialBlockView)({model: model});
view.render();
});
expect(view.$('.mailpoet_social a').eq(1).prop('href')).to.equal('http://facebook.com/');
expect(view.$('.mailpoet_social img').eq(1).prop('src')).to.equal('http://facebook.com/icon.png');
expect(view.$('.mailpoet_social img').eq(1).prop('alt')).to.equal('Facebook icon');
});
});
});
it('shows multiple social icons', function () {
expect(view.$('.mailpoet_social a').eq(0).prop('href')).to.equal('http://example.org/');
expect(view.$('.mailpoet_social img').eq(0).prop('src')).to.equal('http://example.org/someimage.png');
expect(view.$('.mailpoet_social img').eq(0).prop('alt')).to.equal('some text');
describe('block settings view', function () {
var model;
expect(view.$('.mailpoet_social a').eq(1).prop('href')).to.equal('http://facebook.com/');
expect(view.$('.mailpoet_social img').eq(1).prop('src')).to.equal('http://facebook.com/icon.png');
expect(view.$('.mailpoet_social img').eq(1).prop('alt')).to.equal('Facebook icon');
});
});
});
beforeEach(function () {
global.stubChannel();
global.stubAvailableStyles({
socialIconSets: {
'default': {
'custom': 'someimage.png',
},
'light': {
'custom': 'http://content.indiainfoline.com/wc/news/ImageGallery/css/close_32x32.png',
},
},
socialIcons: {
'custom': {
title: 'Custom',
linkFieldName: 'Page URL',
defaultLink: 'http://example.org',
},
},
});
model = new (EditorApplication.module('blocks.social').SocialBlockModel)({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: 'somelink.htm',
image: 'someimage.png',
height: '32px',
width: '32px',
text: 'some text',
}
],
});
});
describe('block settings view', function () {
var model;
it('renders', function () {
var view = new (EditorApplication.module('blocks.social').SocialBlockSettingsView)({model: model});
expect(view.render).to.not.throw();
});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
socialIconSets: {
'default': {
'custom': 'someimage.png',
},
'light': {
'custom': 'http://content.indiainfoline.com/wc/news/ImageGallery/css/close_32x32.png',
},
},
socialIcons: {
'custom': {
title: 'Custom',
linkFieldName: 'Page URL',
defaultLink: 'http://example.org',
},
},
});
model = new (EditorApplication.module('blocks.social').SocialBlockModel)({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: 'somelink.htm',
image: 'someimage.png',
height: '32px',
width: '32px',
text: 'some text',
}
],
});
});
describe('once rendered', function () {
var model, view;
beforeEach(function () {
global.stubChannel();
global.stubAvailableStyles({
socialIconSets: {
'default': {
'custom': 'http://www.sott.net/images/icons/big_x.png',
},
'light': {
'custom': 'http://content.indiainfoline.com/wc/news/ImageGallery/css/close_32x32.png',
},
},
socialIcons: {
'custom': {
title: 'Custom',
linkFieldName: 'Page URL',
defaultLink: 'http://example.org',
},
},
});
model = new (EditorApplication.module('blocks.social').SocialBlockModel)({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: 'somelink.htm',
image: 'someimage.png',
height: '32px',
width: '32px',
text: 'some text',
}
],
});
view = new (EditorApplication.module('blocks.social').SocialBlockSettingsView)({model: model});
view.render();
});
it('renders', function () {
var view = new (EditorApplication.module('blocks.social').SocialBlockSettingsView)({model: model});
expect(view.render).to.not.throw();
});
it('updates icons in settings if iconset changes', function() {
view.$('.mailpoet_social_icon_set').last().click();
expect(view.$('.mailpoet_social_icon_field_image').val()).to.equal(EditorApplication.getAvailableStyles().get('socialIconSets.light.custom'));
});
describe('once rendered', function () {
var model, view;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication, {
socialIconSets: {
'default': {
'custom': 'http://www.sott.net/images/icons/big_x.png',
},
'light': {
'custom': 'http://content.indiainfoline.com/wc/news/ImageGallery/css/close_32x32.png',
},
},
socialIcons: {
'custom': {
title: 'Custom',
linkFieldName: 'Page URL',
defaultLink: 'http://example.org',
},
},
});
model = new (EditorApplication.module('blocks.social').SocialBlockModel)({
type: 'social',
iconSet: 'default',
icons: [
{
type: 'socialIcon',
iconType: 'custom',
link: 'somelink.htm',
image: 'someimage.png',
height: '32px',
width: '32px',
text: 'some text',
}
],
});
view = new (EditorApplication.module('blocks.social').SocialBlockSettingsView)({model: model});
view.render();
});
it('removes the icon when "remove" is clicked', function() {
view.$('.mailpoet_delete_block').click();
expect(model.get('icons').length).to.equal(0);
expect(view.$('.mailpoet_social_icon_settings').length).to.equal(0);
});
it('updates icons in settings if iconset changes', function() {
view.$('.mailpoet_social_icon_set').last().click();
expect(view.$('.mailpoet_social_icon_field_image').val()).to.equal(EditorApplication.getAvailableStyles().get('socialIconSets.light.custom'));
});
it('adds another icon when "Add another social network" is pressed', function() {
view.$('.mailpoet_add_social_icon').click();
expect(model.get('icons').length).to.equal(2);
});
it('removes the icon when "remove" is clicked', function() {
view.$('.mailpoet_delete_block').click();
expect(model.get('icons').length).to.equal(0);
expect(view.$('.mailpoet_social_icon_settings').length).to.equal(0);
});
it('adds another icon when "Add another social network" is pressed', function() {
view.$('.mailpoet_add_social_icon').click();
expect(model.get('icons').length).to.equal(2);
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
it('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});

224
tests/javascript/newsletter_editor/blocks/spacer.spec.js
View File

@ -1,133 +1,143 @@
describe('Spacer', function () {
describe('model', function () {
var model;
define('test/newsletter_editor/blocks/spacer', [
'newsletter_editor/App',
'newsletter_editor/blocks/spacer'
], function(EditorApplication) {
beforeEach(function () {
global.stubChannel();
global.stubConfig({
blockDefaults: {},
});
global.stubAvailableStyles();
model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)();
});
describe('Spacer', function () {
describe('model', function () {
var model;
afterEach(function () {
delete EditorApplication.getChannel;
});
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication, {
blockDefaults: {},
});
global.stubAvailableStyles(EditorApplication);
model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)();
});
it('has spacer type', function () {
expect(model.get('type')).to.equal('spacer');
});
afterEach(function () {
delete EditorApplication.getChannel;
});
it('has height', function () {
expect(model.get('styles.block.height')).to.match(/\d+px/);
});
it('has spacer type', function () {
expect(model.get('type')).to.equal('spacer');
});
it('has a background color', function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it('has height', function () {
expect(model.get('styles.block.height')).to.match(/\d+px/);
});
it("changes attributes with set", function () {
var newValue = '33px';
model.set('styles.block.height', newValue);
expect(model.get('styles.block.height')).to.equal(newValue);
});
it('has a background color', function () {
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
it("triggers autosave if any attribute changes", function () {
var mock = sinon.mock().exactly(2).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
it("changes attributes with set", function () {
var newValue = '33px';
model.set('styles.block.height', newValue);
expect(model.get('styles.block.height')).to.equal(newValue);
});
model.set('styles.block.backgroundColor', '#000000');
model.set('styles.block.height', '77px');
it("triggers autosave if any attribute changes", function () {
var mock = sinon.mock().exactly(2).withArgs('autoSave');
EditorApplication.getChannel = sinon.stub().returns({
trigger: mock,
});
mock.verify();
});
model.set('styles.block.backgroundColor', '#000000');
model.set('styles.block.height', '77px');
it("uses defaults from config when they are set", function () {
global.stubConfig({
blockDefaults: {
spacer: {
styles: {
block: {
backgroundColor: '#567890',
height: '19px',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)();
mock.verify();
});
expect(model.get('styles.block.backgroundColor')).to.equal('#567890');
expect(model.get('styles.block.height')).to.equal('19px');
});
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
spacer: {
styles: {
block: {
backgroundColor: '#567890',
height: '19px',
},
},
},
},
});
var model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)();
describe('block view', function () {
global.stubChannel();
global.stubConfig();
global.stubAvailableStyles();
var model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)(),
view;
expect(model.get('styles.block.backgroundColor')).to.equal('#567890');
expect(model.get('styles.block.height')).to.equal('19px');
});
});
beforeEach(function () {
global.stubChannel();
view = new (EditorApplication.module('blocks.spacer').SpacerBlockView)({model: model});
});
describe('block view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
global.stubAvailableStyles(EditorApplication);
var model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)(),
view;
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_spacer')).to.have.length(1);
expect(view.$('.mailpoet_spacer').css('background-color')).to.equal(model.get('styles.block.backgroundColor'));
expect(view.$('.mailpoet_spacer').css('height')).to.equal(model.get('styles.block.height'));
});
beforeEach(function () {
global.stubChannel(EditorApplication);
view = new (EditorApplication.module('blocks.spacer').SpacerBlockView)({model: model});
});
it('rerenders if model attributes change', function () {
view.render();
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_spacer')).to.have.length(1);
expect(view.$('.mailpoet_spacer').css('background-color')).to.equal(model.get('styles.block.backgroundColor'));
expect(view.$('.mailpoet_spacer').css('height')).to.equal(model.get('styles.block.height'));
});
model.set('styles.block.height', '71px');
it('rerenders if model attributes change', function () {
view.render();
expect(view.$('.mailpoet_spacer').css('height')).to.equal('71px');
});
});
model.set('styles.block.height', '71px');
describe('settings view', function () {
global.stubChannel();
global.stubConfig();
expect(view.$('.mailpoet_spacer').css('height')).to.equal('71px');
});
});
var model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)(),
view;
describe('settings view', function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
beforeEach(function () {
global.stubChannel();
view = new (EditorApplication.module('blocks.spacer').SpacerBlockSettingsView)({model: model});
});
var model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)(),
view;
it('renders', function () {
expect(view.render).to.not.throw();
});
beforeEach(function () {
global.stubChannel(EditorApplication);
view = new (EditorApplication.module('blocks.spacer').SpacerBlockSettingsView)({model: model});
});
describe('once rendered', function () {
global.stubChannel();
global.stubConfig();
var model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)(),
it('renders', function () {
expect(view.render).to.not.throw();
});
describe('once rendered', function () {
var view, model;
beforeEach(function() {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
model = new (EditorApplication.module('blocks.spacer').SpacerBlockModel)();
view = new (EditorApplication.module('blocks.spacer').SpacerBlockSettingsView)({model: model});
view.render();
view.render();
});
it('updates the model when background color changes', function () {
view.$('.mailpoet_field_spacer_background_color').val('#123456').change();
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
});
it('updates the model when background color changes', function () {
view.$('.mailpoet_field_spacer_background_color').val('#123456').change();
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
});
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});
it('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
view.$('.mailpoet_done_editing').click();
mock.verify();
delete(global.MailPoet.Modal.cancel);
});
});
});
});

113
tests/javascript/newsletter_editor/blocks/text.spec.js
View File

@ -1,65 +1,72 @@
describe('Text', function () {
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel();
global.stubConfig();
model = new (EditorApplication.module('blocks.text').TextBlockModel)();
});
define('test/newsletter_editor/blocks/text', [
'newsletter_editor/App',
'newsletter_editor/blocks/text'
], function(EditorApplication) {
it('has a text type', function () {
expect(model.get('type')).to.equal('text');
});
describe('Text', function () {
describe('model', function () {
var model;
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubConfig(EditorApplication);
model = new (EditorApplication.module('blocks.text').TextBlockModel)();
});
it('has text', function () {
expect(model.get('text')).to.be.a('string');
});
it('has a text type', function () {
expect(model.get('type')).to.equal('text');
});
it("uses defaults from config when they are set", function () {
global.stubConfig({
blockDefaults: {
text: {
text: 'some custom config text',
},
},
});
var model = new (EditorApplication.module('blocks.text').TextBlockModel)();
it('has text', function () {
expect(model.get('text')).to.be.a('string');
});
expect(model.get('text')).to.equal('some custom config text');
});
});
it("uses defaults from config when they are set", function () {
global.stubConfig(EditorApplication, {
blockDefaults: {
text: {
text: 'some custom config text',
},
},
});
var model = new (EditorApplication.module('blocks.text').TextBlockModel)();
describe('block view', function () {
global.stubConfig();
var model = new (EditorApplication.module('blocks.text').TextBlockModel)(),
view = new (EditorApplication.module('blocks.text').TextBlockView)({model: model});
expect(model.get('text')).to.equal('some custom config text');
});
});
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
describe('block view', function () {
global.stubConfig(EditorApplication);
var model = new (EditorApplication.module('blocks.text').TextBlockModel)(),
view = new (EditorApplication.module('blocks.text').TextBlockView)({model: model});
describe('once rendered', function () {
var model = new (EditorApplication.module('blocks.text').TextBlockModel)(),
view;
it('renders', function () {
expect(view.render).to.not.throw();
expect(view.$('.mailpoet_content')).to.have.length(1);
});
beforeEach(function () {
global.stubConfig();
view = new (EditorApplication.module('blocks.text').TextBlockView)({model: model});
view.render();
});
describe('once rendered', function () {
var model = new (EditorApplication.module('blocks.text').TextBlockModel)(),
view;
it('has a deletion tool', function () {
expect(view.$('.mailpoet_delete_block')).to.have.length(1);
});
beforeEach(function () {
global.stubConfig(EditorApplication);
view = new (EditorApplication.module('blocks.text').TextBlockView)({model: model});
view.render();
});
it('has a move tool', function () {
expect(view.$('.mailpoet_move_block')).to.have.length(1);
});
it('has a deletion tool', function () {
expect(view.$('.mailpoet_delete_block')).to.have.length(1);
});
it('has a move tool', function () {
expect(view.$('.mailpoet_move_block')).to.have.length(1);
});
it('does not have a settings tool', function () {
expect(view.$('.mailpoet_edit_block')).to.have.length(0);
});
});
});
});
it('does not have a settings tool', function () {
expect(view.$('.mailpoet_edit_block')).to.have.length(0);
});
});
});
});

22
tests/javascript/newsletter_editor/components/config.spec.js
View File

@ -1,9 +1,15 @@
describe('Config', function () {
it('loads and stores configuration', function() {
EditorApplication.module('components.config').setConfig({
testConfig: 'testValue',
});
var model = EditorApplication.module('components.config').getConfig();
expect(model.get('testConfig')).to.equal('testValue');
});
define('test/newsletter_editor/components/config', [
'newsletter_editor/App',
'newsletter_editor/components/config'
], function(EditorApplication) {
describe('Config', function () {
it('loads and stores configuration', function() {
EditorApplication.module('components.config').setConfig({
testConfig: 'testValue',
});
var model = EditorApplication.module('components.config').getConfig();
expect(model.get('testConfig')).to.equal('testValue');
});
});
});

158
tests/javascript/newsletter_editor/components/content.spec.js
View File

@ -1,82 +1,88 @@
describe('Content', function() {
describe('newsletter model', function() {
var model;
define('test/newsletter_editor/components/content', [
'newsletter_editor/App',
'newsletter_editor/components/content'
], function(EditorApplication) {
beforeEach(function() {
model = new (EditorApplication.module('components.content').NewsletterModel)({
styles: {
style1: 'style1Value',
style2: 'style2Value',
},
data: {
data1: 'data1Value',
data2: 'data2Value',
},
someField: 'someValue'
});
});
describe('Content', function() {
describe('newsletter model', function() {
var model;
it('triggers autosave on change', function() {
var mock = sinon.mock({ trigger: function() {} }).expects('trigger').once().withArgs('autoSave');
global.stubChannel({
trigger: mock,
});
model.set('someField', 'anotherValue');
mock.verify();
});
beforeEach(function() {
model = new (EditorApplication.module('components.content').NewsletterModel)({
styles: {
style1: 'style1Value',
style2: 'style2Value',
},
data: {
data1: 'data1Value',
data2: 'data2Value',
},
someField: 'someValue'
});
});
it('does not include styles and data attributes in its JSON', function() {
var json = model.toJSON();
expect(json).to.deep.equal({someField: 'someValue'});
});
});
it('triggers autosave on change', function() {
var mock = sinon.mock({ trigger: function() {} }).expects('trigger').once().withArgs('autoSave');
global.stubChannel(EditorApplication, {
trigger: mock,
});
model.set('someField', 'anotherValue');
mock.verify();
});
describe('block types', function() {
it('registers a block type view and model', function() {
var blockModel = new Backbone.SuperModel(),
blockView = new Backbone.View();
EditorApplication.module('components.content').registerBlockType('testType', {
blockModel: blockModel,
blockView: blockView,
});
expect(EditorApplication.module('components.content').getBlockTypeModel('testType')).to.deep.equal(blockModel);
expect(EditorApplication.module('components.content').getBlockTypeView('testType')).to.deep.equal(blockView);
});
});
it('does not include styles and data attributes in its JSON', function() {
var json = model.toJSON();
expect(json).to.deep.equal({someField: 'someValue'});
});
});
describe('transformation to json', function() {
it('includes data, styles and initial newsletter fields', function() {
var dataField = {
containerModelField: 'containerModelValue',
}, stylesField = {
globalStylesField: 'globalStylesValue',
}, newsletterFields = {
newsletter_subject: 'test newsletter subject',
};
EditorApplication._contentContainer = {
toJSON: function() {
return dataField;
}
};
EditorApplication.getGlobalStyles = function() {
return {
toJSON: function() {
return stylesField;
},
};
};
EditorApplication.getNewsletter = function() {
return {
toJSON: function() {
return newsletterFields;
},
};
};
var json = EditorApplication.module('components.content').toJSON();
expect(json).to.deep.equal(_.extend({
data: dataField,
styles: stylesField
}, newsletterFields));
});
});
describe('block types', function() {
it('registers a block type view and model', function() {
var blockModel = new Backbone.SuperModel(),
blockView = new Backbone.View();
EditorApplication.module('components.content').registerBlockType('testType', {
blockModel: blockModel,
blockView: blockView,
});
expect(EditorApplication.module('components.content').getBlockTypeModel('testType')).to.deep.equal(blockModel);
expect(EditorApplication.module('components.content').getBlockTypeView('testType')).to.deep.equal(blockView);
});
});
describe('transformation to json', function() {
it('includes data, styles and initial newsletter fields', function() {
var dataField = {
containerModelField: 'containerModelValue',
}, stylesField = {
globalStylesField: 'globalStylesValue',
}, newsletterFields = {
newsletter_subject: 'test newsletter subject',
};
EditorApplication._contentContainer = {
toJSON: function() {
return dataField;
}
};
EditorApplication.getGlobalStyles = function() {
return {
toJSON: function() {
return stylesField;
},
};
};
EditorApplication.getNewsletter = function() {
return {
toJSON: function() {
return newsletterFields;
},
};
};
var json = EditorApplication.module('components.content').toJSON();
expect(json).to.deep.equal(_.extend({
data: dataField,
styles: stylesField
}, newsletterFields));
});
});
});
});

79
tests/javascript/newsletter_editor/components/heading.spec.js
View File

@ -1,41 +1,48 @@
describe('Heading', function() {
describe('view', function() {
var view;
beforeEach(function() {
var model = new Backbone.SuperModel({
newsletter_subject: 'a test subject',
});
view = new (EditorApplication.module("components.heading").HeadingView)({
model: model,
});
});
define('test/newsletter_editor/components/heading', [
'newsletter_editor/App',
'newsletter_editor/components/heading'
], function(EditorApplication) {
it('renders', function() {
expect(view.render).to.not.throw();
});
describe('Heading', function() {
describe('view', function() {
var view;
beforeEach(function() {
var model = new Backbone.SuperModel({
newsletter_subject: 'a test subject',
});
view = new (EditorApplication.module("components.heading").HeadingView)({
model: model,
});
});
describe('once rendered', function() {
var view, model;
beforeEach(function() {
model = new Backbone.SuperModel({
newsletter_subject: 'a test subject',
newsletter_preheader: 'a test preheader',
});
view = new (EditorApplication.module("components.heading").HeadingView)({
model: model,
});
view.render();
});
it('renders', function() {
expect(view.render).to.not.throw();
});
it('changes the model when subject field is changed', function() {
view.$('.mailpoet_input_title').val('a new testing subject').keyup();
expect(model.get('newsletter_subject')).to.equal('a new testing subject');
});
describe('once rendered', function() {
var view, model;
beforeEach(function() {
model = new Backbone.SuperModel({
newsletter_subject: 'a test subject',
newsletter_preheader: 'a test preheader',
});
view = new (EditorApplication.module("components.heading").HeadingView)({
model: model,
});
view.render();
});
it('changes the model when subject field is changed', function() {
view.$('.mailpoet_input_title').val('a new testing subject').keyup();
expect(model.get('newsletter_subject')).to.equal('a new testing subject');
});
it('changes the model when preheader field is changed', function() {
view.$('.mailpoet_input_preheader').val('a new testing preheader').keyup();
expect(model.get('newsletter_preheader')).to.equal('a new testing preheader');
});
});
});
});
it('changes the model when preheader field is changed', function() {
view.$('.mailpoet_input_preheader').val('a new testing preheader').keyup();
expect(model.get('newsletter_preheader')).to.equal('a new testing preheader');
});
});
});
});

133
tests/javascript/newsletter_editor/components/save.spec.js
View File

@ -1,74 +1,81 @@
describe('Save', function() {
describe('save method', function() {
it('triggers beforeEditorSave event', function() {
var spy = sinon.spy();
global.stubChannel({
trigger: spy,
});
global.mailpoet_post_wpi = sinon.stub();
EditorApplication.toJSON = sinon.stub();
EditorApplication.module("components.save").save();
expect(spy.withArgs('beforeEditorSave').calledOnce).to.be.true;
});
define('test/newsletter_editor/components/save', [
'newsletter_editor/App',
'newsletter_editor/components/save'
], function(EditorApplication) {
it('triggers afterEditorSave event', function() {
var stub = sinon.stub().callsArgWith(2, { success: true }),
spy = sinon.spy();
global.mailpoet_post_wpi = stub;
global.stubChannel({
trigger: spy,
});
EditorApplication.toJSON = sinon.stub();
EditorApplication.module("components.save").save();
expect(spy.withArgs('afterEditorSave').calledOnce).to.be.true;
});
describe('Save', function() {
describe('save method', function() {
it('triggers beforeEditorSave event', function() {
var spy = sinon.spy();
global.stubChannel(EditorApplication, {
trigger: spy,
});
global.mailpoet_post_wpi = sinon.stub();
EditorApplication.toJSON = sinon.stub();
EditorApplication.module("components.save").save();
expect(spy.withArgs('beforeEditorSave').calledOnce).to.be.true;
});
it('sends newsletter json to server for saving', function() {
var mock = sinon.mock({ mailpoet_post_wpi: function() {} }).expects('mailpoet_post_wpi').once();
global.stubChannel();
global.mailpoet_post_wpi = mock;
it.skip('triggers afterEditorSave event', function() {
var stub = sinon.stub().callsArgWith(2, { success: true }),
spy = sinon.spy();
global.mailpoet_post_wpi = stub;
global.stubChannel(EditorApplication, {
trigger: spy,
});
EditorApplication.toJSON = sinon.stub();
EditorApplication.module("components.save").save();
expect(spy.withArgs('afterEditorSave').calledOnce).to.be.true;
});
EditorApplication.toJSON = sinon.stub().returns({});
EditorApplication.module("components.save").save();
it.skip('sends newsletter json to server for saving', function() {
var mock = sinon.mock({ mailpoet_post_wpi: function() {} }).expects('mailpoet_post_wpi').once();
global.stubChannel(EditorApplication);
global.mailpoet_post_wpi = mock;
mock.verify();
});
});
EditorApplication.toJSON = sinon.stub().returns({});
EditorApplication.module("components.save").save();
describe('view', function() {
var view;
before(function() {
EditorApplication._contentContainer = { isValid: sinon.stub().returns(true) };
global.stubConfig();
view = new (EditorApplication.module('components.save').SaveView)();
});
mock.verify();
});
});
it('renders', function() {
expect(view.render).to.not.throw();
});
describe('view', function() {
var view;
before(function() {
EditorApplication._contentContainer = { isValid: sinon.stub().returns(true) };
global.stubConfig(EditorApplication);
view = new (EditorApplication.module('components.save').SaveView)();
});
describe('once rendered', function() {
var view;
beforeEach(function() {
EditorApplication._contentContainer = { isValid: sinon.stub().returns(true) };
view = new (EditorApplication.module('components.save').SaveView)();
view.render();
});
it('renders', function() {
expect(view.render).to.not.throw();
});
it('triggers newsletter saving when clicked on save button', function() {
var mock = sinon.mock({ trigger: function() {} }).expects('trigger').once().withArgs('save');
global.stubChannel({
trigger: mock,
});
view.$('.mailpoet_save_button').click();
describe('once rendered', function() {
var view;
beforeEach(function() {
EditorApplication._contentContainer = { isValid: sinon.stub().returns(true) };
view = new (EditorApplication.module('components.save').SaveView)();
view.render();
});
mock.verify();
});
it('triggers newsletter saving when clicked on save button', function() {
var mock = sinon.mock({ trigger: function() {} }).expects('trigger').once().withArgs('save');
global.stubChannel(EditorApplication, {
trigger: mock,
});
view.$('.mailpoet_save_button').click();
mock.verify();
});
it('displays saving options when clicked on save options button', function() {
view.$('.mailpoet_save_show_options').click();
expect(view.$('.mailpoet_save_options')).to.not.have.$class('mailpoet_hidden');
});
});
});
});
it('displays saving options when clicked on save options button', function() {
view.$('.mailpoet_save_show_options').click();
expect(view.$('.mailpoet_save_options')).to.not.have.$class('mailpoet_hidden');
});
});
});
});

317
tests/javascript/newsletter_editor/components/sidebar.spec.js
View File

@ -1,182 +1,189 @@
describe('Sidebar', function() {
define('test/newsletter_editor/components/sidebar', [
'newsletter_editor/App',
'newsletter_editor/components/sidebar'
], function(EditorApplication) {
describe('content view', function() {
var view;
beforeEach(function() {
view = new (EditorApplication.module('components.sidebar').SidebarWidgetsView)({
collection: new Backbone.Collection([]),
});
});
describe('Sidebar', function() {
it('renders', function() {
expect(view.render).to.not.throw();
});
});
describe('content view', function() {
var view;
beforeEach(function() {
view = new (EditorApplication.module('components.sidebar').SidebarWidgetsView)({
collection: new Backbone.Collection([]),
});
});
describe('layout view', function() {
var view;
beforeEach(function() {
view = new (EditorApplication.module('components.sidebar').SidebarLayoutWidgetsView)({
collection: new Backbone.Collection([]),
});
});
it('renders', function() {
expect(view.render).to.not.throw();
});
});
it('renders', function() {
expect(view.render).to.not.throw();
});
});
describe('layout view', function() {
var view;
beforeEach(function() {
view = new (EditorApplication.module('components.sidebar').SidebarLayoutWidgetsView)({
collection: new Backbone.Collection([]),
});
});
describe('styles view', function() {
var view;
beforeEach(function() {
view = new (EditorApplication.module('components.sidebar').SidebarStylesView)({
model: new Backbone.SuperModel({}),
availableStyles: new Backbone.SuperModel({}),
});
});
it('renders', function() {
expect(view.render).to.not.throw();
});
});
it('renders', function() {
expect(view.render).to.not.throw();
});
describe('styles view', function() {
var view;
beforeEach(function() {
view = new (EditorApplication.module('components.sidebar').SidebarStylesView)({
model: new Backbone.SuperModel({}),
availableStyles: new Backbone.SuperModel({}),
});
});
describe('once rendered', function() {
var model, availableStyles, view;
before(function() {
model = new Backbone.SuperModel({
text: {
fontColor: '#000000',
fontFamily: 'Arial',
},
h1: {
fontColor: '#000001',
fontFamily: 'Arial',
},
h2: {
fontColor: '#000002',
fontFamily: 'Arial',
},
h3: {
fontColor: '#000003',
fontFamily: 'Arial',
},
link: {
fontColor: '#000005',
textDecoration: 'none',
},
newsletter: {
backgroundColor: '#090909',
},
background: {
backgroundColor: '#020202',
},
});
availableStyles = new Backbone.SuperModel({
fonts: ['Arial', 'Times New Roman', 'Tahoma', 'Comic Sans', 'Lucida'],
textSizes: [
'9px', '10px',
],
headingSizes: [
'10px', '12px', '14px', '16px', '18px',
],
});
view = new (EditorApplication.module('components.sidebar').SidebarStylesView)({
model: model,
availableStyles: availableStyles,
});
it('renders', function() {
expect(view.render).to.not.throw();
});
view.render();
});
describe('once rendered', function() {
var model, availableStyles, view;
before(function() {
model = new Backbone.SuperModel({
text: {
fontColor: '#000000',
fontFamily: 'Arial',
},
h1: {
fontColor: '#000001',
fontFamily: 'Arial',
},
h2: {
fontColor: '#000002',
fontFamily: 'Arial',
},
h3: {
fontColor: '#000003',
fontFamily: 'Arial',
},
link: {
fontColor: '#000005',
textDecoration: 'none',
},
newsletter: {
backgroundColor: '#090909',
},
background: {
backgroundColor: '#020202',
},
});
availableStyles = new Backbone.SuperModel({
fonts: ['Arial', 'Times New Roman', 'Tahoma', 'Comic Sans', 'Lucida'],
textSizes: [
'9px', '10px',
],
headingSizes: [
'10px', '12px', '14px', '16px', '18px',
],
});
view = new (EditorApplication.module('components.sidebar').SidebarStylesView)({
model: model,
availableStyles: availableStyles,
});
it('changes model if text font color field changes', function() {
view.$('#mailpoet_text_font_color').val('#123456').change();
expect(model.get('text.fontColor')).to.equal('#123456');
});
view.render();
});
it('changes model if h1 font color field changes', function() {
view.$('#mailpoet_h1_font_color').val('#123457').change();
expect(model.get('h1.fontColor')).to.equal('#123457');
});
it('changes model if text font color field changes', function() {
view.$('#mailpoet_text_font_color').val('#123456').change();
expect(model.get('text.fontColor')).to.equal('#123456');
});
it('changes model if h2 font color field changes', function() {
view.$('#mailpoet_h2_font_color').val('#123458').change();
expect(model.get('h2.fontColor')).to.equal('#123458');
});
it('changes model if h1 font color field changes', function() {
view.$('#mailpoet_h1_font_color').val('#123457').change();
expect(model.get('h1.fontColor')).to.equal('#123457');
});
it('changes model if h3 font color field changes', function() {
view.$('#mailpoet_h3_font_color').val('#123426').change();
expect(model.get('h3.fontColor')).to.equal('#123426');
});
it('changes model if h2 font color field changes', function() {
view.$('#mailpoet_h2_font_color').val('#123458').change();
expect(model.get('h2.fontColor')).to.equal('#123458');
});
it('changes model if link font color field changes', function() {
view.$('#mailpoet_a_font_color').val('#323232').change();
expect(model.get('link.fontColor')).to.equal('#323232');
});
it('changes model if h3 font color field changes', function() {
view.$('#mailpoet_h3_font_color').val('#123426').change();
expect(model.get('h3.fontColor')).to.equal('#123426');
});
it('changes model if newsletter background color field changes', function() {
view.$('#mailpoet_newsletter_background_color').val('#636237').change();
expect(model.get('newsletter.backgroundColor')).to.equal('#636237');
});
it('changes model if link font color field changes', function() {
view.$('#mailpoet_a_font_color').val('#323232').change();
expect(model.get('link.fontColor')).to.equal('#323232');
});
it('changes model if background color field changes', function() {
view.$('#mailpoet_background_color').val('#878587').change();
expect(model.get('background.backgroundColor')).to.equal('#878587');
});
it('changes model if newsletter background color field changes', function() {
view.$('#mailpoet_newsletter_background_color').val('#636237').change();
expect(model.get('newsletter.backgroundColor')).to.equal('#636237');
});
it('changes model if text font family field changes', function() {
view.$('#mailpoet_text_font_family').val('Times New Roman').change();
expect(model.get('text.fontFamily')).to.equal('Times New Roman');
});
it('changes model if background color field changes', function() {
view.$('#mailpoet_background_color').val('#878587').change();
expect(model.get('background.backgroundColor')).to.equal('#878587');
});
it('changes model if h1 font family field changes', function() {
view.$('#mailpoet_h1_font_family').val('Comic Sans').change();
expect(model.get('h1.fontFamily')).to.equal('Comic Sans');
});
it('changes model if text font family field changes', function() {
view.$('#mailpoet_text_font_family').val('Times New Roman').change();
expect(model.get('text.fontFamily')).to.equal('Times New Roman');
});
it('changes model if h2 font family field changes', function() {
view.$('#mailpoet_h2_font_family').val('Tahoma').change();
expect(model.get('h2.fontFamily')).to.equal('Tahoma');
});
it('changes model if h1 font family field changes', function() {
view.$('#mailpoet_h1_font_family').val('Comic Sans').change();
expect(model.get('h1.fontFamily')).to.equal('Comic Sans');
});
it('changes model if h3 font family field changes', function() {
view.$('#mailpoet_h3_font_family').val('Lucida').change();
expect(model.get('h3.fontFamily')).to.equal('Lucida');
});
it('changes model if h2 font family field changes', function() {
view.$('#mailpoet_h2_font_family').val('Tahoma').change();
expect(model.get('h2.fontFamily')).to.equal('Tahoma');
});
it('changes model if text font size field changes', function() {
view.$('#mailpoet_text_font_size').val('9px').change();
expect(model.get('text.fontSize')).to.equal('9px');
});
it('changes model if h3 font family field changes', function() {
view.$('#mailpoet_h3_font_family').val('Lucida').change();
expect(model.get('h3.fontFamily')).to.equal('Lucida');
});
it('changes model if h1 font size field changes', function() {
view.$('#mailpoet_h1_font_size').val('12px').change();
expect(model.get('h1.fontSize')).to.equal('12px');
});
it('changes model if text font size field changes', function() {
view.$('#mailpoet_text_font_size').val('9px').change();
expect(model.get('text.fontSize')).to.equal('9px');
});
it('changes model if h2 font size field changes', function() {
view.$('#mailpoet_h2_font_size').val('14px').change();
expect(model.get('h2.fontSize')).to.equal('14px');
});
it('changes model if h1 font size field changes', function() {
view.$('#mailpoet_h1_font_size').val('12px').change();
expect(model.get('h1.fontSize')).to.equal('12px');
});
it('changes model if h3 font size field changes', function() {
view.$('#mailpoet_h3_font_size').val('16px').change();
expect(model.get('h3.fontSize')).to.equal('16px');
});
it('changes model if h2 font size field changes', function() {
view.$('#mailpoet_h2_font_size').val('14px').change();
expect(model.get('h2.fontSize')).to.equal('14px');
});
it('changes model if link underline field changes', function() {
view.$('#mailpoet_a_font_underline').prop('checked', true).change();
expect(model.get('link.textDecoration')).to.equal('underline');
});
});
});
it('changes model if h3 font size field changes', function() {
view.$('#mailpoet_h3_font_size').val('16px').change();
expect(model.get('h3.fontSize')).to.equal('16px');
});
describe('preview view', function() {
var view;
beforeEach(function() {
view = new (EditorApplication.module('components.sidebar').SidebarPreviewView)();
});
it('changes model if link underline field changes', function() {
view.$('#mailpoet_a_font_underline').prop('checked', true).change();
expect(model.get('link.textDecoration')).to.equal('underline');
});
});
});
describe('preview view', function() {
var view;
beforeEach(function() {
view = new (EditorApplication.module('components.sidebar').SidebarPreviewView)();
});
it('renders', function() {
expect(view.render).to.not.throw();
});
});
});
it('renders', function() {
expect(view.render).to.not.throw();
});
});
});

76
tests/javascript/newsletter_editor/components/styles.spec.js
View File

@ -1,40 +1,46 @@
describe('Styles', function () {
it('loads and stores globally available styles', function() {
EditorApplication.module('components.styles').setGlobalStyles({
testStyle: 'testValue',
});
var model = EditorApplication.module('components.styles').getGlobalStyles();
expect(model.get('testStyle')).to.equal('testValue');
});
define('test/newsletter_editor/components/config', [
'newsletter_editor/App',
'newsletter_editor/components/config'
], function(EditorApplication) {
describe('model', function() {
var model;
beforeEach(function() {
model = new (EditorApplication.module('components.styles').StylesModel)();
});
describe('Styles', function () {
it('loads and stores globally available styles', function() {
EditorApplication.module('components.styles').setGlobalStyles({
testStyle: 'testValue',
});
var model = EditorApplication.module('components.styles').getGlobalStyles();
expect(model.get('testStyle')).to.equal('testValue');
});
it('triggers autoSave when changed', function() {
var mock = sinon.mock({ trigger: function(){}}).expects('trigger').once().withExactArgs('autoSave');
EditorApplication.getChannel = function() {
return {
trigger: mock,
};
};
model.set('text.fontColor', '#123456');
mock.verify();
});
});
describe('model', function() {
var model;
beforeEach(function() {
model = new (EditorApplication.module('components.styles').StylesModel)();
});
describe('view', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('components.styles').StylesModel)();
view = new (EditorApplication.module('components.styles').StylesView)({ model: model });
});
it('triggers autoSave when changed', function() {
var mock = sinon.mock({ trigger: function(){}}).expects('trigger').once().withExactArgs('autoSave');
EditorApplication.getChannel = function() {
return {
trigger: mock,
};
};
model.set('text.fontColor', '#123456');
mock.verify();
});
});
describe('view', function() {
var model, view;
beforeEach(function() {
model = new (EditorApplication.module('components.styles').StylesModel)();
view = new (EditorApplication.module('components.styles').StylesView)({ model: model });
});
it('renders', function() {
expect(view.render).to.not.throw();
});
});
});
it('renders', function() {
expect(view.render).to.not.throw();
});
});
});

94
tests/javascript/testBundles/vendor.js
View File

@ -1,94 +0,0 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ var parentJsonpFunction = window["webpackJsonp"];
/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0, callbacks = [];
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(installedChunks[chunkId])
/******/ callbacks.push.apply(callbacks, installedChunks[chunkId]);
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ for(moduleId in moreModules) {
/******/ modules[moduleId] = moreModules[moduleId];
/******/ }
/******/ if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
/******/ while(callbacks.length)
/******/ callbacks.shift().call(null, __webpack_require__);
/******/ if(moreModules[0]) {
/******/ installedModules[0] = 0;
/******/ return __webpack_require__(0);
/******/ }
/******/ };
/******/ // The module cache
/******/ var installedModules = {};
/******/ // object to store loaded and loading chunks
/******/ // "0" means "already loaded"
/******/ // Array means "loading", array contains callbacks
/******/ var installedChunks = {
/******/ 1:0
/******/ };
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // This file contains only the entry chunk.
/******/ // The chunk loading function for additional chunks
/******/ __webpack_require__.e = function requireEnsure(chunkId, callback) {
/******/ // "0" is the signal for "already loaded"
/******/ if(installedChunks[chunkId] === 0)
/******/ return callback.call(null, __webpack_require__);
/******/ // an array means "currently loading".
/******/ if(installedChunks[chunkId] !== undefined) {
/******/ installedChunks[chunkId].push(callback);
/******/ } else {
/******/ // start chunk loading
/******/ installedChunks[chunkId] = [callback];
/******/ var head = document.getElementsByTagName('head')[0];
/******/ var script = document.createElement('script');
/******/ script.type = 'text/javascript';
/******/ script.charset = 'utf-8';
/******/ script.async = true;
/******/ script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"testAjax"}[chunkId]||chunkId) + ".js";
/******/ head.appendChild(script);
/******/ }
/******/ };
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ })
/************************************************************************/
/******/ ([]);

78
webpack.config.js
View File

@ -20,7 +20,9 @@ baseConfig = {
'backbone.marionette': 'backbone.marionette/lib/backbone.marionette',
'backbone.supermodel$': 'backbone.supermodel/build/backbone.supermodel.js',
'sticky-kit': 'sticky-kit/jquery.sticky-kit',
}
'interact$': 'interact.js/interact.js',
'spectrum$': 'spectrum-colorpicker/spectrum.js',
},
},
node: {
fs: 'empty'
@ -47,6 +49,10 @@ baseConfig = {
include: require.resolve('handlebars'),
loader: 'expose-loader?Handlebars',
},
{
include: require.resolve('handlebars'),
loader: 'expose-loader?Handlebars',
},
]
}
};
@ -73,7 +79,7 @@ config.push(_.extend({}, baseConfig, {
'interact.js',
'backbone.radio',
'select2',
'spectrum-colorpicker',
'spectrum',
'sticky-kit',
'newsletter_editor/communicationsFix.js',
@ -128,7 +134,62 @@ config.push(_.extend({}, baseConfig, {
config.push(_.extend({}, baseConfig, {
name: 'test',
entry: {
vendor: ['handlebars', 'handlebars_helpers'],
testAjax: 'testAjax.js',
testNewsletterEditor: [
'underscore',
'backbone',
'backbone.marionette',
'backbone.supermodel',
'backbone.radio',
'select2',
'newsletter_editor/communicationsFix.js',
'newsletter_editor/App',
'newsletter_editor/components/config.js',
'newsletter_editor/components/styles.js',
'newsletter_editor/components/sidebar.js',
'newsletter_editor/components/content.js',
'newsletter_editor/components/heading.js',
'newsletter_editor/components/save.js',
'newsletter_editor/behaviors/BehaviorsLookup.js',
'newsletter_editor/behaviors/ColorPickerBehavior.js',
'newsletter_editor/behaviors/ContainerDropZoneBehavior.js',
'newsletter_editor/behaviors/DraggableBehavior.js',
'newsletter_editor/behaviors/ResizableBehavior.js',
'newsletter_editor/behaviors/SortableBehavior.js',
'newsletter_editor/blocks/base.js',
'newsletter_editor/blocks/container.js',
'newsletter_editor/blocks/button.js',
'newsletter_editor/blocks/image.js',
'newsletter_editor/blocks/divider.js',
'newsletter_editor/blocks/text.js',
'newsletter_editor/blocks/spacer.js',
'newsletter_editor/blocks/footer.js',
'newsletter_editor/blocks/header.js',
'newsletter_editor/blocks/automatedLatestContent.js',
'newsletter_editor/blocks/posts.js',
'newsletter_editor/blocks/social.js',
'components/config.spec.js',
'components/content.spec.js',
'components/heading.spec.js',
'components/save.spec.js',
'components/sidebar.spec.js',
'components/styles.spec.js',
'blocks/automatedLatestContent.spec.js',
'blocks/button.spec.js',
'blocks/container.spec.js',
'blocks/divider.spec.js',
'blocks/footer.spec.js',
'blocks/header.spec.js',
'blocks/image.spec.js',
'blocks/posts.spec.js',
'blocks/social.spec.js',
'blocks/spacer.spec.js',
'blocks/text.spec.js',
],
},
output: {
path: './tests/javascript/testBundles',
@ -139,7 +200,18 @@ config.push(_.extend({}, baseConfig, {
'node_modules',
'assets/js/src',
'tests/javascript/newsletter_editor'
]
],
alias: {
'sticky-kit': 'sticky-kit/jquery.sticky-kit',
'backbone.marionette': 'backbone.marionette/lib/backbone.marionette',
'backbone.supermodel$': 'backbone.supermodel/build/backbone.supermodel.js',
},
},
externals: {
'jquery': 'jQuery',
'tinymce': 'tinymce',
'interact': 'interact',
'spectrum': 'spectrum',
}
}));