es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • La función “navigateByUrl” de Angular se ha burlado, pero la página aún se recarga.

La función “navigateByUrl” de Angular se ha burlado, pero la página aún se recarga.

22 Jul, 2023 Programación

Estoy intentando escribir una prueba para un clic de botón que activa una llamada a la función navigateByUrl con algunos parámetros.
He simulado Router y lo he proporcionado al módulo de pruebas de la siguiente manera:

let mockRouter = {
   navigateByUrl: jasmine.createSpy("navigateByUrl").and.callFake(() => {
   console.log("se llama al fake");
}),
};

beforeEach(async(() =>{
   TestBed.configureTestingModule({
      imports: [HttpClientModule],
      declarations: [RecoverPasswordComponent],
      providers: [{ provide: Router, useValue: mockRouter }],
   }).compileComponents();
}));

Cuando hago clic en el botón y se activa navigateByUrl, obtengo la consola tal como se describe, pero también obtengo un error que dice ¡Algunas de tus pruebas recargaron la página por completo!, lo cual significa que se ha activado la función navigateByUrl real.

No logro entender por qué se activa la llamada a la función real si la función está siendo espiada.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Es posible que la función navigateByUrl se esté llamando fuera de la prueba unitaria, lo que provoca una recarga de la página completa.

    Para asegurarse de que la función navigateByUrl solo se llame dentro de la prueba unitaria, puede modificar la función spyOn para apuntar específicamente a la instancia del enrutador del componente en lugar de un objeto simulado. Por ejemplo:

    let routerSpy: jasmine.SpyObj<router>;

beforeEach(() => {
  routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
  TestBed.configureTestingModule({
    declarations: [RecoverPasswordComponent],
    providers: [
      { provide: Router, useValue: routerSpy }
    ]
  });
});

    Luego, en la prueba, puede espiar la instancia del enrutador del componente:

    it('should navigate to recover-password/:id', () => {
  const fixture = TestBed.createComponent(RecoverPasswordComponent);
  const component = fixture.componentInstance;
  fixture.detectChanges();
  spyOn(component.router, 'navigateByUrl'); // apuntar específicamente a la instancia del enrutador del componente
  const button = fixture.debugElement.query(By.css('button')).nativeElement;
  button.click();

  expect(component.router.navigateByUrl).toHaveBeenCalledWith(`/recover-password/${component.id}`);
});

    Esto debería evitar que se llame a la función navigateByUrl real y evitar el error de recarga de página completa.

Comments are closed.