🎨 Added additional parameters to subscribe_form and input_email helpers (#9820)

closes #9134

- Added form_id, input_id, and button_id parameters to subscribe_form helper
- Added id parameter to input_email helper
- Added test coverage to input_email helper
- Added quotes to id attributes for consistency
- Added subscribe_form helper tests
- Updated express to v4 in helper tests

core/server/apps/subscribers/lib/helpers/input_email.js

@@ -29,11 +29,15 @@ module.exports = function input_email(options) { // eslint-disable-line camelcas
         extras += ' value="' + options.hash.value + '"';
     }
 
+    if (options.hash.id) {
+        extras += ' id="' + options.hash.id + '"';
+    }
+
     output = templates.input({
         type: 'email',
         name: 'email',
         className: className,
-        extras: extras
+        extras: (extras ? extras.trim() : '')
     });
 
     return new SafeString(output);

core/server/helpers/tpl/subscribe_form.hbs

@@ -1,11 +1,11 @@
-<form method="post" action="{{action}}" class="{{form_class}}">
+<form method="post" action="{{action}}" id="{{form_id}}" class="{{form_class}}">
     {{! This is required for the form to work correctly }}
     {{hidden}}
 
     <div class="form-group{{#if error}} error{{/if}}">
-        {{input_email class=input_class placeholder=placeholder value=email autofocus=autofocus}}
+        {{input_email id=input_id class=input_class placeholder=placeholder value=email autofocus=autofocus}}
     </div>
-    <button class="{{button_class}}" type="submit"><span>Subscribe</span></button>
+    <button id="{{button_id}}" class="{{button_class}}" type="submit"><span>Subscribe</span></button>
     {{! This is used to get extra info about where this subscriber came from }}
     {{script}}
 </form>

core/test/unit/apps/subscribers/input_email_spec.js

@@ -0,0 +1,87 @@
+var should = require('should'),
+    // Stuff we are testing
+    input_email = require('../../../../server/apps/subscribers/lib/helpers/input_email');
+
+describe('{{input_email}} helper', function () {
+    it('has input_email helper', function () {
+        should.exist(input_email);
+    });
+
+    it('returns the correct input when no custom options are specified', function () {
+        var markup = '<input class="subscribe-email" type="email" name="email"  />',
+            rendered = input_email();
+        should.exist(rendered);
+
+        String(rendered).should.equal(markup);
+    });
+
+    it('returns the correct input when a custom class is specified', function () {
+        var markup = '<input class="test-class" type="email" name="email"  />',
+            options = {
+                hash: {
+                    class: 'test-class'
+                }
+            },
+            rendered = input_email(options);
+
+        should.exist(rendered);
+
+        String(rendered).should.equal(markup);
+    });
+
+    it('returns the correct input when an autofocus is specified', function () {
+        var markup = '<input class="subscribe-email" type="email" name="email" autofocus="autofocus" />',
+            options = {
+                hash: {
+                    autofocus: true
+                }
+            },
+            rendered = input_email(options);
+
+        should.exist(rendered);
+
+        String(rendered).should.equal(markup);
+    });
+
+    it('returns the correct input when a placeholder is specified', function () {
+        var markup = '<input class="subscribe-email" type="email" name="email" placeholder="Test" />',
+            options = {
+                hash: {
+                    placeholder: 'Test'
+                }
+            },
+            rendered = input_email(options);
+
+        should.exist(rendered);
+
+        String(rendered).should.equal(markup);
+    });
+
+    it('returns the correct input when a value is specified', function () {
+        var markup = '<input class="subscribe-email" type="email" name="email" value="Test value" />',
+            options = {
+                hash: {
+                    value: 'Test value'
+                }
+            },
+            rendered = input_email(options);
+
+        should.exist(rendered);
+
+        String(rendered).should.equal(markup);
+    });
+
+    it('returns the correct input when an id is specified', function () {
+        var markup = '<input class="subscribe-email" type="email" name="email" id="test-id" />',
+            options = {
+                hash: {
+                    id: 'test-id'
+                }
+            },
+            rendered = input_email(options);
+
+        should.exist(rendered);
+
+        String(rendered).should.equal(markup);
+    });
+});

core/test/unit/apps/subscribers/subscribe_form_spec.js

@@ -0,0 +1,56 @@
+var should = require('should'),
+    hbs = require('../../../../server/services/themes/engine'),
+    configUtils = require('../../../utils/configUtils'),
+    // Stuff we are testing
+    subscribe_form = require('../../../../server/apps/subscribers/lib/helpers/subscribe_form');
+
+describe('{{subscribe_form}} helper', function () {
+    before(function (done) {
+        hbs.express4({partialsDir: [configUtils.config.get('paths').helperTemplates]});
+        hbs.cachePartials(function () {
+            done();
+        });
+
+        hbs.registerHelper('subscribe_form', subscribe_form);
+    });
+
+    after(function () {
+        // @NOTE: We have to deregister the new helper, otherwise we operate on the global hbs engine
+        //        which has registered the subscribe form helper. This is caused by the theme engine creating
+        //        a global hbs instance as soon as you require the file.
+        hbs.handlebars.unregisterHelper('subscribe_form');
+    });
+
+    it('returns a form with basic expected structure', function () {
+        var rendered = subscribe_form({data: {root: ''}, hash: {}});
+        should.exist(rendered);
+
+        should.exist(rendered);
+        rendered.string.should.match(/form method="post" action="\/subscribe\/"/);
+        rendered.string.should.match(/button id="" class="" type="submit"/);
+    });
+
+    it('returns adds classes when passed as parameters', function () {
+        var rendered = subscribe_form({data: {root: ''}, hash: {
+            form_class: 'form-class',
+            button_class: 'button-class'
+        }});
+        should.exist(rendered);
+
+        should.exist(rendered);
+        rendered.string.should.match(/form method="post" action="\/subscribe\/" id="" class="form-class"/);
+        rendered.string.should.match(/button id="" class="button-class" type="submit"/);
+    });
+
+    it('returns adds classes when passed as parameters', function () {
+        var rendered = subscribe_form({data: {root: ''}, hash: {
+            form_id: 'form-id',
+            button_id: 'button-id'
+        }});
+        should.exist(rendered);
+
+        should.exist(rendered);
+        rendered.string.should.match(/form method="post" action="\/subscribe\/" id="form-id" class=""/);
+        rendered.string.should.match(/button id="button-id" class="" type="submit"/);
+    });
+});

core/test/unit/helpers/index_spec.js

@@ -6,7 +6,7 @@ var should = require('should'),
     helpers = require.main.require('core/server/helpers');
 
 describe('Helpers', function () {
-    var hbsHelpers = ['each', 'if', 'unless', 'with', 'helperMissing', 'blockHelperMissing', 'log', 'lookup'],
+    var hbsHelpers = ['each', 'if', 'unless', 'with', 'helperMissing', 'blockHelperMissing', 'log', 'lookup', 'block', 'contentFor'],
         ghostHelpers = [
             'asset', 'author', 'authors', 'body_class', 'content', 'date', 'encode', 'excerpt', 'facebook_url', 'foreach', 'get',
             'ghost_foot', 'ghost_head', 'has', 'img_url', 'is', 'lang', 'meta_description', 'meta_title', 'navigation',
@@ -17,6 +17,7 @@ describe('Helpers', function () {
 
     describe('Load Core Helpers', function () {
         before(function () {
+            hbs.express4();
             helpers.loadCoreHelpers();
         });
 

core/test/unit/helpers/navigation_spec.js

@@ -15,7 +15,7 @@ describe('{{navigation}} helper', function () {
         optionsData;
 
     before(function (done) {
-        hbs.express3({
+        hbs.express4({
             partialsDir: [configUtils.config.get('paths').helperTemplates]
         });
 
@@ -184,7 +184,7 @@ describe('{{navigation}} helper with custom template', function () {
     var optionsData;
 
     before(function (done) {
-        hbs.express3({
+        hbs.express4({
             partialsDir: [path.resolve(configUtils.config.get('paths').corePath, 'test/unit/helpers/test_tpl')]
         });
 

core/test/unit/helpers/pagination_spec.js

@@ -7,7 +7,7 @@ var should = require('should'),
 
 describe('{{pagination}} helper', function () {
     before(function (done) {
-        hbs.express3({partialsDir: [configUtils.config.get('paths').helperTemplates]});
+        hbs.express4({partialsDir: [configUtils.config.get('paths').helperTemplates]});
 
         hbs.cachePartials(function () {
             done();
@@ -122,7 +122,7 @@ describe('{{pagination}} helper', function () {
 
 describe('{{pagination}} helper with custom template', function () {
     before(function (done) {
-        hbs.express3({partialsDir: [path.resolve(configUtils.config.get('paths').corePath, 'test/unit/helpers/test_tpl')]});
+        hbs.express4({partialsDir: [path.resolve(configUtils.config.get('paths').corePath, 'test/unit/helpers/test_tpl')]});
 
         hbs.cachePartials(function () {
             done();