關(guān)鍵要點(diǎn)

• 單元測試對於軟件開發(fā)至關(guān)重要，尤其對於包含數(shù)十萬行 JavaScript 代碼的應(yīng)用程序。 AngularJS 支持依賴注入 (DI) 等特性，使代碼測試更容易。
• 配置和運(yùn)行塊在模塊生命週期的開始執(zhí)行，包含重要的邏輯。它們不能像其他組件一樣直接調(diào)用，這使得測試它們比較棘手，但由於它們的關(guān)鍵作用，不能忽略它們。
• AngularJS 通過 $scope 上的 $emit/$broadcast 事件提供事件聚合，允許對象即使彼此不知道也能相互交互。單元測試是隔離編寫的，因此測試規(guī)範(fàn)需要模擬一端來測試功能。
• 路由定義用戶在應(yīng)用程序中的導(dǎo)航方式，任何更改都可能導(dǎo)致糟糕的用戶體驗(yàn)。因此，也應(yīng)該測試路由。 AngularJS 應(yīng)用程序中兩個(gè)最常用的路由器是 ngRoute 和 ui-router。
• 測試 AngularJS 中的動(dòng)畫比測試指令更簡單，angular-mocks 庫包含 ngAnimateMock 模塊來簡化此過程。 AngularJS 會(huì)阻止動(dòng)畫運(yùn)行，直到第一個(gè) digest 循環(huán)完成，以加快初始綁定速度。

在構(gòu)建和交付功能齊全的軟件的過程中，我們應(yīng)用多種技術(shù)來檢查軟件的正確性和質(zhì)量。單元測試就是其中一種技術(shù)。許多組織非常重視單元測試，因?yàn)樗档土瞬檎液托迯?fù)應(yīng)用程序潛在問題的成本。當(dāng)我們開始開發(fā)包含數(shù)十萬行 JavaScript 代碼的應(yīng)用程序時(shí)，我們就無法避免測試代碼。一些 JavaScript 開發(fā)人員表示，測試 JavaScript 更加重要，因?yàn)樵谶\(yùn)行時(shí)之前，語言的行為是未知的。值得慶幸的是，AngularJS 通過支持依賴注入 (DI) 等特性，使使用該框架編寫的代碼測試更容易。在我之前的幾篇文章中，我討論了關(guān)於模擬的一些技巧，如何測試控制器、服務(wù)和提供程序以及如何測試指令。本文將介紹測試 AngularJS 應(yīng)用程序的引導(dǎo)塊（包括配置塊、運(yùn)行塊和路由解析塊）、作用域事件和動(dòng)畫。您可以從我們的 GitHub 存儲(chǔ)庫下載本文中使用的代碼，您還可以在其中找到運(yùn)行測試的說明。

測試配置和運(yùn)行塊

配置和運(yùn)行塊在模塊生命週期的開始執(zhí)行。它們包含控制模塊、小部件或應(yīng)用程序工作方式的重要邏輯。測試它們有點(diǎn)棘手，因?yàn)樗鼈儾荒芟衿渌M件一樣直接調(diào)用。同時(shí)，它們也不能被忽略，因?yàn)樗鼈兊淖饔弥陵P(guān)重要?？紤]以下配置和運(yùn)行塊：

angular.module('configAndRunBlocks', ['ngRoute'])
    .config(function ($routeProvider) {
    $routeProvider.when('/home', {
        templateUrl: 'home.html',
        controller: 'HomeController',
        resolve: {
            bootstrap: ['$q', function ($q) {
                return $q.when({
                    prop: 'value'
                });
            }]
        }
    })
        .when('/details/:id', {
        templateUrl: 'details.html',
        controller: 'DetailsController'
    })
        .otherwise({
        redirectTo: '/home'
    });
})
    .run(function ($rootScope, messenger) {

    messenger.send('Bootstrapping application');
    $rootScope.$on('$locationChangeStart', function (event, next, current) {
        messenger.send('Changing route to ' + next + ' from ' + current);
    });
});

與測試提供程序的情況類似，我們需要確保在測試配置和運(yùn)行塊中的功能之前加載模塊。因此，我們將使用一個(gè)空的注入塊來加載模塊。以下代碼片段模擬了上述塊中使用的依賴項(xiàng)並加載了模塊：

describe('config and run blocks', function () {
    var routeProvider, messenger;

    beforeEach(function () {
        module('ngRoute');

        module(function ($provide, $routeProvider) {
            routeProvider = $routeProvider;
            spyOn(routeProvider, 'when').andCallThrough();
            spyOn(routeProvider, 'otherwise').andCallThrough();

            messenger = {
                send: jasmine.createSpy('send')
            };
            $provide.value('messenger', messenger);
        });

        module('configAndRunBlocks');
    });

    beforeEach(inject());
});

我故意沒有模擬 $routeProvider 對象，因?yàn)槲覀兩葬釋⒃诒疚闹袦y試已註冊的路由?，F(xiàn)在模塊已加載，配置和運(yùn)行塊已執(zhí)行。因此，我們可以開始測試它們的行為。由於配置塊註冊路由，我們可以檢查它是否註冊了正確的路由。我們將測試是否註冊了預(yù)期的路由數(shù)量。以下測試驗(yàn)證配置塊的功能：

describe('config block tests', function () {
    it('should have called registered 2 routes', function () {
        //Otherwise internally calls when. So, call count of when has to be 3
        expect(routeProvider.when.callCount).toBe(3);
    });

    it('should have registered a default route', function () {
        expect(routeProvider.otherwise).toHaveBeenCalled();
    });
});

示例代碼中的運(yùn)行塊調(diào)用一個(gè)服務(wù)並註冊一個(gè)事件。我們將在本文後面測試該事件。目前，讓我們測試對服務(wù)方法的調(diào)用：

describe('run block tests', function () {
    var rootScope;
    beforeEach(inject(function ($rootScope) {
        rootScope = $rootScope;
    }));
    it('should send application bootstrap message', function () {
        expect(messenger.send).toHaveBeenCalled();
        expect(messenger.send).toHaveBeenCalledWith("Bootstrapping application");
    });
});

(後續(xù)部分關(guān)於測試作用域事件、路由、解析塊和動(dòng)畫的描述，由於篇幅限制，此處省略。 完整的測試代碼示例可以參考原文GitHub倉庫)

結(jié)論

通過這篇文章，我介紹了過去兩年在測試 AngularJS 代碼時(shí)學(xué)習(xí)到的大部分測試技巧。這並非結(jié)束，當(dāng)您為實(shí)際應(yīng)用程序的業(yè)務(wù)場景編寫測試時(shí)，您將學(xué)到更多。我希望您現(xiàn)在已經(jīng)對測試 AngularJS 代碼有了足夠的了解。為什麼還要等待？立即為到目前為止編寫的每一行代碼編寫測試！

(原文中FAQs部分也由於篇幅限制省略)

以上是AngularJS測試：引導(dǎo)程序塊，路線，事件和動(dòng)畫的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！