Last year I shared some posts on testing AngularJS web apps:
Getting started with Protractor to automate E2E tests for AngularJS apps
How to steep a unit test environment for AngularJs Application
I thought i’d start 2016 by sharing some other tips in that area.
What is Gulp?
Gulp is a JavaScript Task Runner. Now it took me a while to actually get my head around what Gulp actually does. Gulp enables you to encode in JavaScript repetitive tasks that you perform regularly. This could be starting a web server, JavaScript minification or Testing which will be the focus of this blog.
One of the core benefits of Gulp is that it encodes these tasks in a JavaScript file which is typically named gulp.js. This means all of these encoded tasks can be shared across the team and kept in synch using version control.
Another benefit is that gulp utilises the wide variety of packages available via NPM(Node Package Manager) which means you can automate tasks incredibly easily.
In this blog I won’t go through how to setup Gulp from scratch or how to install Node Packages as the official documents do this very well. Instead my focus will be how you can use Gulp to support testing.
If you want to get started from scratch in addition to the official docs i’d highly recommend John Papas Gulp course on Pluralsight – JavaScript Build Automation with GulpJs
Note: if you don’t currently have a Pluralsight account you can get 3 Months FREE by creating a free Visual Studio Dev Essentials account
How to use Gulp for Testing
Gulp can be used for many tasks but in this blog post I’ll focus on tasks that can be used to support testing.
- Run Unit Tests
This task runs your JavaScript unit tests using Karma. It utilises your karma configuration file which allows you to configure run parameters, such as single run and also what outputs we want to generate, such as Istanbul Code Coverage reports and jUnit XML. You can read more about configuring your unit tests in my previous post
Using Karma you don’t need to install any additional gulp packages as you can call Karma directly through Gulp as explained here
The gulp task looks as follows:
2. Run Protractor E2E Tests
As detailed in a previous blog post, Protractor, is an E2E testing framework mostly used for AngularJS web apps. This gulp task allows you to execute your protractor tests. You’ll need to make some additional tweaks to the task to allow a test suite to be specified. We use protractor test suites to allow control of what tests are run. To do this we used an NPM package called yargs. This blog helps.
What is cool with this task is that in a single task it will get the latest web driver jar, start a selenium server, run the tests and generate the output.
To run your protractor tests using gulp you’ll need to install a couple of node packages:
Yargs (Used for specifying testSuites)
The gulp task looks as follows:
3. Linting
Linting is an activity to discover common mistakes in code and is incredibly useful for JavaScript as its not a compiled language. It’s a great example of static testing that can yield great benefits. Here is an example of the output you get:
Using this gulp task you can Lint your code to identify any simple mistakes or errors keeping the code base clean.
To do the linting you need to install the node package JsHint-Stylish
The gulp task looks as follows:
Putting it all together
To run these tasks you simply start up a nodeJs command prompt and enter gulp followed by your task name. For example:
gulp protractor –testSuiteName
This will run your specified e2e protractor test suite.
As NPM gives you such a wide variety of options there are many more tasks you can add to support your testing. These are probably the three most common. Another example could be starting your mock services.
Local vs CI
You obviously want to avoid duplication so you should use the same Gulp file both locally and on your CI tool such as Jenkins. To achieve this you just need to learn about file paths and ensure your gulp.js file is located sensibly, such as within the project directory.
When running any of the three testing tasks outlined above there is one main difference locally vs CI. Locally you should set Karma and JsLint to watch your files. This provides instant feedback when developing your code. On your CI tool you will want these tasks to execute once, exit and produce the relevant outputs. Executing your gulp tasks through a CI tool such as Jenkins is super easy. In the case of running your Protractor tests the CI job essentially has two commands:
npm install –> Installs your node packages at build time
gulp e2e –testSuiteName –> Executes Protractor tests
You then just need to configure your CI tool to pick up any outputs generated.
Challenges
So this all sounds pretty straightforward but for me it did take a little while to get everything working smoothly. The main challenges I had:
1. What the hell is Gulp!?!?
Sounds simple, but it actually took me a few hours to actually work out the concepts behind Gulp. Hopefully this post has helped clear that up for you.
2. Handling Node Packages Correctly
Gulp in the most part uses node packages to “Do Stuff” so you’ll need to have a good grasp of how that works. Take the time to understand how to use a package.json, devDependencies, npm install and the differences between installing globally v locally. Interestingly, you’ll also need to install gulp both locally and globally.
3. Folder Structres and File Paths
You’ll need to make sure you have your node packages and gulp.js file in a sensible location.The standard is to install dev node packages within the project and your gulp file in the project root. Your gulp file will reference underlying configure files such as karma.conf.js and also declare output directories so you’ll need to understand how to move around the directory structure using JavaScript.
Alternatives
If you keen to crack on and use Gulp, at this point i’d highlight that there are alternatives out there which I haven’t used, the most popular is Grunt.
Finally, a heads up that Gulp 4 is currently in beta and will be launched soon