首页 > 代码库 > Angular+Grunt+Bower+Karma+Protractor (Atom)

Angular+Grunt+Bower+Karma+Protractor (Atom)

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/bashBASE_DIR=‘dirname $0echo ""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

Angular+Grunt+Bower+Karma+Protractor (Atom)