成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

[譯] 如何對(duì) Angular Controller 進(jìn)行單元測(cè)試

aboutU / 2944人閱讀

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

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

上面一篇文章簡(jiǎn)單介紹了如何使用 Jasmine 進(jìn)行JavaScript的單元測(cè)試

我們用了一段簡(jiǎn)單的代碼進(jìn)行計(jì)算的測(cè)試。

接下來(lái)我們將其延伸到我們對(duì)Angular Controller的測(cè)試中。如果你不太了解angular也沒(méi)關(guān)系，下文也會(huì)提及關(guān)于Angular的一些知識(shí)。

寫(xiě)個(gè)簡(jiǎn)單的Angular App

在開(kāi)始寫(xiě)測(cè)試之前，我們先寫(xiě)一個(gè)簡(jiǎn)單的計(jì)算App,它會(huì)計(jì)算兩個(gè)數(shù)字之和。

代碼如下：


    
        
    
    
        
        

            
            
            {{z}}

簡(jiǎn)單說(shuō)說(shuō)里面涉及的一些基本概念:

創(chuàng)建一個(gè) module

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

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

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

從概念上講，它本意是類(lèi)似下面的意思:

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

然而實(shí)際我們是這樣寫(xiě)的:

* 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的示例添加一個(gè)controller

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

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

3.連接視圖中的元素

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


    
    
    {{z}}

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

添加測(cè)試

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

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

為了測(cè)試 controller，我們還得提及下面幾點(diǎn)？

如何創(chuàng)建一個(gè)controller實(shí)例

如何get/set一個(gè)對(duì)象的屬性

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

});

開(kāi)始前我們需要引入ngMock,我們?cè)跍y(cè)試的代碼加入angular.mock

,ngMock模塊提供了一種機(jī)制進(jìn)行諸如以及虛擬的service進(jìn)行單元測(cè)試。

如何獲取controller的實(shí)例

使用ngMock我們可以注冊(cè)一個(gè)calculator app實(shí)例。

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

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

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

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

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

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

function CalculatorController($scope) { ... }

在我們的測(cè)試中$scope代表的就是一個(gè)簡(jiǎn)單的JavaScript對(duì)象。

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

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

expect($scope.z).toBe(3);
如何調(diào)用$scope里面的函數(shù)

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

$scope.sum();

運(yùn)行效果如下

小結(jié)

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/86367.html

相關(guān)文章

  • [譯]使用karma進(jìn)行angular測(cè)試

    摘要：前面我們寫(xiě)過(guò)了的一篇文章開(kāi)始對(duì)進(jìn)行單元測(cè)試而提供了非常有用的工具去幫助我們進(jìn)行的測(cè)試。接下來(lái)，會(huì)增加一些內(nèi)容寫(xiě)測(cè)試用例接下來(lái)我們可以開(kāi)始進(jìn)行測(cè)試了，我們?cè)诿钚泄ぞ呃镙斎胂旅娴拿钗覀儗⑾旅娴拇a粘貼到中去。 showImg(https://segmentfault.com/img/bVx65M); 緊隨前文如何對(duì)Angular Controller進(jìn)行單元測(cè)試,但是我們也提到了前文工...

    Tony 評(píng)論0 收藏0

  • [譯] 通過(guò) Webpack 實(shí)現(xiàn) AngularJS 的延遲加載

    摘要：雖然這些東西都是非常棒的，但是它們都不是實(shí)現(xiàn)延遲加載所必需的東西。我們通過(guò)的配置對(duì)象中的屬性就可以實(shí)現(xiàn)延遲加載。單元測(cè)試的技巧把改成是全局依賴(lài)并不意味著你應(yīng)該從控制器中刪除它。因?yàn)樵趩卧獪y(cè)試中，你只會(huì)加載這一個(gè)控制器而非整個(gè)應(yīng)用模塊。 原文鏈接：http://michalzalecki.com/lazy-load-angularjs-with-webpack/ 隨著你的單頁(yè)應(yīng)用擴(kuò)大，...

    Zhuxy 評(píng)論0 收藏0

  • [譯]開(kāi)始對(duì)Angular App進(jìn)行單元測(cè)試（1）

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

    Tikitoo 評(píng)論0 收藏0

  • [譯] 如何使用 TypeScript 編寫(xiě) AngularJS 的 Controller？

    摘要：在這篇文章里，我將介紹如何使用去編寫(xiě)的。一個(gè)新的子將被創(chuàng)建并作為變量注入到的構(gòu)造函數(shù)當(dāng)中。當(dāng)使用一個(gè)構(gòu)造函數(shù)就可以很好地解決問(wèn)題，因?yàn)楹瘮?shù)提升起到了很重要的作用。自定義接口類(lèi)型接著就可以在構(gòu)造器使用參數(shù)獲得強(qiáng)類(lèi)型和智能支持了。 原文鏈接 : How to write AngularJS controller using TypeScript?原文作者 : Siddharth Pande...

    alphahans 評(píng)論0 收藏0

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

    摘要：我使用的是為這個(gè)示例應(yīng)用設(shè)計(jì)接口。發(fā)起一個(gè)請(qǐng)求體為的請(qǐng)求。目前只有一個(gè)可以設(shè)置。創(chuàng)建一個(gè)的應(yīng)用為了加強(qiáng)的概念我們?yōu)殡娪皭?ài)好者創(chuàng)建一個(gè)應(yīng)用。我已經(jīng)使用和創(chuàng)建了一個(gè)后端服務(wù)。創(chuàng)建每一個(gè)路由都對(duì)應(yīng)一個(gè)。 原文地址：https://www.sitepoint.com/creating-crud-app-minutes-angulars-resource 大量的單頁(yè)應(yīng)用都有CRUD操作。如果你使...

    missonce 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<