Unit test within async using fixture.detectChanges() fails #89

Activity

1. neilbo commented on Jun 8, 2018

   

   neilbo

   on Jun 8, 2018

   More actions

   Have you tried using 'fakeAsync' with 'flushMicrotasks' syntax?

   • https://www.joshmorony.com/testing-asynchronous-code-with-fakeasync-in-angular/
   • https://stackoverflow.com/questions/35990253/does-fakeasync-guarantee-promise-completion-after-tick-flushmicroservice
2. 188599 commented on Nov 13, 2020

   

   188599

   on Nov 13, 2020

   Last edited by 188599

   More actions

   Not sure if entirely related to this, but I feel my issue is similar enough.

   I have a test case where I need to wait for a promise to complete before executing my test. So I have a beforeEach that uses the async method to execute this promise. The thing is, the test I'm trying to execute is running before the promise in the beforeEach finishes.

   After lots of fiddling around with the methods, I realized that commenting the method call to ComponentFixture.detectChanges makes it so the beforeEach is properly awaited as intended.

   Here's the code I'm trying to execute:

   beforeEach(async(() => {
       TestBed.configureTestingModule({ ... })
         .compileComponents();
     }));
   
     beforeEach(() => {
       fixture = TestBed.createComponent(MarcaSearchModal);
       component = fixture.componentInstance;
       marcaServiceMock = TestBed.inject(MarcaService) as any;
   
       fixture.detectChanges();
     });
   
     beforeEach(async(() => {
       virtualScrollDebugEl = fixture.debugElement.query(By.directive(IonVirtualScroll));
   
       dismissSpy = spyOn(component, 'dismiss');
   
       marcaServiceMock.mockResponseList = [
         { id: 'MARCA ID #1', nome: 'MARCA #1' },
         { id: 'MARCA ID #2', nome: 'MARCA #2', cliente: { id: 'CLIENTE ID #1' } as any }
       ];
   
       component.ionViewDidEnter();
   
       fixture.detectChanges();
   
       fixture.whenStable();
   
       // the promise I need to wait, it checks periodically to see if the virtualScroll items are populated
       timer(0, 10)
         .pipe(takeWhile(_ => !virtualScrollDebugEl.children.length))
         .toPromise();
     }));

   I also tried to simplify things by just doing a simple promise test:

     beforeEach(async(() => {
       TestBed.configureTestingModule({ ... })
         .compileComponents();
     }));
   
     beforeEach(() => {
       fixture = TestBed.createComponent(MarcaSearchModal);
   
       fixture.detectChanges();
     });
   
     let promiseFinished: boolean;
   
     beforeEach(async(() => {
       promiseFinished = false;
   
       timer(2000)
         .pipe(finalize(() => promiseFinished = true))
         .toPromise();
     }));
   
     fit('should be true after 2000ms', () => {
       expect(promiseFinished).toBeTrue();
     });

   Which also fails. Again, removing the detectChanges makes the test pass.

   I'm guessing something really wonky happens when calling detectChanges, very likely related to this particular component (since I have a very similar test that works perfectly), but I'm having a very difficult time to pinpoint what it is exactly since there no errors being throw at all.
3. 188599 commented on Nov 13, 2020

   

   188599

   on Nov 13, 2020

   More actions

   When I wrote the previous post I thought I was in the angular repository. 🤦

   Anyways, turns that just changing to a proper async/await function works.

   Change my previous code to this:

    beforeEach(async () => {
       // rest of the code
   
       await timer(0, 10)
         .pipe(takeWhile(_ => !virtualScrollDebugEl.children.length))
         .toPromise();
     });

   And everything works as intended.
4. lopes-leandro commented on Aug 13, 2022

   

   lopes-leandro

   on Aug 13, 2022

   More actions

   Hello everyone!!!

   I recently ran into the same problem reported above, while testing one of the components in my current project.

   After pounding my head around for o while, I found that the fixture.detectChanges() method triggers application lifecycle methods.

   In my case I have the ngInit method that was called before the execution of the first test case and it generated an exception when calling a service.

   I removed the fixture.detectChanges() method from inside beforeEach and put it inside the first test case. When running the test, the execution did not throw any more exceptions.

   👍React with 👍1Reacted by Leandro Lopes
5. patelabhishek5232 commented on Apr 19, 2023

   

   patelabhishek5232

   on Apr 19, 2023

   More actions

   Hello everyone!!!

   I recently ran into the same problem reported above, while testing one of the components in my current project.

   After pounding my head around for o while, I found that the fixture.detectChanges() method triggers application lifecycle methods.

   In my case I have the ngInit method that was called before the execution of the first test case and it generated an exception when calling a service.

   I removed the fixture.detectChanges() method from inside beforeEach and put it inside the first test case. When running the test, the execution did not throw any more exceptions.

   Hello ,I did try your suggestion but still getting same error ,does any one have other suggestion