国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

aboutU / 2902人閱讀

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

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

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

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

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

寫個簡單的Angular App

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

代碼如下：


    
        
    
    
        
        

            
            
            {{z}}

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

創建一個 module

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

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

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

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

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

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

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

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

控制器主要負責業務邏輯和視圖綁定，$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，我們還得提及下面幾點？

如何創建一個controller實例

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

如何調用$scope里面的函數

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函數，這樣可以解決controller的引用問題。

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

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

var controller = $controller("CalculatorController", { $scope: $scope });
如何get/set一個對象的屬性

在上篇代碼中我們已經可以獲取一個controller的實例，在括號的第二個參數實際是controller自己，我們的controller只有一個參數
$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;

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

expect($scope.z).toBe(3);
如何調用$scope里面的函數

最后一件事情就是我們如何模擬用戶的點擊，就像我們在絕大多數JS中使用的一致，，其實就是簡單的調用函數就行，

$scope.sum();

運行效果如下

小結

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86367.html

相關文章

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

    摘要：前面我們寫過了的一篇文章開始對進行單元測試而提供了非常有用的工具去幫助我們進行的測試。接下來，會增加一些內容寫測試用例接下來我們可以開始進行測試了，我們在命令行工具里輸入下面的命令我們將下面的代碼粘貼到中去。 showImg(https://segmentfault.com/img/bVx65M); 緊隨前文如何對Angular Controller進行單元測試,但是我們也提到了前文工...

    Tony 評論0 收藏0

  • [譯] 通過 Webpack 實現 AngularJS 的延遲加載

    摘要：雖然這些東西都是非常棒的，但是它們都不是實現延遲加載所必需的東西。我們通過的配置對象中的屬性就可以實現延遲加載。單元測試的技巧把改成是全局依賴并不意味著你應該從控制器中刪除它。因為在單元測試中，你只會加載這一個控制器而非整個應用模塊。 原文鏈接：http://michalzalecki.com/lazy-load-angularjs-with-webpack/ 隨著你的單頁應用擴大，...

    Zhuxy 評論0 收藏0

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

    摘要：小結我們初步了解了使用來進行測試，這樣有利于我們接下來去理解使用進行單元測試翻譯中 showImg(https://segmentfault.com/img/bVxI9p); 這是一些列文章，陸續翻譯整理中... 原文地址:http://www.bradoncode.com/blog/2015/05/12/angularjs-testing-getting-started/ @ Bra...

    Tikitoo 評論0 收藏0

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

    摘要：在這篇文章里，我將介紹如何使用去編寫的。一個新的子將被創建并作為變量注入到的構造函數當中。當使用一個構造函數就可以很好地解決問題，因為函數提升起到了很重要的作用。自定義接口類型接著就可以在構造器使用參數獲得強類型和智能支持了。 原文鏈接 : How to write AngularJS controller using TypeScript?原文作者 : Siddharth Pande...

    alphahans 評論0 收藏0

  • [譯] 使用angularjs創建一個CRUD應用

    摘要：我使用的是為這個示例應用設計接口。發起一個請求體為的請求。目前只有一個可以設置。創建一個的應用為了加強的概念我們為電影愛好者創建一個應用。我已經使用和創建了一個后端服務。創建每一個路由都對應一個。 原文地址：https://www.sitepoint.com/creating-crud-app-minutes-angulars-resource 大量的單頁應用都有CRUD操作。如果你使...

    missonce 評論0 收藏0

發表評論

0條評論

aboutU

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<