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'');
  });
});