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

Angular+Grunt+Bower+Karma+Protractor (Atom)的更多相关文章

  1. 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular

    现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...

  2. Grunt + Bower—前端构建利器(转)

    目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web Service服务,通过JSON格式进行 ...

  3. 前端构建利器Grunt—Bower

    runt + Bower—前端构建利器 目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web ...

  4. Grunt + Bower—前端构建利器

    目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web Service服务,通过JSON格式进行 ...

  5. Grunt Bower构建前端

    Grunt + Bower—前端构建利器   目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的W ...

  6. 用Laravel+Grunt+Bower管理你的应用

    来源:http://yansu.org/2014/03/10/grunt-bower-and-laravel.html 为什么这么选择? 如今开源盛行,从后端的各个类库,到如今前端的jQuery插件, ...

  7. 简介Gulp, Grunt, Bower, 和 Npm 对Visual Studio的支持

    [原文发表地址]Introducing Gulp, Grunt, Bower, and npm support for Visual Studio Web 开发,特别是前端 Web 开发,正迅速变得像 ...

  8. 在 Visual Studio 2013 中使用 Grunt, Bower 和 NPM

    在 Visual Studio 2015 中提供了对于 Grunt 和 Gulp 的内置支持,在 Visual Studio 2013 中怎么办呢?微软将 2015 中的特性作为几个独立的扩展发布出来 ...

  9. grunt+bower依赖管理

    安装bower(必须安装git) npm install bower -g bower按照插件命令 初始化配置 bower init 生成bower.json //如果有bower.json 直接输入 ...

随机推荐

  1. Kali信息收集系列:(都是我以前的笔记整理了一下,就没加水印,习惯就好)

    好几天没发微信公众号了,今天一起发下.(最近有点事情) 前些天老业界的一位朋友问我一些Safe新时代信息收集的问题 逆天虽然好多年不干老本行,但隔段时间都会关注一下 于是就花了点时间整理了一下,你们就 ...

  2. 【转】WPF防止界面卡死并显示加载中效果

    原文地址:http://www.cnblogs.com/linyijia/archive/2013/02/06/2900609.html <Window x:Class="Loadin ...

  3. android:windowSoftInputMode属性详解

    android:windowSoftInputMode activity主窗口与软键盘的交互模式,可以用来避免输入法面板遮挡问题,Android1.5后的一个新特性. 这个属性能影响两件事情: [一] ...

  4. 实践 Neutron 前的两个准备工作 - 每天5分钟玩转 OpenStack(78)

    上一节配置了 linux-bridge mechanism driver,本节再做两个准备工作: 1. 检视初始的网络状态.2. 了解 linux bridge 环境中的各种网络设备. 初始网络状态 ...

  5. VS2015 Enterprise 安装之惊险及收获

    前言 园子早早的就有人安装了VS 2015,自己也按捺不住了,也要赶快尝尝鲜!结果在其安装过程中一个小小的问题却困扰了我一天,这其中多亏了dudu耐心的解答才得以顺利完成,如果你也遇见这个问题,看过这 ...

  6. C语言 第八章 函数、指针与宏

    一.函数 函数是一个包含完成一定功能的执行代码段.我们可以把函数看成一个"黑盒子", 你只要将数据送进去就能得到结果, 而函数内部究竟是如何工作的的, 外部程序是不知道的.外部程序 ...

  7. matlab基础教程——根据Andrew Ng的machine learning整理

    matlab基础教程--根据Andrew Ng的machine learning整理 基本运算 算数运算 逻辑运算 格式化输出 小数位全局修改 向量和矩阵运算 矩阵操作 申明一个矩阵或向量 快速建立一 ...

  8. 1Z0-053 争议题目解析24

    1Z0-053 争议题目解析24 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 24.Which of the following information will be gath ...

  9. struts2学习笔记--上传单个和批量文件示例

    struts2提供了对上传文件的支持,将上传后的文件封装为java.io.File对象,开发者只需要在Action中定义一个File类型的变量,然后直接使用该变量,将它复制到目的目录即可. 单个文件上 ...

  10. 重温JSP学习笔记--El函数库

    EL函数库(由JSTL提供的) * 导入标签库:<%@ tablib prefix="fn" uri="http://java.sun.com/jsp/jstl/f ...