Как проверить директивы angularjs с qunit?

Question

использовали qunit в нашей команде, и я пытаюсь выяснить, как тестировать директивы с qunit. Я следую примеру https://egghead.io/lessons/angularjs-unit-testing-a-directive

Вот директива:

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 

Очень расстраивает любые идеи?

Answer 1

Проблема заключается в том, что вы не настраиваете свою функцию вызова последовательно в строке инжектора invoke. Ваш invoke() говорит, что функция принимает один компилятор $ compile, но определение функции предполагает два аргумента $ compile и $ rootScope. Таким образом, $ rootScope не определен в теле функции, и вы получаете ошибку bizarro по треку о том, что область пропуска отсутствует. В частности, ВЫЗОВ линия должна быть:

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

Это общая закономерность в Угловое объявлении функции и вызов - альтернатива к нему:

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

т.е.. без массива wrapping, определяющего аргументы. Это только работает, если вы не уменьшаете свой код. Если вы его минимизируете, 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() и вызова ваша функция с результатами.