tutorial - Cómo probar un filtro en AngularJS 1.x

seed angularjs

Question

¿Cómo prueba un filtro unitario en Angular?

Answer 1

Aquí tiene un ejemplo de prueba de filtro ejecutable.

angular.module(''myModule'', []).filter(''multiplier'', function() {
return function(number, multiplier) {
if (!angular.isNumber(number)) {
throw new Error(number + " is not a number!");
}
if (!multiplier) {
multiplier = 2;
}
return number * multiplier;
}
});
describe(''multiplierFilter'', function() {
var filter;
beforeEach(function() {
module(''myModule'');
inject(function(multiplierFilter) {
filter = multiplierFilter;
});
});
it(''multiply by 2 by default'', function() {
expect(filter(2)).toBe(4);
expect(filter(3)).toBe(6);
});
it(''allow to specify custom multiplier'', function() {
expect(filter(2, 4)).toBe(8);
});
it(''throws error on invalid input'', function() {
expect(function() {
filter(null);
}).toThrow();
});
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-mocks.js"></script>

Nota: esta respuesta se creó después del SO Documentation Sunset basado en el ejemplo del filtro de prueba de la unidad AngularJS y una sugerencia en Meta de que todo el valioso contenido de la documentación se debe convertir en respuestas.

Answer 2

El filtro se puede inyectar directamente en la prueba (he encontrado un fragmento here )

 describe(''myApp'', function () {
beforeEach(function () {
module(''myApp'');
});
it(''has a bool filter'', inject(function($filter) {
expect($filter(''bool'')).not.toBeNull();
}));
it("should return true empty array ", inject(function (boolFilter) {
expect(boolFilter(true)).toBeTruthy();
}));
});

En este ejemplo, el nombre del filtro es ''bool'', para inyectar este filtro debe usar ''bool'' + ''Filter'' = ''boolFilter''

Answer 3

Hay otras maneras de probar un filtro además de inyectar el servicio de $filter real.

Ejemplo:

describe(''FILTER: myFilterName'', function(){ // You can put anything in the string here,
// I like declaring FILTER: myFilterName, but it
// could be just the filter name.
var myTestTheFilterVariableName;
// This variable does not have to match the describe name, call it what you wish,
// but use this variable in any it blocks below.
beforeEach(module(''obsidian'')); // Include app - boilerplate.
beforeEach(inject(function(actualFilterNameFilter){
// If your test variable name is the same as ''actualFilterNameFilter'' then you would
// use this name ''_actualFilterNameFilter_'' with underscores; The Angularjs injector will
// remove the underscores for you.
// IMPORTANT PART: The important part here is the trailing ''Filter'' name. This is how Angularjs
// Knows to grab the filter title "actualFilterName" in this case.
myTestTheFilterVariableName = actualFilterNameFilter;
})); // This is where you actually include the filter for testing.
// Use the underscores if your variable name is the exact same as the injected parameter.
// This is where you would use your variable name from above.
it(''should do something here'', function(){
expect(myTestTheFilterVariableName(filterParameter)).toEqual(expectedResultHere);
});
});

Answer 4

Puede inyectar $ filter y cargar el filtro que desea probar. Luego, pasa el parámetro que se filtrará a través del filtro que ha inyectado y ''espera'' lo que necesita. Aquí hay un ejemplo:

describe(''Filter test'', function(){
var filter;
beforeEach(function(){
module.apply(moduleName);
inject(function($injector){
filter = $injector.get(''$filter'')(''nameOfTheFilter'');
});
});
it(''should filter the parameters passed'', function(){
expect(filter(parameterToBeFiltered)).toBe(Result);
});
});

Answer 5

Inyecte $filter y luego $filter(''filterName'')(input, options); con $filter(''filterName'')(input, options);

Entonces, para probar el equivalente de esta plantilla {{ foo | testFilter:capitalize }} {{ foo | testFilter:capitalize }}

describe(''The test filter'', function () {
''use strict'';
var $filter;
beforeEach(function () {
module(''myTestFilterModule'');
inject(function (_$filter_) {
$filter = _$filter_;
});
});
it(''should capitalize a string'', function () {
// Arrange.
var foo = ''hello world'', result;
// Act.
result = $filter(''testFilter'')(foo, ''capitalize'');
// Assert.
expect(result).toEqual(''HELLO WORLD'');
});
});