Include thumbnail on saved templates, add another sample template

assets/js/src/newsletter_editor/components/save.js

@@ -47,18 +47,34 @@ define([
     });
   };
 
+  Module.getThumbnail = function(element, options) {
+    return html2canvas(element, options || {});
+  };
+
   Module.saveTemplate = function(options) {
+    var that = this,
+        promise = jQuery.Deferred();
+
+    promise.then(function(thumbnail) {
+      var data = _.extend(options || {}, {
+        thumbnail: thumbnail.toDataURL('image/jpeg'),
+        body: App.getBody(),
+      });
+
       return MailPoet.Ajax.post({
         endpoint: 'newsletterTemplates',
         action: 'save',
-      data: _.extend(options || {}, {
-        body: App.getBody(),
-      }),
+        data: data,
+      });
     });
-  };
 
-  Module.getThumbnail = function(element, options) {
-    return html2canvas(element, options || {});
+    Module.getThumbnail(
+      jQuery('#mailpoet_editor_content > .mailpoet_block').get(0)
+    ).then(function(thumbnail) {
+      promise.resolve(thumbnail);
+    });
+
+    return promise;
   };
 
   Module.exportTemplate = function(options) {

lib/Config/Populator.php

@@ -1,7 +1,8 @@
 <?php
 namespace MailPoet\Config;
 
-use MailPoet\Config\PopulatorData\Templates\SampleTemplate;
+use MailPoet\Config\PopulatorData\Templates\FranksRoastHouseTemplate;
+use MailPoet\Config\PopulatorData\Templates\BlankTemplate;
 use \MailPoet\Models\Segment;
 use \MailPoet\Segments\WP;
 
@@ -124,7 +125,8 @@ class Populator {
 
   private function newsletter_templates() {
     return array(
-      (new SampleTemplate(Env::$assets_url))->get(),
+      (new FranksRoastHouseTemplate(Env::$assets_url))->get(),
+      (new BlankTemplate(Env::$assets_url))->get(),
     );
   }
 

tests/javascript/newsletter_editor/components/save.spec.js

@@ -96,7 +96,13 @@ define([
         });
 
         it('triggers template saving when clicked on save as template button', function() {
-          var mock = sinon.mock({ post: function() {} }).expects('post').once().returns(jQuery.Deferred());
+          var mock = sinon.mock({ post: function() {} }).expects('post').once().returns(jQuery.Deferred()),
+            html2canvasMock = jQuery.Deferred();
+
+          html2canvasMock.resolve({
+            toDataURL: function() { return 'somedataurl'; },
+          });
+
           EditorApplication.getBody = sinon.stub();
           var module = SaveInjector({
             'mailpoet': {
@@ -105,6 +111,7 @@ define([
               }
             },
             'newsletter_editor/App': EditorApplication,
+            'html2canvas': function() { return html2canvasMock; },
           });
           var view = new (module.SaveView)();
           view.render();