2013-04-30 4 views
26

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

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

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

Я думаю, мне нужно:

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

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

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

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

Нужно ли мне создавать издевается для $scope, $http & сотрудничества. для меня, или есть какая-то помощь?

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

+1

Даже если вы не используете карму/Testacular, взгляните на некоторые из примеров в [angular-seed] (https://github.com/angular/angular-seed). Они показывают, как вы используете «угловые матки» для настройки ваших модулей для тестирования. – NilsH

+4

Это довольно полезная статья для тестирования с использованием мокко: http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-testacular.html – zlog

+2

Проект с угловым посевом не очень полезен поскольку он использует жасмин. Почему нет примеров использования мокко и его адаптера? –

ответ

14

Один из способов сделать это является использование 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> 
3

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

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

(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); 
Смежные вопросы