AngularJS測試：引導程序塊，路線，事件和動畫-js教程-PHP中文網

AngularJS Testing: Bootstrap Blocks, Routes, Events, and Animations

關鍵要點

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

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

測試配置和運行塊

配置和運行塊在模塊生命週期的開始執行。它們包含控制模塊、小部件或應用程序工作方式的重要邏輯。測試它們有點棘手，因為它們不能像其他組件一樣直接調用。同時，它們也不能被忽略，因為它們的作用至關重要。考慮以下配置和運行塊：

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);
    });
});

登入後複製

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

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 對象，因為我們稍後將在本文中測試已註冊的路由。現在模塊已加載，配置和運行塊已執行。因此，我們可以開始測試它們的行為。由於配置塊註冊路由，我們可以檢查它是否註冊了正確的路由。我們將測試是否註冊了預期的路由數量。以下測試驗證配置塊的功能：

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();
    });
});

登入後複製

示例代碼中的運行塊調用一個服務並註冊一個事件。我們將在本文後面測試該事件。目前，讓我們測試對服務方法的調用：

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");
    });
});

登入後複製

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

結論

通過這篇文章，我介紹了過去兩年在測試 AngularJS 代碼時學習到的大部分測試技巧。這並非結束，當您為實際應用程序的業務場景編寫測試時，您將學到更多。我希望您現在已經對測試 AngularJS 代碼有了足夠的了解。為什麼還要等待？立即為到目前為止編寫的每一行代碼編寫測試！

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

以上是AngularJS測試：引導程序塊，路線，事件和動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！