ng-ifに似た角度のディレクティブをテストしています

Question

特定の基準が満たされない場合にDOM要素を削除するサービスとディレクティブがパッケージされています。

サービスは、渡された文字列に対してチェックを実行します。ディレクティブは、チェックに失敗した場合に接続されているDOM要素を削除します。

これはIE11、Edge、Chrome、FireFoxで動作します。しかし、私はどのテストでもこれを再現することはできません。ここで

Working code in this 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); 
    }); 
}); 

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