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/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