Combined with Angularjs,karma and Jasmine automated Unit Testing

Objective

In the Java World, the open source libraries of Apache, Spring, and JBoss three communities are all-encompassing, but each library stands out in its field. and Nodejs in a variety of open source Library, but let a person dazzling, do not know where to start.

Nodejs field: Jasmine do unit testing, Karma Automation to complete unit testing, grunt Start Karma Unified project management, Yeoman finally packaged into a project prototype template, NPM to do Nodejs package dependency management, Bower does JavaScript's package dependency management.

Java domain: JUnit does unit testing, MAVEN automated unit testing, unified project management, build project prototype templates, package dependency management.

Nodejs let the combination become richer, but also aggravate our learning threshold. I don't know, I can't even see it!

It's a bit far off, back to the subject of the article, Jasmine+karma Automated unit testing.

Directory

1. Introduction of Karma
2. Installation of Karma
3. Karma + Jasmine Configuration
4. Automated Unit Testing
5. Karma and Istanbul Code coverage
6. Karma issues that occur when you start the first time

1. Introduction of Karma

Karma is Testacular's new name, in 2012 Google Open source testacular,2013 year testacular renamed Karma. Karma is a very mysterious name, which means that the fate of Buddhism, karma, more than the name of Cassandra more people guessing!

Karma is a node. JS-based JavaScript test Execution Process management tool (test Runner). The tool can be used to test all major web browsers, to be integrated into CI (continuous integration) tools, and to work with other code editors. A powerful feature of this testing tool is that it can monitor changes to the (Watch) file and then execute it on its own, displaying the test results by Console.log.

Jasmine is a unit testing framework, this single will introduce karma let Jasmine Test automation complete. Jasmine's introduction, please refer to the article: Jasmine behavior-driven, test-first

Istanbul is a unit test Code Coverage Checker that can tell us intuitively how well the unit tests control the code.

2. Installation of Karma

System environment:

Win7 64bit, node v0.10.5, NPM 1.2.19
First, install GitTool, and then use the following command to copy the Angular-seed-based Phonecat project from GitHub:
git clone git://github.com/angular/angular-phonecat.git

解压到D:\web\angular-phonecat
app目录是存放源码，主文件的。
test目录是存放单元测试文件的。
安装项目依赖的angular等包文件
D:\web\angular-phonecat>bower install
安装Karma
D:\web\angular-phonecat>npm install -g karma-cli
测试是否安装成功
D:\web\angular-phonecat>karma --version
Karma version: 0.12.24

3. Karma + Jasmine Configuration

Initialize the Karma configuration file Karma.conf.js

D:\WEB\ANGULAR-PHONECAT&GT;CD Testd:\web\angular-phonecat\test>karma Initwhich Testing Framework do I want to use? Press TAB to list possible options. Enter to move to the next question. > Jasminedo want to use Require.js? This would add Require.js plugin. Press TAB to list possible options. Enter to move to the next question.> yesdo do want to capture any browsers automatically? Press TAB to list possible options. Enter empty string to move to the next quest ion. > Chrome >what is the location of your source and test files? You can use glob patterns, eg. "Js/*.js" or "test/**/*spec.js". Enter empty string to move to the next question. >should any of the files included by the previous patterns be excluded? You can use glob patterns, eg. "**/*.swp". Enter empty string to move to the next question. >do wanna generate a bootstrap file for Requirejs? This would generate test-main.js/coffee that configures Requirejs and starts the tests. > Nowhich Files Want to include with  <Script>Tag?This should is a script that bootstraps your test by configuring Require.js and Kicking __karma__.start (), probably y Our test-main.js file. Enter empty string to move to the next question. >want Karma to watch all the files and run the tests?Press tab to list possible options.>yesconfig file generated at"D:\web\angular-phonecat\test\karma.conf.js".

4. Automated Unit Testing

3 Steps to prepare the work:

• 1. Create a source file: A file used to implement a business logic, which is the JS script we usually write
• 2. Create a test file: JASMINEAPI-compliant test JS script
• 3. Modify the Karma.conf.js configuration file

1). Create a source file: A file used to implement a business logic, which is the JS script we usually write

Controllers.js, ng-repeat loop output in HTML phones

var Phonecatapp = angular.module (' Phonecatapp ', []);p honecatapp.controller (' Phonelistctrl ', function ($scope) {  $ Scope.phones = [    {' name ': ' Nexus s ',     ' snippet ': ' Fast just got faster with Nexus S. '},    {' name ': ' Motorola XOOM ™with Wi-Fi ',     ' snippet ': ' The next, next Generation tablet. '},    {' name ': ' MOTOROLA xoom™ ',     ' snippet ': ' The Ne XT, Next Generation tablet. '}  ];});

2). Create a test file: JASMINEAPI-compliant test JS script

Controllersspec.js

Describe (' phonecat controllers ', function () {  describe (' Phonelistctrl ', function () {    Beforeeach (module (' Phonecatapp '));    It (' should create ' phones "model with 3 phones ', inject (function ($controller) {      var scope = {},          Ctrl = $controller (' Phonelistctrl ', {$scope: scope});      Expect (scope.phones.length). ToBe (3);});});  

3). Modify the Karma.conf.js configuration file
We need to modify this: files and exclude variables

Module.exports = function (config) {  config.set ({    basepath: '). /',    files: [      ' app/bower_components/angular/angular.js ',      ' app/bower_components/angular-route/ Angular-route.js ',      ' app/bower_components/angular-mocks/angular-mocks.js ',      ' app/js/**/*.js ',      ' test/ Unit/**/*.js '    ],    autowatch:true,    frameworks: [' Jasmine '],    browsers: [' Chrome '],    plugins: [            ' Karma-chrome-launcher ',            ' Karma-jasmine '            ],    junitreporter: {      outputFile: ' test_out/ Unit.xml ',      Suite: ' Unit '    }  };

Start Karma

D:\web\angular-phonecat\test>karma startinfo [karma]: Karma v0.12.24 Server started at Http://localhost:9876/INFO [ Launcher]: Starting browser chromeinfo [Chrome 37.0.2031 (Windows 7)]: Connected on socket xwuvhf6pm0tqa67ige3o with ID 65 679142Chrome 37.0.2031 (Windows 7): Executed 1 of 1 SUCCESS (0.013 secs/0.011 secs)

Browser opens automatically

After you modify the Controllersspec.js, the unit tests are performed automatically after saving.

Combined with Angularjs,karma and Jasmine automated Unit Testing