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

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

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

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

配置和運(yùn)行塊在模塊生命周期的開(kāi)始執(zhí)行。它們包含控制模塊、小部件或應(yīng)用程序工作方式的重要邏輯。測(cè)試它們有點(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);
    });
});

與測(cè)試提供程序的情況類(lèi)似，我們需要確保在測(cè)試配置和運(yùn)行塊中的功能之前加載模塊。因此，我們將使用一個(gè)空的注入塊來(lái)加載模塊。以下代碼片段模擬了上述塊中使用的依賴(lài)項(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());
});

我故意沒(méi)有模擬 $routeProvider 對(duì)象，因?yàn)槲覀兩院髮⒃诒疚闹袦y(cè)試已注冊(cè)的路由?，F(xiàn)在模塊已加載，配置和運(yùn)行塊已執(zhí)行。因此，我們可以開(kāi)始測(cè)試它們的行為。由于配置塊注冊(cè)路由，我們可以檢查它是否注冊(cè)了正確的路由。我們將測(cè)試是否注冊(cè)了預(yù)期的路由數(shù)量。以下測(cè)試驗(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ù)并注冊(cè)一個(gè)事件。我們將在本文后面測(cè)試該事件。目前，讓我們測(cè)試對(duì)服務(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)于測(cè)試作用域事件、路由、解析塊和動(dòng)畫(huà)的描述，由于篇幅限制，此處省略。 完整的測(cè)試代碼示例可以參考原文GitHub倉(cāng)庫(kù))

結(jié)論

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

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

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