测试目的
- 用单元测试测试过滤器的输入输出
- 测试在 scope 范围的 DOM 总 Html 元素被正确处理
要测试 AngularJS 过滤器,你要用到 $injector 服务,然后从注入器中拿到 $filter 服务,然后从这开始测试调用所有你希望包含到页面的服务。过滤器可以用所有的三种方式来测试,不过每种方式都不一样。
基本上,测试一个过滤器,你也就是想看看输入输出(大多数情况下就是一个数组)。 你的 E2E 测试中,也就确认一下过滤器是否作用到了页面上。
单元测试
<!-- lang: js -->
//
// test/unit/filters/filtersSpec.js
//
describe("Unit: Testing Filters", function() {
beforeEach(module('App'));
it('should have a range filter', inject(function($filter) {
expect($filter('range')).not.to.equal(null);
}));
it('should have a range filter that produces an array of numbers',
inject(function($filter) {
var range = $filter('range')([], 5);
expect(range.length).to.equal(5);
expect(range[0]).to.equal(0);
expect(range[1]).to.equal(1);
expect(range[2]).to.equal(2);
expect(range[3]).to.equal(3);
expect(range[4]).to.equal(4);
}));
it('should return null when nothing is set',
inject(function($filter) {
var range = $filter('range')();
expect(range).to.equal(null);
}));
it('should return the input when no number is set',
inject(function($filter) {
var range, input = [1];
range = $filter('range')(input);
expect(range).to.equal(input);
range = $filter('range')(input, 0);
expect(range).to.equal(input);
range = $filter('range')(input, -1);
expect(range).to.equal(input);
range = $filter('range')(input, 'Abc');
expect(range).to.equal(input);
}));
});
Midway 测试:
<!-- lang: js -->
//
// test/midway/filters/filtersSpec.js
//
describe("Midway: Testing Filters", function() {
var tester;
beforeEach(function() {
tester = ngMidwayTester('App');
});
afterEach(function() {
tester.destroy();
tester = null;
});
it('should have a working range filter',
function() {
expect(tester.inject('$filter')('range')).not.to.equal(null);
});
it('should have a working filter that updates the DOM',
function(done) {
var id = 'temp-filter-test-element';
var html = '<div id="' + id + '"><div class="repeated" ng-repeat="n in [] | range:10">...</div></div>';
var element = angular.element(html);
var scope = tester.rootScope().$new();
tester.compile(element, scope);
var elm = element[0];
setTimeout(function() {
var kids = elm.getElementsByTagName('div');
expect(kids.length).to.equal(10);
done();
},1000);
});
});
E2E 测试:
<!-- lang: js -->
//
// test/e2e/filters/filtersSpec.js
//
describe("E2E: Testing Filters", function() {
beforeEach(function() {
browser().navigateTo('/');
});
it('should have a filter that expands the stars properly', function() {
browser().navigateTo('#/videos/zogrnQjHZAM');
expect(repeater('#app-youtube-stars > .app-youtube-star').count()).toBeGreaterThan(0);
});
});