303 lines
10 KiB
JavaScript
303 lines
10 KiB
JavaScript
import App from 'newsletter_editor/App';
|
|
import ContainerBlock from 'newsletter_editor/blocks/container';
|
|
|
|
const expect = global.expect;
|
|
const sinon = global.sinon;
|
|
const Backbone = global.Backbone;
|
|
|
|
var EditorApplication = App;
|
|
|
|
describe('Container', function () {
|
|
var ModelClass = ContainerBlock.ContainerBlockModel;
|
|
|
|
describe('model', function () {
|
|
describe('by default', function () {
|
|
var model;
|
|
global.stubConfig(EditorApplication);
|
|
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 image display style', function () {
|
|
expect(model.get('image.display')).to.equal('scale');
|
|
});
|
|
|
|
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 () {
|
|
var innerModel;
|
|
global.stubConfig(EditorApplication, {
|
|
blockDefaults: {
|
|
container: {
|
|
styles: {
|
|
block: {
|
|
backgroundColor: '#123456',
|
|
},
|
|
},
|
|
image: {
|
|
src: null,
|
|
display: 'scale',
|
|
},
|
|
},
|
|
},
|
|
});
|
|
innerModel = new (ContainerBlock.ContainerBlockModel)();
|
|
|
|
expect(innerModel.get('styles.block.backgroundColor')).to.equal('#123456');
|
|
expect(innerModel.get('image.display')).to.equal('scale');
|
|
});
|
|
|
|
it('do not update blockDefaults.container when changed', function () {
|
|
var sandbox = sinon.sandbox.create();
|
|
var stub = sandbox.stub(EditorApplication.getConfig(), 'set');
|
|
model.trigger('change');
|
|
expect(stub.callCount).to.equal(0);
|
|
sandbox.restore();
|
|
});
|
|
});
|
|
|
|
describe('when creating with children', function () {
|
|
var testModel = {
|
|
type: 'sampleType',
|
|
someField: 'Some Content',
|
|
};
|
|
var model;
|
|
|
|
it('will recursively create children', function () {
|
|
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
|
|
|
|
model = new (ContainerBlock.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);
|
|
|
|
it('renders', function () {
|
|
var model;
|
|
var view;
|
|
model = new (ContainerBlock.ContainerBlockModel)();
|
|
view = new (ContainerBlock.ContainerBlockView)({ model: model });
|
|
expect(view.render).to.not.throw();
|
|
});
|
|
|
|
describe('once rendered', function () {
|
|
describe('on root level', function () {
|
|
var imageSrc = 'http://example.org/someNewImage.png';
|
|
var model = new (ContainerBlock.ContainerBlockModel)({
|
|
type: 'container',
|
|
orientation: 'vertical',
|
|
image: {
|
|
src: imageSrc,
|
|
display: 'scale',
|
|
width: 123,
|
|
height: 456,
|
|
},
|
|
styles: {
|
|
block: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
},
|
|
});
|
|
var view;
|
|
|
|
beforeEach(function () {
|
|
global.stubChannel(EditorApplication);
|
|
global.stubAvailableStyles(EditorApplication);
|
|
view = new (ContainerBlock.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);
|
|
});
|
|
|
|
it('has a duplication tool', function () {
|
|
expect(view.$('.mailpoet_duplicate_block')).to.have.length(1);
|
|
});
|
|
|
|
it('has a background image set', function () {
|
|
var style = view.$('style').text();
|
|
expect(style).contains('.mailpoet_editor_view_' + view.cid);
|
|
expect(style).contains('background-color: #ffffff !important;');
|
|
expect(style).contains('background-image: url(http://example.org/someNewImage.png);');
|
|
expect(style).contains('background-position: center;');
|
|
expect(style).contains('background-size: cover;');
|
|
});
|
|
});
|
|
|
|
describe.skip('on non-root levels', function () {
|
|
var model = new (ContainerBlock.ContainerBlockModel)();
|
|
var view;
|
|
|
|
beforeEach(function () {
|
|
global.stubChannel(EditorApplication);
|
|
global.stubAvailableStyles(EditorApplication);
|
|
view = new (ContainerBlock.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);
|
|
});
|
|
|
|
it('has a duplication tool', function () {
|
|
expect(view.$('.mailpoet_duplicate_block')).to.have.length(1);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('settings view', function () {
|
|
global.stubChannel(EditorApplication);
|
|
global.stubAvailableStyles(EditorApplication);
|
|
|
|
it('renders', function () {
|
|
var model;
|
|
var view;
|
|
model = new (ContainerBlock.ContainerBlockModel)();
|
|
view = new (ContainerBlock.ContainerBlockSettingsView)({ model: model });
|
|
expect(view.render).to.not.throw();
|
|
});
|
|
|
|
describe('once rendered', function () {
|
|
var model;
|
|
var view;
|
|
var newSrc = 'http://example.org/someNewImage.png';
|
|
beforeEach(function () {
|
|
global.stubChannel(EditorApplication);
|
|
global.stubAvailableStyles(EditorApplication);
|
|
model = new (ContainerBlock.ContainerBlockModel)();
|
|
view = new (ContainerBlock.ContainerBlockSettingsView)({ model: model });
|
|
view.render();
|
|
});
|
|
|
|
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('updates the model background image display type changes', function () {
|
|
view.$('.mailpoet_field_display_type:nth(2)').attr('checked', true).change();
|
|
expect(model.get('image.display')).to.equal('tile');
|
|
});
|
|
|
|
it('updates the model when background image src changes', function () {
|
|
global.stubImage(123, 456);
|
|
view.$('.mailpoet_field_image_address').val(newSrc).trigger('input');
|
|
expect(model.get('image.src')).to.equal(newSrc);
|
|
});
|
|
|
|
it('updates the model when background image src is deleted', function () {
|
|
global.stubImage(123, 456);
|
|
view.$('.mailpoet_field_image_address').val('').trigger('input');
|
|
expect(model.get('image.src')).to.equal(null);
|
|
});
|
|
|
|
it('displays/hides tools and highlight container block when settings active/inactive', function () {
|
|
var settingsView;
|
|
var blockView = new (ContainerBlock.ContainerBlockView)({ model: model });
|
|
blockView.render();
|
|
// Set proper depth since we want to highlight only top level containers
|
|
blockView.renderOptions = {
|
|
depth: 1,
|
|
};
|
|
expect(blockView.$el.hasClass('mailpoet_highlight')).to.equal(false);
|
|
settingsView = new (ContainerBlock.ContainerBlockSettingsView)({ model: model });
|
|
settingsView.render();
|
|
expect(blockView.$el.hasClass('mailpoet_highlight')).to.equal(true);
|
|
settingsView.destroy();
|
|
expect(blockView.$el.hasClass('mailpoet_highlight')).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);
|
|
});
|
|
});
|
|
});
|
|
});
|