Question

我有一个Angular Directive，它在onInit方法中调用授权服务。它看起来像是：

@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（）等等。我花了3个小时（这是我第一次测试指令，我对Angular本身很新）并检查了前4页google

我如何确保： - 在onInit开始之前，服务的响应是否被嘲笑？ - 指令中的.subscribe（）是否在测试期望之前完成？还有其他我没有看到的问题吗？配置是否正确？

Answer 1

就您的单元测试文件而言，ngOnInit 在您明确命令它之前不会运行。生命周期挂钩不会像在正常组件加载中那样在测试文件中自动工作。

在onInit

1 个答案: