UW-Madison-DoIT/angularjs-portal — pull request #33 by jhanstra (2014-10-23 19:46:39+00:00)
Title: MUMUP-1231: Add unit tests with jasmine and use bower for front-end dependency management

# Unit Tests and Front-end Dependency Management
This PR contains the framework for testing the angular version of MyUW using Jasmine, Karma, and Bower.
There are many ways to set up unit testing for Angular applications, but I found this to be the easiest and most straight-forward approach. The following videos are very helpful in learning what each of these are doing and how to set up unit testing:
[1. Setup](http://www.youtube.com/watch?v=YRzr27Bpx_g&list=UUdaEMffiYgTf_E7uTMxM4og&index=17)
[2. Bower](http://www.youtube.com/watch?v=poRfmxCouVo&list=UUdaEMffiYgTf_E7uTMxM4og&index=16)
[3. Controller Testing](http://www.youtube.com/watch?v=shqptAMZ_NM&index=14&list=UUdaEMffiYgTf_E7uTMxM4og)

## Setting up your local environment to run tests

1. Install Node.js: http://nodejs.org/
2. From the project root directory, run `npm install` to install the node modules listed in package.json. This will install Karma, Karma-jasmine, and Karma-chrome-launcher.
3. Install Bower: `npm install -g bower`
4. Run `bower install` to install front-end dependencies.
5. Run `karma start karma.conf.js` to run the test.
6. Ask me if you have any questions.

### Karma - http://karma-runner.github.io/0.12/index.html
Karma is a test runner that makes running tests easy. You set up everything in the karma.conf.js file at the root of the project, telling it which framework you want to use (jasmine), which files to load (bower components, our js directory, our spec directory), and many other options.

Then to run your tests, just navigate to the root of the directory and type in `karma start karma.conf.js` into the command line.

### Bower - http://bower.io/
Bower is a front-end dependency manager that is similar to npm. You can install packages very easily, for example `bower install angular --save-dev`, and this will download angular.js to a bower_components directory at the root of the project. There is also a bower.json file that lists all dependencies for the project.

I think this is a better, more organized way to organize our dependencies than how we are currently doing it. Right now we have angular, angular-route, bootstrap, etc just sitting among everything else. Bower organizes this and puts it all in one folder.

### Jasmine - http://jasmine.github.io/2.0/introduction.html
Jasmine is a behavior-driven development framework for unit testing. The docs are pretty good so I would recommend learning more from their site. The big two testing frameworks are Jasmine and Mocha, and Eric recommended Jasmine, so I used that :)

#### Clutter
Sorry this PR is cluttered with bower_components, I wasn't sure whether to include those in version control or not. I've read that [it is recommended to include them](http://addyosmani.com/blog/checking-in-front-end-dependencies).
The files that matter in this PR are all at the very bottom:
- bower.json
- package.json
- karma.conf.js
- spec/controllers/marketplace_controller_spec.js
- js/controllers/main-controllers.js