diff --git a/.eslintrc.tests.json b/.eslintrc.tests.json index 46f3aa2c3a..8c5373caca 100644 --- a/.eslintrc.tests.json +++ b/.eslintrc.tests.json @@ -12,7 +12,6 @@ "no-undef": 0, "one-var": 0, "indent": 0, - "linebreak-style": 0, "no-whitespace-before-property": 0, "object-property-newline": 0, "global-require": 0, diff --git a/tests/javascript/newsletter_editor/blocks/divider.spec.js b/tests/javascript/newsletter_editor/blocks/divider.spec.js index a446bc21ed..cc4b61b749 100644 --- a/tests/javascript/newsletter_editor/blocks/divider.spec.js +++ b/tests/javascript/newsletter_editor/blocks/divider.spec.js @@ -1,223 +1,223 @@ -define([ - 'newsletter_editor/App', - 'newsletter_editor/blocks/divider' - ], function(App, DividerBlock) { - var EditorApplication = App; - - describe('Divider', function () { - describe('model', function () { - var model; - - beforeEach(function () { - global.stubChannel(EditorApplication); - global.stubConfig(EditorApplication, { - blockDefaults: {} - }); - global.stubAvailableStyles(EditorApplication); - model = new (DividerBlock.DividerBlockModel)(); - }); - - afterEach(function () { - delete EditorApplication.getChannel; - }); - - it('has a divider type', function () { - expect(model.get('type')).to.equal('divider'); - }); - - it('has a background color', function () { - expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/); - }); - - it('has padding', function () { - expect(model.get('styles.block.padding')).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 width', function () { - expect(model.get('styles.block.borderWidth')).to.match(/^\d+px$/); - }); - - it('has border color', function () { - expect(model.get('styles.block.borderColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/); - }); - - 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('triggers autosave if any attribute changes', function () { - var mock = sinon.mock().exactly(5).withArgs('autoSave'); - EditorApplication.getChannel = sinon.stub().returns({ - trigger: mock - }); - - 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'); - - mock.verify(); - }); - - 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 (DividerBlock.DividerBlockModel)(); - - 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'); - }); - }); - - describe('block view', function () { - var model; - var view; - - beforeEach(function () { - global.stubChannel(EditorApplication); - global.stubConfig(EditorApplication); - model = new (DividerBlock.DividerBlockModel)(); - view = new (DividerBlock.DividerBlockView)({model: model}); - }); - - it('renders', function () { - expect(view.render).to.not.throw(); - expect(view.$('.mailpoet_divider')).to.have.length(1); - }); - - it('rerenders if model attributes change', function () { - view.render(); - - model.set('styles.block.borderStyle', 'inset'); - - expect(view.$('.mailpoet_divider').css('border-top-style')).to.equal('inset'); - }); - - it('opens settings if clicked', function () { - var mock = sinon.mock().once(); - model.on('startEditing', mock); - view.render(); - view.$('.mailpoet_divider').click(); - mock.verify(); - }); - - it('does not open settings if clicked on the resize handle', function () { - var mock = sinon.mock().never(); - model.on('startEditing', mock); - view.render(); - view.$('.mailpoet_resize_handle').click(); - mock.verify(); - }); - }); - - describe('settings view', function () { - global.stubChannel(EditorApplication); - global.stubConfig(EditorApplication); - global.stubAvailableStyles(EditorApplication, { - dividers: ['solid', 'inset'] - }); - var model = new (DividerBlock.DividerBlockModel)(), - view = new (DividerBlock.DividerBlockSettingsView)({model: model}); - - it('renders', function () { - expect(view.render).to.not.throw(); - expect(view.$('.mailpoet_divider_selector')).to.have.length(1); - }); - - describe('once rendered', function () { - var model, view; - - before(function() { - global.stubChannel(EditorApplication); - global.stubAvailableStyles(EditorApplication, { - dividers: ['solid', 'inset'] - }); - }); - - beforeEach(function () { - model = new (DividerBlock.DividerBlockModel)(); - view = new (DividerBlock.DividerBlockSettingsView)({model: model}); - view.render(); - }); - - 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 model when divider width slider changes', function () { - view.$('.mailpoet_field_divider_border_width').val('17').change(); - expect(model.get('styles.block.borderWidth')).to.equal('17px'); - }); - - it('updates the range slider when divider width input changes', function () { - view.$('.mailpoet_field_divider_border_width_input').val('19').trigger('input'); - expect(view.$('.mailpoet_field_divider_border_width').val()).to.equal('19'); - }); - - 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 color changes', function () { - view.$('.mailpoet_field_divider_border_color').val('#123457').change(); - expect(model.get('styles.block.borderColor')).to.equal('#123457'); - }); - - 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 ('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 (DividerBlock.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); - }); - }); - }); - }); -}); +define([ + 'newsletter_editor/App', + 'newsletter_editor/blocks/divider' + ], function(App, DividerBlock) { + var EditorApplication = App; + + describe('Divider', function () { + describe('model', function () { + var model; + + beforeEach(function () { + global.stubChannel(EditorApplication); + global.stubConfig(EditorApplication, { + blockDefaults: {} + }); + global.stubAvailableStyles(EditorApplication); + model = new (DividerBlock.DividerBlockModel)(); + }); + + afterEach(function () { + delete EditorApplication.getChannel; + }); + + it('has a divider type', function () { + expect(model.get('type')).to.equal('divider'); + }); + + it('has a background color', function () { + expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/); + }); + + it('has padding', function () { + expect(model.get('styles.block.padding')).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 width', function () { + expect(model.get('styles.block.borderWidth')).to.match(/^\d+px$/); + }); + + it('has border color', function () { + expect(model.get('styles.block.borderColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/); + }); + + 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('triggers autosave if any attribute changes', function () { + var mock = sinon.mock().exactly(5).withArgs('autoSave'); + EditorApplication.getChannel = sinon.stub().returns({ + trigger: mock + }); + + 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'); + + mock.verify(); + }); + + 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 (DividerBlock.DividerBlockModel)(); + + 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'); + }); + }); + + describe('block view', function () { + var model; + var view; + + beforeEach(function () { + global.stubChannel(EditorApplication); + global.stubConfig(EditorApplication); + model = new (DividerBlock.DividerBlockModel)(); + view = new (DividerBlock.DividerBlockView)({model: model}); + }); + + it('renders', function () { + expect(view.render).to.not.throw(); + expect(view.$('.mailpoet_divider')).to.have.length(1); + }); + + it('rerenders if model attributes change', function () { + view.render(); + + model.set('styles.block.borderStyle', 'inset'); + + expect(view.$('.mailpoet_divider').css('border-top-style')).to.equal('inset'); + }); + + it('opens settings if clicked', function () { + var mock = sinon.mock().once(); + model.on('startEditing', mock); + view.render(); + view.$('.mailpoet_divider').click(); + mock.verify(); + }); + + it('does not open settings if clicked on the resize handle', function () { + var mock = sinon.mock().never(); + model.on('startEditing', mock); + view.render(); + view.$('.mailpoet_resize_handle').click(); + mock.verify(); + }); + }); + + describe('settings view', function () { + global.stubChannel(EditorApplication); + global.stubConfig(EditorApplication); + global.stubAvailableStyles(EditorApplication, { + dividers: ['solid', 'inset'] + }); + var model = new (DividerBlock.DividerBlockModel)(), + view = new (DividerBlock.DividerBlockSettingsView)({model: model}); + + it('renders', function () { + expect(view.render).to.not.throw(); + expect(view.$('.mailpoet_divider_selector')).to.have.length(1); + }); + + describe('once rendered', function () { + var model, view; + + before(function() { + global.stubChannel(EditorApplication); + global.stubAvailableStyles(EditorApplication, { + dividers: ['solid', 'inset'] + }); + }); + + beforeEach(function () { + model = new (DividerBlock.DividerBlockModel)(); + view = new (DividerBlock.DividerBlockSettingsView)({model: model}); + view.render(); + }); + + 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 model when divider width slider changes', function () { + view.$('.mailpoet_field_divider_border_width').val('17').change(); + expect(model.get('styles.block.borderWidth')).to.equal('17px'); + }); + + it('updates the range slider when divider width input changes', function () { + view.$('.mailpoet_field_divider_border_width_input').val('19').trigger('input'); + expect(view.$('.mailpoet_field_divider_border_width').val()).to.equal('19'); + }); + + 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 color changes', function () { + view.$('.mailpoet_field_divider_border_color').val('#123457').change(); + expect(model.get('styles.block.borderColor')).to.equal('#123457'); + }); + + 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 ('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 (DividerBlock.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); + }); + }); + }); + }); +});