[譯] 如何對 Angular Controller 進行單元測試

aboutU 發(fā)布于2019-08-21 10:53 / 2917人閱讀

摘要：原文地址上面一篇文章簡單介紹了如何使用進行的單元測試我們用了一段簡單的代碼進行計算的測試。添加測試接下來終于到了我們的主題，添加一些單元測試給我們忽略代碼中部分，主要集中在的代碼中。

原文地址：http://www.bradoncode.com/blog/2015/05/17/angularjs-testing-controller/
@Bradley Braithwaite

上面一篇文章簡單介紹了如何使用 Jasmine 進行JavaScript的單元測試

我們用了一段簡單的代碼進行計算的測試。

接下來我們將其延伸到我們對Angular Controller的測試中。如果你不太了解angular也沒關(guān)系，下文也會提及關(guān)于Angular的一些知識。

寫個簡單的Angular App

在開始寫測試之前，我們先寫一個簡單的計算App,它會計算兩個數(shù)字之和。

代碼如下：

簡單說說里面涉及的一些基本概念:

創(chuàng)建一個 module

什么是angular.module？它是用于創(chuàng)建，回收模塊的地方
。我們創(chuàng)建一個名為calculatorApp新的模塊，我們并將組件添加到這個模塊里。

angular.module("calculatorApp", []);

關(guān)于第二個參數(shù)？第二個參數(shù)必須的，表明我們正在創(chuàng)造一個新的模塊。如果需要我們的應(yīng)用程序有其他的依賴，我們可以將它們["ngResource"，"ngCookies"]傳入進去。
第二個參數(shù)的存在的表示這是一個請求返回的模塊的實例。

從概念上講，它本意是類似下面的意思:

* angular.module.createInstance(name, requires);
* angular.module.getInstance(name)

然而實際我們是這樣寫的:

* angular.module("calculatorApp", []); // i.e. createInstance
* angular.module("calculatorApp"); // i.e. getInstance

關(guān)于module的更多信息 https://docs.angularjs.org/api/ng/function/angular.module

2.給module添加controller

接著我們給angular module的示例添加一個controller

angular.module("calculatorApp").controller("CalculatorController", function CalculatorController($scope) {
  $scope.z = 0;
  $scope.sum = function() {
    $scope.z = $scope.x + $scope.y;
  };
});

控制器主要負責(zé)業(yè)務(wù)邏輯和視圖綁定，$scope者是視圖的控制器直線的信使。

3.連接視圖中的元素

在下面 HTML 中，我們需要計算input里面的值，而這些都包含在這個controller的div中。


    
    
    {{z}}

input 中的ng-model綁定的的值及時$scope上定義的比如$scope.x,我們還在button元素使用ng-click綁定了$scope.sum方法。

添加測試

接下來終于到了我們的主題，添加一些單元測試給controller,我們忽略代碼中html部分，主要集中在controller的代碼中。

angular.module("calculatorApp").controller("CalculatorController", function CalculatorController($scope) {
  $scope.z = 0;
  $scope.sum = function() {
    $scope.z = $scope.x + $scope.y;
  };
});

為了測試 controller，我們還得提及下面幾點？

如何創(chuàng)建一個controller實例

如何get/set一個對象的屬性

如何調(diào)用$scope里面的函數(shù)

describe("calculator", function () {
        
    beforeEach(angular.mock.module("calculatorApp"));

    var $controller;

    beforeEach(angular.mock.inject(function(_$controller_){
      $controller = _$controller_;
    }));

    describe("sum", function () {
        it("1 + 1 should equal 2", function () {
            var $scope = {};
            var controller = $controller("CalculatorController", { $scope: $scope });
            $scope.x = 1;
            $scope.y = 2;
            $scope.sum();
            expect($scope.z).toBe(3);
        });    
    });

});

開始前我們需要引入ngMock,我們在測試的代碼加入angular.mock

,ngMock模塊提供了一種機制進行諸如以及虛擬的service進行單元測試。

如何獲取controller的實例

使用ngMock我們可以注冊一個calculator app實例。

beforeEach(angular.mock.module("calculatorApp"));

一旦calculatorApp初始化后，我們可以使用inject函數(shù)，這樣可以解決controller的引用問題。

beforeEach(angular.mock.inject(function(_$controller_) {
    $controller = _$controller_;
}));

一旦app加載完了，我們使用了inject函數(shù)，$controller service可以獲取 CalculatorController 的實例。

var controller = $controller("CalculatorController", { $scope: $scope });

如何get/set一個對象的屬性

在上篇代碼中我們已經(jīng)可以獲取一個controller的實例，在括號的第二個參數(shù)實際是controller自己，我們的controller只有一個參數(shù)
$scope對象

function CalculatorController($scope) { ... }

在我們的測試中$scope代表的就是一個簡單的JavaScript對象。

var $scope = {};
var controller = $controller("CalculatorController", { $scope: $scope });
// set some properties on the scope object
$scope.x = 1;
$scope.y = 2;

我們設(shè)置x,y的值，模擬剛才的gif中的所展示的一樣。我們同意也可以讀取對象中的屬性，就像下面這段測試的斷言：

expect($scope.z).toBe(3);

如何調(diào)用$scope里面的函數(shù)

最后一件事情就是我們?nèi)绾文M用戶的點擊，就像我們在絕大多數(shù)JS中使用的一致，，其實就是簡單的調(diào)用函數(shù)就行，

$scope.sum();

運行效果如下

小結(jié)

本篇文章簡單的基本的介紹了如何對angular controller進行單元測試，但是這是建立在不停的刷新瀏覽器基礎(chǔ)上，
而這些流暢可以再好，也是我們后面的一篇文章如何使用karam進行 angular 測試 (翻譯中...)的所要說的。

完整代碼:https://github.com/JackPu/angular-test-tutorial/blob/master/angular-test.html

云服務(wù)器 GPU云服務(wù)器如何對數(shù)據(jù)進行統(tǒng)計如何對數(shù)據(jù)進行分析如何對指針進行初始化如何對數(shù)據(jù)進行統(tǒng)計分析

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86367.html

發(fā)表評論

登陸后可評論

0條評論

aboutU

男|高級講師

我要關(guān)注我要私信

TA的文章

【如何構(gòu)建商業(yè)級別聊天系統(tǒng)】 MQTT 篇（五）保活 Keep Alive，請不要讓你的 MQTT

閱讀 2594·2021-09-02 15:40
javascript 事件流捕獲與冒泡

閱讀 1592·2019-08-30 15:54
一個極簡主義設(shè)計的 Hexo 主題

閱讀 1114·2019-08-30 12:48
三列布局（左右固定，中間自適應(yīng)）

閱讀 3430·2019-08-29 17:23
回味background

閱讀 1067·2019-08-28 18:04
二叉樹遍歷

閱讀 3688·2019-08-26 13:54
對JavaScript對象的理解

閱讀 634·2019-08-26 11:40
精讀《源碼學(xué)習(xí)》

閱讀 2431·2019-08-26 10:15

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

[譯] 如何對 Angular Controller 進行單元測試

相關(guān)文章

**[譯]使用karma進行angular測試**

**[譯] 通過 Webpack 實現(xiàn) AngularJS 的延遲加載**

**[譯]開始對Angular App進行單元測試（1）**

**[譯] 如何使用 TypeScript 編寫 AngularJS 的 Controller？**

**[譯] 使用angularjs創(chuàng)建一個CRUD應(yīng)用**

發(fā)表評論

0條評論

aboutU

男|高級講師

TA的文章

【如何構(gòu)建商業(yè)級別聊天系統(tǒng)】 MQTT 篇（五）保活 Keep Alive，請不要讓你的 MQTT

javascript 事件流捕獲與冒泡

一個極簡主義設(shè)計的 Hexo 主題

三列布局（左右固定，中間自適應(yīng)）

回味background

二叉樹遍歷

對JavaScript對象的理解

精讀《源碼學(xué)習(xí)》

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

[譯] 如何對 Angular Controller 進行單元測試

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！