Использование Jasmine и Chutzpah для модульного тестирования контроллера AngularJs

Я программирую с помощью VS2013 и хотел бы провести модульные тесты на своих контроллерах AngularJs. Например, у меня есть taController.js, который выглядит так:

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

var TAController = ["$scope", 
function ($scope) {
    $scope.myNumber = 2;
    $scope.add = function (number) {
        $scope.myNumber = $scope.myNumber + number;
    };
}];

И HTML-страница, которая использует это, выглядит так:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="MyApp">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/taController.js"></script>
</head>
<body>
    <div id="myDiv" data-ng-controller="TAController">
        {{myNumber}}<br />
        <a href="" ng-click="add(2)">Add 2</a><br />
    </div>
</body>
</html>

Я хочу создать модульный тест, используя Jasmine и Chutzpah. Я создал AngularTest.js в каталоге спецификаций моего тестового проекта, который выглядит так:

/// <reference path="../scripts/jasmine.js" />
/// <reference path="../../unittestingwithjasmine/scripts/tacontroller.js" />

describe("My Tacontroller", function () {
    var element;
    var myScope;

    beforeEach(inject(function($scope) {
        myScope = $scope;
    }));

    it("should be able to add 2 plus 2", function () {
        myScope.add(2)
        expect(myScope.myNumber).toBe(4);
    });
});

Я думаю, что в приведенном выше коде есть ряд ошибок. Первый из них — Test Failed — мой Tacontroler столкнулся с исключением объявления. Сообщение: RefferenceError: Не удается найти карикатуру: введите в файл:///C....../specs/angulaertest.js (строка 10)

Мой вопрос в том, как я могу написать свой AngularTest.js для правильного тестирования, добавив функцию в мой Tacontroller.


javascript visual-studio angularjs jasmine chutzpah
person Nigel Findlater    schedule 13.05.2014    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Где определяется инъекция? Вам нужно сообщить Chutzpah, где найти все ваши зависимости. Рекомендуемый способ сделать это — использовать файл chutzpah.json и его настройка ссылок. Вы можете прочитать о настройке ссылок в Chutzpah здесь

Пример chutzpah.json выглядит так:

{
   "Framework": "jasmine",
   "References" : [
       {"Path" : "someReference.js" }, 
       {"Path" : "someCode.js" }
   ],
   "Tests" : [
     {"Include": "tests/*.js"}
   ]
}
person Matthew Manela    schedule 13.05.2014
comment
Спасибо за ответ, я думаю, что инъекция определена в angular-mocks.js. Это был один из файлов js, которые я должен был включить. - person Nigel Findlater; 13.05.2014

arrow_upward
5
arrow_downward

Ошибка заключалась в том, что мне нужно было включить angular и angular-mocks. Также мне нужно было получить область действия из корневой области. Следующий код работал

/// <reference path="../scripts/jasmine.js" />
/// <reference path="../scripts/angular.js" />
/// <reference path="../scripts/angular-mocks.js" />

/// <reference path="../../unittestingwithjasmine/scripts/tacontroller.js" />

describe("My Tacontroller", function () {

    var myScope;

    beforeEach(inject(function($rootScope, $httpBackend, $controller) {

        myScope = $rootScope.$new();

        $controller('TAController', { $scope: myScope});

    }));

    it("should be able to add 2 plus 2", function () {
        myScope.add(2);
        expect(myScope.myNumber).toBe(4);
    });
});

С тех пор я нашел 2 очень хороших записи в блоге, которые демонстрируют это и то, как перейти к следующему шагу http://odetocode.com/blogs/scott/archive/2013/06/10/simple-unit-тесты-с-angularjs.aspx http://odetocode.com/blogs/scott/archive/2013/06/11/angularjs-tests-with-an-http-mock.aspx

Надеюсь, это поможет другим...

person Nigel Findlater    schedule 13.05.2014