Question

我有一个服务和一个指令打包在一起，如果不符合某些条件，就会删除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);
    });
});

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

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

1 个答案: