angular - onInit で非同期呼び出しを使用して Angular ディレクティブをテストする

Question

onInit メソッドで認可サービスを呼び出す Angular ディレクティブがあります。次のようになります。

@Directive({
  selector: '[checkRights]'
})
export class RightsDirective implements OnInit{

  @Input('checkRights') expectedRights: Right[];

  constructor(private _element: ElementRef, private _userService: UserService) {
  }

  ngOnInit() {
    this._userService.hasAnyRights(this.expectedRights).subscribe(hasRights => {
      if(hasRights){
        this._element.nativeElement.remove();
      }
    })
  }
}

私はそれをテストしたいので、ダミーコンポーネントに設定するテストを作成しました:

describe('RightsDirective', () => {

  let component: TestRightsDirectiveComponent;
  let fixture: ComponentFixture<TestRightsDirectiveComponent>;
  let userService: UserService;
  let parentElement: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [TestRightsDirectiveComponent, RightsDirective],
      providers: [UserService],
      imports: [HttpClientTestingModule]
    });
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestRightsDirectiveComponent);
    component = fixture.componentInstance;
    parentElement = fixture.debugElement.query(By.css('div'));
    userService = TestBed.get(UserService);
  });

  it('should remove elements when user has no rights to it', async(() => {
    spyOn(userService, 'hasAnyRights').and.returnValue(of(false));

    expect(parentElement.children.length).toEqual(0);
  }));

});

@Component({
  template: `<div> <span [checkRights]="['ADMIN']"> </span></div>`
})
class TestRightsDirectiveComponent {
}

今、私はそれがうまくいかないことを知っています。テスト自体には複数の問題があることを認識しています。これは、確認したいものの例にすぎません。

私はdetectChanges、fakeAsync、tick()sなどで何度も試しました。過去3時間かけて（ディレクティブをテストするのは初めてで、Angular自体にはかなり慣れていません）、Googleの最初の4ページをチェックしました。

- onInit が作動する前に、サービスからの応答がモックされますか? - ディレクティブの .subscribe() がテストで期待される前に完了していますか? 表示されていない他の問題はありますか? 設定は正しいですか？