unit-testing - run - testing in angular 4
¿Cómo pruebo el código AngularJS usando Mocha? (2)
Básicamente, tengo bastante experiencia con Mocha (escrito miles de pruebas de unidad), y soy bastante nuevo en AngularJS (escrito solo mi primer proyecto).
Ahora me pregunto cómo podría hacer una prueba unitaria de todas las cosas de AngularJS usando Mocha.
Sé que Mocha se ejecuta en el navegador, y ya lo he hecho. Pero, ¿cómo estructuro y configuro las cosas?
Supongo que necesito:
- Carga AngularJS
- Cargar mocha
- Cargar mis pruebas
Dentro de cada una de las pruebas, necesito cargar un controlador, un servicio, ... para probar. ¿Cómo puedo hacer eso? No estoy usando require.js o algo así, los archivos son solo archivos de script con básicamente el siguiente contenido:
angular.controller(''fooController'', [ ''$scope'', function ($scope) {
// ...
}]);
¿Cómo puedo hacer referencia e instanciar ese controlador dentro de una prueba? Lo mismo ocurre con los servicios, directivas, ...
¿Necesito crear simulacros para $scope , $http & co. para mí, o hay alguna ayuda?
Tenga en cuenta que soy consciente de que existe el corredor de prueba Karma (anteriormente conocido como Testacular), pero no quiero cambiar por completo mi corredor de prueba.
Si está creando un servicio angular que no tiene dependencias y no es necesariamente específico del ángulo, puede escribir su módulo de forma angélica, luego escribir un envoltorio angular pequeño por separado o probar Presencia de angular, y condicionalmente crea un servicio para ello.
Este es un ejemplo de un enfoque que utilizo para crear módulos que se pueden usar tanto en angular, como en el navegador y en los módulos de nodo, incluso para las pruebas mocha:
(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);
Una forma de hacerlo es usar el $injector Angular $injector en sus pruebas:
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
});
});
});
su html debe verse similar a esto:
<!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>