AngularJS是繼jQuery之后發(fā)生在JavaScript上最好的東西。這也是JavaScript開(kāi)發(fā)一直以來(lái)想要的方式。Angular主要的優(yōu)點(diǎn)之一就是它的依賴(lài)注入(Dependency Injection)，它非常利于代碼的單元測(cè)試。但有點(diǎn)小怪異的是，我在無(wú)論如何都沒(méi)能找到一個(gè)介紹如何做單元測(cè)試的教程。

當(dāng)然有很多不錯(cuò)的推薦：使用Jasmine測(cè)試框架和Karma測(cè)試執(zhí)行器（Test Runner）；但是并沒(méi)有一篇完整的從無(wú)到有指導(dǎo)如何測(cè)試的教程。所以我寫(xiě)了這篇文章。我在網(wǎng)上找了很多資源才知道如何去做，而你現(xiàn)在不需要去做這些（如果一開(kāi)始就看到這篇文章的話(huà)）。

請(qǐng)告訴我你看到的任何錯(cuò)誤，直到我能說(shuō)這是基于Karma和Jasmine測(cè)試Angular應(yīng)用的最佳實(shí)踐。

介紹

這篇文章會(huì)引導(dǎo)你安裝使用Karma和Jasmine做自動(dòng)化測(cè)試所需要的所有工具。我不在乎你實(shí)在使用TDD（測(cè)試驅(qū)動(dòng)開(kāi)發(fā)）還是TAD（測(cè)試輔助開(kāi)發(fā)），在這篇文章中，我假設(shè)你已經(jīng)有一個(gè)文件需要測(cè)試。

安裝Karma

如果你沒(méi)有安裝 Node.js，那么請(qǐng)自行下載和安裝。安裝之后，打開(kāi)終端或命令行輸入一下命令：

npm install -g karma

文件結(jié)構(gòu)

文件結(jié)構(gòu)是跟我們的議題關(guān)聯(lián)不大，但是在接下來(lái)的測(cè)試中，我使用的文件結(jié)構(gòu)如下：

Application
| angular.js
| angular-resource.js
| Home
 | home.js
| Tests
 | Home
 | home.tests.js
 | karma.config.js (will be created in the next step)
 | angular-mocks.js

*我并不主張這種文檔結(jié)構(gòu)，我展示它只是為了測(cè)試舉例。

配置Karma

切換到你想要放置配置文件的目錄，然后在終端中輸入下面的命令來(lái)創(chuàng)建配置文件：

karma init karma.config.js

你會(huì)被詢(xún)問(wèn)一些問(wèn)題，包括你想使用那個(gè)測(cè)試框架，你是否需要自動(dòng)監(jiān)測(cè)文件，包含哪些測(cè)試和被測(cè)試文件等。在我們的教程中，我們保留‘Jasmine'作為我們默認(rèn)的框架，開(kāi)啟文件自動(dòng)監(jiān)測(cè)，并包含下面的文件：

../*.js
../**.*.js
angular-mocks.js
**/*.tests.js

這些都是相對(duì)路徑，包含了1）父目錄下的所有.js文件,2）父目錄下的所有子目錄下的所有.js文件，3）當(dāng)前目錄下的angular-mock.js，4）以及當(dāng)前目錄（包含子目錄）下所有的.tests.js文件（我喜歡以這樣的方式來(lái)區(qū)分測(cè)試文件和其他的文件）。

不管你選擇了什么文件，請(qǐng)確保你引入了 angular.js，angular-mock.js，以及其他你需要使用的文件。

啟動(dòng)Karma

現(xiàn)在已經(jīng)可以啟動(dòng)Karma了，依然在終端中輸入：

karma start karma.config.js

這個(gè)命令會(huì)在你的電腦上啟動(dòng)你在配置文件中列出的瀏覽器。這些瀏覽器都會(huì)以socket的方式連接到Karma的實(shí)例上，你會(huì)看到一組活動(dòng)的瀏覽器并被告知她們是否在執(zhí)行測(cè)試。我但愿Karma已經(jīng)告訴你在每個(gè)瀏覽器上的最終測(cè)試結(jié)果總結(jié)（比如16個(gè)中的15個(gè)通過(guò)，1個(gè)失敗），遺憾的是你只能通過(guò)終端窗口看到這些信息。

Karma的一個(gè)很突出的特色是你可以在網(wǎng)絡(luò)中使用任何設(shè)備連接并測(cè)試你的代碼。試一下將你的手機(jī)瀏覽器指向Karma服務(wù)，你可以在電腦上任何一個(gè)運(yùn)行的瀏覽器上找到這個(gè)測(cè)試的URL地址。它應(yīng)該類(lèi)似于：http://localhost:9876/?id=5359192。你可以將你的手機(jī)，虛擬機(jī)，或其他任何設(shè)備的瀏覽器指向 [你在網(wǎng)絡(luò)上的IP地址]:9876/?id=5359192. 因?yàn)镵arma是在運(yùn)行一個(gè) Node.js 實(shí)例，你的測(cè)試機(jī)器就像一個(gè)web服務(wù)器一樣，會(huì)將測(cè)試發(fā)送到任何指向它的瀏覽器。

基本的測(cè)試

我們假設(shè)你已經(jīng)有一個(gè)文件需要測(cè)試。我們要使用到的 home.js 文件如下：

home.js

'use strict';
 
var app = angular.module('Application', ['ngResource']);
 
app.factory('UserFactory', function($resource){
 return $resource('Users/users.json')
});
 
app.controller('MainCtrl', function($scope, UserFactory) {
 $scope.text = 'Hello World!';
 $scope.users = UserFactory.get();
});

我們可以在 home.test.js 文件中創(chuàng)建我們的測(cè)試用例。我們從簡(jiǎn)單的那個(gè)測(cè)試開(kāi)始：$scope.text 應(yīng)該等于 ‘Hello World!'。 為了完成這個(gè)測(cè)試，我們需要模擬我們的 Application 模塊以及 $scope 變量。我們會(huì)在Jasmine的 beforeEach 方法中做這個(gè)工作，這樣的話(huà)我們?cè)诿總€(gè)測(cè)試用例開(kāi)始時(shí)可以有一個(gè)全新的（干凈的）controler和scope對(duì)象。

home.tests.js

'use strict';
 
describe('MainCtrl', function(){
 var scope;
//我們會(huì)在測(cè)試中使用這個(gè)scope
 
 
//模擬我們的Application模塊并注入我們自己的依賴(lài)
 beforeEach(angular.mock.module('Application'));
 
//模擬Controller，并且包含 $rootScope 和 $controller
 beforeEach(angular.mock.inject(function($rootScope, $controller){
  
//創(chuàng)建一個(gè)空的 scope
  scope = $rootScope.$new();
  
//聲明 Controller并且注入已創(chuàng)建的空的 scope
  $controller('MainCtrl', {$scope: scope});
 });
 
// 測(cè)試從這里開(kāi)始
});

從代碼中你可以看到我們注入了我們自己的 scope，因此我們可以在它的外部驗(yàn)證它的信息。同時(shí)，別忘了模擬模塊本身（第7行代碼）！我們現(xiàn)在已經(jīng)為測(cè)試做好了準(zhǔn)備：

home.tests.js

// 測(cè)試從這里開(kāi)始
it('should have variable text = "Hello World!"', function(){
 expect(scope.text).toBe('Hello World!);
});

如果你運(yùn)行這個(gè)測(cè)試，它可以在任何指向Karma的瀏覽器中執(zhí)行，并且測(cè)試通過(guò)。

發(fā)送$resource請(qǐng)求

現(xiàn)在我們已經(jīng)準(zhǔn)備好測(cè)試 $resource 請(qǐng)求。要完成這個(gè)請(qǐng)求，我們需要使用到 $httpBackend， 它一個(gè)模擬版本的Angular $http。我們會(huì)創(chuàng)建另一個(gè)叫做 $httpBackend 的變量，在第二個(gè) beforEach塊中，注入 _$httpBackend_ 并將新創(chuàng)建的變量指向 _$httpBackend_。接下來(lái)我們會(huì)告訴 $httpBackend 如何對(duì)請(qǐng)求做出響應(yīng)。

$httpBackend = _$httpBackend_; 
$httpBackend.when('GET', 'Users/users.json').respond([{id: 1, name: 'Bob'}, {id:2, name: 'Jane'}]);

我們的測(cè)試： home.tests.js

it('should fetch list of users', function(){
   $httpBackend.flush();
   expect(scope.users.length).toBe(2);
   expect(scope.users[0].name).toBe('Bob');
  });

都放到一起

home.tests.js

'use strict';
 
describe('MainCtrl', function(){
 var scope, $httpBackend;
//we'll use these in our tests
 
 
//mock Application to allow us to inject our own dependencies
 beforeEach(angular.mock.module('Application'));
 
//mock the controller for the same reason and include $rootScope and $controller
 beforeEach(angular.mock.inject(function($rootScope, $controller, _$httpBackend_){
  $httpBackend = _$httpBackend_;
  $httpBackend.when('GET', 'Users/users.json').respond([{id: 1, name: 'Bob'}, {id:2, name: 'Jane'}]);
 
  
//create an empty scope
  scope = $rootScope.$new();
  
//declare the controller and inject our empty scope
  $controller('MainCtrl', {$scope: scope});
 });
 
// tests start here
 it('should have variable text = "Hello World!"', function(){
  expect(scope.text).toBe('Hello World!');
 });
 it('should fetch list of users', function(){
  $httpBackend.flush();
  expect(scope.users.length).toBe(2);
  expect(scope.users[0].name).toBe('Bob');
 });
});

技巧

Karma會(huì)運(yùn)行所有文件中的所有測(cè)試用例，如果你只想運(yùn)行所有測(cè)試的一個(gè)子集，修改 describe 或 it 為 ddescribe 或 iit 來(lái)運(yùn)行個(gè)別的一些測(cè)試。如果有些測(cè)試你不想運(yùn)行他們，那么修改 describe 或 it 為 xdescribe 或 xit 來(lái)忽略這些代碼。

你也可以在html文件的頁(yè)面上運(yùn)行你的測(cè)試。舉例的代碼如下：
home.runner.html

<!DOCTYPE html>
<html>
<head>
 <title>Partner Settings Test Suite</title>
 
<!-- include your script files (notice that the jasmine source files have been added to the project) -->
 <script type="text/javascript" src="../jasmine/jasmine-1.3.1/jasmine.js"></script>
 <script type="text/javascript" src="../jasmine/jasmine-1.3.1/jasmine-html.js"></script>
 <script type="text/javascript" src="../angular-mocks.js"></script>
 <script type="text/javascript" src="home.tests.js"></script>
 <link rel="stylesheet" href="../jasmine/jasmine-1.3.1/jasmine.css"/>
</head>
<body>
 
<!-- use Jasmine to run and display test results -->
 <script type="text/javascript">
  var jasmineEnv = jasmine.getEnv();
  jasmineEnv.addReporter(new jasmine.HtmlReporter());
  jasmineEnv.execute();
 </script>
</body>
</html>

最新評(píng)論