Setting-up AngularJS, Angular Seed, Node.js and Karma

I’ve used AngularJS for a few months, but I have no knowledge when it comes to testing AngularJS apps. I have a subscription to PluralSight.com and wanted to go through their online video training course for AngularJS. Specifically with this course I want to learn how to use Karma to do testing.

I’m usually extremely happy with PluralSight.com course, but in the beginning of this course I was somewhat disappointed. In Section 7 (“Angular Seed”) new technologies were introduced. The author introduced Angular-Seed, Node.js and Karma. I’ve worked with Node.js, but there are probably many people who have never used it. I believe the author took for granted that the student knew Node.js. For those who have never used Node.js this could be an obstacle.

When I started the course I didn’t have Node.js installed. I installed Node.js and things didn’t work as intended. I couldn’t run tests in Node.js because Karma was not installed. Once I installed Karma, Chrome wouldn’t launch in the tests.

With all the issues I was having, I wondered if others were having the same problems. If others were having similar issues, were they discouraged and not continuing with the course. So I decided to create this blog post to help others to get stared with AngularJS, Angular-Seed, Node.js and Karma.

Here are my assumptions:

• You are a windows developer
• Google Chrome browser is installed
• You will use the Windows Command Prompt instead of Bash
• You have little or no knowledge of Node.js
• You have little or no knowledge of Karma
• You will use Node.js as the web server. I will step you through this.
• You have access to and IDE. Visual Studio will be fine. NotePad++ would also probably work. I use JetBrains WebStorm. JetBrains has a free 30 day trial for WebStorm.

Here are the high level step we will follow:

1. Download and install Angular-Seed
2. Download and install JetBrains WebStorm (Optional)
3. Download and install Node.js
4. Confirm Node.js is installed
5. Run Karma Unit Tests – will fail because Karma is not installed
6. Install Karma
7. Run Karma Unit Tests again – Will fail because Chrome will not start
8. Add System Variable to Windows
9. Confirm System Variable Were Added
10. Run Unit Tests again – should succeed
11. Confirm that Units are being tracked by Karma
12. Start Web Server by using Node.js

So lets get started.

1. Download and install Angular-Seed

Download Angular-Seed from GitHub at https://github.com/angular/angular-seed.

Extract Angular-Seed to a directory. I extracted it to “C:\Demo\Angular-Seed-Master”

2. Download and install JetBrains WebStorm (Optional)

Since PluralSight.com course for AngularJS is using the application JetBrains WebStorm, I will use it also. I will go through the steps of installing and setting up WebStorm; it’s very simple.

So install and run JetBrains WebStorm. They have a free 30 day trial. It can be downloaded from here: http://www.jetbrains.com/webstorm/download/. Any editor will be fine. I prefer WebStorm for editing HTML, JavaScript and CSS.

Once WebStorm is downloaded and installed, start the application. After you stared WebStorm you will eventually get to the “Quick Start” screen. On this screen select “Open Directory” (see image).

The “Select Path” dialog will be displayed. Navigate to the directory where you extracted Angular-Seed. Select “OK”. I extracted it to “C:\Demo\Angular-Seed-Master”

The WebStorm IDE should be displayed. On the left there should be a project structure with the “Angular-Seed-Master” folder. Click “+” to expand the directory structure.

3. Download and install Node.js

The test in Angular-Seed requires Karma-Runner. To run Karma you will need to install Node.js. I will provide instructions of how to install Node.js and Karma-Runner. After they are installed I will show how to run the tests.

Download and install Node.js.

Go to http://nodejs.org/ website and select the “install” button (see image below). This should download the version of Node.js you need. For me, when I clicked the “install” the version for Windows 64-bit downloaded. Once Node.js is download, execute the file.

I will not go thought the steps for installing Node.js; it’s very straight forward. During the install I used all default options.

4. Confirm Node.js is installed

When Node.js installation has completed we need to confirm it was installed successfully. Open a Windows Command Prompt and type “Node” and [enter]. You should get prompted with a “>”.

Now at the prompt type something like “2 + 2” and [enter]. You should get a result. I got back 4. Now we have confirmed that Node.js is installed correctly. You can quit Node.js by using the keyboard and typing [ctrl]+C twice.

5. Run Karma Unit Tests

Now we are going run test to confirm that Node.js is ready to run Karma?

In WebStorm select the “test.bat” file; it’s in the scripts directory (see image below). There’s nothing you need to do in WebStorm at this time. I just want to point out that this is the file we will run in Node.js to execute Karma.

No go back to your Windows Command Prompt. If you are still in node, exit node by [ctrl]+C twice.

You need to navigate to the directory where you have un-compressed “Angular-Seed”. For me it’s “C:\Demos\angular-seed-master”.

Once at the Angular-Seed directory type “scripts\test.bat” in the command.

When you run test.bat you may get an error that “karma” is not recognized. If this occurs, “Karma” needs to be installed.

6. Install Karma

To install Karma, at the Windows Command Prompt type “npm install – g karma”. Insted use Update: “npm install – g karma@0.8.7”. !Ignore the image. Based on comments from dotnetsilverlightprism and confirmed, there seems to be breaking changes with new versions of Karma. If you install Karma version 0.8.7 everything seems to be working fine.

Now Karma should be installed.

7. Update angular-seed-master/config/karma.conf.js

Based on dotnetsilverlightprism comment (see his comment at the bottom of the post), after I originally published this post there was a breaking change with the newer Karma package and Angular Seed. This can be easily fixed by changing the file angular-seed-master/config/karma.conf.js with the following code.

module.exports = function (config) {
    config.set({
        basePath: '../',
        frameworks: ['jasmine'],
        files: [
            'app/lib/angular/angular.js',
            'app/lib/angular/angular-*.js',
            'test/lib/angular/angular-mocks.js',
            'app/js/*.js',
            'test/unit/*.js'
        ] ,
        autoWatch: true,
        browsers: ['Chrome'],
        junitReporter: {
            outputFile: 'test_out/unit.xml',
            suite: 'unit'
        }
    })
}

8. Run Karma Unit Tests again

Now lets test the “test.bat” file again. Go to the Windows Command Prompt and confirm the location is still where you unzipped Angular-Seed. For me it’s “C:\Demos\angular-seed-master”.

In the Command Prompt enter “scripts\test.bat” and [enter].

You may receive another error in regards that Karma cannot start Chrome.

9. Add System Variable to Windows

To fix this, Windows System Environment Variables need to be updated to reference the Chrome Browser.

To changes the variables we need to open the Windows system properties. To do this follow these steps (see image below). (1)Click Windows “Start” Button. (2) Type “System Variables” in the Search Box. (3) Select the “Edit the system environment variables”.

This should display the following “System Properties” dialog. Select the “Environment Variables” button.

Now you should see the following “Environment Variables” dialog. In the “System Variables” section, click the “New” button.

In the “Edit System Variable” dialog, set the variable name to “CHROME_BIN”. Set Variable value to the path where Chrome is located. For me the path is “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe”. The path for you may be different. And click “OK”. And click “OK” through the rest of the dialogs

10. Confirm System Variable Were Added

Important: If you still have Windows Command Prompt open, close it. The new system variable will not be available in the current Windows Command Prompt.

Important: Open a new Windows Command Prompt. This will give you a new context for system variables and the variable that we just added should be available now.

Let’s confirm that the system variable was added. In the new Window Command Prompt type “SET” and [enter]. In the results confirm that “CHROME_BIN” is there with the correct path. If the “CHROME_BIN” variable is not there, then one of the steps above may have been missed.

11. Run Unit Tests Again

In the Windows Command Prompt change the path to where you unzipped the Angular-Seed zip. For me it’s “C:\demos\angular-seed-master”

Now lets see if the test will run now. In the Windows Command Prompt type “scripts\test.bat”.    

Now the tests should run and the Chrome browser should start. Now Karma is running in Node.js

12. Confirm that Units are being tracked by Karma

In the Window Command Prompt you should notice that all 5 unit test have completed successfully.

You should also notice that the test.bat script did not end. This is because Karma is watching your source files for changes. If you change one of your source files (JavaScript file), the unit test will be rerun.

Now return to your IDE and change a JavaScript source file and save the file. For me, my IDE is WebStorm and I changed the file “test\unit\controllerSpec.js” by adding a space. After changing the file I save it.

As soon as you change the file, Karma will rerun the tests.

13. Start Web Server by using Node.js

Lets confirm that Node.js can run your Angular-Seed website.

Now open a new Windows Command Prompt or stop the current test script ([ctrl]+C twice).

Confirm and navigate that your path for Windows Command Prompt is where you extracted your Angular-Seed zip. My location is “C:\demos\angular-seed-master”.

In the Windows Command Prompt enter “Node scripts\web-server.js”

In the Windows Command Prompt, you should be notified that an HTTP server is running.

Now open a browser and navigate to “http://localhost:8000”.

You should see something similar to the following image.

That’s it. Hopefully everything is work and now you can create AngularJS applications using Karma, Angular-Seed, and Node.js