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
Angular+Grunt+Bower+Karma+Protractor (Atom)的更多相关文章
- 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular
现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...
- Grunt + Bower—前端构建利器(转)
目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web Service服务,通过JSON格式进行 ...
- 前端构建利器Grunt—Bower
runt + Bower—前端构建利器 目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web ...
- Grunt + Bower—前端构建利器
目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web Service服务,通过JSON格式进行 ...
- Grunt Bower构建前端
Grunt + Bower—前端构建利器 目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的W ...
- 用Laravel+Grunt+Bower管理你的应用
来源:http://yansu.org/2014/03/10/grunt-bower-and-laravel.html 为什么这么选择? 如今开源盛行,从后端的各个类库,到如今前端的jQuery插件, ...
- 简介Gulp, Grunt, Bower, 和 Npm 对Visual Studio的支持
[原文发表地址]Introducing Gulp, Grunt, Bower, and npm support for Visual Studio Web 开发,特别是前端 Web 开发,正迅速变得像 ...
- 在 Visual Studio 2013 中使用 Grunt, Bower 和 NPM
在 Visual Studio 2015 中提供了对于 Grunt 和 Gulp 的内置支持,在 Visual Studio 2013 中怎么办呢?微软将 2015 中的特性作为几个独立的扩展发布出来 ...
- grunt+bower依赖管理
安装bower(必须安装git) npm install bower -g bower按照插件命令 初始化配置 bower init 生成bower.json //如果有bower.json 直接输入 ...
随机推荐
- Kali信息收集系列:(都是我以前的笔记整理了一下,就没加水印,习惯就好)
好几天没发微信公众号了,今天一起发下.(最近有点事情) 前些天老业界的一位朋友问我一些Safe新时代信息收集的问题 逆天虽然好多年不干老本行,但隔段时间都会关注一下 于是就花了点时间整理了一下,你们就 ...
- 【转】WPF防止界面卡死并显示加载中效果
原文地址:http://www.cnblogs.com/linyijia/archive/2013/02/06/2900609.html <Window x:Class="Loadin ...
- android:windowSoftInputMode属性详解
android:windowSoftInputMode activity主窗口与软键盘的交互模式,可以用来避免输入法面板遮挡问题,Android1.5后的一个新特性. 这个属性能影响两件事情: [一] ...
- 实践 Neutron 前的两个准备工作 - 每天5分钟玩转 OpenStack(78)
上一节配置了 linux-bridge mechanism driver,本节再做两个准备工作: 1. 检视初始的网络状态.2. 了解 linux bridge 环境中的各种网络设备. 初始网络状态 ...
- VS2015 Enterprise 安装之惊险及收获
前言 园子早早的就有人安装了VS 2015,自己也按捺不住了,也要赶快尝尝鲜!结果在其安装过程中一个小小的问题却困扰了我一天,这其中多亏了dudu耐心的解答才得以顺利完成,如果你也遇见这个问题,看过这 ...
- C语言 第八章 函数、指针与宏
一.函数 函数是一个包含完成一定功能的执行代码段.我们可以把函数看成一个"黑盒子", 你只要将数据送进去就能得到结果, 而函数内部究竟是如何工作的的, 外部程序是不知道的.外部程序 ...
- matlab基础教程——根据Andrew Ng的machine learning整理
matlab基础教程--根据Andrew Ng的machine learning整理 基本运算 算数运算 逻辑运算 格式化输出 小数位全局修改 向量和矩阵运算 矩阵操作 申明一个矩阵或向量 快速建立一 ...
- 1Z0-053 争议题目解析24
1Z0-053 争议题目解析24 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 24.Which of the following information will be gath ...
- struts2学习笔记--上传单个和批量文件示例
struts2提供了对上传文件的支持,将上传后的文件封装为java.io.File对象,开发者只需要在Action中定义一个File类型的变量,然后直接使用该变量,将它复制到目的目录即可. 单个文件上 ...
- 重温JSP学习笔记--El函数库
EL函数库(由JSTL提供的) * 导入标签库:<%@ tablib prefix="fn" uri="http://java.sun.com/jsp/jstl/f ...