Chapter 5. Advanced Grunt

Up until now, this book has covered the core concepts required to effectively use Grunt. In this chapter, we shall blaze through some extra ideas, plugins, and tools to take our front-end development to the next level. We will get a sneak peak into Testing with Grunt, Continuous integration with Grunt, External tasks, and Grunt plugins. Finally, we will review a series of JavaScript resources and developer tools.

Testing with Grunt

Performing automated tests is another major use case for Grunt. Let us say our build process involves compiling, analyzing, optimizing, and then deploying our application. This sequential nature of Grunt is useful because if any link in the above process fails, Grunt will not proceed, that is, any subsequent tasks will not be run. This is important because it prevents our analysis tasks from running when our build tasks fail to create the files that we need to analyze. However, static analysis won't spot logical errors in our build files, therefore we may still be deploying a buggy application despite a successful build. We can work towards preventing this by including a test suite to our application –placing our new test task before our deploy task. Even if we have a Quality Assurance (QA) team, which manually tests our application, using a test suite can save QA iterations by quickly catching logic errors.

A test suite is also useful for trapping regression errors. Our QA team might spend weeks testing our application, however, after a number of development iterations without a test suite, they are forced to go back and perform the same tests again to ensure our new code has not broken old functionality. Therefore, our whole team's development cycle can be improved by implementing effective automated tests.

There are a wide variety of JavaScript testing frameworks available, however, the two most popular frameworks are Jasmine and Mocha. Mocha (http://gswg.io#mocha) was written by TJ Holowaychuk, the prolific developer who also brought us Jade, Stylus, and Express. Mocha has one of the widest feature sets across all testing frameworks, with first class support for asynchronous APIs. Below is a simple test written using Mocha's Behavior Driven Design (BDD) syntax:

//Code Example 01-testing
// test/array-tests.js
describe('Array', function(){
  describe('#indexOf()', function(){
    it('should return -1 when not in the array', function(){
      expect([1,2,3].indexOf(5)).to.equal(-1);
      expect([1,2,3].indexOf(0)).to.equal(-1);
    });
  });
});

Here we can see the BDD syntax entails a describe and an it function:

  • describe is used to create a named container (or namespace) for individual tests. These containers are conveyed when we run the test suite to help us see what kinds of tests are passing and failing.
  • it is used to define a test. This function accepts a string of our choice, which states one behavior that should hold true, for example, it("should do foo and bar", …).

In addition to Mocha, we have included the Chai assertion library (http://gswg.io#chai) which allows us to make use of its expect function—a function used to perform assertions and throw appropriate errors for Mocha to catch.

In Code Example 01-testing, we are using the Grunt plugin grunt-mocha (http://gswg.io#grunt-mocha) to run Mocha in a headless browser called PhantomJS (http://gswg.io#phantomjs). PhantomJS is a Web browser without the user interface. This API–only browser is programmable, which allows it to communicate with Grunt via a plugin. Let us give Code Example 01-testing a try:

$ grunt
Running "mocha:test" (mocha) task
Testing: test/runner.html
  
  1 test complete (2 ms)

>> 1 passed! (0.00s)

Done, without errors.

We can see grunt-mocha is testing our test/runner.html, and we have a reference to our simple test/array-tests.js file, which provides one test case. When run, we should see green or red dots for each test passed or failed. In this example, we have one green dot for our single passed test case. However, if we open test/runner.html in a Web browser, instead of Grunt (PhantomJS), we should see Mocha's built-in test reporter. An example of Mocha's browser test runner can be found at http://gswg.io#mocha-browser-example.

Since Grunt is mainly used for front-end Web development, we have used Mocha to test browser JavaScript code. However, Mocha can also be used to test Node.js JavaScript code.

Effective testing methods in JavaScript is a large topic, so this short introduction should gives us an idea of how tests look, and how we can use Grunt to integrate a test step into our builds.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.137.7