Development guided by tests

We’ll cover:

unit tests
integration test
using stubs
using mocks
other\n
- isomorphic apps\n \t* react for template rendering\n \t* bake in performance testing (phantomas: https://github.com/macbre/phantomas)\n \t* static analysis (https://github.com/es-analysis/plato / code climate)\n \t* Shrinwrap and locking npm module versions\n \t* package the whole thing as an npm package\n \t* refactor grunt file to use modules
\n

",{"_194":195,"_43":44,"_47":16,"_45":46,"_64":65,"_196":197,"_228":192},"previewContent","

\n Introduction\n
- \n Conventions\n
- \n What we will be building\n
- \n How we will build it\n
- \n What you will need\n
\n
\n Getting started\n
- \n Setting up our project\n
- \n Recap\n
\n
\n Writing our first functional test\n
- \n Web server: Express\n
- \n Cucumber, WebDriver and Selenium\n
- \n Our first test\n
- \n Recap\n
\n
\n Continuous delivery\n
- \n Setting up our Continuous Integration environment using Codeship\n
- \n Setting up Continous Deployment to Heroku\n
- \n Recap\n
\n
\n Building our assets\n
- \n Compile our less to css\n
- \n Concatenate and minify our JavaScript\n
\n
\n Unit tests\n
- \n Setting up our unit test runner using karma\n
- \n Writing and running our first unit test\n
- \n Running our tests as part of the build\n
- \n Continuously running our tests\n
- \n Adding code coverage\n
- \n Recap\n
\n
\n Development guided by tests\n
\n TODO\n
- \n Appendices\n
\n

Introduction

The idea for this book started with a series of blog posts I wrote some time ago exploring building a Backbone.js app using tests. I initially wanted to just consolidate these blog posts into a book, however once I started jotting down what I wanted to put into this series, I decided there was more to write about.

\n\n

In the Front end and JavaScript world we have come a long way since the heady days of table based layouts sprinkled with Macromedia roll over scripts to make web pages interactive. The lines between back end and front end application code has almost blurred completely, you could argue it no longer exists when you consider Isomorpic apps. Our tooling has changed substantially as well: at our disposal we have package managers (for both back and front end), build tools, unit test frameworks and deployment tools.

\n\n

Conventions

\n\n

Before we get started here are few conventions to be aware of. Where ever you see a statement like below starting with > this is a command you type from the terminal window

\n\n

1 > menaing a command typed at the console\n

\n\n

Whereas as the following typicallys is code or a configuration to be added to a file:

\n\n

1 code\n2 or\n3 config\n

\n\n

What we will be building

Over the coming pages and posts we will explore how to build a web app guided by tests, using a toolset that will allow you to deploy with each commit to the cloud. We’ll making use of JavaScript across the whole stack to build a small weather app using forecast.io’s API. The app itself will use the browser’s Geolocation API to figure out where your user is and retrieve a weekly weather forecast for that location.

\n\n

How we will build it

Plain and simple, we’ll build this app guided by tests, using a continuous delivery model and have it deployed using Codeship’s CD service to a Heroku instance.

\n\n

The focus of this book is really about setting you on the right path to delivering quality software reliably and continuously. By the end you should have the confidence to push every commit to ‘production’.

\n\n

We will be making extensive use of the following tools:

\n\n

Node.js
Grunt
Karma
Jasmine
Cucumber
Selenium

What you will need

There are few pre-requisits you will need to get this app built. You will need to sign up for some services, grab a code/etxt editor, set up a version control system and finally get your Node.js environment configured.

\n\n\n

As I mentioned for our weather forecast API, we’ll be using forecast.io, so you might want to go and sign up for a developer account as you will need a key to access the API.

\n\n

You should also sign up for a Github or Bitbucket account if you don’t already have one, we’ll need this for version control and our CI service.

\n\n

So that we can reliably deploy our app, we’ll make use of Codeship’s hosted Continuous Integration service. Sign up for the free service to get started.

\n\n

To host our app we’ll make use of Heroku’s cloud computing service. They also offer a free service to help you get started.

\n\n

That should cover the things you need to sign up for.

\n\n

Code editor

You will need a decent IDE (I recommend WebStorm) or Text Editor (Sublime is very popular with many of my co-workers).

\n\n

Cloud9’s browser based editor (though calling it just an editor, is doing it a bit of a disservice) Is another option I can recommend.

\n\n

Version control: Git

Using Version Control for every project is a must, regardless of size or complexity. If you don’t already have Git installed you should do so. There are many ways to install the necessary binaries and the Git website has all the necessary links. If you are on a Mac though, then I would recommend using Homebrew to install the binaries.

\n\n

If you are new to Git then I recommend taking the Git Immersion guided tour.

\n\n

Node.js and NPM

We’ll be making extensive use of JavaScript and various libraries throughout the book, so you will need to install Node.js and NPM. Once again if you are on a Mac though, then I would recommend using Homebrew to install the binaries.

\n\n

NPM will allow us to resolve all of the dependencies we need in order to achieve our goal of building and delivering a web app guided by tests.

\n\n

Bower

Bower is handy tool to manage your front end library dependencies, so I recommed installing it as well.

\n\n

Grunt

Grunt will be our build and automation tool. If you haven’t used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins.

\n\n

With all that installed and configured, it’s time to get started!

\n\n

Getting started

The first thing I like to do with any project is to get our build pipeline set up and start deploying code to our ‘production’ environment. To that end we need to look at building the simplest thing possible to validate our testing infrastructure works, our CI envinronment can pick up changes on commit and after a succesful build deploy the changes.

\n\n

I will assume you have signed up and installed all of the software outlined in the What you will need section.

\n\n

Setting up our project

Open up a terminal window and navigate to the location you want to store your project files.

\n\n

\n
I use a mac, so most of the commands listed here are *nix based and for the most part they shouls also work on a windows machine.
\n

\n\n

Once there let’s create a project folder and change into it:

\n\n

1 > mkdir weatherly && cd weatherly\n

\n\n

Let’s initilise our github repository:

\n\n

1 > git init\n2 > Initialized empty Git repository in /Users/gregstewart/Projects/github/weather\\\n3 ly/.git/\n

\n\n

Before we go any further let’s create a .gitignore file in the root of our project and add the following lines to it:

\n\n

1 node_modules\n2 .idea\n

\n\n

Once down let’s commit this change quickly:

\n\n

1 > git add .gitignore\n2 > git commit -m \"Adding folders to the ignore list\"\n

\n\n

From a folder perspective I like to create a distribution folder and an app folder to hold the source, so let’s go ahead and add these folders as well.

\n\n

1 > mkdir app\n2 > mkdir dist\n

\n\n

We’ll start by using bower to grab some of our front end dependencies. Let’s start by creating a bower.json file by typing bower init, fill in the details as you see fit, but here’s what I selected:

\n\n

 1 {\n 2 \tname: 'weatherly',\n 3 \tversion: '0.0.0',\n 4 \tauthors: [\n 5 \t\t'Greg Stewart <gregs@tcias.co.uk>'\t\n 6 \t],\n 7 \tdescription: 'Building a web app guided by tests',\n 8 \tmoduleType: [\n 9 \t\t'commonjs'\n10 \t],\n11 \tlicense: 'MIT',\n12 \thomepage: 'http://www.tcias.co.uk/',\t\n13 \tprivate: true,\n14 \tignore: [\n15 \t\t'**/.*',\n16 \t\t'node_modules',\n17 \t\t'bower_components',\n18 \t\t'test',\n19 \t\t'tests'\n20 \t]\n21 }\t\n

\n\n

Everybody likes a bit of Bootstrap so let’s start with that package :

\n\n

1 > bower install bootstrap --save\n

\n\n

The --save flag at the end of the command means that the dependecy will be added to our bower.jon file during the installation of the package. We are doing this because we do not want to check in any external dependencies into our repository, instead at build/CI time we’ll restore these using bower.

\n\n

So let’s edit our .gitignore file to make sure we don’t accidentally commit these files:

\n\n

1 node_modules\n2 .idea\n3 bower_components\n

\n\n

And let’s add this change to our repo:

\n\n

1 > git add .gitignore \n2 > git commit -m \"Adding bower_components to the ignore list\"\n

\n\n

To round things off let’s install HTML5 boilerplate

\n\n

1 > bower install html5-boilerplate\n

\n\n

You may have noticed that I decided not to add this package to our bower.json file, simply because we’ll copy the files we need into our app folder:

\n\n

1 > mv bower_components/html5-boilerplate/css app/\n2 > mv bower_components/html5-boilerplate/img app/\n3 > mv bower_components/html5-boilerplate/*.html app/\n4 > mv bower_components/html5-boilerplate/*.png app/ \n5 > mv bower_components/html5-boilerplate/*.xml app/\n6 > mv bower_components/html5-boilerplate/*.ico app/\n7 > mv bower_components/html5-boilerplate/*.txt app/\n

\n\n

In your editor of choice open up the app/index.html file and add the following:

\n\n

 1 <!DOCTYPE html>\n 2 <!--[if lt IE 7]>      <html class=\"no-js lt-ie9 lt-ie8 lt-ie7\"> <![endif]-->\n 3 <!--[if IE 7]>         <html class=\"no-js lt-ie9 lt-ie8\"> <![endif]-->\n 4 <!--[if IE 8]>         <html class=\"no-js lt-ie9\"> <![endif]-->\n 5 <!--[if gt IE 8]><!--> <html class=\"no-js\"> <!--<![endif]-->\n 6 \t<head>\n 7     \t<meta charset=\"utf-8\">\n 8     \t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n 9     \t<title>Weatherly - Forecast for London</title>\n10     \t<meta name=\"description\" content=\"\">\n11 \t    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n12 \n13         <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->\n14 \n15     \t<link rel=\"stylesheet\" href=\"css/main.css\">\n16 \t</head>\n17 \t<body>\n18     \t<!--[if lt IE 7]>\n19         \t<p class=\"browsehappy\">You are using an <strong>outdated</strong> brows\\\n20 er. Please <a href=\"http://browsehappy.com/\">upgrade your browser</a> to improve\\\n21  your experience.</p>\n22     \t<![endif]-->\n23 \n24     \t<!-- Add your site or application content here -->\n25     \t<div class=\"container\">\n26         \t<div class=\"header\">\n27             \t<ul class=\"nav nav-pills pull-right\">\n28                 \t<li class=\"active\"><a href=\"#\">Home</a></li>\n29                 \t<li><a href=\"#\">About</a></li>\n30                \t\t<li><a href=\"#\">Contact</a></li>\n31             \t</ul>\n32             \t<h3 class=\"text-muted\">test</h3>\n33         \t</div>\n34 \n35         \t<div class=\"jumbotron\">\n36             \t<h1>London Right Now</h1>\n37             \t<p class=\"temperature\">14 degrees</p>\n38             \t<p>Mostly cloudy - feels like 14 degrees</p>\n39         \t</div>\n40 \n41         \t<div class=\"row marketing\">\n42             \t<div class=\"col-lg-6\">\n43                 \t<h4>NEXT HOUR</h4>\n44                 \t<p>Mostly cloudy for the hour.</p>\n45 \n46                 \t<h4>NEXT 24 HOURS</h4>\n47                \t\t<p>Mostly cloudy until tomorrow afternoon.</p>\n48             \t</div>\n49         \t</div>\n50 \n51         \t<div class=\"footer\">\n52             \t<p><span class=\"glyphicon glyphicon-heart\"></span> from Weatherly</\\\n53 p>\n54         \t</div>\n55 \n56     \t</div>\n57     \t<p></p>\n58 \n59     \t<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"><\\\n60 /script>\n61     \t<script>window.jQuery || document.write('<script src=\"js/vendor/jquery-1.10\\\n62 .2.min.js\"><\\/script>')</script>\n63 \n64     \t<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->\n65     \t<script>\n66         \t(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=\n67                \t function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Da\\\n68 te;\n69             \te=o.createElement(i);r=o.getElementsByTagName(i)[0];\n70             \te.src='//www.google-analytics.com/analytics.js';\n71             \tr.parentNode.insertBefore(e,r)}(window,document,'script','ga'));\n72         \tga('create','UA-XXXXX-X');ga('send','pageview');\n73     \t</script>\n74 \t</body>\n75 </html>\n

\n\n

If you open up the file in your browser you should see something like this hopefully:

\n\n

\n $\"Rendered$

Rendered HTML

\n\n

Not exactly something to write home about, but it’s enough for us to get started setting up our little server, writing a functional test and deploying something to our Heroku instance. We’ll make this a lot prettier later on in the book when we deal with setting up Grunt to build our JavaScript and CSS assets.

\n\n

The last thing we’ll do is commit all of our changes to our local repository:

\n\n

1 > git add .\n2 > git commit -m \"Added Bootstrap/Modernizr to bower.json, moved the skeleton of \\\n3 the HTML5 boilerplate to the app folder and created a base index page for our we\\\n4 ather forecat app.\"\n

\n\n

At this stage it’s a good idea to also push the changes to our remote repository. If you have followed the What you will need section, you will hopefully have created a Github account. If not go ahead and to that now. Then create a repository called weatherly, here’s what I entered:

\n\n

\n $\"Creating$

Creating your weatherly repository

\n\n

To push our changes to the remote repository, you will need to tell your local repository where it is (be sure to replace the <account_name> with your actual account name):</account_name>

\n\n

1 > git remote add origin https://github.com/<account_name>/weatherly.git\n

\n\n

Now you can push your changes:

\n\n

1 > git push -u origin master\n

\n\n

Recap

Before we move on let’s just quickly recap what we have done so far:

\n\n

created our app folder structure
initialised our git repo
created a Git ignore file
used bower to manage some of our front end dependencies:\n
- Bootstrap
- Modernizr
- HTML5 boilerplate
\n
created a very basic index.html page
pushed all of the changes to our remote git repository

Writing our first functional test

\n\n

__TODO I seem to mainly refer to the tests as end to end test, I should rename this section to reflect this __

\n\n

What is a functional test? Wikipedia tells us:

\n\n

\n
Functional testing is a quality assurance (QA) process[1] and a type of black box testing that bases its test cases on the specifications of the software component under test. Functions are tested by feeding them input and examining the output, and internal program structure is rarely considered (not like in white-box testing).[2] Functional Testing usually describes what the system does.
\n

\n\n

Throughout this section and in future you may find me refering to these kind of tests as Functional Tests, End-to-end, Feature tests or indeed User Journey tests. Confusing I know, I will try my best to keep it to feature and end-to-end tests, but be prepared when discussing this topic to come across the same variety of breadth of names for Functional tests.

\n\n

With the definition out of the way, let’s go through the steps necessary in order to write our first functional test. We needed a test page, which we built in the previous section, now let’s set up a simple Node.js webserver to host the page.

\n\n

Web server: Express

A good practice to follow while working with Git is to create a branch for each feature that you are working on, so let’s go ahead and create a new branch for this item of work.

\n\n

1 > git checkout -b web-server\n

\n\n

Make sure you are in the root of our project and not in the app/ folder

\n\n

Since we’ll be using Node.js we can use NPM to manage the dependencies. These dependencies are stored in a folder called node_modules. Since we don’t want to check any node modules/packages into our repository we added that folder to our .gitignore file in when we first set up the project. If we don’t add those packages to our repository you may be wondering how our CI and Heroku instance will now how to run the app. To that end we’ll use a handy file called package.json. When we run NPM we can not only install dependencies, we can also add them to our package.json file and our target envinronments can read this file and install these packages for us.

\n\n

Typing npm init allows us to create our package.json, here’s what I answered when prompted:

\n\n

 1 This utility will walk you through creating a package.json file.\n 2 It only covers the most common items, and tries to guess sane defaults.\n 3 \n 4 See `npm help json` for definitive documentation on these fields\n 5 and exactly what they do.\n 6 \n 7 Use `npm install <pkg> --save` afterwards to install a package and\n 8 save it as a dependency in the package.json file.\n 9 \n10 Press ^C at any time to quit.\n11 name: (weatherly)\n12 version: (0.0.0)\n13 description: Building a web app guided by tests\n14 entry point: (index.js)\n15 test command: grunt test\n16 git repository: (https://github.com/gregstewart/weatherly.git)\n17 keywords:\n18 author: Greg Stewart\n19 license: (ISC) MIT\n20 About to write to /Users/gregstewart/Projects/github/weatherly/package.json:\n21 \n22 {\n23 \t\"name\": \"weatherly\",\n24 \t\"version\": \"0.0.0\",\n25 \t\"description\": \"Building a web app guided by tests\",\n26 \t\"main\": \"index.js\",\n27 \t\"scripts\": {\n28 \t\t\"test\": \"grunt test\"\n29 \t},\n30 \t\"repository\": {\n31 \t\t\"type\": \"git\",\n32 \t\t\"url\": \"https://github.com/gregstewart/weatherly.git\"\n33 \t},\n34 \t\"author\": \"Greg Stewart\",\n35 \t\"license\": \"MIT\",\n36 \t\"bugs\": {\n37 \t\t\"url\": \"https://github.com/gregstewart/weatherly/issues\"\n38 \t},\n39   \t\"homepage\": \"https://github.com/gregstewart/weatherly\"\n40 }\n41 \n42 Is this ok? (yes) yes\n

\n\n

As you can see it autocompleted a bunch of information for you, such as the project name, version number and Git details. Let’s add that file to our repo before going any further:

\n\n

1 > git add package.json\n2 > git commit -m \"Created package.json file\"\n

\n\n

Now let’s go ahead and install a web server module. We’ll just use express.

\n\n

1 > npm install express --save\n

\n\n

Similar to how we used Bower, by specifying --save the dependecy was added to our package.json file, if you open it up you should see the following toward the end of the file:

\n\n

1 \"dependencies\": {\n2 \t\"express\": \"^4.4.5\"\n3 }\n

\n\n

Next create a new file called server.js in the root of our project and add the following content:

\n\n

1 var express = require('express');\n2 var app = express();\n3 \n4 app.use(express.static(__dirname + '/app'));\n5 \n6 var server = app.listen(3000, function() {\n7   console.log('Listening on port %d', server.address().port);\n8 });\n

\n\n

And to start our server type:

\n\n

1 > npm start\n

\n\n

If you now open your browser and hit http://localhost:3000 you should once again see:

\n\n

\n $\"Rendered$

Rendered HTML hosted by our Connect server

\n\n

The process that runs our server is not daemonised and will continue to run until we close the console or type ^C. Go ahead and kill the server. Next we add those changes to our repository, merge these changes back into master and finally push to origin:

\n\n

1 > git add server.js\n2 > git add package.json\n3 > git commit -m \"Installed Connect and created a very basic web server for our a\\\n4 pp\"\n5 > git checkout master\n6 > git merge web-server\n7 > git push\n

\n\n

Cucumber, WebDriver and Selenium

For our functional tests I have chosen Cucumber.js and WebDriver.js with Selenium. I chose this combination because I believe this will give you greater felxibility in the long wrong, especially if you plan on using different languages in your toolchain. You can find Ruby, Java and .Net versions of Cucumber, WebDriver and Selenium.

\n\n

Once again we’ll create a dedicated branch for this work:

\n\n

1 > git checkout -b functional-test\n

\n\n

Selenium

\n\n

\n
Selenium uses Java, so you will need to make sure you have it installed.
\n

\n\n

We could install the binaries manually, but since I plan using Grunt to automate tasks around starting and stopping the server, we might as well use [grunt-selenium-webdriver] (https://www.npmjs.org/package/grunt-selenium-webdriver) module as this includes everything that we need, including the jar file for the Selenium Server.

\n\n

1 > npm install grunt-selenium-webdriver --save-dev\n

\n\n

We use the --save-dev flag to indicate that we want to add this dependency to our package.json file, however only for development purposes (meaning that when we deploy to our ‘production’ environment, e.g. Heroku, it won’t install the package during deployment). With that done let’s create a Grunt task to start the Selenium server (just in case you missed it in the Getting Started section you can find more information on Grunt and tasks over at the official Grunt.js website). The first thing we’ll need is a Gruntfile.js, so add one to the root of your project and edit it to contain the following:

\n\n

 1 module.exports = function(grunt) {\n 2 \tgrunt.initConfig({\n 3 \t});\n 4 \t\n 5 \tgrunt.loadNpmTasks('grunt-selenium-webdriver');\n 6 \t\n 7 \tgrunt.registerTask('e2e', [\n 8 \t\t'selenium_start',\n 9 \t\t'selenium_stop'\n10 \t]);\n11 };\n

\n\n

Save the changes and at the command line type: grunt e2e and you should see something like this:

\n\n

1 Running \"selenium_start\" task\n2 seleniumrc webdriver ready on 127.0.0.1:4444\n3 \n4 Running \"selenium_stop\" task\n5 \n6 Done, without errors.\n

\n\n

This told grunt to execute a task called e2e and confirms that the selenium server started properly at the following address 127.0.0.1:4444 and then was shutdown again (apparently it is not necessary to shutdown the server with a stop task).

\n\n

Using Grunt to start and stop the express server

Let’s also add a step to stop and start our web server when we are running our frunctional tests. To that end we’ll install another grunt module:

\n\n

1 > npm install grunt-express-server --save-dev\n

\n\n

And we’ll edit our Grunt file so that it looks for our server.js and we can control the starting and stopping of our server:

\n\n

 1 module.exports = function(grunt) {\n 2 \tgrunt.initConfig({\n 3 \t\texpress: {\n 4   \t\t\ttest: {\n 5     \t\t\toptions: {\n 6       \t\t\t\tscript: './server.js'\n 7     \t\t\t}\n 8   \t\t\t}\n 9 \t\t}\n10 \t});\n11 \t\n12 \tgrunt.loadNpmTasks('grunt-express-server');\n13 \tgrunt.loadNpmTasks('grunt-selenium-webdriver');\n14 \t\n15 \tgrunt.registerTask('e2e', [\n16 \t\t'selenium_start',\n17 \t\t'express:test',\n18 \t\t'selenium_stop',\n19 \t\t'express:test:stop'\n20 \t\t]);\n21 };\n

\n\n

If we now run grunt e2e, we should see the following output:

\n\n

 1 Running \"selenium_start\" task\n 2 seleniumrc webdriver ready on 127.0.0.1:4444\n 3 \n 4 Running \"express:test\" (express) task\n 5 Starting background Express server\n 6 Listening on port 3000\n 7 \n 8 Running \"selenium_stop\" task\n 9 \n10 Running \"express:test:stop\" (express) task\n

\n\n

WebDriver

The next thing we need to do is install WebDriver.js and we are then nearly ready to write our first feature test:

\n\n

1 > npm install webdriverjs --save-dev\n

\n\n

WebDriver is the glue between Selenium and Cucumber.

\n\n

Cucumber

The final piece of the puzzle is Cucumber.js:

\n\n

1 > npm install cucumber --save-dev\n

\n\n

Our first test

\n\n

Features are written using the Gherkin syntax, and this is what our first feature looks like:

\n\n

1 Feature: Using our awesome weather app\n2 \tAs a user of weatherly\n3 \tI should be able to see the weather information for my location\n4 \n5 \tScenario: Viewing the homepage\n6 \t\tGiven I am on the home page\n7 \t\tWhen I view the main content area\n8 \t\tThen I should see the temperature for my location\n

\n\n

I like to store these and the associated code in a e2e directory under a parent tests folder. So go ahead and create that folder structure under the root of our project. Then create a features folder and save the above feature contents to a file called using-weatherly.feature.

\n\n

If we were to run our cucumber tests now using > cucumber.js tests/e2e/features/using-weatherly.feature we would see the following output:

\n\n

 1 UUU\n 2 \n 3 1 scenario (1 undefined)\n 4 3 steps (3 undefined)\n 5 \n 6 You can implement step definitions for undefined steps with these snippets:\n 7 \n 8 this.Given(/^I am on the home page$/, function (callback) {\n 9 \t// express the regexp above with the code you wish you had\n10 \tcallback.pending();\n11 });\n12 \n13 this.When(/^I view the main content area$/, function (callback) {\n14 \t// express the regexp above with the code you wish you had\n15 \tcallback.pending();\n16 });\n17 \n18 this.Then(/^I should see the temperature for my location$/, function (callback) {\n19 \t// express the regexp above with the code you wish you had\n20 \tcallback.pending();\n21 });\n

\n\n

This is extremely useful output. While it’s clear that the code to execute the steps in the feature are undefined, the output actually gives snippets to create our step definitions. So let’s go ahead and create our step definition. Inside of our functional test folder, create a steps folder and add a file called using-weatherly-step-definitions.js with the following content:

\n\n

 1 var UsingWeatherlyStepDefinitions = function () {\n 2 \n 3 \tthis.Given(/^I am on the home page$/, function (callback) {\n 4   \t\t// express the regexp above with the code you wish you had\n 5   \t\tcallback.pending();\n 6 \t});\n 7 \n 8 \tthis.When(/^I view the main content area$/, function (callback) {\n 9   \t\t// express the regexp above with the code you wish you had\n10   \t\tcallback.pending();\n11 \t});\n12 \n13 \tthis.Then(/^I should see the temperature for my location$/, function (callback)\\\n14  {\n15   \t\t// express the regexp above with the code you wish you had\n16   \t\tcallback.pending();\n17 \t});\n18 };\n19 \n20 module.exports = UsingWeatherlyStepDefinitions;\n

\n\n

Let’s try and execute our feature test again with > cucumber.js tests/e2e/features/using-weatherly.feature --require tests/e2e/steps/using-weatherly-step-definitions.js and now we should see:

\n\n

1 P--\n2 \n3 1 scenario (1 pending)\n4 3 steps (1 pending, 2 skipped)\n

\n\n

Time to flesh out the steps to do some work and check for elements on the page while the tests are running. We’ll make use of Chai.js as our assertion library, so let’s go ahead and install this module:

\n\n

1 > npm install chai --save-dev\n

\n\n

The first bit of code we’ll add to our tests is a World object, which will initialise our browser (read WebDriver) and add a few helper methods (visit and hasText). As our browser we are using PhantomJS, but if you would like to see the test running in say FireFox, simply replace browserName: 'phantomjs' with browserName: 'firefox'.

\n\n

\n
Note that other browsers such as Chrome and IE require special drivers which you can download from the Selenium website
\n

\n\n

Here’s our world object (world.js), which we save into a folder called support under tests/e2e:

\n\n

 1 var webdriverjs = require('webdriverjs');\n 2 var expect = require('chai').expect;\n 3 var assert = require('chai').assert;\n 4 \n 5 var client = webdriverjs.remote({ desiredCapabilities: {browserName: 'phantomjs'\\\n 6 }, logLevel: 'silent' });\n 7 \n 8 client.addCommand('hasText', function (selector, text, callback) {\t\tthis.getText\\\n 9 (selector, function (error, result) {\n10 \t\texpect(result).to.have.string(text);\n11 \t\tcallback();\n12 \t});\n13 });\n14 \n15 client.init();\n16 \n17 \n18 var World = function World(callback) {\n19 \tthis.browser = client;\n20 \t\n21 \tthis.visit = function(url, callback) {\n22 \t\tthis.browser.url(url, callback);\n23 \t};\n24 \t\n25 \tcallback(); // tell Cucumber we're finished and to use 'this' as the world inst\\\n26 ance\n27 };\n28 \n29 exports.World = World;\n

\n\n

Please note that if when running the tests you come across the message shown below (logging in verbose mode here), this simply (indeed simply…) means that webdriverjs cannot find phatomjs in your PATH.

\n\n

 1 ================================================================================\\\n 2 ====\n 3 Selenium 2.0/webdriver protocol bindings implementation with helper commands in \\\n 4 nodejs.\n 5 For a complete list of commands, visit http://webdriver.io/docs.html.\n 6 \n 7 ================================================================================\\\n 8 ====\n 9 \n10 [09:51:45]:  ERROR      Couldn't get a session ID - undefined\n11 Fatal error: [init()] <=\n12 An unknown server-side error occurred while processing the command.\n

\n\n

Now let’s re-visit our using-weatherly-step-definitions.js and replace the contents with the following code:

\n\n

 1 var UsingWeatherlyStepDefinitions = function () {\n 2 \tthis.World = require(\"../support/world.js\").World;\n 3 \n 4     this.Given(/^I am on the home page$/, function (callback) {\n 5   \t\tthis.visit('http://localhost:3000/', callback);\n 6 \t});\n 7 \n 8 \tthis.When(/^I view the main content area$/, function (callback) {\n 9   \t\tthis.browser.hasText('.jumbotron h1', 'London Right Now', callback);\n10 \t});\n11 \n12 \tthis.Then(/^I should see the temperature for my location$/, function (callback)\\\n13  {\n14   \t\tthis.browser.hasText('p.temperature', '14 degrees', callback);\n15 \t});\n16 };\n17 \n18 module.exports = UsingWeatherlyStepDefinitions;\n

\n\n

The first step opens the site, and then we assert that the header element displays London Right Now and that the element with our temperature shows 14 degrees

\n\n

If we were to once again try and execute our feature test, we would get an error telling us that it can’t connect to the selenium server. So let’s wrap all of this into our e2e grunt task. Let’s start by adding another module to our setup:

\n\n

1 > npm install grunt-cucumber --save-dev\n

\n\n

And let’s edit our Gruntfile.js to look like this now:

\n\n

 1 module.exports = function(grunt) {\n 2 \tgrunt.initConfig({\n 3 \t\texpress: {\n 4   \t\t\ttest: {\n 5     \t\t\toptions: {\n 6       \t\t\t\tscript: './server.js'\n 7     \t\t\t}\n 8   \t\t\t}\n 9 \t\t},\n10 \t\tcucumberjs: {\n11   \t\t\tsrc: 'tests/e2e/features/',\n12   \t\t\toptions: {\n13     \t\t\tsteps: 'tests/e2e/steps/'\n14   \t\t\t}\n15 \t\t}\n16 \t});\n17 \t\n18 \tgrunt.loadNpmTasks('grunt-express-server');\n19 \tgrunt.loadNpmTasks('grunt-selenium-webdriver');\n20 \tgrunt.loadNpmTasks('grunt-cucumber');\n21 \t\n22 \tgrunt.registerTask('e2e', [\n23 \t\t'selenium_start',\n24 \t\t'express:test',\n25 \t\t'cucumberjs',\n26 \t\t'selenium_stop',\n27 \t\t'express:test:stop'\n28 \t]);\n29 };\n

\n\n

Now type > grunt e2e and you should see the following output:

\n\n

 1 Running \"selenium_start\" task\n 2 seleniumrc webdriver ready on 127.0.0.1:4444\n 3 \n 4 Running \"express:test\" (express) task\n 5 Starting background Express server\n 6 Listening on port 3000\n 7 \n 8 Running \"cucumberjs:src\" (cucumberjs) task\n 9 ...\n10 \n11 1 scenario (1 passed)\n12 3 steps (3 passed)\n13 \n14 Running \"selenium_stop\" task\n15 \n16 Running \"express:test:stop\" (express) task\n17 Stopping Express server\n18 \n19 Done, without errors.\n

\n\n

With that done we can commit our changes to our repository:

\n\n

1 > git add .\n2 > git commit -m \"Scenario: Viewing the homepage, created and implemented\"\n3 > git checkout master\n4 > git merge functional-test\n5 > git push\n

\n\n

Recap

To sum things up in this section we created a set of grunt tasks that:

\n\n

start our selenium server
start our express server that hosts our page
execute the features and steps we defined with cucumberjs
output the result to the console
closes down the services after finishing the tests

We also wrote a feature test that:

\n\n

open a browser
check the contents for a header
check for an element that holds the current temperature

Continuous delivery

In the previous part we wrote our first functional test (or feature test or end 2 end test) and automated the running using a set of Grunt tasks. Now we will put these tasks to good use and have our Continuous Integration server run the test with each commit to our remote repository. There are two parts two Continuous Delivery: Continuous Integration and Continuous Deployment. These two best practices were best defined in the blog post over at Treehouse, do read the article, but here’s the tl;rd:

\n\n

\n
Continuous Integration is the practice of testing each change done to your codebase automatically and as early as possible. But this paves the way for the more important process: Continuous Deployment.
\n

\n\n

\n
Continuous Deployment follows your tests to push your changes to either a staging or production system. This makes sure a version of your code is always accessible.
\n

\n\n

In this ection we’ll focus on Continuous Integration. As always before starting we’ll create a dedicated branch for our work:

\n\n

1 git checkout -b ci\n

\n\n

Setting up our Continuous Integration environment using Codeship

In the what you will need section I suggested signing up for a few services, if you haven’t by now created an account with either Github and Codeship now is the time! Also if you haven’t already now is the time to connect your Githuib account with Codeship. You can do this by looking under your account settings for connected services:

\n\n

\n $\"Link$

Link your Github account to Codeship

\n\n

To get started we need to create a new project:

\n\n

\n $\"Create$

Create a new project

\n\n

This starts starts a three step process:

\n\n

Connect to your source code provider
Choose your repository
Setup test commands

The first step is easy, choose the Github option, then for step two choose the weatherly repository from the list.

\n\n

\n
If you hadn’t already signed up for Github and hadn’t pushed your changes to it, then the repository won’t be showing up in the list. Link your local repository and push all changes up before continuing.
\n

\n\n

Not it’s time to set up the third step, set up out test commands. From the drop down labelled Select your technology to prepopulate basic commands choose node.js.

\n\n

Next we need to tackle the section: Modify your Setup Commands. The instructions tell us that it can use the Node.js version specified in our package.json file, given that we have not added this information previously let’s go ahead and do that now. If you are unsure of the version of Node.js simply type:

\n\n

1 node --version\n

\n\n

In my case the output was 0.10.28, below is my package.json file, look for the block labelled with engines:

\n\n

 1 {\n 2 \t\"name\": \"weatherly\",\n 3 \t\"version\": \"0.0.0\",\n 4 \t\"description\": \"Building a web app guided by tests\",\n 5 \t\"main\": \"index.js\",\n 6 \t\"engines\" : {\n 7 \t\t\"node\" : \"~0.10.28\"\n 8 \t},\n 9 \t\"scripts\": {\n10 \t\t\"test\": \"grunt test\"\n11 \t},\n12 \t\"repository\": {\n13 \t\t\"type\": \"git\",\n14 \t\t\"url\": \"https://github.com/gregstewart/weatherly.git\"\n15 \t},\n16 \t\"author\": \"Greg Stewart\",\n17 \t\"license\": \"MIT\",\t\n18 \t\"bugs\": {\n19 \t\t\"url\": \"https://github.com/gregstewart/weatherly/issues\"\n20 \t},\n21 \t\"homepage\": \"https://github.com/gregstewart/weatherly\",\n22 \t\"dependencies\": {\n23 \t\t\"express\": \"^4.4.5\"\n24 \t},\n25 \t\"devDependencies\": {\n26 \t\t\"chai\": \"^1.9.1\",\n27 \t\t\"cucumber\": \"^0.4.0\",\n28 \t\t\"grunt\": \"^0.4.5\",\n29 \t\t\"grunt-cucumber\": \"^0.2.3\",\n30 \t\t\"grunt-express-server\": \"^0.4.17\",\n31 \t\t\"grunt-selenium-webdriver\": \"^0.2.420\",\n32 \t\t\"webdriverjs\": \"^1.7.1\"\n33 \t}\n34 }\n

\n\n

With that added we can edit the set up commands to look as follows:

\n\n

1 npm install\n2 npm install grunt-cli\n

\n\n

Now let’s edit the Modify your Test Commands section. In the previous chapter we created a set of tasks to run our tests and wrapped them in a grunt command grunt e2e. Let’s add this command to our configuration:

\n\n

1 grunt e2e\n

\n\n

That’s hit the big save button. Right now we are ready to push some changes to our repository. Luckily we have a configuration change ready to push!

\n\n

1 git add package.json\n2 git commit -m \"Added node version to the configuration for CI\"\n3 git checkout master\n4 git merge ci\n5 git push\n

\n\n

And with that go over to your codeship dashboard and if it all went well, then you should see something like this:

\n\n

\n $\"First$

First CI run!

\n\n

You have to admit that setting this up was a breeze. Now we are ready to configure our Continous Deployment to Heroku.

\n\n

Setting up Continous Deployment to Heroku

Before we configure our CI server to to deploy our code to Heroku on a successful build, we’ll need to create a new app through our Heroku dashboard:

\n\n

\n $\"Heroku$

Heroku dashboard

\n\n

And click on the Create a new app link and complete the dialogue box.

\n\n

\n $\"Creating$

Creating a new app

\n\n

The name weatherly was already taken so I left it blank to get one assigned, if you do this as well, just be sure to make a note of it as we’ll need it shortly. I choose Europe, well because I live in Europe, so feel free to choose what ever region makes sense to you.

\n\n

\n $\"Confirmation$

Confirmation screen

\n\n

Armed with this information let’s head back to our project on Codeship and let’s configure our deployment. From the project settings choose the Deployment tab and from the targets select Heroku. You will need your Heroku app name (see above) and your Heroku api key which you can find under your account settings under the Heroku dashboard:

\n\n

\n $\"Codeship$

Codeship settings for heroku deployment

\n\n

We will be deploying from our master branch. Once you are happy with your settings click on the little green tick icon to save the information. Time to test our set up! We just need to make one little change to our app configuration which is handy because that will allow us to commit and a change and verify the whole process from start to finish. In the previous section we have configured our web server to listen on port 3000, well Heroku assigns a part dynamically, so we to account for that by editing our server.js file by adding process.env.PORT to our listen function:

\n\n

1 var express = require('express');\n2 var app = express();\n3 \n4 app.use(express.static(__dirname + '/app'));\n5 \n6 var server = app.listen(process.env.PORT || 3000, function() {\n7 \tconsole.log('Listening on port %d', server.address().port);\n8 });\n

\n\n

Now let’s commit the change:

\n\n

1 git add server.js\n2 git commit -m \"Server configured to handle dynamic port allocation\"\n3 git push\n

\n\n

If we check our build dashboard we should see a succesful build and deployment to our Heroku instance:

\n\n

\n $\"Successful$

Successful build and deployment

\n\n

The build process checks that we get a 200 response back and marks the build as successful, so let’s open up our browser to see the results of our work:

\n\n

\n $\"Weatherly$

Weatherly running on Heroku

\n\n

And there you are your Continuous Delivery pipeline has been created and in less than a minute we go from commit to production!

\n\n

Recap

In this last section we:

\n\n

configued our ci envinronment
it runs our feature test
created a Heroku app
configured our CI environment to deploy to that instance
modified our web server to handle dynamic port allocation

And now it’s time to write some code!

\n\n

Building our assets

Now that we have a pipeline up and running it’s time to turn our attention to dealing with building our code and assets and figure out how are our app will consume these. We do not want to check in our generated assets, however Heroku deploys using a git mechanism.

\n\n

Let’s start by creating some tasks to generate our css, then concatenate and ulgyfy our JS and we’ll finish by deploying these assets to Heroku as part of a successful build. We’ll also add some tasks to run these tasks on our local machine and have these re-generated when we save changes to the file.

\n\n

1 git checkout -c generate-assets\n

\n\n

TODO: why do we generate our assets?

\n\n

Compile our less to css

Let’s tackle with our CSS files. The first thing we want to do is add the destination folder for our css content to the .gitignore list:

\n\n

1 node_modules\n2 .idea\n3 bower_components\n4 phantomjsdriver.log\n5 app/css/\n

\n\n

Under our source folder let’s create a less folder and create a main.less file in it. Here’s content of the file:

\n\n

1 @import '../../bower_components/bootstrap/less/bootstrap';\n

\n\n

Our build tasks will take this import directive and create us a nice main.css file that we can then use in our app.

\n\n

1 npm install grunt-contrib-less --save-dev\n

\n\n

And now let’s create a task to generate our css files by adding to our Gruntfile:

\n\n

 1 module.exports = function (grunt) {\n 2     grunt.initConfig({\n 3         express: {\n 4             test: {\n 5                 options: {\n 6                     script: './server.js'\n 7                 }\n 8             }\n 9         },\n10         cucumberjs: {\n11             src: 'tests/e2e/features/',\n12             options: {\n13                 steps: 'tests/e2e/steps/'\n14             }\n15         },\n16         less: {\n17         \tproduction: {\n18             \toptions: {\n19                 \tpaths: ['app/css/'],\n20                 \tcleancss: true\n21             \t},\n22             \tfiles: {\n23                \t\t'app/css/main.css': 'src/less/main.less'\n24             \t}\n25         \t}\n26     \t}\n27     });\n28 \n29     grunt.loadNpmTasks('grunt-express-server');\n30     grunt.loadNpmTasks('grunt-selenium-webdriver');\n31     grunt.loadNpmTasks('grunt-cucumber');\n32     grunt.loadNpmTasks('grunt-contrib-less');\n33 \n34     grunt.registerTask('generate', ['less:production']);\n35 \n36     grunt.registerTask('e2e', [\n37         'selenium_start',\n38         'express:test',\n39         'cucumberjs',\n40         'selenium_stop',\n41         'express:test:stop'\n42     ]);\n43 \n44 };\n

\n\n

When you run grunt generate, you should see the following output:

\n\n

1 Running \"less:production\" (less) task\n2 File app/css/main.css created: 131.45 kB â†’ 108.43 kB\n

\n\n

If you were to start up our server and browse to localhost:3000, our UI should have more of a Bootstrap feel to it!

\n\n

$\"Rendered$ \nNow bootstrap also needs some fonts, so let’s move these across as part of the build.

\n\n

1 npm install grunt-contrib-copy --save-dev\n

\n\n

And add a simple task to copy our fonts across as well:

\n\n

 1 module.exports = function (grunt) {\n 2     grunt.initConfig({\n 3         express: {\n 4             test: {\n 5                 options: {\n 6                     script: './server.js'\n 7                 }\n 8             }\n 9         },\n10         cucumberjs: {\n11             src: 'tests/e2e/features/',\n12             options: {\n13                 steps: 'tests/e2e/steps/'\n14             }\n15         },\n16         less: {\n17         \tproduction: {\n18             \toptions: {\n19                 \tpaths: ['app/css/'],\n20                 \tcleancss: true\n21             \t},\n22             \tfiles: {\n23                \t\t'app/css/main.css': 'src/less/main.less'\n24             \t}\n25         \t}\n26     \t},\n27         copy: {\n28             fonts: {\n29                 expand: true,\n30                 src: ['bower_components/bootstrap-sass-official/vendor/assets/fo\\\n31 nts/bootstrap/*'],\n32                 dest: 'app/css/bootstrap/',\n33                 filter: 'isFile',\n34                 flatten: true\n35             }\n36         }\n37     });\n38 \n39     grunt.loadNpmTasks('grunt-express-server');\n40     grunt.loadNpmTasks('grunt-selenium-webdriver');\n41     grunt.loadNpmTasks('grunt-cucumber');\n42     grunt.loadNpmTasks('grunt-contrib-less');\n43     grunt.loadNpmTasks('grunt-contrib-copy');\n44 \n45     grunt.registerTask('generate', ['less:production', 'copy:fonts']);\n46 \n47     grunt.registerTask('e2e', [\n48         'selenium_start',\n49         'express:test',\n50         'cucumberjs',\n51         'selenium_stop',\n52         'express:test:stop'\n53     ]);\n54 \n55 };\n

\n\n

Running grunt generate task should now also copy our fonts across.

\n\n

\n $\"Fonts$

Fonts now included

\n\n

This is great, but how do we get this to run as part of our successful build?

\n\n

Heroku build packs

Heroku has a way to run commands after a build, these come in the form of build packs. Luckily for us someone has already gone through the effort of creating one to run Grunt after an install.

\n\n

I have to say it’s not ideal, however given Heroku’s git based deployment approach, we have little choice but to generate these as part of the deployement. Typicall you would rely on the build to generate a package with all of the generated assets ready for consumption. This works though and does not force us to commit our generated assets into our repository.

\n\n

So here’s how you go about installing our Build Pack for Grunt (be sure to replace --app lit-meadow-5649 with your actual heroku app name):

\n\n

1 heroku login\n2 \n3 heroku config:add BUILDPACK_URL=https://github.com/mbuchetics/heroku-buildpack-n\\\n4 odejs-grunt.git --app lit-meadow-5649\n5 \n6 heroku config:set NODE_ENV=production --app lit-meadow-5649\n

\n\n

Then we modify our Gruntfile to include a new heroku:production task, which basically references our build task:

\n\n

 1 module.exports = function (grunt) {\n 2     grunt.initConfig({\n 3         express: {\n 4             test: {\n 5                 options: {\n 6                     script: './server.js'\n 7                 }\n 8             }\n 9         },\n10         cucumberjs: {\n11             src: 'tests/e2e/features/',\n12             options: {\n13                 steps: 'tests/e2e/steps/'\n14             }\n15         },\n16         less: {\n17         \tproduction: {\n18             \toptions: {\n19                 \tpaths: ['app/css/'],\n20                 \tcleancss: true\n21             \t},\n22             \tfiles: {\n23                \t\t'app/css/main.css': 'src/less/main.less'\n24             \t}\n25         \t}\n26     \t},\n27         copy: {\n28             fonts: {\n29                 expand: true,\n30                 src: ['bower_components/bootstrap-sass-official/vendor/assets/fo\\\n31 nts/bootstrap/*'],\n32                 dest: 'app/css/bootstrap/',\n33                 filter: 'isFile',\n34                 flatten: true\n35             }\n36         }\n37     });\n38 \n39     grunt.loadNpmTasks('grunt-express-server');\n40     grunt.loadNpmTasks('grunt-selenium-webdriver');\n41     grunt.loadNpmTasks('grunt-cucumber');\n42     grunt.loadNpmTasks('grunt-contrib-less');\n43     grunt.loadNpmTasks('grunt-contrib-copy');\n44 \n45     grunt.registerTask('generate', ['less:production', 'copy:fonts']);\n46 \n47     grunt.registerTask('e2e', [\n48         'selenium_start',\n49         'express:test',\n50         'cucumberjs',\n51         'selenium_stop',\n52         'express:test:stop'\n53     ]);\n54 \n55     grunt.registerTask('unit', [\n56         'karma:unit'\n57     ]);\n58 \n59     grunt.registerTask('heroku:production', 'generate');\n60 };\n

\n\n

The final step involves re-jigging package.json to include those newly added grunt tasks as a general dependency:

\n\n

 1     {\n 2     \"name\": \"weatherly\",\n 3     \"version\": \"0.0.0\",\n 4     \"description\": \"Building a web app guided by tests\",\n 5     \"main\": \"index.js\",\n 6     \"engines\": {\n 7         \"node\": \"~0.10.28\"\n 8     },\n 9     \"scripts\": {\n10         \"test\": \"grunt test\"\n11     },\n12     \"repository\": {\n13         \"type\": \"git\",\n14         \"url\": \"https://github.com/gregstewart/weatherly.git\"\n15     },\n16     \"author\": \"Greg Stewart\",\n17     \"license\": \"MIT\",\n18     \"bugs\": {\n19         \"url\": \"https://github.com/gregstewart/weatherly/issues\"\n20     },\n21     \"homepage\": \"https://github.com/gregstewart/weatherly\",\n22     \"dependencies\": {\n23         \"express\": \"^4.4.5\",\n24         \"grunt-contrib-copy\": \"^0.5.0\",\n25         \"grunt-contrib-less\": \"^0.11.3\"\n26     },\n27     \"devDependencies\": {\n28         \"chai\": \"^1.9.1\",\n29         \"cucumber\": \"^0.4.0\",\n30         \"grunt\": \"^0.4.5\",\n31         \"grunt-contrib-copy\": \"^0.5.0\",\n32         \"grunt-contrib-less\": \"^0.11.3\",\n33         \"grunt-cucumber\": \"^0.2.3\",\n34         \"grunt-express-server\": \"^0.4.17\",\n35         \"grunt-selenium-webdriver\": \"^0.2.420\",\n36         \"webdriverjs\": \"^1.7.1\"\n37     }\n38 }\n

\n\n

This is another thing about this approach that I am not a fan of, having to move what are essentially development dependencies into our production dependencies.

\n\n

Now we are nearly ready to test this out, however there is one more task we need to add. Since we are using Bower for some of our front end components and we haven’t checked these into our repository, we’ll need to restore them from our bower.json file. Let’s first install a new grunt package to assist us:

\n\n

1 npm install grunt-bower-task --save\n

\n\n

And the edit our Gruntfile.js:

\n\n

 1 module.exports = function (grunt) {\n 2     grunt.initConfig({\n 3         express: {\n 4             test: {\n 5                 options: {\n 6                     script: './server.js'\n 7                 }\n 8             }\n 9         },\n10         cucumberjs: {\n11             src: 'tests/e2e/features/',\n12             options: {\n13                 steps: 'tests/e2e/steps/'\n14             }\n15         },\n16         less: {\n17         \tproduction: {\n18             \toptions: {\n19                 \tpaths: ['app/css/'],\n20                 \tcleancss: true\n21             \t},\n22             \tfiles: {\n23                \t\t'app/css/main.css': 'src/less/main.less'\n24             \t}\n25         \t}\n26     \t},\n27         copy: {\n28             fonts: {\n29                 expand: true,\n30                 src: ['bower_components/bootstrap-sass-official/vendor/assets/fo\\\n31 nts/bootstrap/*'],\n32                 dest: 'app/css/bootstrap/',\n33                 filter: 'isFile',\n34                 flatten: true\n35             }\n36         },\n37     \tbower: {\n38         \tinstall: {\n39             \toptions: {\n40                 \tcleanTargetDir:false,\n41                \t\ttargetDir: './bower_components'\n42             \t}\n43         \t}\n44     \t}\n45     });\n46 \n47     grunt.loadNpmTasks('grunt-express-server');\n48     grunt.loadNpmTasks('grunt-selenium-webdriver');\n49     grunt.loadNpmTasks('grunt-cucumber');\n50     grunt.loadNpmTasks('grunt-contrib-less');\n51     grunt.loadNpmTasks('grunt-contrib-copy');\n52     grunt.loadNpmTasks('grunt-bower-task');\n53 \n54     grunt.registerTask('generate', ['less:production', 'copy:fonts']);\n55 \tgrunt.registerTask('build', ['bower:install', 'generate']);\n56 \n57     grunt.registerTask('e2e', [\n58         'selenium_start',\n59         'express:test',\n60         'cucumberjs',\n61         'selenium_stop',\n62         'express:test:stop'\n63     ]);\n64 \n65     grunt.registerTask('heroku:production', 'build');\n66 };\n

\n\n

With that let’s push these changes and see if we can’t have a more nicely styled page appear on our Heroku app!

\n\n

1 git add .\n2 git commit -m \"Generate less as part of the build and copy fonts to app folder\"\n3 git checkout master\n4 git merge code-build\n5 git push origin master\n

\n\n

Concatenate and minify our JavaScript

Having generated our CSS at build time, it’s time to turn our attention to concatenating and minifying our JavaScript.

\n\n

If you recall in our getting started section we set up our project and used Bower to manage our front end dependencies. For our code we will be Browserify and adopting a CommonJS approach to dealing with modules and dependencies.

\n\n

TODO: CommonJS vs AMD and why

\n\n

To get started first create a our source directory for our JavaScript, we’ll store our source under:

\n\n

1 > mkdir node_modules/weatherly/js\n

\n\n

Storing them under node_modules has a great benefit when using browserify, you no longer need require your files using relative paths such as this little beauty:

\n\n

1 var model = require('../../src/js/model/TodaysWeather'); \n

\n\n

Typing all this out will get tedius very quickly. Time for a file to test our build process, call it TodaysWeather.js and let’s save it under a sub folder called models:

\n\n

1 > mkdir node_modules/weatherly/js/models\n2 > touch node_modules/weatherly/js/models/TodaysWeather.js\n

\n\n

And add the following to that file:

\n\n

1 var TodaysWeather = function () {\n2     console.log('test');\n3 };\n4 \n5 module.exports = TodaysWeather;\n

\n\n

At this point you may be wondering how we are going to commit the code under node_modules/weatherly/js, given how we have set up our .gitignore file. I will come to that shortly.

\n\n

With that done let’s install a grunt task for Browserify

\n\n

1 npm install grunt-browserify --save\n

\n\n

The reason we have chosen a grunt task is that we will use this to export our source so that browsers can understand module.exports and use it to concatenate our code.

\n\n

We’ll skip through a few steps below and edit our Gruntfile.js to include the task we just installed, define the steps to build our JavaScript and include it into our build task:

\n\n

 1 module.exports = function (grunt) {\n 2     grunt.initConfig({\n 3         express: {\n 4             test: {\n 5                 options: {\n 6                     script: './server.js'\n 7                 }\n 8             }\n 9         },\n10         cucumberjs: {\n11             src: 'tests/e2e/features/',\n12             options: {\n13                 steps: 'tests/e2e/steps/'\n14             }\n15         },\n16         less: {\n17         \tproduction: {\n18             \toptions: {\n19                 \tpaths: ['app/css/'],\n20                 \tcleancss: true\n21             \t},\n22             \tfiles: {\n23                \t\t'app/css/main.css': 'src/less/main.less'\n24             \t}\n25         \t}\n26     \t},\n27         copy: {\n28             fonts: {\n29                 expand: true,\n30                 src: ['bower_components/bootstrap-sass-official/vendor/assets/fo\\\n31 nts/bootstrap/*'],\n32                 dest: 'app/css/bootstrap/',\n33                 filter: 'isFile',\n34                 flatten: true\n35             }\n36         },\n37     \tbower: {\n38         \tinstall: {\n39             \toptions: {\n40                 \tcleanTargetDir:false,\n41                \t\ttargetDir: './bower_components'\n42             \t}\n43         \t}\n44     \t},\n45     \tbrowserify: {\n46             code: {\n47             \tdest: 'app/js/main.min.js',\n48             \tsrc: 'node_modules/weatherly/js/**/*.js'            \t\t\t\t}\n49         }\n50     });\n51     \n52     grunt.loadNpmTasks('grunt-express-server');\n53     grunt.loadNpmTasks('grunt-selenium-webdriver');\n54     grunt.loadNpmTasks('grunt-cucumber');\n55     grunt.loadNpmTasks('grunt-contrib-less');\n56     grunt.loadNpmTasks('grunt-contrib-copy');\n57     grunt.loadNpmTasks('grunt-bower-task');\n58     grunt.loadNpmTasks('grunt-browserify');\n59 \n60 \tgrunt.registerTask('generate', ['less:production', 'copy:fonts', 'browserify:co\\\n61 de']);\n62 \tgrunt.registerTask('build', ['bower:install', 'generate']);\n63 \tgrunt.registerTask('e2e', [\n64         'selenium_start',\n65         'express:test',\n66         'cucumberjs',\n67         'selenium_stop',\n68         'express:test:stop'\n69     ]);\n70 \n71     grunt.registerTask('heroku:production', 'build');\n72 };\n

\n\n

If we now run our generate task you should find a main.min.js file under app/js, which contains a bunch of Browserify and our test file. However you will notice that while it’s concatenated it’s not minified. Let’s fix this.

\n\n

I chose to go with Uglifyify, as always let’s just install it:

\n\n

1 npm install uglifyify --save\n

\n\n

And then edit our Gruntfile.js by configuring our browserify task to use it is a transform:

\n\n

 1 module.exports = function (grunt) {\n 2     grunt.initConfig({\n 3         express: {\n 4             test: {\n 5                 options: {\n 6                     script: './server.js'\n 7                 }\n 8             }\n 9         },\n10         cucumberjs: {\n11             src: 'tests/e2e/features/',\n12             options: {\n13                 steps: 'tests/e2e/steps/'\n14             }\n15         },\n16         less: {\n17         \tproduction: {\n18             \toptions: {\n19                 \tpaths: ['app/css/'],\n20                 \tcleancss: true\n21             \t},\n22             \tfiles: {\n23                \t\t'app/css/main.css': 'src/less/main.less'\n24             \t}\n25         \t}\n26     \t},\n27         copy: {\n28             fonts: {\n29                 expand: true,\n30                 src: ['bower_components/bootstrap-sass-official/vendor/assets/fo\\\n31 nts/bootstrap/*'],\n32                 dest: 'app/css/bootstrap/',\n33                 filter: 'isFile',\n34                 flatten: true\n35             }\n36         },\n37     \tbower: {\n38         \tinstall: {\n39             \toptions: {\n40                 \tcleanTargetDir:false,\n41                \t\ttargetDir: './bower_components'\n42             \t}\n43         \t}\n44     \t},\n45     \tbrowserify: {\n46             code: {\n47             \tdest: 'app/js/main.min.js',\n48             \tsrc: 'node_modules/weatherly/js/**/*.js',\n49             \toptions: {\n50                 \ttransform: ['uglifyify']\n51             \t}\n52         \t}\n53         }\n54     });\n55 \n56     grunt.loadNpmTasks('grunt-express-server');\n57     grunt.loadNpmTasks('grunt-selenium-webdriver');\n58     grunt.loadNpmTasks('grunt-cucumber');\n59     grunt.loadNpmTasks('grunt-contrib-less');\n60     grunt.loadNpmTasks('grunt-contrib-copy');\n61     grunt.loadNpmTasks('grunt-bower-task');\n62     grunt.loadNpmTasks('grunt-browserify');\n63 \n64     grunt.registerTask('generate', ['less:production', 'copy:fonts', 'browserify\\\n65 ']);\n66 \tgrunt.registerTask('build', ['bower:install', 'generate']);\n67 \n68     grunt.registerTask('e2e', [\n69         'selenium_start',\n70         'express:test',\n71         'cucumberjs',\n72         'selenium_stop',\n73         'express:test:stop'\n74     ]);\n75 \n76     grunt.registerTask('heroku:production', 'build');\n77 };\n

\n\n

If you now run our generate task, the contents of main should be nicely minified. Now all that’s left to do is edit our index.html file and add our generated JavaScript file:

\n\n

 1 <!DOCTYPE html>\n 2 <!--[if lt IE 7]>      <html class=\"no-js lt-ie9 lt-ie8 lt-ie7\"> <![endif]-->\n 3 <!--[if IE 7]>         <html class=\"no-js lt-ie9 lt-ie8\"> <![endif]-->\n 4 <!--[if IE 8]>         <html class=\"no-js lt-ie9\"> <![endif]-->\n 5 <!--[if gt IE 8]><!--> <html class=\"no-js\"> <!--<![endif]-->\n 6     <head>\n 7         <meta charset=\"utf-8\">\n 8         <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n 9         <title>Weatherly - Forecast for London</title>\n10         <meta name=\"description\" content=\"\">\n11         <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n12 \n13         <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->\n14 \n15         <link rel=\"stylesheet\" href=\"css/main.css\">\n16     </head>\n17     <body>\n18         <!--[if lt IE 7]>\n19             <p class=\"browsehappy\">You are using an <strong>outdated</strong> br\\\n20 owser. Please <a href=\"http://browsehappy.com/\">upgrade your browser</a> to impr\\\n21 ove your experience.</p>\n22         <![endif]-->\n23 \n24         <!-- Add your site or application content here -->\n25         <div class=\"container\">\n26             <div class=\"header\">\n27                 <ul class=\"nav nav-pills pull-right\">\n28                     <li class=\"active\"><a href=\"#\">Home</a></li>\n29                     <li><a href=\"#\">About</a></li>\n30                     <li><a href=\"#\">Contact</a></li>\n31                 </ul>\n32             </div>\n33 \n34             <div class=\"jumbotron\">\n35                 <h1>London Right Now</h1>\n36                 <p class=\"temperature\">14 degrees</p>\n37                 <p>Mostly cloudy - feels like 14 degrees</p>\n38             </div>\n39 \n40             <div class=\"row marketing\">\n41                 <div class=\"col-lg-6\">\n42                     <h4>NEXT HOUR</h4>\n43                     <p>Mostly cloudy for the hour.</p>\n44 \n45                     <h4>NEXT 24 HOURS</h4>\n46                     <p>Mostly cloudy until tomorrow afternoon.</p>\n47                 </div>\n48             </div>\n49 \n50             <div class=\"footer\">\n51                 <p><span class=\"glyphicon glyphicon-heart\"></span> from Weatherl\\\n52 y</p>\n53             </div>\n54 \n55         </div>\n56         <p></p>\n57 \n58         <script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\\\n59 \"></script>\n60         <script>window.jQuery || document.write('<script src=\"js/vendor/jquery-1\\\n61 .10.2.min.js\"><\\/script>')</script>\n62 \n63         <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->\n64         <script>\n65             (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=\n66                     function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new\\\n67  Date;\n68                 e=o.createElement(i);r=o.getElementsByTagName(i)[0];\n69                 e.src='//www.google-analytics.com/analytics.js';\n70                 r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));\n71             ga('create','UA-XXXXX-X');ga('send','pageview');\n72         </script>\n73         <script src=\"js/main.min.js\"></script>\n74     </body>\n75 </html>\n

\n\n

Before we commit our changes let’s edit our .gitignore file one more time and tell it not to include our generated JavaScript:

\n\n

1 node_modules\n2 .idea\n3 bower_components\n4 phantomjsdriver.log\n5 app/css/\n6 app/fonts/\n7 app/js/\n

\n\n

While are here let’s fix our git configuration so that it includes our app code by editing our .gitignore file to look as follows:

\n\n

1 .idea\n2 bower_components\n3 phantomjsdriver.log\n4 app/css/\n5 app/fonts/\n6 app/js/\n7 node_modules/*\n8 !node_modules/weatherly\n

\n\n

By changing the blanket exclusion rule for our node_modules to one using exceptions, we can now commit the weatherly code that sits under our node_modules folder. That’s what the last two lines do:

\n\n

1 node_modules/*\n2 !node_modules/weatherly\n

\n\n

Now when you type git add . it will include all if your changes:

\n\n

 1 > git status\n 2 > # On branch generate-assets\n 3 > # Changes to be committed:\n 4 > #   (use \"git reset HEAD <file>...\" to unstage)\n 5 > #\n 6 > #\tmodified:   .gitignore\n 7 > #\tmodified:   Gruntfile.js\n 8 > #\tnew file:   node_modules/weatherly/js/model/TodaysWeather.js\n 9 > #\tmodified:   package.json\n10 > #\tmodified:   app/index.html\n11 > #\n12 > # Changes not staged for commit:\n13 > #   (use \"git add/rm <file>...\" to update what will be committed)\n14 > #   (use \"git checkout -- <file>...\" to discard changes in working directory)\n15 > #\n

\n\n

Let’s commit, merge and push to our remote repository:

\n\n

1 git add .\n2 git commit -m \"JavaScript browserified and uglyfied\"\n3 git checkout master\n4 git merge generate-assets\n5 git push\n

\n\n

TODO recap for the chapter

\n\n

Unit tests

Up until now we have been very much focused on setting up our build pipeline and writing a high level feature tests. And while I promised that it was time to write some code, we do have do a few more setup steps to carry out before we can get stuck in. To get confidence in our code we will be writing JavaScript modules using tests and we want those tests to run all the time (i.e. with each save). To that end we need to set up some more tasks to run those tests for us and add them to our build process.

\n\n

Setting up our unit test runner using karma

I have chosen Karma as our Unit test runner, if you are new to Karma I suggest you take a peak at some of the videos on the site. It comes with a variety of plugins and supports basically all of the popular unit test frameworks. As our testing framework we will use Jasmine.

\n\n

Before going to far, let’s quickly create a few folders in the root of our project. You should already have anode_modules/weatherly/src/js, which is where we will store all of our JavaScript source code. We already have a task to concatenate/minify and move it to our app folder. Now we just need to create a unit folder for our unit tests. So the structure of our code and tests will look as follows:

\n\n

1 -> tests\n2 \t-> unit\n3 -> node_modules\n4 \t-> weatherly\n5 \t\t->js\n

\n\n

As with all tasks, let’s create a new branch:

\n\n

1 > git checkout -b test-runner\n

\n\n

And then let’s install the package and add it to our package.json file:

\n\n

1 > npm install karma --save-dev\n

\n\n

Ok time to create our Karma configuration file, typically you would type in the root of your project:

\n\n

1 > karma init karma.conf.js\n

\n\n

This would guide you through the process of setting up your test runner, here’s how I answered the setup questions:

\n\n

 1 Which testing framework do you want to use ?\n 2 Press tab to list possible options. Enter to move to the next question.\n 3 > jasmine\n 4 \n 5 Do you want to use Require.js ?\n 6 This will add Require.js plugin.\n 7 Press tab to list possible options. Enter to move to the next question.\n 8 > no\n 9 \n10 Do you want to capture any browsers automatically ?\n11 Press tab to list possible options. Enter empty string to move to the next quest\\\n12 ion.\n13 > PhantomJS\n14 > \n15 \n16 What is the location of your source and test files ?\n17 You can use glob patterns, eg. \"js/*.js\" or \"test/**/*Spec.js\".\n18 Enter empty string to move to the next question.\n19 > node_modules/weatherly/js/**/*.js,\n20 > tests/unit/**/*.js\n21 > \n22 \n23 Should any of the files included by the previous patterns be excluded ?\n24 You can use glob patterns, eg. \"**/*.swp\".\n25 Enter empty string to move to the next question.\n26 > \n27 \n28 Do you want Karma to watch all the files and run the tests on change ?\n29 Press tab to list possible options.\n30 > no\n31 \n32 Config file generated at \"/Users/writer/Projects/github/weatherly/karma.conf.js\".\n

\n\n

And here’s the corresponding configuration that was generated:

\n\n

 1 // Karma configuration\n 2 // Generated on Sun Jul 20 2014 16:18:54 GMT+0100 (BST)\n 3 \n 4 module.exports = function (config) {\n 5     config.set({\n 6 \n 7         // base path that will be used to resolve all patterns (eg. files, exclu\\\n 8 de)\n 9         basePath: '',\n10 \n11 \n12         // frameworks to use\n13         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter\n14         frameworks: ['jasmine'],\n15 \n16 \n17         // list of files / patterns to load in the browser\n18         files: [\n19             'node_modules/weatherly/js/**/*.js',\n20             'tests/unit/**/*.js'\n21         ],\n22 \n23 \n24         // list of files to exclude\n25         exclude: [\n26         ],\n27 \n28 \n29         // preprocess matching files before serving them to the browser\n30         // available preprocessors: https://npmjs.org/browse/keyword/karma-prepr\\\n31 ocessor\n32         preprocessors: {\n33         },\n34 \n35 \n36         // test results reporter to use\n37         // possible values: 'dots', 'progress'\n38         // available reporters: https://npmjs.org/browse/keyword/karma-reporter\n39         reporters: ['progress'],\n40 \n41 \n42         // web server port\n43         port: 9876,\n44 \n45 \n46         // enable / disable colors in the output (reporters and logs)\n47         colors: true,\n48 \n49 \n50         // level of logging\n51         // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG\\\n52 _WARN || config.LOG_INFO || config.LOG_DEBUG\n53         logLevel: config.LOG_INFO,\n54 \n55 \n56         // enable / disable watching file and executing tests whenever any file \\\n57 changes\n58         autoWatch: false,\n59 \n60 \n61         // start these browsers\n62         // available browser launchers: https://npmjs.org/browse/keyword/karma-l\\\n63 auncher\n64         browsers: ['PhantomJS'],\n65 \n66 \n67         // Continuous Integration mode\n68         // if true, Karma captures browsers, runs the tests and exits\n69         singleRun: false\n70     });\n71 };\n

\n\n

Let’s take it for a spin:

\n\n

1 > karma start\n2 > INFO [karma]: Karma v0.12.17 server started at http://localhost:9876/\n3 > INFO [launcher]: Starting browser PhantomJS\n4 > WARN [watcher]: Pattern \"/Users/writer/Projects/github/weatherly/tests/unit/**\\\n5 /*.js\" does not match any file.\n6 > INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket iqriF61DkEH0qp-sXlwR wi\\\n7 th id 10962078\n8 > PhantomJS 1.9.7 (Mac OS X): Executed 0 of 0 ERROR (0.003 secs / 0 secs)\n

\n\n

So we got an error, but that is because we have no tests. Let’s wrap this into a grunt task:

\n\n

1 > npm install grunt-karma --save-dev\n

\n\n

And update our Gruntfile to load the task:

\n\n

 1 module.exports = function (grunt) {\n 2     grunt.initConfig({\n 3         express: {\n 4             test: {\n 5                 options: {\n 6                     script: './server.js'\n 7                 }\n 8             }\n 9         },\n10         cucumberjs: {\n11             src: 'tests/e2e/features/',\n12             options: {\n13                 steps: 'tests/e2e/steps/'\n14             }\n15         },\n16         less: {\n17         \tproduction: {\n18             \toptions: {\n19                 \tpaths: ['app/css/'],\n20                 \tcleancss: true\n21             \t},\n22             \tfiles: {\n23                \t\t'app/css/main.css': 'src/less/main.less'\n24             \t}\n25         \t}\n26     \t},\n27         copy: {\n28             fonts: {\n29                 expand: true,\n30                 src: ['bower_components/bootstrap-sass-official/vendor/assets/fo\\\n31 nts/bootstrap/*'],\n32                 dest: 'app/css/bootstrap/',\n33                 filter: 'isFile',\n34                 flatten: true\n35             }\n36         },\n37     \tbower: {\n38         \tinstall: {\n39             \toptions: {\n40                 \tcleanTargetDir:false,\n41                \t\ttargetDir: './bower_components'\n42             \t}\n43         \t}\n44     \t},\n45     \tbrowserify: {\n46             code: {\n47             \tdest: 'app/js/main.min.js',\n48             \tsrc: 'node_modules/weatherly/js/**/*.js',\n49             \toptions: {\n50                 \ttransform: ['uglifyify']\n51             \t}\n52         \t}\n53         },\n54         karma: {\n55         \tunit: {\n56             \tconfigFile: 'karma.conf.js'\n57         \t}\n58     \t}\n59     });\n60 \n61     grunt.loadNpmTasks('grunt-express-server');\n62     grunt.loadNpmTasks('grunt-selenium-webdriver');\n63     grunt.loadNpmTasks('grunt-cucumber');\n64     grunt.loadNpmTasks('grunt-contrib-less');\n65     grunt.loadNpmTasks('grunt-contrib-copy');\n66     grunt.loadNpmTasks('grunt-bower-task');\n67     grunt.loadNpmTasks('grunt-browserify');\n68 \n69     grunt.registerTask('generate', ['less:production', 'copy:fonts', 'browserify\\\n70 ']);\n71 \tgrunt.registerTask('build', ['bower:install', 'generate']);\n72 \n73     grunt.registerTask('e2e', [\n74         'selenium_start',\n75         'express:test',\n76         'cucumberjs',\n77         'selenium_stop',\n78         'express:test:stop'\n79     ]);\n80 \n81     grunt.registerTask('heroku:production', 'build');\n82 };\n

\n\n

Let’s try this out our new grunt task:

\n\n

 1 > grunt karma:unit\n 2 \n 3 > Running \"karma:unit\" (karma) task\n 4 > INFO [karma]: Karma v0.12.17 server started at http://localhost:9876/\n 5 > INFO [launcher]: Starting browser PhantomJS\n 6 > WARN [watcher]: Pattern \"/Users/gregstewart/Projects/github/weatherly/src/js/*\\\n 7 */*.js\" does not match any file.\n 8 > WARN [watcher]: Pattern \"/Users/gregstewart/Projects/github/weatherly/tests/un\\\n 9 it/**/*.js\" does not match any file.\n10 > INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket QO4qLCSO-4DZVO7eaRky wi\\\n11 th id 9893379\n12 > PhantomJS 1.9.7 (Mac OS X): Executed 0 of 0 ERROR (0.003 secs / 0 secs)\n13 > Warning: Task \"karma:unit\" failed. Use --force to continue.\n14 \n15 > Aborted due to warnings.\n

\n\n

Similar output, with the difference that our process terminated this time because of the warnings about no files macthing our pattern. We’ll fix this issue by writing our very first unit test!

\n\n

Writing and running our first unit test

In the previous chapter we created a source folder and added a sample module, to confirm our build process for our JavaScript assets worked. Let’s go ahead and create one test file, as well as some of the folder structure for our project:

\n\n

1 > mkdir tests/unit/\n2 > mkdir tests/unit/model/\n3 > touch tests/unit/model/TodaysWeather-spec.js\n

\n\n

What we want to do know is validate our Karma configuration before we starting our real tests, so let’s add a sample test to our TodaysWeather-spec.js:

\n\n

1 describe('Today \\'s weather', function () {\n2 \tit('should return 2', function () {\n3    \t\texpect(1+1).toBe(2);\n4 \t});\n5 });\n

\n\n

We could try and run our Karma task again, but this would only result in an error, because we are using the CommonJS module approach and we would see an error stating that module is not defined, because our module under tests uses:

\n\n

1 module.exports = TodaysWeather;\n

\n\n

We need to somehow tell our test runner that we use the CommonJS module type and resolve module and require. Once again we will resort to a npm module: karma-commonjs:

\n\n

1 > npm install karma-commonjs --save-dev\n

\n\n

Next we need to update our karma.conf.js file:

\n\n

 1 // Karma configuration\n 2 // Generated on Sun Jul 20 2014 16:18:54 GMT+0100 (BST)\n 3 \n 4 module.exports = function (config) {\n 5     config.set({\n 6 \n 7         // base path that will be used to resolve all patterns (eg. files, exclu\\\n 8 de)\n 9         basePath: '',\n10 \n11 \n12         // frameworks to use\n13         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter\n14         frameworks: ['jasmine', 'commonjs'],\n15 \n16 \n17         // list of files / patterns to load in the browser\n18         files: [\n19             'node_modules/weatherly/js/**/*.js',\n20             'tests/unit/**/*.js'\n21         ],\n22 \n23 \n24         // list of files to exclude\n25         exclude: [\n26         ],\n27 \n28 \n29         // preprocess matching files before serving them to the browser\n30         // available preprocessors: https://npmjs.org/browse/keyword/karma-prepr\\\n31 ocessor\n32         preprocessors: {\n33             'node_modules/weatherly/js/**/*.js': ['commonjs'],\n34             'tests/unit/**/*.js': ['commonjs']\n35         },\n36 \n37 \n38         // test results reporter to use\n39         // possible values: 'dots', 'progress'\n40         // available reporters: https://npmjs.org/browse/keyword/karma-reporter\n41         reporters: ['progress'],\n42 \n43 \n44         // web server port\n45         port: 9876,\n46 \n47 \n48         // enable / disable colors in the output (reporters and logs)\n49         colors: true,\n50 \n51 \n52         // level of logging\n53         // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG\\\n54 _WARN || config.LOG_INFO || config.LOG_DEBUG\n55         logLevel: config.LOG_INFO,\n56 \n57 \n58         // enable / disable watching file and executing tests whenever any file \\\n59 changes\n60         autoWatch: false,\n61 \n62 \n63         // start these browsers\n64         // available browser launchers: https://npmjs.org/browse/keyword/karma-l\\\n65 auncher\n66         browsers: ['PhantomJS'],\n67 \n68 \n69         // Continuous Integration mode\n70         // if true, Karma captures browsers, runs the tests and exits\n71         singleRun: true\n72     });\n73 };\n

\n\n

We added commonjs to the frameworks block and then configured the preprocessor block to process our source and test files using our chosen module type. Let’s try this again:

\n\n

1 > grunt karma:unit\n2 > Running \"karma:unit\" (karma) task\n3 > INFO [karma]: Karma v0.12.17 server started at http://localhost:9876/\n4 > INFO [launcher]: Starting browser PhantomJS\n5 > INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket 3i335x4S_5GG88E7TsOM wi\\\n6 th id 58512369\n7 > PhantomJS 1.9.7 (Mac OS X): Executed 1 of 1 SUCCESS (0.005 secs / 0.002 secs)\n8 \n9 > Done, without errors.\n

\n\n

Perfect!

\n\n

Running our tests as part of the build

Now that we have our test runner set up’ let’s add it to our build process. This is going to require us to register a new task as we will need to do a few things:

\n\n

build our assets
run our unit tests
run our end to end tests

Let’s go ahead and create a task called test in our Gruntfile and configure it to execute these tasks:

\n\n

 1 module.exports = function (grunt) {\n 2     grunt.initConfig({\n 3         express: {\n 4             test: {\n 5                 options: {\n 6                     script: './server.js'\n 7                 }\n 8             }\n 9         },\n10         cucumberjs: {\n11             src: 'tests/e2e/features/',\n12             options: {\n13                 steps: 'tests/e2e/steps/'\n14             }\n15         },\n16         less: {\n17         \tproduction: {\n18             \toptions: {\n19                 \tpaths: ['app/css/'],\n20                 \tcleancss: true\n21             \t},\n22             \tfiles: {\n23                \t\t'app/css/main.css': 'src/less/main.less'\n24             \t}\n25         \t}\n26     \t},\n27         copy: {\n28             fonts: {\n29                 expand: true,\n30                 src: ['bower_components/bootstrap-sass-official/vendor/assets/fo\\\n31 nts/bootstrap/*'],\n32                 dest: 'app/css/bootstrap/',\n33                 filter: 'isFile',\n34                 flatten: true\n35             }\n36         },\n37     \tbower: {\n38         \tinstall: {\n39             \toptions: {\n40                 \tcleanTargetDir:false,\n41                \t\ttargetDir: './bower_components'\n42             \t}\n43         \t}\n44     \t},\n45     \tbrowserify: {\n46             code: {\n47             \tdest: 'app/js/main.min.js',\n48             \tsrc: 'node_modules/weatherly/js/**/*.js',\n49             \toptions: {\n50                 \ttransform: ['uglifyify']\n51             \t}\n52         \t}\n53         },\n54         karma: {\n55         \tunit: {\n56             \tconfigFile: 'karma.conf.js'\n57         \t}\n58     \t}\n59     });\n60         \n61     grunt.loadNpmTasks('grunt-express-server');\n62     grunt.loadNpmTasks('grunt-selenium-webdriver');\n63     grunt.loadNpmTasks('grunt-cucumber');\n64     grunt.loadNpmTasks('grunt-contrib-less');\n65     grunt.loadNpmTasks('grunt-contrib-copy');\n66     grunt.loadNpmTasks('grunt-browserify');\n67     grunt.loadNpmTasks('grunt-bower-task');\n68     grunt.loadNpmTasks('grunt-karma');\n69 \n70     grunt.registerTask('generate', ['less:production', 'copy:fonts', 'browserify\\\n71 :code']);\n72     grunt.registerTask('build', ['bower:install', 'generate']);\n73     \n74     grunt.registerTask('e2e', [\n75         'selenium_start',\n76         'express:test',\n77         'cucumberjs',\n78         'selenium_stop',\n79         'express:test:stop'\n80     ]);\n81 \n82     grunt.registerTask('test', ['build', 'karma:unit', 'e2e']);\n83 \n84     grunt.registerTask('heroku:production', 'build');\n85 };\n

\n\n

And let’s make sure everything runs as intended:

\n\n

 1 > grunt test\n 2 > Running \"less:production\" (less) task\n 3 > File app/css/main.css created: 131.45 kB â†’ 108.43 kB\n 4 \n 5 > Running \"copy:fonts\" (copy) task\n 6 > Copied 4 files\n 7 \n 8 > Running \"browserify:dist\" (browserify) task\n 9 \n10 > Running \"karma:unit\" (karma) task\n11 > INFO [karma]: Karma v0.12.17 server started at http://localhost:9876/\n12 > INFO [launcher]: Starting browser PhantomJS\n13 > INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket 1kikUD-UC4_Gd6Qh9T49 wi\\\n14 th id 53180162\n15 > PhantomJS 1.9.7 (Mac OS X): Executed 1 of 1 SUCCESS (0.002 secs / 0.002 secs)\n16 \n17 > Running \"selenium_start\" task\n18 > seleniumrc webdriver ready on 127.0.0.1:4444\n19 \n20 > Running \"express:test\" (express) task\n21 > Starting background Express server\n22 > Listening on port 3000\n23 \n24 > Running \"cucumberjs:src\" (cucumberjs) task\n25 > ...\n26 \n27 > 1 scenario (1 passed)\n28 > 3 steps (3 passed)\n29 \n30 > Running \"selenium_stop\" task\n31 \n32 > Running \"express:test:stop\" (express) task\n33 > Stopping Express server\n34 \n35 > Done, without errors.\n

\n\n

If you recall we configured our build to execute grunt e2e, we need to update this now to execute grunt test. Log into to your Codeship dashboard and edit the test configuration:

\n\n

\n $\"Codeship$

Codeship dashboard with updating test configuration

\n\n

Ready to give this is a spin?

\n\n \t> git status\n \t> git add .\n \t> git commit -m “Karma test configuration added and new build test task created”\n \t> git checkout master\n \t> git merge test-runner\n \t> git push\n\n

If we keep an eye on our dashboard we should see a build kicked-off and test task being executed:

\n\n

\n $\"Codeship$

Codeship dashboard with updating test configuration

\n\n

Continuously running our tests

So far so good. While it’s it’s nice to have our tests execute manually, let’s automate this. Could it be as simple as setting the karma.conf.js setting singleRun to false and autoWatch to true, well kind of. When running things on our build server we still want the single run to be true, however for local development purposes it should always run. So let’s tackle this:

\n\n

1 > git checkout -b run-tests-continuously\n

\n\n

Let’start by modifying our karma.conf.js file to run tests continuously:

\n\n

 1     // Karma configuration\n 2 // Generated on Sun Jul 20 2014 16:18:54 GMT+0100 (BST)\n 3 \n 4 module.exports = function (config) {\n 5     config.set({\n 6 \n 7         // base path that will be used to resolve all patterns (eg. files, exclu\\\n 8 de)\n 9         basePath: '',\n10 \n11 \n12         // frameworks to use\n13         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter\n14         frameworks: ['jasmine', 'commonjs'],\n15 \n16 \n17         // list of files / patterns to load in the browser\n18         files: [\n19             'node_modules/weatherly/js/**/*.js',\n20             'tests/unit/**/*.js'\n21         ],\n22 \n23 \n24         // list of files to exclude\n25         exclude: [\n26         ],\n27 \n28 \n29         // preprocess matching files before serving them to the browser\n30         // available preprocessors: https://npmjs.org/browse/keyword/karma-prepr\\\n31 ocessor\n32         preprocessors: {\n33             'node_modules/weatherly/js/**/*.js': ['commonjs'],\n34             'tests/unit/**/*.js': ['commonjs']\n35         },\n36 \n37 \n38         // test results reporter to use\n39         // possible values: 'dots', 'progress'\n40         // available reporters: https://npmjs.org/browse/keyword/karma-reporter\n41         reporters: ['progress'],\n42 \n43 \n44         // web server port\n45         port: 9876,\n46 \n47 \n48         // enable / disable colors in the output (reporters and logs)\n49         colors: true,\n50 \n51 \n52         // level of logging\n53         // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG\\\n54 _WARN || config.LOG_INFO || config.LOG_DEBUG\n55         logLevel: config.LOG_INFO,\n56 \n57 \n58         // enable / disable watching file and executing tests whenever any file \\\n59 changes\n60         autoWatch: true,\n61 \n62 \n63         // start these browsers\n64         // available browser launchers: https://npmjs.org/browse/keyword/karma-l\\\n65 auncher\n66         browsers: ['PhantomJS'],\n67 \n68 \n69         // Continuous Integration mode\n70         // if true, Karma captures browsers, runs the tests and exits\n71         singleRun: false\n72     });\n73 };\n

\n\n

Try this out by running grunt karma:unit and after the first run has completed making a change to our source TodaysWeather file:

\n\n

 1 > grunt karma:unit\n 2 > Running \"karma:unit\" (karma) task\n 3 > INFO [karma]: Karma v0.12.17 server started at http://localhost:9876/\n 4 > INFO [launcher]: Starting browser PhantomJS\n 5 > INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket 9k2m2-j9Ets37p7sWD2Y wi\\\n 6 th id 21051890\n 7 > PhantomJS 1.9.7 (Mac OS X): Executed 1 of 1 SUCCESS (0.007 secs / 0.003 secs)\n 8 > INFO [watcher]: Changed file \"/Users/gregstewart/Projects/github/weatherly/nod\\\n 9 e_modules/weatherly/js/model/TodaysWeather.js\".\n10 > PhantomJS 1.9.7 (Mac OS X): Executed 1 of 1 SUCCESS (0.005 secs / 0.002 secs)\n

\n\n

Exactly what we wanted. Let’s now tackle our build versus development problem. We will just create a seperate build task that uses the same configuration file but overrides the properties we need for our build environment:

\n\n

 1 module.exports = function (grunt) {\n 2     grunt.initConfig({\n 3         express: {\n 4             test: {\n 5                 options: {\n 6                     script: './server.js'\n 7                 }\n 8             }\n 9         },\n10         cucumberjs: {\n11             src: 'tests/e2e/features/',\n12             options: {\n13                 steps: 'tests/e2e/steps/'\n14             }\n15         },\n16         less: {\n17         \tproduction: {\n18             \toptions: {\n19                 \tpaths: ['app/css/'],\n20                 \tcleancss: true\n21             \t},\n22             \tfiles: {\n23                \t\t'app/css/main.css': 'src/less/main.less'\n24             \t}\n25         \t}\n26     \t},\n27         copy: {\n28             fonts: {\n29                 expand: true,\n30                 src: ['bower_components/bootstrap-sass-official/vendor/assets/fo\\\n31 nts/bootstrap/*'],\n32                 dest: 'app/css/bootstrap/',\n33                 filter: 'isFile',\n34                 flatten: true\n35             }\n36         },\n37     \tbower: {\n38         \tinstall: {\n39             \toptions: {\n40                 \tcleanTargetDir:false,\n41                \t\ttargetDir: './bower_components'\n42             \t}\n43         \t}\n44     \t},\n45     \tbrowserify: {\n46             code: {\n47             \tdest: 'app/js/main.min.js',\n48             \tsrc: 'node_modules/weatherly/js/**/*.js',\n49             \toptions: {\n50                 \ttransform: ['uglifyify']\n51             \t}\n52         \t}\n53         },\n54         karma: {\n55         \tdev: {\n56             \tconfigFile: 'karma.conf.js'\n57         \t},\n58             ci: {\n59 \t            configFile: 'karma.conf.js',\n60     \t        singleRun: true,\n61         \t    autoWatch: false\n62         \t}\n63     \t}\n64     });\n65         \n66     grunt.loadNpmTasks('grunt-express-server');\n67     grunt.loadNpmTasks('grunt-selenium-webdriver');\n68     grunt.loadNpmTasks('grunt-cucumber');\n69     grunt.loadNpmTasks('grunt-contrib-less');\n70     grunt.loadNpmTasks('grunt-contrib-copy');\n71     grunt.loadNpmTasks('grunt-browserify');\n72     grunt.loadNpmTasks('grunt-bower-task');\n73     grunt.loadNpmTasks('grunt-karma');\n74 \n75     grunt.registerTask('generate', ['less:production', 'copy:fonts', 'browserify\\\n76 :code']);\n77     grunt.registerTask('build', ['bower:install', 'generate']);\n78     \n79     grunt.registerTask('e2e', [\n80         'selenium_start',\n81         'express:test',\n82         'cucumberjs',\n83         'selenium_stop',\n84         'express:test:stop'\n85     ]);\n86 \n87     grunt.registerTask('test', ['build', 'karma:ci', 'e2e']);\n88 \n89     grunt.registerTask('heroku:production', 'build');\n90 };\t \n

\n\n

I took the chance to rename the karma:unit task to karma:dev and create a karma:ci task. The next thing was update the test task to also execute karma:ci instead of karma:unit.

\n\n

Let’s test all those changes:

\n\n

 1 > grunt test       \n 2 > Running \"bower:install\" (bower) task\n 3 > >> Installed bower packages\n 4 > >> Copied packages to /Users/gregstewart/Projects/github/weatherly/bower_compo\\\n 5 nents\n 6 \n 7 > Running \"less:production\" (less) task\n 8 > File app/css/main.css created: 131.45 kB â†’ 108.43 kB\n 9 \n10 > Running \"copy:fonts\" (copy) task\n11 > Copied 4 files\n12 \n13 > Running \"browserify:code\" (browserify) task\n14 \n15 > Running \"karma:ci\" (karma) task\n16 > INFO [karma]: Karma v0.12.17 server started at http://localhost:9876/\n17 > INFO [launcher]: Starting browser PhantomJS\n18 > INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket 67MYRP0HFPzhHE9wY3vt wi\\\n19 th id 58848767\n20 > PhantomJS 1.9.7 (Mac OS X): Executed 1 of 1 SUCCESS (0.002 secs / 0.002 secs)\n21 \n22 > Running \"selenium_start\" task\n23 > seleniumrc webdriver ready on 127.0.0.1:4444\n24 \n25 > Running \"express:test\" (express) task\n26 > Starting background Express server\n27 > Listening on port 3000\n28 \n29 > Running \"cucumberjs:src\" (cucumberjs) task\n30 > ...\n31 \n32 > 1 scenario (1 passed)\n33 > 3 steps (3 passed)\n34 \n35 > Running \"selenium_stop\" task\n36 \n37 > Running \"express:test:stop\" (express) task\n38 > Stopping Express server\n39 \n40 > Done, without errors.\n

\n\n

Time to commit our changes back to master and push to origin and see the whole thing go through our build pipeline:

\n\n

1 > git add .\n2 > git commit -m \"Run tests continuously in dev and single run on CI\"\n3 > git checkout master\n4 > git merge run-tests-continuously\n5 > git push\n

\n\n

Now check your CI server and you should see the following if it all went to plan:

\n\n

\n $\"Codeship$

Codeship dashboard with updated ci test configuration

\n\n

Adding code coverage

A little bonus while we are setting up test infrastructure, code coverage. Now code coverage is one of these topics that sparks almost fanatical discussions, however I find a useful tool to make sure I have covered all of the important parts of my code. Lucky for us, it’s easy to add support to Karma all we need is a plugin:

\n\n

1 > git checkout -b code-coverage\n2 > npm install karma-coverage --save-dev\n

\n\n

And modify our karma.conf.js file:

\n\n

 1 // Karma configuration\n 2 // Generated on Sun Jul 20 2014 16:18:54 GMT+0100 (BST)\n 3 \n 4 module.exports = function (config) {\n 5     config.set({\n 6 \n 7         // base path that will be used to resolve all patterns (eg. files, exclu\\\n 8 de)\n 9         basePath: '',\n10 \n11 \n12         // frameworks to use\n13         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter\n14         frameworks: ['jasmine', 'commonjs'],\n15 \n16 \n17         // list of files / patterns to load in the browser\n18         files: [\n19             'node_modules/weatherly/js/**/*.js',\n20             'tests/unit/**/*.js'\n21         ],\n22 \n23 \n24         // list of files to exclude\n25         exclude: [\n26         ],\n27 \n28 \n29         // preprocess matching files before serving them to the browser\n30         // available preprocessors: https://npmjs.org/browse/keyword/karma-prepr\\\n31 ocessor\n32         preprocessors: {\n33             'node_modules/weatherly/js/**/*.js': ['commonjs', 'coverage'],\n34             'tests/unit/**/*.js': ['commonjs'],\n35         },\n36 \n37 \n38         // test results reporter to use\n39         // possible values: 'dots', 'progress'\n40         // available reporters: https://npmjs.org/browse/keyword/karma-reporter\n41         reporters: ['progress', 'coverage'],\n42 \n43         coverageReporter: {\n44             reporters: [\n45                 { type: 'html'},\n46                 { type: 'text-summary' }\n47             ],\n48             dir: 'reports/coverage'\n49         },\n50 \n51         // web server port\n52         port: 9876,\n53 \n54 \n55         // enable / disable colors in the output (reporters and logs)\n56         colors: true,\n57 \n58 \n59         // level of logging\n60         // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG\\\n61 _WARN || config.LOG_INFO || config.LOG_DEBUG\n62         logLevel: config.LOG_INFO,\n63 \n64 \n65         // enable / disable watching file and executing tests whenever any file \\\n66 changes\n67         autoWatch: true,\n68 \n69 \n70         // start these browsers\n71         // available browser launchers: https://npmjs.org/browse/keyword/karma-l\\\n72 auncher\n73         browsers: ['PhantomJS'],\n74 \n75 \n76         // Continuous Integration mode\n77         // if true, Karma captures browsers, runs the tests and exits\n78         singleRun: false\n79     });\n80 };\n

\n\n

Running our grunt karma:dev task yields the following output:

\n\n

 1 > Running \"karma:dev\" (karma) task\n 2 > INFO [karma]: Karma v0.12.17 server started at http://localhost:9876/\n 3 > INFO [launcher]: Starting browser PhantomJS\n 4 > INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket OVbmSp9OmFMK23l5jA2J wi\\\n 5 th id 80988698\n 6 > PhantomJS 1.9.7 (Mac OS X): Executed 1 of 1 SUCCESS (0.005 secs / 0.002 secs)\n 7 \n 8 > =============================== Coverage summary =============================\\\n 9 ==\n10 > Statements   : 83.33% ( 5/6 )\n11 > Branches     : 100% ( 2/2 )\n12 > Functions    : 50% ( 1/2 )\n13 > Lines        : 66.67% ( 2/3 )\n14 > ==============================================================================\\\n15 ==\n16 > ^C\n17 > Done, without errors.\n

\n\n

There’s more information in the shape of an HTML report to be found under reports/coverage/. Here’s a what that looks like

\n\n

\n $\"Istanbule$

Istanbule code coverage report

\n\n

One final thing before we close off this section. You may not want to run your coverage report as part the CI process. If you do then ignore this part. By editing our Gruntfile and for our karma:ci task overriding the reporter step with reporters: ['progress'] we can skip this step for our build.

\n\n

 1 module.exports = function (grunt) {\n 2     grunt.initConfig({\n 3         express: {\n 4             test: {\n 5                 options: {\n 6                     script: './server.js'\n 7                 }\n 8             }\n 9         },\n10         cucumberjs: {\n11             src: 'tests/e2e/features/',\n12             options: {\n13                 steps: 'tests/e2e/steps/'\n14             }\n15         },\n16         less: {\n17         \tproduction: {\n18             \toptions: {\n19                 \tpaths: ['app/css/'],\n20                 \tcleancss: true\n21             \t},\n22             \tfiles: {\n23                \t\t'app/css/main.css': 'src/less/main.less'\n24             \t}\n25         \t}\n26     \t},\n27         copy: {\n28             fonts: {\n29                 expand: true,\n30                 src: ['bower_components/bootstrap-sass-official/vendor/assets/fo\\\n31 nts/bootstrap/*'],\n32                 dest: 'app/css/bootstrap/',\n33                 filter: 'isFile',\n34                 flatten: true\n35             }\n36         },\n37     \tbower: {\n38         \tinstall: {\n39             \toptions: {\n40                 \tcleanTargetDir:false,\n41                \t\ttargetDir: './bower_components'\n42             \t}\n43         \t}\n44     \t},\n45     \tbrowserify: {\n46             code: {\n47             \tdest: 'app/js/main.min.js',\n48             \tsrc: 'node_modules/weatherly/js/**/*.js',\n49             \toptions: {\n50                 \ttransform: ['uglifyify']\n51             \t}\n52         \t}\n53         },\n54         karma: {\n55         \tdev: {\n56             \tconfigFile: 'karma.conf.js'\n57         \t},\n58             ci: {\n59 \t            configFile: 'karma.conf.js',\n60     \t        singleRun: true,\n61         \t    autoWatch: false,\n62         \t    reporters: ['progress']\n63         \t}\n64     \t}\n65     });\n66         \n67     grunt.loadNpmTasks('grunt-express-server');\n68     grunt.loadNpmTasks('grunt-selenium-webdriver');\n69     grunt.loadNpmTasks('grunt-cucumber');\n70     grunt.loadNpmTasks('grunt-contrib-less');\n71     grunt.loadNpmTasks('grunt-contrib-copy');\n72     grunt.loadNpmTasks('grunt-browserify');\n73     grunt.loadNpmTasks('grunt-bower-task');\n74     grunt.loadNpmTasks('grunt-karma');\n75 \n76     grunt.registerTask('generate', ['less:production', 'copy:fonts', 'browserify\\\n77 :code']);\n78     grunt.registerTask('build', ['bower:install', 'generate']);\n79     \n80     grunt.registerTask('e2e', [\n81         'selenium_start',\n82         'express:test',\n83         'cucumberjs',\n84         'selenium_stop',\n85         'express:test:stop'\n86     ]);\n87 \n88     grunt.registerTask('test', ['build', 'karma:ci', 'e2e']);\n89 \n90     grunt.registerTask('heroku:production', 'build');\n91 };\n

\n\n

We also do not want to commit our reports to our repos, so another .gitignore tweak is needed:

\n\n

1 .idea\n2 bower_components\n3 reports\n4 phantomjsdriver.log\n5 app/css\n6 app/fonts\n7 app/js\n8 node_modules/*\n9 !node_modules/weatherly\n

\n\n

Time to commit and merge our changes:

\n\n

1 > git add .\t\n2 > git commit -m \"added coverage to dev process\"\n3 > git checkout master\n4 > git merge code-coverage \n5 > git push\n

\n\n

Recap

We covered quite a bit of ground here:

\n\n

we set up Karma
wrote a very basic unit test to validate the test runner was working
configured the tests for local continuous testing and single run during the build
added code coverage to our tooling

With that onwards to development guided by tests!

\n\n

Development guided by tests

We’ll cover:

\n\n

unit tests
integration test
using stubs
using mocks
other\n
- isomorphic apps\n \t* react for template rendering\n \t* bake in performance testing (phantomas: https://github.com/macbre/phantomas)\n \t* static analysis (https://github.com/es-analysis/plato / code climate)\n \t* Shrinwrap and locking npm module versions\n \t* package the whole thing as an npm package\n \t* refactor grunt file to use modules
\n

TODO

Netx steps:\nDelete css/normalize.css and main.css\nAdd main.scss and add the following line:\n\t@import ‘../../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap.scss’;\nDelete js folder

\n\n

Serve content from dist folder

\n\n

Appendices

\n\n","tocStructure",[198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227],{"_74":75,"_43":76,"_69":-5,"_77":78,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":84,"_69":-5,"_77":85,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":90,"_69":-5,"_77":91,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":93,"_69":-5,"_77":94,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":96,"_69":-5,"_77":97,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":75,"_43":99,"_69":-5,"_77":100,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":103,"_69":-5,"_77":104,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":106,"_69":-5,"_77":107,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":75,"_43":109,"_69":-5,"_77":110,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":113,"_69":-5,"_77":114,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":116,"_69":-5,"_77":117,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":119,"_69":-5,"_77":120,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":106,"_69":-5,"_77":122,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":75,"_43":124,"_69":-5,"_77":125,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":128,"_69":-5,"_77":129,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":131,"_69":-5,"_77":132,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":106,"_69":-5,"_77":134,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":75,"_43":136,"_69":-5,"_77":137,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":140,"_69":-5,"_77":141,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":143,"_69":-5,"_77":144,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":75,"_43":146,"_69":-5,"_77":147,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":150,"_69":-5,"_77":151,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":153,"_69":-5,"_77":154,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":156,"_69":-5,"_77":157,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":159,"_69":-5,"_77":160,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":162,"_69":-5,"_77":163,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":106,"_69":-5,"_77":165,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":75,"_43":167,"_69":-5,"_77":168,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":75,"_43":171,"_69":-5,"_77":172,"_70":79,"_86":-5,"_87":-5,"_88":-5},{"_74":83,"_43":175,"_69":-5,"_77":176,"_70":79,"_86":-5,"_87":-5,"_88":-5},"publicChapterContent","nextChapter","sections",[],"routes/_store+/_layout","routes/_store+/_readers+/_layout","actionData","errors"]

Development guided by tests

Table of Contents

Introduction

Conventions

What we will be building

How we will build it

What you will need

Services you wil need to sign up for

Code editor

Version control: Git

Node.js and NPM

Bower

Grunt

Getting started

Setting up our project

Recap

Writing our first functional test

Web server: Express

Cucumber, WebDriver and Selenium

Selenium

Using Grunt to start and stop the express server

WebDriver

Cucumber

Our first test

Recap

Continuous delivery

Setting up our Continuous Integration environment using Codeship

Setting up Continous Deployment to Heroku

Recap

Building our assets

Compile our less to css

Heroku build packs

Concatenate and minify our JavaScript

Unit tests

Setting up our unit test runner using karma

Writing and running our first unit test

Running our tests as part of the build

Continuously running our tests

Adding code coverage

Recap

Development guided by tests

TODO

Appendices