Cuando el proyecto NG se vuelve cada vez más grande, se deben realizar pruebas unitarias en la agenda. A veces, el equipo toma las pruebas primero, primero implementa funciones y luego prueba los módulos funcionales. Esto tiene sus propias ventajas y desventajas. Hoy, hablamos principalmente sobre el uso de Karma y Jasmine para realizar pruebas unitarias de módulos NG.
Que es el karma
Karma es un marco de control de ejecución de pruebas unitarias, que proporciona pruebas unitarias en diferentes entornos, como Chrome, Firfox, PhantomJS, etc. El marco de prueba admite jazmín, moca, qunit y es un módulo NPM con nodejs como entorno.
Se recomienda utilizar el parámetro ---- Save-DeV al instalar y probar módulos NPM relacionados, porque esto está relacionado con el desarrollo. En general, si ejecuta karma, solo se requieren los siguientes dos comandos NPM.
La copia del código es la siguiente:
NPM Instalar karma--Save-Dev
NPM Instalar Karma-Junit-Reporter --save-Dev
Al instalar karma, algunos módulos de uso común se instalarán automáticamente. Consulte la propiedad PeerDependences del archivo Packle.json en el Código Karma.
La copia del código es la siguiente:
"Peerdependencias": {
"karma-jasmine": "~ 0.1.0",
"Karma-Requirejs": "~ 0.2.0",
"Karma-Coffee-Preprocessor": "~ 0.1.0",
"Karma-html2js-deprocessor": "~ 0.1.0",
"Karma-Chrome-Launcher": "~ 0.1.0",
"Karma-Firefox-Launcher": "~ 0.1.0",
"Karma-Phantomjs-Launcher": "~ 0.1.0",
"Karma-Script-Launcher": "~ 0.1.0"
}
Luego, un marco de ejecución típico generalmente requiere un archivo de configuración. En el karma, puede ser un karma.conf.js. El código interior es un estilo NodeJS. Un ejemplo común es el siguiente:
La copia del código es la siguiente:
módulo.exports = function (config) {
config.set ({
// El directorio básico en los siguientes archivos
Basepath: '../',
// información JS que debe cargarse en el entorno de prueba
Archivos: [
'App/Bower_Components/Angular/Angular.js',
'App/Bower_Components/Angular-Rute/Angular-Rute.js',
'App/Bower_Components/Angular-Mocks/Angular-Mocks.js',
'APP/JS/**/*. JS',
'Test/Unit/**/*. JS'
]
// si escuchar automáticamente los cambios en el archivo anterior, ejecute automáticamente la prueba
AUTOWATCH: Verdadero,
// Marco de prueba de aplicación
Marcos: ['Jasmine'],
// ¿Qué entorno usar para probar el código? Aquí está Chrome`
navegadores: ['Chrome'],
// complementos utilizados, como el navegador Chrome y los complementos de Jasmine
complementos: [
'Karma-Chrome-Launcher',
'Karma-Firefox-Launcher',
'karma-jasmine',
'Karma-Junit-Reporter'
]
// La salida del contenido de prueba y el nombre del módulo utilizado para exportar
Reporteros: ['Progress', 'Junit'],
// Establecer la información del archivo de contenido de prueba de salida
Junitreporter: {
OutputFile: 'test_out/unit.xml',
Suite: 'Unidad'
}
});
};
Cuando necesita prestar atención a esto, la mayoría de los complementos anteriores no necesitan instalarse por separado, porque se han instalado al instalar karma. Solo los complementos de exportación Karma-Junit-Reporter deben instalarse por separado. Si desea saber más sobre los archivos de configuración, haga clic aquí
Eso se trata de karma. Si desea saber más al respecto, haga clic aquí
Que es jazmín
Jasmine es un marco de desarrollo basado en el comportamiento para probar el código JavaScript. No depende de ningún otro marcos de JavaScript. No requiere un DOM. Y tiene una sintaxis limpia y obvia para que pueda escribir fácilmente pruebas.
Lo anterior es la explicación del mismo en el documento oficial de Jasmine, y la siguiente es una traducción simple en chino
Jasmine es un marco de prueba basado en el comportamiento que no depende de ningún marco JS y DOM. Es una biblioteca de prueba API muy limpia y amigable.
Aquí hay un ejemplo simple para ilustrar su uso.
Definir un comando de archivo de prueba como test.js
La copia del código es la siguiente:
Describa ("una especificación (con configuración y desgarro)", function () {
var foo;
antes que la función (function () {
foo = 0;
foo += 1;
});
AfterEach (function () {
foo = 0;
});
it ("es solo una función, por lo que puede contener cualquier código", function () {
esperar (foo) .toequal (1);
});
it ("puede tener más de una expectativa", function () {
esperar (foo) .toequal (1);
esperar (verdadero) .toequal (verdadero);
});
});
El ejemplo anterior proviene del sitio web oficial. Aquí hay solo unas pocas API importantes. Para más uso, haga clic aquí
1. Primero, cualquier caso de prueba está definido por la función de describir. Tiene dos parámetros. El primero se usa para describir el contenido central general de la prueba, y el segundo parámetro es una función, que escribe algún código de prueba real.
2. se utiliza para definir una sola tarea de prueba específica, y también tiene dos parámetros. El primero se usa para describir el contenido de prueba, y el segundo parámetro es una función, que almacena algunos métodos de prueba.
3. Espere se usa principalmente para calcular el valor de una variable o una expresión, y luego compararlo con el valor esperado o hacer otros eventos.
4.BoreforeEn y después de cada se usa principalmente para hacer algunas cosas antes y después de ejecutar la tarea de prueba. El ejemplo anterior es cambiar el valor de la variable antes de la ejecución, y luego restablecer el valor de la variable después de completar la ejecución.
Finalmente, se puede acceder al alcance en la función de describir en las subfunciones en él, al igual que lo anterior accede a la variable FOO
Si desea ejecutar el ejemplo de prueba anterior, puede ejecutarlo a través de Karar. El ejemplo del comando es el siguiente:
La copia del código es la siguiente:
Test de inicio de Karma/karma.conf.js
A continuación, nos centraremos en las pruebas unitarias de controladores, instrucciones y módulos de servicio en NG.
Pruebas unitarias para NG
Debido al marco de NG en sí mismo, los módulos se cargan e instancian a través de DI, por lo que para facilitar la redacción de scripts de prueba con jazmín, el funcionario proporciona una clase de herramienta de prueba angular.js para proporcionar definición de módulo, carga, inyección, etc.
Hablemos de algunos métodos comunes en NG-Mock
1.angular.mock.module Este método también está en el espacio de nombres de la ventana, que es muy conveniente de llamar.
El módulo se utiliza para configurar la información del módulo inyectada por el método inyectivo. Los parámetros pueden ser cadenas, funciones y objetos. Se pueden usar como lo siguiente.
La copia del código es la siguiente:
ANTERIOREACH (módulo ('myApp.filters'));
ANTERIOREACH (MODULE (FUNTION ($ PROBLEVE) {
$ proporcionar.value ('versión', 'test_ver');
}));
Generalmente se usa en el método de BeforeEch, porque esto puede garantizar que el método de inyección pueda obtener la configuración del módulo al ejecutar la tarea de prueba.
1.angular.mock.inject Este método también está en el espacio de nombres de la ventana, que es muy conveniente de llamar.
Inyect se usa para inyectar el módulo NG configurado anteriormente. Se llama en la función de prueba de la misma. Los ejemplos de llamadas comunes son los siguientes:
La copia del código es la siguiente:
Angular.module ('myApplicationModule', [])
.Value ('Modo', 'APP')
.Value ('versión', 'v1.0.1');
describir ('myApp', function () {
// Necesita cargar módulos que desee probar,
// Solo carga el módulo "NG" de forma predeterminada.
ANTEREACH (módulo ('myApplicationModule'));
// inyect () se usa para inyectar argumentos de todas las funciones dadas
it ('debería proporcionar una versión', inyect (función (modo, versión) {
esperar (versión) .toequal ('v1.0.1');
esperar (modo) .toequal ('app');
}));
// El método de inyección y módulo también se puede usar dentro de la TI o antes.
it ('debería anular una versión y probar la nueva versión se inyecta', function () {
// módulo () toma funciones o cadenas (alias de módulo)
módulo (function ($ proporcionar) {
$ proporcionar.value ('versión', 'anulación'); // anular la versión aquí
});
inyect (función (versión) {
Espere (versión) .toequal ('anulación');
});
});
});
Los anteriores son algunos ejemplos de inyección proporcionados por el funcionario, y el código es fácil de entender. De hecho, Inject es una instancia de inyección de dependencia incorporada creada utilizando el método Angular.inject. Entonces la inyección del módulo es la misma que el procesamiento de dependencia en los módulos NG ordinarios.
Después de introducir brevemente NG-Mock, escribiremos una prueba unitaria simple utilizando controladores, instrucciones y filtros.
Prueba unitaria del controlador
Definir un controlador simple
La copia del código es la siguiente:
var myApp = angular.module ('myApp', []);
myapp.controller ('mycontroller', function ($ scope) {
$ scope.spices = [{"nombre": "Pasilla", "Spiciness": "leve"},
{"nombre": "jalapeno", "picante": "¡caliente caliente!"},
{"Nombre": "Habanero", "picante": "¡lava caliente!"}];
$ scope.spice = "¡Hola Feenan!";
});
Luego escribimos un script de prueba
La copia del código es la siguiente:
Describa ('Función MyController', function () {
describir ('myController', function () {
var $ alcance;
ANTERIOREACH (módulo ('myApp'));
ANTREDEACH (inyect (function ($ rootscope, $ controlador) {
$ scope = $ rootscope. $ new ();
$ controlador ('myController', {$ scope: $ scope});
}));
it ('debería crear el modelo de "especias" con 3 especias', function () {
esperar ($ scope.spices.length) .tobe (3);
});
it ('debería establecer el valor predeterminado de Spice', function () {
Espere ($ scope.spice) .tobe ('¡Hola comentarios!');
});
});
});
Lo anterior usa $ Rootscope para crear un subescopio, y luego pasa este parámetro al controlador de $ Método de construcción del controlador. Finalmente, se ejecutará el método anterior. Luego verificamos si el número de matrices en el subescopio y si las variables de cadena son iguales al valor esperado.
Si desea saber más sobre el controlador en ng, puede hacer clic aquí
Prueba unitaria de instrucciones en ng
Defina una instrucción simple
La copia del código es la siguiente:
var app = angular.module ('myApp', []);
app.directive ('Agrateye', function () {
devolver {
restringir: 'e',
Reemplazar: Verdadero,
Template: '<h1> Lidless, perdido en llama, 1 veces </h1>'
};
});
Luego escribimos un script de prueba simple
La copia del código es la siguiente:
Describa ('Probar unidades grandes cotizaciones', function () {
var $ compilar;
var $ rootscope;
// Cargue el módulo myApp, que contiene la directiva
ANTERIOREACH (módulo ('myApp'));
// almacenar referencias a $ rootscope y $ compilar
// Entonces están disponibles para todas las pruebas en este bloque de describir
ANTERIOREACH (inyect (function (_ $ compile_, _ $ rootscope _) {
// El inyector desenvuelve los subrayadores (_) de alrededor de los nombres de los parámetros al coincidir
$ compile = _ $ compile_;
$ rootscope = _ $ rootscope_;
}));
it ('reemplaza el elemento con el contenido apropiado', function () {
// compilar un pedazo de HTML que contiene la directiva
var elemento = $ compile ("<a-Great-eye> </a-Great-eye>") ($ rootscope);
// dispara todos los relojes, por lo que la expresión del alcance 1 será evaluada
$ RootsCope. $ Digest ();
// Verifique que el elemento compilado contenga el contenido plantado
Espere (element.html ()). toContain ("sin tapa, perdido en llama, 2 veces");
});
});
El ejemplo anterior proviene del oficial, y el comando anterior se usará en HTML.
La copia del código es la siguiente:
<A-Great-Eye> </a-Great-Eye>
El script de prueba primero inyecta dos servicios $ compilar y $ ROOTSCOPE, uno se usa para compilar HTML y el otro se usa para crear alcance. Tenga en cuenta que el _ se usa aquí. Cuando el servicio inyectado en Ng se agrega antes y después, Ng se procesará. Estos dos servicios se almacenan en dos variables internas, de modo que se puedan llamar a los siguientes casos de prueba.
El método de compilación $ se pasa a la instrucción original HTML, y luego la función devuelta se pasa en $ Rootscope, lo que completa el enlace de alcance y vista. Finalmente, llame a $ RootsCope. $ Digest para activar toda escucha, asegurando que se actualice el contenido del modelo en la vista
Luego obtenga el contenido HTML del elemento correspondiente de la instrucción actual y compárelo con el valor esperado.
Si desea saber más sobre las instrucciones en ng, puede hacer clic aquí
Prueba de unidad de filtro en NG
Definir un filtro simple
La copia del código es la siguiente:
var app = angular.module ('myApp', []);
app.filter ('interpolate', ['versión', function (versión) {
Función de retorno (texto) {
return string (texto) .replace (//%versión/%/mg, versión);
};
}]);
Luego escriba un script de prueba simple
La copia del código es la siguiente:
Describa ('filtro', function () {
ANTERIOREACH (módulo ('myApp'));
describir ('interpolate', function () {
ANTERIOREACH (MODULE (FUNTION ($ PROBLEVE) {
$ proporcionar.value ('versión', 'test_ver');
}));
it ('debería reemplazar la versión', inyect (function (interpolateFilter) {
Espere (interpolateFilter ('antes de % versión % después')). toqual ('antes test_ver después');
}));
});
});
El código anterior primero configura el módulo de filtro y luego define un valor de versión. Debido a que el interpolato depende de este servicio, finalmente inyecta el filtro de interpolato con inyección. Tenga en cuenta que el filtro aquí debe ser seguido por el sufijo del filtro y finalmente pasa en el contenido de texto a la función del filtro para ejecutarlo, y lo compara con el valor esperado.
Resumir
Hay muchos beneficios al usar pruebas para desarrollar NG, lo que puede garantizar la estabilidad del módulo. Otra cosa es que puede tener una comprensión profunda del mecanismo operativo interno de NG, por lo que se recomienda que los estudiantes que usan NG para desarrollar las pruebas lo antes posible.