programing

AngularJS 1.x에서 필터를 유닛 테스트하는 방법

yellowcard 2023. 3. 31. 21:58
반응형

AngularJS 1.x에서 필터를 유닛 테스트하는 방법

Angular에서 필터를 테스트하려면 어떻게 해야 합니까?

주입$filter그리고 나서 로 전화한다.$filter('filterName')(input, options);

이 템플릿과 동등한 것을 테스트하려면{{ 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');
  });
});

$filter를 삽입하여 테스트할 필터를 로드할 수 있습니다.그런 다음 삽입한 필터를 통해 필터링할 파라미터를 전달하고 필요한 것을 '예상'합니다.다음은 예를 제시하겠습니다.

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

필터는 테스트에 바로 삽입할 수 있습니다(여기서 스니펫을 찾았습니다).

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

  });

이 예에서 필터 이름은 'bool'입니다. 이 필터를 주입하려면 'bool' + 'Filter' = 'boolFilter'를 사용해야 합니다.

다음은 실행 가능한 필터 테스트 예입니다.

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>

주의: 이 답변은 SO Documentation Sunset 이후에 Angular를 기반으로 작성되었습니다.JS 유닛 테스트 필터의 예와 Meta에 대한 모든 중요한 문서 내용을 답변으로 변환해야 한다는 제안.

필터를 테스트하는 방법에는 실제 필터를 주입하는 방법 외에$filter서비스.

예:

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

언급URL : https://stackoverflow.com/questions/21094569/how-to-unit-test-a-filter-in-angularjs-1-x

반응형