Fixes Image block to update image dimensions when image src changes

assets/js/src/newsletter_editor/blocks/image.js

@@ -65,7 +65,7 @@ define([
     events: function() {
       return {
         "input .mailpoet_field_image_link": _.partial(this.changeField, "link"),
-        "input .mailpoet_field_image_address": _.partial(this.changeField, "src"),
+        "input .mailpoet_field_image_address": 'changeAddress',
         "input .mailpoet_field_image_alt_text": _.partial(this.changeField, "alt"),
         "change .mailpoet_field_image_full_width": _.partial(this.changeBoolCheckboxField, "fullWidth"),
         "change .mailpoet_field_image_alignment": _.partial(this.changeField, "styles.block.textAlign"),
@@ -327,6 +327,20 @@ define([
 
       this._mediaManager.open();
     },
+    changeAddress: function(event) {
+      var src = jQuery(event.target).val();
+      var image = new Image();
+
+      image.onload = function() {
+        this.model.set({
+          src: src,
+          width: image.naturalWidth + 'px',
+          height: image.naturalHeight + 'px'
+        });
+      }.bind(this);
+
+      image.src = src;
+    },
     onBeforeDestroy: function() {
       base.BlockSettingsView.prototype.onBeforeDestroy.apply(this, arguments);
       if (typeof this._mediaManager === 'object') {

tests/javascript/mochaTestHelper.js

@@ -68,6 +68,26 @@ global.stubAvailableStyles = function (EditorApplication, styles) {
   EditorApplication.getAvailableStyles = sinon.stub().returns(new Backbone.SuperModel(styles));
 };
 
+global.stubImage = function(defaultWidth, defaultHeight) {
+  global.Image = function() {
+    this.onload = function() {};
+    this.naturalWidth = defaultWidth;
+    this.naturalHeight = defaultHeight;
+    this.address = '';
+
+    Object.defineProperty(this, 'src', {
+      "get": function() {
+        return this.address;
+      },
+      "set": function(src) {
+        this.address = src;
+        this.onload();
+      },
+    });
+  };
+}
+
+
 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'});

tests/javascript/newsletter_editor/blocks/image.spec.js

@@ -155,12 +155,17 @@ define([
 
     describe('block settings view', function () {
       var model, view;
+      var newWidth = 123;
+      var newHeight = 456;
+      var newLink = 'http://example.org/someNewLink';
+      var newSrc = 'http://example.org/someNewImage.png';
 
       before(function () {
         global.stubChannel(EditorApplication);
         global.stubConfig(EditorApplication, {
           blockDefaults: {},
         });
+        global.stubImage(newWidth, newHeight);
         model = new (ImageBlock.ImageBlockModel)();
         view = new (ImageBlock.ImageBlockSettingsView)({model: model});
       });
@@ -171,15 +176,23 @@ define([
 
       describe('once rendered', function () {
         it('updates the model when link changes', function () {
-          var newValue = 'http://example.org/someNewLink';
+          view.$('.mailpoet_field_image_link').val(newLink).trigger('input');
-          view.$('.mailpoet_field_image_link').val(newValue).trigger('input');
+          expect(model.get('link')).to.equal(newLink);
-          expect(model.get('link')).to.equal(newValue);
         });
 
         it('updates the model when src changes', function () {
-          var newValue = 'http://example.org/someNewImage.png';
+          view.$('.mailpoet_field_image_address').val(newSrc).trigger('input');
-          view.$('.mailpoet_field_image_address').val(newValue).trigger('input');
+          expect(model.get('src')).to.equal(newSrc);
-          expect(model.get('src')).to.equal(newValue);
+        });
+
+        it('updates the width when src changes', function () {
+          view.$('.mailpoet_field_image_address').val(newSrc).trigger('input');
+          expect(model.get('width')).to.equal(newWidth + 'px');
+        });
+
+        it('updates the height when src changes', function () {
+          view.$('.mailpoet_field_image_address').val(newSrc).trigger('input');
+          expect(model.get('height')).to.equal(newHeight + 'px');
         });
 
         it('updates the model when alt changes', function () {