AngularJS学习笔记之二：开发、调试和测试工具

1、搭建自动化的前端开发、调试和测试环境

咱们先来看一个完整的项目实例，这是AngularJS官方为咱们提供的Phonecat项目。在AngularJS的官方网站上有详细的指导，有兴趣的朋友能够去看看，地址：http://docs.angularjs.org/tutorial。

Phonecat项目源码托管在GitHub上，咱们经过git来下载源码：

git clone --depth=14 https://github.com/angular/angular-phonecat.git

若是不能下载，请将命令中的https替换成ssh。

Phonecat项目运行在Nodejs上，请确保你的系统里有NodeJS环境，下载完成后咱们进入Phonecat目录，运行下面的命令安装项目依赖。

npm install

运行该命令后，会在angular-phonecat项目路径下安装如下依赖包：

Bower . 包管理器

Http-Server . 轻量级Web服务器

Karma . 用于运行单元测试

Protractor . 用于运行端到端测试

完成上述操做以后，咱们在angular-phonecat目录里执行下面的命令

npm start

PhoneCat运行后，能够在浏览器中打开http://localhost:8000/app/index.html来访问该Web应用

OK，如今咱们能够经过protractor来自动运行测试，protractor是一款自动测试工具，它能够自动打开本机的浏览器，运行当前项目，模拟用户的选择、输入、滑动等操做来测试项目。

npm run protractor

经过这个项目咱们能够看出自动化的构建和测试对前端来讲尤为重要，但有时咱们在想，咱们到底须要一个什么样的前端开发环境呢？

一、首先咱们须要一个款强大的代码编辑工具

二、一款易用的断点调试工具，尤为是在作JS调试时

三、一款拉风的版本管理工具，说到这里你们会想到的是就是Git，像SVN就不要了吧

四、一款代码合并和混淆工具

五、依赖管理工具

六、单元测试工具，之前咱们的代码只能在浏览器环境里跑，因此每次的测试都离不开浏览器，过程也很繁琐，如今咱们能够依赖NodeJS环境，来跑单元测试，这样就脱离的浏览器，作到自动的单元测试

七、集成测试工具，当咱们完成整个项目的开发后，进入测试阶段，咱们须要一款足够强大的全面的测试工具来帮咱们完成整个项目的测试。

2、经常使用工具的介绍

一、代码编辑工具：

说到代码编辑工具，前端的朋友都会推荐Sublime了，是的，这是一款前端轻量级的强大的代码编辑工具，支持多种编程语言，其使用方法和插件的安装在百度上会找的不少。

代码编辑工具除了上面说到的Sublime以外呢，还有一款重量级的，Webstorm，这款工具比较大，但功能确实很强大，插件里首先就支持了AngularJS，若是你的电脑比较好，能够考虑使用这款工具。

二、断点调试工具：

chrome插件Batarang，咱们能够在chrome的设置里安装这个断点调试工具

三、版本管理工具

在这个技术突飞猛进的年代，咱们固然要用上比较高大上的工具，版本管理，天然咱们会使用Git这样强大的分布式版本管理工具，具体使用方法，在个人博客里有比较详细的讲解。

四、开发和调试工具：

咱们用的不少这样的工具都依赖一个环境，这就是NodeJS，因此首先咱们须要在本身的电脑上安装并配置好NodeJS，其次就是npm，这是NodeJS的一个包管理器，使用npm咱们能够解决不少依赖包的安装和配置工做。

五、代码合并和混淆工具：

Grunt，这款工具也是在NodeJS环境下安装的，咱们可使用npm来安装grunt，而后咱们在项目中，使用npm来安装一些grunt会使用到的插件，基本的包括uglify（代码混淆）、concat（合并文件）、watch（监控文件变化）。

六、依赖管理工具

Bower，这款工具能够自动安装依赖的组建，包括对这些依赖的检测和版本之间兼容性的检测，关于Bower的具体使用能够参考百度。

七、轻量级Server

http-server，这是一款基于NodeJS的http-server工具，它能够把你电脑上的任意一个目录变成Web服务目录。咱们能够经过npm把它安装到全局，而后在须要测试的项目目录里运行http-server便可。

八、单元测试runner

咱们先来看下单元测试神器：Karma，它只是用来跑测试用例的容器，并无提供一套用来编写测试用例的语法，因此咱们须要另一款工具来配合，那就是Jasmine，它提供了一套比较简洁的语法，来编写测试用例。

Jasmine的四个核心概念：分组、用例、指望、匹配，它们分别对应Jasmine的四个函数：

describe(string,function) 这个函数表示分组，也就是一组测试用例

it(string,function) 这个表示单个的测试用例

expect(expression) 表示指望expression这个表达式会返回某个值或具备某种行为

to***(arg) 这个表示匹配

下面咱们经过一个例子来看下这个单元测试的过程。首先咱们须要在测试目录里安装必要的模块，这里咱们新建并进入karmaTets目录，在此目录下经过npm或cnpm安装karma、karma-chrome-launcher、karma-coverage和karma-jasmine，安装过程这里就再也不赘述了。

上述的安装完成以后，咱们在目录中新建src目录，在这里个目录里新建一个index.js文件，写上一个简单的函数，这个函数的做用是把传入的参数字符串进行反转，如abc返回cba，js代码以下：

function reverse(name) {
    return name.split("").reverse().join("");
}

接下来咱们再新建一个目录test，表示是测试目录，里面分别有两个目录，一个是unit，单元测试，一个是e2e，表示是集成测试目录。咱们在unit目录新建一个测试文件，叫testCase.js，输入如下内容

describe("A suite", function(){
	it("contains spec with an expectation", funtion(){
		console.log("This is msg from log...");
		expect(true).toBe(true);
	});
});

describe("A suite of basic functions", function(){
	it("reverse word", function(){
		expect("DCBA").toEqual(reverse("ABCD"));
		expect("damo").toEqual(reverse("omad"));
	});
});

而后咱们在命令行下，执行karma init来初始化karma，并配置karma.conf.js文件，完成以后咱们就可使用karma start来启动测试，结果会在命令行打印出来。

九、专为AngularJS定制的测试工具 -- Protractor

Protractor是一款集成测试工具，专门为ANgularJS应用而设计的，它是基于WebDriverJS的，原理就是利用WebDriverJS，借助NodeJS直接调用浏览器的接口。咱们能够经过下面的地址去了解这款工具

https://github.com/angular/protractor

https://code.google.com/p/selenium/wiki/WebDriverJs