Как проверить код AngularJS с помощью Mocha?

В принципе, я очень опытен с Mocha (написано тысячи модульных тестов), и я довольно новичок в AngularJS (написанный только моим первым проектом).

Теперь мне интересно, как я могу unit test все вещи AngularJS использовать Mocha.

Я знаю, что Mocha работает в браузере, и я уже это сделал. Но как мне структурировать и настраивать вещи?

Думаю, мне нужно:

  • Загрузка AngularJS
  • Загрузка мокко
  • Загрузить мои тесты

В каждом из тестов мне нужно загрузить контроллер, службу,... для проверки. Как мне это сделать? Я не использую require.js или что-то в этом роде, файлы - это всего лишь script файлы с главным образом следующим содержанием:

angular.controller('fooController', [ '$scope', function ($scope) {
  // ...
}]);

Как я могу ссылаться и создавать экземпляр этого контроллера в тесте? То же самое относится к службам, директивам,...

Мне нужно создать mocks для $scope, $http и co. для себя, или есть какая-то помощь?

Обратите внимание, что я знаю, что есть тест-драйв Karma (ранее известный как Testacular), но я не хочу полностью переключать свой тестовый бегун.

Ответы

Ответ 1

Один из способов сделать это - использовать Angular $injector в своих тестах:

myModule_test.js

suite('myModule', function(){
  setup(function(){
    var app = angular.module('myModule', []);
    var injector = angular.injector(['myModule', 'ng']);
    var service = injector.get('myService');
  });

  suite('myService', function(){
    test('should return correct value', function(){
       // perform test with an instance of service here
    });
  });
});

ваш html должен выглядеть примерно так:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>myModule tests</title>
  <link rel="stylesheet" media="all" href="vendor/mocha.css">
</head>
<body>
  <div id="mocha"><p><a href=".">Index</a></p></div>
  <div id="messages"></div>
  <div id="fixtures"></div>
  <script src="vendor/mocha.js"></script>
  <script src="vendor/chai.js"></script>
  <script src="angular.min.js"></script>
  <script src="myModule.js"></script>
  <script>mocha.setup('tdd')</script>
  <script src="myModule_test.js"></script>
  <script>mocha.run();</script>
</body>
</html>

Ответ 2

Если вы создаете службу angular, которая не имеет каких-либо зависимостей и не обязательно имеет значение angular, вы можете написать свой модуль в angular -агностическом режиме, а затем либо написать отдельный небольшой angular для нее или проверить наличие angular и условно создать для нее сервис.

Вот пример подхода, который я использую для создания модулей, которые могут использоваться как в модулях angular, так и в браузере и node, в том числе для мокко-тестов:

(function(global) {
    //define your reusable component
    var Cheeseburger = {};

    if (typeof angular != 'undefined') {
        angular.module('Cheeseburger', [])
            .value('Cheeseburger', Cheeseburger);
    }
    //node module
    else if (typeof module != 'undefined' && module.exports) {
        module.exports = Cheeseburger
    }
    //perhaps you'd like to use this with a namespace in the browser
    else if (global.YourAppNamespace) {
        global.YourAppNamespace.Cheeseburger = Cheeseburger
    }
    //or maybe you just want it to be global
    else {
        global.Cheeseburger = Cheeseburger
    }
})(this);