1. 配置bower
1.安装bower
npm install -g bower
2.创建.bowerrc文件
{ "directory": "src/bower" }
3.添加依赖
bower install angular
4.创建配置文件
bower init
结果如下:
{ "name": "UnitTest", "description": "Unit test descritpion", "main": "", "keywords": [ "test" ], "authors": [ "zyx" ], "license": "MIT", "homepage": "http://zyxgis/homepage", "private": true, "ignore": [ "**/.*", "node_modules", "bower_components", "src/bower", "test", "tests" ], "dependencies": { "angular": "^1.5.8" } }
5.添加更多依赖
bower install --save angular-mocks
2. 配置Karma
1.安装Karma and Jasmine
npm install -g karma
npm install -g karma-cli
npm install -g jasmine
npm install -g karma-jasmine
npm install -g karma-coverage
npm install -g karma-chrome-launcher
npm install -g karma-firefox-launcher
2.创建配置文件
karma init
结果如下:
// Karma configuration // Generated on Sun Sep 11 2016 16:01:11 GMT+0800 (中国标准时间) module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '../', // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: ['jasmine'], // list of files / patterns to load in the browser files: [ 'src/bower/angular/angular.js', 'src/bower/angular-mocks/angular-mocks.js', 'src/js/**/*.js', 'test/unit/**/*.js' ], // list of files to exclude exclude: [ ], // preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: { }, // test results reporter to use // possible values: 'dots', 'progress' // available reporters: https://npmjs.org/browse/keyword/karma-reporter reporters: ['progress'], // web server port port: 9876, // enable / disable colors in the output (reporters and logs) colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes autoWatch: true, // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: ['Chrome', 'Firefox'], plugins : ['karma-chrome-launcher', 'karma-firefox-launcher', 'karma-jasmine'], // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: false, // Concurrency level // how many browser should be started simultaneous concurrency: Infinity }) }
3.创建启动karma服务的批处理文件scripts\test.bat
#!/bin/bash BASE_DIR='dirname $0' echo "" echo "Starting Karma Server (http://karma-runner.github.io)" echo "-------------------------------------------------------" karma start $BASE_DIR/../conf/karma.conf.js $*
4.创建单元测试文件
test\unit\controllers.spec.js
'use strict'; describe('controller specs', function() { var $scope; beforeEach(module('myApp.controllers')); beforeEach(inject(function($rootScope, $controller) { $scope = $rootScope.$new(); $controller('helloWorldCtrl', { $scope: $scope }); })); it('should create "name" model with first name "Jane"', function() { expect($scope.name.first).toBe("Jane"); }); });
test\unit\directives.spec.js
'use strict'; describe('specs for directives', function() { beforeEach(module('myApp.directives')); var $scope; beforeEach(inject(function($rootScope) { $scope = $rootScope.$new(); $scope.name = { first: "John", last: "Doe" }; })); describe('hello-world', function() { it('should contain the provided name', function() { inject(function($compile) { var element = $compile('<div hello-world name="name"></div>')($scope); $scope.$digest(); expect(element.html()).toContain("John"); }); }); }); });
5.执行单元测试
scripts\test.bat
3. 配置protractor
1.安装protractor
npm install -g protractor
webdriver-manager update
2.安装JDK
3.启动webdriver-manager
webdriver-manager start
4.安装http-server
npm install -g http-server
5.在工程目录(project directory)启动http-server
http-server -a localhost -p 8000
查看index.html页面的地址为:http://localhost:8000/src/
6. 创建protractor的配置文件
conf\protractor.conf.js
'use strict'; exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['../test/protractor/spec.js'], capabilities: { browserName: 'chrome' } };
7. 创建集成测试文件
test\protractor\spec.js
'use strict'; describe('hello world app ', function() { it('should have a title', function() { browser.get('http://localhost:8000/src/'); expect(browser.getTitle()).toEqual('Hello World'); }); }); describe('name fields', function() { it('should be filled out and editable', function() { browser.get('http://localhost:8000/src/'); var h1 = element.all(by.css('h1')).first(); var fname = element.all(by.tagName('input')).first(); var lname = element.all(by.tagName('input')).get(1); expect(h1.getText()).toEqual("Hello Jane Doe!"); expect(fname.getAttribute('value')).toEqual("Jane"); expect(lname.getAttribute('value')).toEqual("Doe"); fname.clear().sendKeys('John'); lname.clear().sendKeys('Smith'); expect(h1.getText()).toEqual("Hello John Smith!"); expect(fname.getAttribute('value')).toEqual("John"); expect(lname.getAttribute('value')).toEqual("Smith"); }); });
8. 执行集成测试文件
protractor conf/protractor.conf.js
4. 配置Grunt
1. 创建package.json文件
npm init
结果如下:
{ "name": "my-hello-world", "version": "1.0.0", "description": "auto build system", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "auto" ], "author": "zyx", "license": "ISC", "dependencies": { }, "devDependencies": { "bower": "~1.7.9", "grunt": "~1.0.1", "karma-jasmine": "~1.0.2", "karma-firefox-launcher": "~1.0.0", "karma-chrome-launcher": "~2.0.0" } }
2. 添加更多依赖
npm install --save-dev grunt-contrib-concat
npm install --save-dev grunt-contrib-copy
npm install --save-dev grunt-targethtml
npm install --save-dev grunt-protractor-runner
3. 添加更多依赖
npm install
package.json
{ "name": "my-hello-world", "version": "1.0.0", "description": "auto build system", "keywords": [ "auto" ], "author": "zyx", "license": "ISC", "dependencies": {}, "devDependencies": { "bower": "~1.7.9", "grunt": "~1.0.1", "grunt-contrib-concat": "~0.5.0", "grunt-contrib-copy": "~0.5.0", "grunt-karma": "^2.0.0", "grunt-protractor-runner": "^3.2.0", "grunt-targethtml": "~0.2.6", "karma": "~1.3.0", "karma-chrome-launcher": "~2.0.0", "karma-firefox-launcher": "~1.0.0", "karma-jasmine": "~1.0.2" } }
4.编写配置文件
Gruntfile.js
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['src/bower/angular/angular.js','src/js/*.js'], dest: 'dist/js/<%= pkg.name %>.js' } }, copy: { main: { src: 'src/css/main.css', dest: 'dist/css/main.css', }, }, targethtml: { dist: { files: { 'dist/index.html': 'src/index.html' } } }, karma: { unit: { configFile: 'conf/karma.conf.js', singleRun: true } }, protractor: { e2e: { options: { configFile: 'conf/protractor.conf.js' } } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-targethtml'); grunt.loadNpmTasks('grunt-karma'); grunt.loadNpmTasks('grunt-protractor-runner'); grunt.registerTask('dist', ['karma', 'protractor', 'concat', 'targethtml', 'copy']); };
5.编写index.html文件
src\index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> <link rel="stylesheet" href="css/main.css"> </head> <body ng-app="myApp"> <div ng-controller="helloWorldCtrl"> <h1 hello-world name="name" id="greeting"></h1> </div> <!--(if target dev)><!--> <script src="bower/angular/angular.js"></script> <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="js/directives.js"></script> <!--<!(endif)--> <!--(if target dist)><!--> <script src="js/my-hello-world.js"></script> <!--<!(endif)--> </body> </html>
6. 启动webdriver-manager
webdriver-manager start
7. 启动http-server
http-server -a localhost -p 8000
8.执行Grunt的构建
grunt dist