Using Partial in Handlebars and Reusing Code

Open Event Webapp uses handlebar partials for optimizing code. We can reuse a template using Handlebars partial.

How to use Handlebars partial ?

To use Handlebars partial, we have to follow some easy steps:

Step 1: In the .hbs file containing code, register your partial by using function Handlebars.registerPartial 

Handlebars.registerPartial('myPartial', '{{name}}')

Step 2: Calling the partial

{{> myPartial }}

In Open-Event Webapp we have made partials for common templates like navbar and footer.

1. // Navbar template (navbar.hbs)

  
 <!-- Fixed navbar -->
 <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
   <div class="navbar-header navbar-left pull-left">
    <a class="navbar-brand" href="{{ eventurls.main_page_url }}">
    {{#if eventurls.logo_url}}
    <img alt="{{eventurls.name}}" class="logo logo-dark" src="{{  eventurls.logo_url }}">
    {{else}}
    {{ eventurls.name }}
    {{/if}}
    </a>
   </div>
 <div class="navbar-header navbar-right pull-right">
   <ul style="margin-left:20px" class="nav navbar-nav pull-left">
   {{#sociallinks}}
   {{#if show}}
    <li class="pull-left"><a href="{{link}}" style="padding-right:0; padding-left:0;margin-left:15px"><i class="fa fa-lg fa-{{icon}}" aria-hidden="true" title="{{{icon}}}"></i></a></li>
   {{/if}}
   {{/sociallinks}}
   </ul>
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="margin-left:1em;margin-top:1em;">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
 </button>
 </div>

 <div class="hidden-lg hidden-md hidden-sm clearfix"></div>
   <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
     <li class="navlink"><a id="homelink" href="index.html">Home</a>
     {{#if timeList}}
     <li class="navlink">
     <a id="schedulelink"href="schedule.html">
     Schedule</a>
     </li>
     {{/if}}
     {{#if tracks}}
     <li class="navlink">
      <a id="trackslink" href="tracks.html">Tracks</a>
    </li>
  {{/if}}
     {{#if roomsinfo}}
     <li class="navlink">
      <a id="roomslink" href="rooms.html">Rooms</a>   
     </li>
    {{/if}}
    {{#if speakerslist}}
    <li class="navlink">
      <a id="speakerslink" href="speakers.html">Speakers</a>
     </li>
    {{/if}}
   </ul>
     </div>
   </div>
 </nav>
//Compiling Template by providing path

2. const navbar = handlebars.compile(fs.readFileSync(__dirname + '/templates/partials/navbar.hbs').toString('utf-8'));
// Register Partial

3. handlebars.registerPartial('navbar', navbar);

Testing with Jasmine-Node

This week I have started testing my own code with Jasmine-Node. Testing seems beneficial only when we do it with a right approach. I have gone through various articles and find out Jasmine as one of the best frameworks for testing Javascript applications.

For specifically NodeJS, a better option will be to use Jasmine-Node.

How to start with Jasmine-Node ?

For a quick-start, you need to have Jasmine-Node installed with npm.

npm install jasmine-node -g

After the installation, make a folder say spec/ in the root directory of the project. This will contain all the tests for the node app.

We can include the command  to run the tests in package.json file of the project.

./node_modules/.bin/jasmine-node spec

 

script

Like here it is included with the key tester. Now, we are ready to write our first test file.

So, in the Open-event-webapp spec/ folder I have created a file serverSpec.js. The file will test a basic function written in fold.js which is the file that includes all the functions of Open-event-webapp.

//fold.js

'use strict';


var exports = module.exports = {};

const fs = require('fs-extra');
const moment = require('moment');
const handlebars = require('handlebars');
const async = require('async');
const archiver = require('archiver');

//function to test

function speakerNameWithOrg(speaker) {
 return speaker.organisation ?
 `${speaker.name} (${speaker.organisation})` :
 speaker.name;
}

To test the above function, I have written the test like this

//serverSpec.js

'use strict'

const request = require("request");
const fold = require(__dirname +'/../src/generator/backend/fold.js');
const port = process.env.PORT || 5000;
const base_url = "http://localhost:"+ port +"/"

describe("Open Event Server", function() {
  describe("GET /", function() {
    it("returns status code 200", function(done) {
      request.get(base_url, function(error, response, body) {
      expect(response.statusCode).toBe(200);
      done();
    });
   });
 }); 
}); 

describe("Testing Fold.js",function() {
  describe("Testing SpeakerWithOrg function",function(){
    it("it will test speakername", function(){
       let speaker= {
          name: "speakername",
        }
    expect(fold.speakerNameWithOrg(speaker)).toEqual("speakername");
   });

    it("it will test speakername and organisation", function(){
       let speakerWithOrg= {
          name:"speakername",
          organisation:"Organisation",
        }
       expect(fold.speakerNameWithOrg(speakerWithOrg)).toEqual("speakername (Organisation)");
    });
 });
 
 });

There are two describe blocks here one to test if the server is running properly and the second block includes two ‘it’ statements which are used to test the function behavior.

The describe blocks are nested which is a nice feature provided by Node-Jasmine.

To run the above test in Open-event-webapp , use the command:

1. npm run start
2. npm run tester

On success, The output will be something like this

test

Other Sources

  1. Jasmine Presentation
  2. HTML goodies

 

 

Open Source Event App Development

Some background about myself, I am a 3rd year Information Technology student from JSS Academy of Technical Education, Noida, India. I love Front-end development and is currently working on an awesome project Open-Event .

The project will make it easier for the events, tech summits to create a web app and mobile app quickly by providing necessary information such as speakers for the event, sessions, tracks, location etc. The project itself consists of three core components :
1. Open-Event Organiser Server
2. Open-Event Android App
3. Open-Event Web app
It’s the end of community bonding period before the past week, which was the best time to get ourselves familiar with the practices of the community, understanding of the codebase, making new friends and setting up goals. I have already set up my goals and is working on Open-event-web app.

The first version of the web app is to make the web app functional by just uploading a JSON file, the second part is to make it sync with the REST API provided by the Orga-server. I with Arnav have created the User-Story for the web app. Also, I have created the data-flow for the work, we will be carrying forward.

I am having a good time, and will work hard to complete the goals of the project.

Thanks