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