如何用qunit測試angularjs指令？

在團隊中使用qunit，我試圖弄清楚如何用qunit測試指令。我在下面的例子中https://egghead.io/lessons/angularjs-unit-testing-a-directive 如何用qunit測試angularjs指令？

這裏的指令：

var app = angular.module("app", []); 

app.directive("ehSimple", function() { 
    return function(scope, element) { 
     element.addClass("plain"); 
    } 
})

這裏是我的qunit測試到目前爲止

var injector = angular.injector(['ng', 'app']); 

test('ehSimple directive', function() { 

    var element; 
    var $scope; 

    injector.invoke(['$compile', function($compile, $rootScope) { 
     $scope = $rootScope; 
     element = angular.element('<div eh-simple>{{ 2 + 2}}</div>'); 
     $compile(element)($rootScope); 
    }]); 
    $scope.$digest(); 
    console.log(element.html()); 

    ok(element.html() == '4'); 
});

當我嘗試運行與卡拉測試我得到：

Died on test #1 @/home/.../tests/qunit/test_directives.js:34 
: [ng:areq] Argument 'scope' is required

非常令人沮喪的任何想法？

來源

2014-02-20 andii

您遇到的問題是您沒有在注入器調用行中一致地配置您的調用函數。您的invoke（）表示該函數接受一個參數$ compile，但函數定義需要兩個參數$ compile和$ rootScope。因此，$ rootScope在函數的主體中是未定義的，並且在關於範圍丟失的軌道上出現bizarro錯誤。具體而言，調用線應該是：

injector.invoke(['$compile', '$rootScope', function($compile, $rootScope) { ... }]);

這是在角的函數聲明和調用一個共同的模式 - 它的替代是：

injector.invoke(function($compile, $rootScope) { ... });

即沒有包裝數組定義參數。這個只有的作品，如果你不盡量縮小你的代碼。如果你縮小它，Angular不能反思函數來確定傳入的正確參數，因此顯式列出參數名稱的數組形式。

查看$injector docs on function annotation（略）更多信息。

注意，測試可以通過避免不必要的invoke（）更簡單地寫：

test('ehSimple directive', function() { 
    var element; 
    var $scope = injector.get('$rootScope'); 
    var $compile = injector.get('$compile'); 

    element = angular.element('<div eh-simple>{{ 2 + 2}}</div>'); 
    $compile(element)($scope); 
    $scope.$digest(); 
    console.log(element.html()); 

    ok(element.html() == '4'); 
});

由於所有的invoke（）爲你做的是）一羣injector.get的（和調用你的功能與結果。

來源

2014-02-20 08:10:02

如何用qunit測試angularjs指令？

回答

相關問題