開發(fā)者們都一致認為單元測試在開發(fā)項目中十分有好處。它們幫助你保證代碼的質(zhì)量，從而確保更穩(wěn)定的研發(fā)，即使需要重構(gòu)時也更有信心。

測試驅(qū)動開發(fā)流程圖

AngularJS的代碼聲稱其較高的可測性確實是合理的。單單文檔中列出端對端的測試實例就能說明。就像AngularJS這樣的項目雖然都說單元測試 很簡單但真正做好卻不容易。即使官方文檔中以提供了詳盡的實例，但在我的實際應(yīng)用中卻還是很有挑戰(zhàn)。這里我就簡單示范一下我是怎么操作的吧.

Instant Karma

Karma是來Angular團隊針對JavaScript開發(fā)的一個測試運行框架。它很方便的實現(xiàn)了自動執(zhí)行測試任務(wù)從而替代了繁瑣的手工操作（好比回歸測試集或是加載目標(biāo)測試的依賴關(guān)系）Karma 和Angular的協(xié)作就好比花生醬和果凍.

只需要在Karma中定義好配置文件啟動它，接下來它就會在預(yù)期的測試環(huán)境下的自動執(zhí)行測試用例。你可以在配置文件中制定相關(guān)的測試環(huán)境。angular-seed,是我強烈推薦的可以快速實施的方案。在我近期的項目中Karma 的配置如下：

module.exports = function(config) { 
    config.set({ 
        basePath: '../', 
 
        files: [ 
            'app/lib/angular/angular.js', 
            'app/lib/angular/angular-*.js', 
            'app/js/**/*.js', 
            'test/lib/recaptcha/recaptcha_ajax.js', 
            'test/lib/angular/angular-mocks.js', 
            'test/unit/**/*.js' 
        ], 
 
        exclude: [ 
            'app/lib/angular/angular-loader.js', 
            'app/lib/angular/*.min.js', 
            'app/lib/angular/angular-scenario.js' 
        ], 
 
        autoWatch: true, 
 
        frameworks: ['jasmine'], 
 
        browsers: ['PhantomJS'], 
 
        plugins: [ 
            'karma-junit-reporter', 
            'karma-chrome-launcher', 
            'karma-firefox-launcher', 
            'karma-jasmine', 
            'karma-phantomjs-launcher' 
        ], 
 
        junitReporter: { 
            outputFile: 'test_out/unit.xml', 
            suite: 'unit' 
        } 
 
    }) 
} 

這個跟angular-seed的默認配置類似只不過有以下幾點不同：

• 需要更改瀏覽器從Chrome 轉(zhuǎn)到PhantomJS, 這樣每次跳轉(zhuǎn)時無需再打開新的瀏覽器窗口，但在OSX系統(tǒng)會有窗口延遲。所以這個插件還有瀏覽器設(shè)置都做了更改。

• 由于我的應(yīng)用需要引用Google的Recaptcha服務(wù)因此添加了依賴的recaptcha_ajax.js小文件。這個小配置就像在Karma的配置文件中添加一行代碼那么簡單。

autoWatch確實是個很酷的設(shè)置，它會讓Karma在有文件更改時自動回歸你的測試用例。你可以這樣安裝Karma：

npm install karma 

angular-seed 提供了一個簡單的腳本inscripts/test.sh去觸發(fā)Karma的測試。

用Jasmine設(shè)計測試用例

當(dāng)使用Jasmine----一種行為驅(qū)動開發(fā)模式的JavaScript測試框架為Angular設(shè)計單元測試用例時大部分的資源都已可獲取。

這也就是我接下來要說的話題。

如果你要對AngularJS controller做單元測試可以利用Angular的依賴注入dependency injection 功能導(dǎo)入測試場景中controller需要的服務(wù)版本還能同時檢查預(yù)期的結(jié)果是否正確。例如，我定義了這個controller去高亮需要導(dǎo)航去的那個頁簽：

app.controller('NavCtrl', function($scope, $location) { 
    $scope.isActive = function(route) { 
        return route === $location.path(); 
    }; 
}) 

如果想要測試isActive方法，我會怎么做呢？我將 檢查$locationservice 變量是否返回了預(yù)期值，方法返回的是否預(yù)期值。因此在我們的測試說明中我們會定義好局部變量保存測試過程中需要的controlled版本并在需要時注入 到對應(yīng)的controller當(dāng)中。然后在實際的測試用例中我們會加入斷言來驗證實際的結(jié)果是否正確。整個過程如下：

describe('NavCtrl', function() { 
    var $scope, $location, $rootScope, createController; 
 
    beforeEach(inject(function($injector) { 
        $location = $injector.get('$location'); 
        $rootScope = $injector.get('$rootScope'); 
        $scope = $rootScope.$new(); 
 
        var $controller = $injector.get('$controller'); 
 
        createController = function() { 
            return $controller('NavCtrl', { 
                '$scope': $scope 
            }); 
        }; 
    })); 
 
    it('should have a method to check if the path is active', function() { 
        var controller = createController(); 
        $location.path('/about'); 
        expect($location.path()).toBe('/about'); 
        expect($scope.isActive('/about')).toBe(true); 
        expect($scope.isActive('/contact')).toBe(false); 
    }); 
}); 

使用整個基本的結(jié)構(gòu)，你就能設(shè)計各種類型的測試。由于我們的測試場景使用了本地的環(huán)境來調(diào)用controller,你也可以多加上一些屬性接著執(zhí)行一個方法清除這些屬性，然后再驗證一下屬性到底有沒有被清除。

#p#

$httpBackendIs Cool

那么要是你在調(diào)用$httpservice請求或是發(fā)送數(shù)據(jù)到服務(wù)端呢？還好，Angular提供了一種

$httpBackend的mock方法。這樣的話，你就能自定義服務(wù)端的響應(yīng)內(nèi)容，又或是確保服務(wù)端的響應(yīng)結(jié)果能和單元測試中的預(yù)期保持一致。

具體細節(jié)如下：

describe('MainCtrl', function() { 
    var $scope, $rootScope, $httpBackend, $timeout, createController; 
    beforeEach(inject(function($injector) { 
        $timeout = $injector.get('$timeout'); 
        $httpBackend = $injector.get('$httpBackend'); 
        $rootScope = $injector.get('$rootScope'); 
        $scope = $rootScope.$new(); 
 
 
        var $controller = $injector.get('$controller'); 
 
        createController = function() { 
            return $controller('MainCtrl', { 
                '$scope': $scope 
            }); 
        }; 
    })); 
 
    afterEach(function() { 
        $httpBackend.verifyNoOutstandingExpectation(); 
        $httpBackend.verifyNoOutstandingRequest(); 
    }); 
 
    it('should run the Test to get the link data from the go backend', function() { 
        var controller = createController(); 
        $scope.urlToScrape = 'success.com'; 
 
        $httpBackend.expect('GET', '/slurp?urlToScrape=http:%2F%2Fsuccess.com') 
            .respond({ 
                "success": true, 
                "links": ["http://www.google.com", "http://angularjs.org", "http://amazon.com"] 
            }); 
 
        // have to use $apply to trigger the $digest which will 
        // take care of the HTTP request 
        $scope.$apply(function() { 
            $scope.runTest(); 
        }); 
 
        expect($scope.parseOriginalUrlStatus).toEqual('calling'); 
 
        $httpBackend.flush(); 
 
        expect($scope.retrievedUrls).toEqual(["http://www.google.com", "http://angularjs.org", "http://amazon.com"]); 
        expect($scope.parseOriginalUrlStatus).toEqual('waiting'); 
        expect($scope.doneScrapingOriginalUrl).toEqual(true); 
    }); 
}); 

正如你所見，beforeEach call其實都很類似，唯一不同的是我們是從injector獲取$httpBackend而并非直接獲取。即使如此，創(chuàng)建不同的測試時還會有一些明顯的 不同之處。對初學(xué)者來說，會有一個afterEachcall 方法來確保$httpBackend在每次用例執(zhí)行后不會有明顯的異常請求。如果你觀察一下測試場景的設(shè)置和$httpBackend方法的應(yīng)用就會會發(fā) 現(xiàn)有那么幾點不是那么直觀的。

原文鏈接：http://www.oschina.net/translate/how-to-unit-test-controllers-in-angularjs-without-setting-your-hair-on-fire