383 lines
12 KiB
JavaScript
383 lines
12 KiB
JavaScript
import { App } from 'newsletter-editor/app';
|
|
import Communication from 'newsletter-editor/components/communication';
|
|
import AbandonedCartContentBlock from 'newsletter-editor/blocks/abandoned-cart-content';
|
|
import ContainerBlock from 'newsletter-editor/blocks/container';
|
|
|
|
const expect = global.expect;
|
|
const sinon = global.sinon;
|
|
const Backbone = global.Backbone;
|
|
const jQuery = global.jQuery;
|
|
|
|
var EditorApplication = App;
|
|
var CommunicationComponent = Communication;
|
|
|
|
describe('Abandoned Cart Content', function () {
|
|
Backbone.Radio = {
|
|
Requests: {
|
|
request: function () {},
|
|
reply: function () {},
|
|
},
|
|
};
|
|
describe('model', function () {
|
|
var model;
|
|
var sandbox;
|
|
|
|
before(function () {
|
|
CommunicationComponent.getPosts = function () {
|
|
var deferred = jQuery.Deferred();
|
|
return deferred;
|
|
};
|
|
});
|
|
|
|
beforeEach(function () {
|
|
global.stubChannel(EditorApplication);
|
|
global.stubConfig(EditorApplication);
|
|
EditorApplication.getBlockTypeModel = sinon
|
|
.stub()
|
|
.returns(Backbone.SuperModel);
|
|
EditorApplication.getBlockTypeView = sinon.stub().returns(Backbone.View);
|
|
model = new AbandonedCartContentBlock.AbandonedCartContentBlockModel();
|
|
sandbox = sinon.createSandbox();
|
|
});
|
|
|
|
afterEach(function () {
|
|
delete EditorApplication.getChannel;
|
|
sandbox.restore();
|
|
});
|
|
|
|
it('has abandonedCartContent type', function () {
|
|
expect(model.get('type')).to.equal('abandonedCartContent');
|
|
});
|
|
|
|
it('has products amount limit', function () {
|
|
expect(model.get('amount')).to.match(/^\d+$/);
|
|
});
|
|
|
|
it('has fixed content type', function () {
|
|
expect(model.get('contentType')).to.equal('product');
|
|
});
|
|
|
|
it('has inclusion filter', function () {
|
|
expect(model.get('inclusionType')).to.equal('include');
|
|
});
|
|
|
|
it('has display type', function () {
|
|
expect(model.get('displayType')).to.match(/^(excerpt|full|titleOnly)$/);
|
|
});
|
|
|
|
it('has title heading format', function () {
|
|
expect(model.get('titleFormat')).to.match(/^(h1|h2|h3)$/);
|
|
});
|
|
|
|
it('has title alignment', function () {
|
|
expect(model.get('titleAlignment')).to.match(/^(left|center|right)$/);
|
|
});
|
|
|
|
it('optionally has title as link', function () {
|
|
expect(model.get('titleIsLink')).to.be.a('boolean');
|
|
});
|
|
|
|
it('has image width', function () {
|
|
expect(model.get('imageFullWidth')).to.be.a('boolean');
|
|
});
|
|
|
|
it('has image position', function () {
|
|
expect(model.get('featuredImagePosition')).to.match(
|
|
/^(centered|left|right|alternate|none)$/,
|
|
);
|
|
});
|
|
|
|
it('has an option to display price', function () {
|
|
expect(model.get('pricePosition')).to.match(/^(hidden|above|below)$/);
|
|
});
|
|
|
|
it('has none for read more', function () {
|
|
expect(model.get('readMoreType')).to.match(/^(none)$/);
|
|
});
|
|
|
|
it('has sorting', function () {
|
|
expect(model.get('sortBy')).to.equal('newest');
|
|
});
|
|
|
|
it('has an option to display divider', function () {
|
|
expect(model.get('showDivider')).to.be.a('boolean');
|
|
});
|
|
|
|
it('has a divider', function () {
|
|
expect(model.get('divider')).to.be.instanceof(Backbone.Model);
|
|
});
|
|
|
|
it('uses defaults from config when they are set', function () {
|
|
var innerModel;
|
|
global.stubConfig(EditorApplication, {
|
|
blockDefaults: {
|
|
products: {
|
|
type: 'abandonedCartContent',
|
|
withLayout: true,
|
|
amount: '12',
|
|
contentType: 'product',
|
|
postStatus: 'publish',
|
|
inclusionType: 'include',
|
|
displayType: 'full',
|
|
titleFormat: 'h3',
|
|
titleAlignment: 'right',
|
|
titleIsLink: true,
|
|
imageFullWidth: true,
|
|
titlePosition: 'aboveExcerpt',
|
|
featuredImagePosition: 'left',
|
|
pricePosition: 'above',
|
|
readMoreType: 'button',
|
|
readMoreText: 'Go Shopping text',
|
|
readMoreButton: {
|
|
text: 'Go Shopping',
|
|
url: '[productLink]',
|
|
styles: {
|
|
block: {
|
|
backgroundColor: '#123456',
|
|
borderColor: '#234567',
|
|
},
|
|
link: {
|
|
fontColor: '#345678',
|
|
fontFamily: 'Tahoma',
|
|
fontSize: '37px',
|
|
},
|
|
},
|
|
},
|
|
showDivider: true,
|
|
divider: {
|
|
src: 'http://example.org/someConfigDividerImage.png',
|
|
styles: {
|
|
block: {
|
|
backgroundColor: '#456789',
|
|
padding: '38px',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
innerModel =
|
|
new AbandonedCartContentBlock.AbandonedCartContentBlockModel();
|
|
|
|
expect(innerModel.get('amount')).to.equal('12');
|
|
expect(innerModel.get('contentType')).to.equal('product');
|
|
expect(innerModel.get('inclusionType')).to.equal('include');
|
|
expect(innerModel.get('displayType')).to.equal('full');
|
|
expect(innerModel.get('titleFormat')).to.equal('h3');
|
|
expect(innerModel.get('titleAlignment')).to.equal('right');
|
|
expect(innerModel.get('titleIsLink')).to.equal(true);
|
|
expect(innerModel.get('imageFullWidth')).to.equal(true);
|
|
expect(innerModel.get('featuredImagePosition')).to.equal('left');
|
|
expect(innerModel.get('pricePosition')).to.equal('above');
|
|
expect(innerModel.get('readMoreType')).to.equal('button');
|
|
expect(innerModel.get('readMoreText')).to.equal('Go Shopping text');
|
|
expect(innerModel.get('readMoreButton.text')).to.equal('Go Shopping');
|
|
expect(innerModel.get('readMoreButton.url')).to.equal('[productLink]');
|
|
expect(
|
|
innerModel.get('readMoreButton.styles.block.backgroundColor'),
|
|
).to.equal('#123456');
|
|
expect(
|
|
innerModel.get('readMoreButton.styles.block.borderColor'),
|
|
).to.equal('#234567');
|
|
expect(innerModel.get('readMoreButton.styles.link.fontColor')).to.equal(
|
|
'#345678',
|
|
);
|
|
expect(innerModel.get('readMoreButton.styles.link.fontFamily')).to.equal(
|
|
'Tahoma',
|
|
);
|
|
expect(innerModel.get('readMoreButton.styles.link.fontSize')).to.equal(
|
|
'37px',
|
|
);
|
|
expect(innerModel.get('showDivider')).to.equal(true);
|
|
expect(innerModel.get('divider.src')).to.equal(
|
|
'http://example.org/someConfigDividerImage.png',
|
|
);
|
|
expect(innerModel.get('divider.styles.block.backgroundColor')).to.equal(
|
|
'#456789',
|
|
);
|
|
expect(innerModel.get('divider.styles.block.padding')).to.equal('38px');
|
|
});
|
|
|
|
it('updates blockDefaults.abandonedCartContent when changed', function () {
|
|
var stub = sandbox.stub(EditorApplication.getConfig(), 'set');
|
|
model.trigger('change');
|
|
expect(stub.callCount).to.equal(1);
|
|
expect(stub.getCall(0).args[0]).to.equal(
|
|
'blockDefaults.abandonedCartContent',
|
|
);
|
|
expect(stub.getCall(0).args[1]).to.deep.equal(model.toJSON());
|
|
});
|
|
});
|
|
|
|
describe('block view', function () {
|
|
var model;
|
|
var view;
|
|
|
|
beforeEach(function () {
|
|
global.stubChannel(EditorApplication);
|
|
global.stubConfig(EditorApplication);
|
|
EditorApplication.getBlockTypeModel = sinon
|
|
.stub()
|
|
.returns(Backbone.Model);
|
|
model = new AbandonedCartContentBlock.AbandonedCartContentBlockModel();
|
|
view = new AbandonedCartContentBlock.AbandonedCartContentBlockView({
|
|
model: model,
|
|
});
|
|
|
|
// Disable auto-opening of settings view
|
|
view.off('showSettings');
|
|
});
|
|
|
|
afterEach(function () {
|
|
delete EditorApplication.getChannel;
|
|
});
|
|
|
|
it('renders', function () {
|
|
expect(view.render).to.not.throw();
|
|
expect(
|
|
view.$('.mailpoet_abandoned_cart_content_container'),
|
|
).to.have.length(1);
|
|
});
|
|
});
|
|
|
|
describe('block settings view', function () {
|
|
var model;
|
|
var view;
|
|
|
|
before(function () {
|
|
global.stubChannel(EditorApplication);
|
|
global.stubConfig(EditorApplication, {
|
|
blockDefaults: {},
|
|
});
|
|
EditorApplication.getBlockTypeModel = sinon
|
|
.stub()
|
|
.returns(ContainerBlock.ContainerBlockModel);
|
|
model = new AbandonedCartContentBlock.AbandonedCartContentBlockModel();
|
|
view =
|
|
new AbandonedCartContentBlock.AbandonedCartContentBlockSettingsView({
|
|
model: model,
|
|
});
|
|
});
|
|
|
|
it('renders', function () {
|
|
// Stub out block view requests
|
|
model.request = sinon.stub().returns({ $el: {} });
|
|
|
|
expect(view.render).to.not.throw();
|
|
});
|
|
|
|
describe('once rendered', function () {
|
|
it('changes the model if post status changes', function () {
|
|
var newValue = 'pending';
|
|
view
|
|
.$('.mailpoet_products_post_status')
|
|
.val(newValue)
|
|
.trigger('change');
|
|
expect(model.get('postStatus')).to.equal(newValue);
|
|
});
|
|
|
|
it('changes the model if display type changes', function () {
|
|
var newValue = 'full';
|
|
view
|
|
.$('.mailpoet_products_display_type')
|
|
.val(newValue)
|
|
.trigger('change');
|
|
expect(model.get('displayType')).to.equal(newValue);
|
|
});
|
|
|
|
it('changes the model if title format changes', function () {
|
|
var newValue = 'h3';
|
|
view
|
|
.$('.mailpoet_products_title_format')
|
|
.val(newValue)
|
|
.trigger('change');
|
|
expect(model.get('titleFormat')).to.equal(newValue);
|
|
});
|
|
|
|
it('changes the model if title alignment changes', function () {
|
|
var newValue = 'right';
|
|
view
|
|
.$('.mailpoet_products_title_alignment')
|
|
.val(newValue)
|
|
.trigger('change');
|
|
expect(model.get('titleAlignment')).to.equal(newValue);
|
|
});
|
|
|
|
it('changes the model if title link changes', function () {
|
|
var newValue = true;
|
|
view
|
|
.$('.mailpoet_products_title_as_links')
|
|
.val(newValue)
|
|
.trigger('change');
|
|
expect(model.get('titleIsLink')).to.equal(newValue);
|
|
});
|
|
|
|
it('changes the model if image alignment changes', function () {
|
|
var newValue = false;
|
|
view
|
|
.$('.mailpoet_products_image_full_width')
|
|
.val(newValue)
|
|
.trigger('change');
|
|
expect(model.get('imageFullWidth')).to.equal(newValue);
|
|
});
|
|
|
|
it('changes the model if image position changes', function () {
|
|
var newValue = 'aboveTitle';
|
|
view
|
|
.$('.mailpoet_products_featured_image_position')
|
|
.val(newValue)
|
|
.trigger('change');
|
|
expect(model.get('featuredImagePosition')).to.equal(newValue);
|
|
});
|
|
|
|
it('changes the model if price position changes', function () {
|
|
var newValue = 'below';
|
|
view
|
|
.$('.mailpoet_products_price_position')
|
|
.val(newValue)
|
|
.trigger('change');
|
|
expect(model.get('pricePosition')).to.equal(newValue);
|
|
});
|
|
|
|
describe('when "title only" display type is selected', function () {
|
|
var innerModel;
|
|
var innerView;
|
|
beforeEach(function () {
|
|
innerModel =
|
|
new AbandonedCartContentBlock.AbandonedCartContentBlockModel();
|
|
innerModel.request = sinon.stub().returns({ $el: {} });
|
|
innerView =
|
|
new AbandonedCartContentBlock.AbandonedCartContentBlockSettingsView(
|
|
{
|
|
model: innerModel,
|
|
},
|
|
);
|
|
innerView.render();
|
|
innerView
|
|
.$('.mailpoet_products_display_type')
|
|
.val('titleOnly')
|
|
.trigger('change');
|
|
});
|
|
|
|
it('hides "title position" option', function () {
|
|
expect(
|
|
innerView.$('.mailpoet_products_title_position'),
|
|
).to.have.$class('mailpoet_hidden');
|
|
expect(
|
|
innerView.$('.mailpoet_products_title_position_separator'),
|
|
).to.have.$class('mailpoet_hidden');
|
|
});
|
|
});
|
|
|
|
it('changes the model if show divider changes', function () {
|
|
var newValue = true;
|
|
view
|
|
.$('.mailpoet_products_show_divider')
|
|
.val(newValue)
|
|
.trigger('change');
|
|
expect(model.get('showDivider')).to.equal(newValue);
|
|
});
|
|
});
|
|
});
|
|
});
|