异步等待嵌套在 Jasmine 测试中

Question

I'm new to Jasmine, I'm trying to do a unit test of the connection, the original function checks the browser on incognito, the test has to refer to that and do its respective check.

then I leave the code of the component:

ngOnInit(): void {
    this.getDetectPrivateMode();
    const auth = this.authServices.getAuth();
    if (auth) {
      this.loginSuccess();
    }
  }

  /**
   * Método para verificar ventanas modo incognito
   */
  async getDetectPrivateMode() {
    if (await this.helpers.detectPrivateMode()) {
      this.messageService.add({severity: 'error', summary: 'Error', detail: 'Cerrar modo incognito.', life: 2000});
      this.loginForm.disable();
      setTimeout(() =>{
        this.router.navigateByUrl('/error');
    }, 2000);
    }
  }

Now this is the way in which I am trying to do its respective verification:

describe('LoginComponen', () => {
  let httpTestingController: HttpTestingController;
  let helpers: Helpers;

beforeEach( async () => {

    await TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
        RouterTestingModule.withRoutes(routes),
        ReactiveFormsModule,
        FormsModule,
        ConfirmDialogModule,
        BrowserAnimationsModule
      ],
      providers: [
        Helpers
      ],
      declarations: [
        LoginComponent
      ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    }).compileComponents();
    
    // Peticiones mock
    helpers = TestBed.inject(Helpers)
    httpTestingController = TestBed.inject(HttpTestingController);
  });

it('Validar login incognito, (error)', (done: DoneFn) => {
    const fixture = TestBed.createComponent(LoginComponent);
    const app = fixture.componentInstance;
    fixture.detectChanges();

    const test = 1

    app.getDetectPrivateMode().then(async () => {
      if (await helpers.detectPrivateMode().then(()=>{return true})) {
        expect(test).toEqual(1)
        done();
      }
    })

  });
}

the result that gives me is the following

enter image description here

in the coverage result, the code does not pass through those lines

Answer 1

I would do the following (follow lines with:!):

describe('LoginComponen', () => {
  let httpTestingController: HttpTestingController;
  let helpers: Helpers;
  // !! declare router
  let router: Router;

beforeEach( async () => {

    await TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
        RouterTestingModule.withRoutes(routes),
        ReactiveFormsModule,
        FormsModule,
        ConfirmDialogModule,
        BrowserAnimationsModule
      ],
      providers: [
        Helpers
      ],
      declarations: [
        LoginComponent
      ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    }).compileComponents();
    
    // Peticiones mock
    helpers = TestBed.inject(Helpers)
    httpTestingController = TestBed.inject(HttpTestingController);
    // Get a handle on the router
    router = TestBed.inject(Router);
  });

// !! Wrap in a fakeAsync so we can move time in a fake way with fakeAsync/tick
it('Validar login incognito, (error)', fakeAsync(() => {
    const fixture = TestBed.createComponent(LoginComponent);
    const app = fixture.componentInstance;
    fixture.detectChanges();

    // !! Spy on navigateByUrl
    const navigateByUrlSpy = spyOn(router, 'navigateByUrl');
    // !! make the helper return true
    spyOn(helper, 'detectPrivateMode').and.resolveTo(true);
   
    // !! Call method
    app.getDetectPrivateMode();
   
    // !! Make 2 seconds pass by
    tick(2000);
   
    // !! expect call to navigate to error page
    expect(navigateByUrlSpy).toHaveBeenCalledWith('/error');

  }));
}