[英]Unit testing an angular directive similar to ng-if
我有打包在一起的服务和指令,如果不满足某些条件,它们会删除DOM元素。
该服务对传入的字符串执行检查,如果检查失败,则伪指令仅删除其附加到的DOM元素。
这适用于IE11,Edge,Chrome和FireFox。 但是,在任何测试中我似乎都无法复制。
这是服务及其提供者的示例
class PermissionService {
constructor(permissions) {
this.permissions = permissions;
}
addPermissions(permissions) {
this.permissions = this.permissions.concat(permissions);
}
has(permission) {
return this.permissions.indexOf(permission) !== -1;
}
}
class PermissionProvider {
constructor() {
let _permissions = [];
this.setPermissions = (permissions) => {
_permissions = _permissions.concat(permissions);
};
this.$get = () => {
return new PermissionService(_permissions);
}
}
}
以及带有如何在角度模块中进行设置的示例的指令。
angular.module('PermissionTest', [])
.directive('hasPermission', ['permission', '$compile', (service, $compile) => {
return {
restrict: 'A',
priority: 1,
terminal: true,
compile: (element, attrs) => {
let permission = attrs.hasPermission;
if (service.has(permission)) {
attrs.$set('hasPermission', null);
return (scope, element) => {
$compile(element)(scope);
}
} else {
element.remove();
}
}
}
}])
.provider('permission', PermissionProvider)
.config(['permissionProvider', (provider) => {
provider.setPermissions(['yes']);
}]);
使用指令,我现在可以轻松地从DOM中删除元素
<!-- Is not removed -->
<div has-permission="yes">Is not removed</div>
<!-- Is removed -->
<div has-permission="no">Is removed</div>
我有以下测试设置,希望可以通过,但没有通过。 我怀疑这是由于指令本身重新编译引起的,尽管我认为这应该发生在scope.$digest()
。 任何帮助调试的方法都会有所帮助。
let provider;
let service;
describe('directive: has-permission', () => {
beforeEach(module('permissionChecker', (permissionProvider) => {
provider = permissionProvider;
provider.setPermissions(['crm.check.r', 'crm.check.c']);
}));
beforeEach(inject((permission) => {
service = permission;
}));
});
describe('if directive is not valid', () => {
let scope;
let element;
beforeEach(inject(($rootScope, $compile) => {
scope = $rootScope.$new();
element = `<div>
<div has-permission="crm.not.r"></div>
<div has-permission="crm.check.r"></div>
</div>`;
element = $compile(element)(scope);
scope.$digest();
}));
it('should remove one child element', () => {
let test = angular.element(element).children();
expect(test.length).toBe(1);
});
});
和往常一样,在发布此问题几分钟后,我找到了解决问题的方法。 我认为我可以在其余测试中用单独的describe
来构建提供程序,这是不正确的。
我通过将以下期望添加到第一个描述中来进行调试:
describe('directive:has-permission', () => {
// Provider set up in question
it('should exist', inject(($injector) => {
expect($injector.has('hasPermissionDirective')).toBe(true);
}));
});
这成功通过了。
然后,我对以下描述的闭包添加了相同的期望,令我惊讶的是,测试失败。
为了解决这个问题,我将所有随后的描述嵌套在提供程序设置中,并且所有工作均按预期进行。
describe('directive:has-permission', () => {
// Provider setup
describe('if directive is not valid', () => {
// Test setup and code
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.