从 Angular 4 升级到 6 后，fixture.whenStable() 停止工作/调用

Question

So I had few test cases which were checking some attributes of components (such as button).

Earlier I had test cases which used to working something like:

            fixture.whenStable().then(()=>{
                const nextBtn = fixture.debugElement.nativeElement.querySelector(
                    '#create-btn'
                );
                console.log(nextBtn)
                expect(nextBtn.getAttribute('ng-reflect-disabled')).toBe('true');;
            })

suddenly, the code is not going inside fixture.whenStable().then(() => {}) , the test cases are passing with a warning such as

SomeComponent should have button disabled has no expectations

I cant find anything over internet. Has anyone faced similar issue.

I also tried wrapping it around async() of it but no luck

Answer 1

Try to add async to beforeEach:

beforeEach(async(() => { // <-- use async
    TestBed.configureTestingModule({
        declarations: [AppComponent],
    });

    fixture = TestBed.createComponent(AppComponent);

    component = fixture.componentInstance;

    fixture.detectChanges();
}));

Answer 2

You can try following things.

it('TEST', async(() => {
    fixture.whenStable().then(() => {
        fixture.detectChanges(); // you can write this
        const nextBtn = fixture.debugElement.nativeElement.querySelector('#create-btn');
        expect(nextBtn.getAttribute('ng-reflect-disabled')).toBe('true');
    });
}));

Answer 3

for angular 11 you can wrap beforeEach's callback into waitForAsync if you want to test somesing like async ngOnInit

 beforeEach(
    waitForAsync(() => {
      fixture = TestBed.createComponent(SomeFeatureComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    })
  );