Hector's blog

A sw engineer blog.

Grunt, Grunt Watch and mochaTest

Introduction

Two weeks ago I started working 100% with nodeJs, and one of the things that caught my attention is that npm packages try to adhere to the philosophy of *nix: Write programs that do one thing and do it well.

While I started learning how to setup my TDD environment I found my self repeating copying and pasting the same small portion of javascript lines, so here I will share my quick setup to develop a npm module package.

Npm

I will assume that you already have nodeJs installed, so the first step is to run npm init.

$ mkdir my_module && cd my_module
$ my_module: npm init

Npm will ask you some questions about your package:

name: (my_module) //Name without spaces
version: (1.0.0) //leave it like this
description: //You npm module description
entry point: (index.js) //leave it like this
test command: __grunt mochaTest__ //We will be adding this shortly
git repository: //leave it empty for now
keywords: //empty
license: MIT //go with MIT
Is this ok? (yes) //verify everything is good.

A new file will be created on the root of my_module folder:

$ my_module: cat package.json
{
  "name": "my_module",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "grunt mochaTest"
  },
  "author": "Hector Yeomans (http://hyeomans.com/)",
  "license": "MIT"
}

Grunt, mochaTest and grunt watch.

Next step is to add the required minimal packages to start doing some TDD:

$ my_module: npm install –save-dev grunt grunt-contrib-watch grunt-mocha-test mocha should

After running that command you can verify that everything went fine checking new entries on the package.json file:

$ my_module: cat package.json
{
  "name": "my_module",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "grunt mochaTest"
  },
  "author": "Hector Yeomans (http://hyeomans.com/)",
  "license": "MIT",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-mocha-test": "^0.12.7",
    "mocha": "^2.1.0",
    "should": "^4.6.2"
  }
}

Now just add grunt for your production environment:

$ my_module: npm install --save grunt

Check your package.json and there should be a new entry.

Gruntfile

Grunt will allow us to run tasks from our command line, in this case we want two tasks added: one to watch our files and the other to run our tests. On the root folder create the following file:

$ my_module: sublime Gruntfile.js

Use any editor you want, the contents of the Gruntfile are:


module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-mochatest');

  grunt.initConfig({
    watch: {
      scripts: {
        files: ['src/**/*.js', 'test/**/*.js'],
        tasks: ['mochaTest']
      }
    },
    mochaTest: {
      test: {
        options: {
          reporter: 'spec'
        },
        src: ['test/**/*.js']
      }
    }
  });
};

As you can see, two new folders have to be created:

$ my_module: mkdir src && mkdir test

To verify everything is working, run the following command:

$ my_module: grunt watch
//You should see:
Running "watch" task
Waiting...

If you don’t see that, try installing grunt globally:

$ my_module: grunt install -g grunt grunt-cli

And then try again.

Your first test

First we will make sure that mocha is running properly, create a dumb test file:

$ my_module: sublime test/dumb-test.js

Inside type the following:

var should = require('should');

describe('Dumb Test', function () {
  it('is true', function () {
    true.should.be.false;    
  });
});

After saving, go back to the console window and type:

$ my_module: grunt mochaTest
//And you will see something like this:
AssertionError: expected true to be false

Before going back to your test and fixing it, you can fire up grunt watch

$ my_module: grunt watch

Fix your test and you will see a green dumb test.

Conclusion

It is really easy to setup your environment and start coding right away, the only drawback is that you find yourself repeating this over and over again. Hopefully next week we will have a yeoman generator to handle all this.

Command-Query Separation

Command Query Separation (CQS from now on) is a principle of software design that states that every method should be either a command OR a query, not both.

Struggling With This in JS

The this keyword.

A really intelligent workmate says that if you cannot explain a concept easily to someone who’s trying to learn given concept, then you don’t really know it.

In this post I will try to explain this concept for javascript. this binding is, at least for me, a constant source of confusion. I’m mainly a backend developer and when I get to see JS code I have to go back and forth reviewing how that this keyword works. Guesses, trial and error, copy-paste pattern from StackOverflow answers have not been an effective way for me to really learn what the this concept is and more importantly to miss the opportunity to leverage the real power that sits behind the concept.

Initial Commit

Don’t you cry no more

That’s the name of the song I’m listening while I started to write this post and I think is very appropiate for this week events Kansas - Carry On wayward Son.

This week I realized how profound the impact of my actions can be and the ripple effect can be either disastrous or very constructive.