繁体   English   中英

单元测试类似于ng-if的角度指令

[英]Unit testing an angular directive similar to ng-if

我有打包在一起的服务和指令,如果不满足某些条件,它们会删除DOM元素。

该服务对传入的字符串执行检查,如果检查失败,则伪指令仅删除其附加到的DOM元素。

这适用于IE11,Edge,Chrome和FireFox。 但是,在任何测试中我似乎都无法复制。

该JSBin中的工作代码

这是服务及其提供者的示例

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM