1

Me esta fallando el metodo expect(spy).toHaveBeenCalled(); Con el Spy a un servicio.

El metodo login del servicio, se llama cuando se ejecuta el motodo login del componente. El cual es llamado cuando haces click en el boton del formulario, en este caso con el id = buttonLogin

Bueno estoy obteniendo los 2 inputs y le asigno valor y paso a simular click en el boton para que llame al metodo login del componente. El problema que en el expected(spy) que espera que ese servicio sea llamado, sale que falla. No se si me esta faltando algo mas

Spect Component

import { HttpClient, HttpResponse } from '@angular/common/http';
import {
  HttpClientTestingModule,
  HttpTestingController,
} from '@angular/common/http/testing';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { of } from 'rxjs';
import { LoginToken } from 'src/app/core/models/token';
import { MaterialModule } from 'src/app/shared/material/material.module';
import { HomeComponent } from '../home/home.component';

import { AuthComponent } from './auth.component';
import { User } from './models/user';
import { LoginService } from './services/login.service';

describe('AuthComponent', () => {
  let component: AuthComponent;
  let fixture: ComponentFixture<AuthComponent>;
  let service: LoginService;
  let httpMock: HttpTestingController;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AuthComponent],
      imports: [
        HttpClientTestingModule,
        RouterTestingModule.withRoutes(
          [{path: 'home', component: HomeComponent}]
        ),
        MaterialModule,
        BrowserAnimationsModule,
      ],
      providers: [LoginService, AuthComponent, HttpClient],
    }).compileComponents();
    service = TestBed.get(LoginService);
    component = TestBed.get(AuthComponent);
    httpMock = TestBed.get(HttpTestingController);
  });

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('Debe llamar al servicio LoginService y utilizar el metodo Login para logearse', async(() => {
    const mockToken: LoginToken = {
      token:
        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9',
    };

    const spy = spyOn(service, 'login').and.callFake((response) => {
      return of(
        new HttpResponse<LoginToken>({
          body: mockToken,
          status: 200,
        })
      );
    });

    ((<HTMLInputElement>document.getElementById('username')).value = 'UsuarioPrueba'),
    ((<HTMLInputElement>document.getElementById('password')).value = '2021'),
    document.getElementById('buttonLogin').click()

    expect(spy).toHaveBeenCalled(); // se espera que sea llamado

  }));
});

Servicio

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { User } from '../models/user';
import { environment } from '../../../../environments/environment';
import { LoginToken } from '../../../core/models/token'

@Injectable({
  providedIn: 'root',
})
export class LoginService {
  private URI: string;
  private appuniqueid:string = environment.app_uniqueid

  constructor(private http: HttpClient) {
    this.URI = environment.apiUrl
  }

  // METODOS

  login(user: User) {
    user.app_uniqueid = environment.app_uniqueid
    return this.http.post<LoginToken>(`${this.URI}/login`, user,{observe: 'response'});
  }

Metodo login COMPONENTE

  login(event) {
    event.preventDefault()
    if (this.formLogin.valid) {
      this.user = this.formLogin.value;

      // Mandar el objeto user al servicio de login
      this.loginService.login(this.user).subscribe(
        (response) => {
          if(!!response.body['token']){
            let token:string = response.body['token']
            this.redirectionLogin(token, response.status,false)
          } else this.redirectionLogin(null, 401,false)
        },
        (error) => this.redirectionLogin(null, error.status.toString(),false)
      );
    }
  }

¿Como maneja la redireccion?

  // Manejo de redireccionamiento segun statusCode
  redirectionLogin(token: string, statusCode: number, isLoginWithQueryParams?:boolean) {
    let statusCodeToString = statusCode.toString();
    // Hago un switch para saber con que numero empieza el codigo status para dividir los codigos
    switch (statusCodeToString.charAt(0)) {
      case '2':
        // Quiere decir que es un codigo 200
        sessionStorage.setItem('token', token);
        this.route.navigate(['home']);
        break;
      case '4':
        if(isLoginWithQueryParams) {
          this.route.navigate(['error']);
          break
        }
        // Error de cliente 400: clave,usuario,etc.
        this.HidemessageError = true;
        setTimeout(() => {
          this.HidemessageError = false;
        }, 4000);
        break;
      case '5':
        // Error de servidor 500
        this.route.navigate(['error']);
        break;
      default:
        this.route.navigate(['error']);
        break;
    }
  }
}

Como pueden ver, el metodo login del componente (el cual es llamado cuando haces click en el boton) llama al metodo login del servicio que es el que tengo seteado en el spy

5
  • ¿Cómo inicializas el componente? No se suele acceder al DOM directamente en los tests, del mismo modo que no se suele hacer en el código de los componentes Commented el 10 mar. 2021 a las 15:39
  • @PabloLozano Ahi actualice la pregunta con todo el codigo. Tengo que simular la llamada por eso accedo al dom y simulo el click para que llame al metodo login y ver el si el Spy funciona, pero me falla el metodo toHaveBeenCalled() Commented el 10 mar. 2021 a las 15:43
  • Creo que sé lo que te falla, déjame unos minutos Commented el 10 mar. 2021 a las 15:47
  • @PabloLozano oka Commented el 10 mar. 2021 a las 16:04
  • @PabloLozano Pablo a ver si me podes dar una mano con este tambien: es.stackoverflow.com/questions/434489/… Commented el 10 mar. 2021 a las 21:20

1 respuesta 1

1

Si no me equivoco, el problema es que intentas ver el componente como HTML "normal", cuando para Angular no es más que la vista. El modelo está oculto y modificar la vista no afecta al modelo. O dicho de otro modo:

Esto no está rellenando tu formulario:

((<HTMLInputElement>document.getElementById('username')).value = '[email protected]'),
((<HTMLInputElement>document.getElementById('password')).value = 'Grido2021')

Al menos, no está rellenando el objeto FormGroup, porque no se han activado los eventos necesarios.

Puedes probar con algo como

component.formLogin.get("username").setValue(...);
component.formLogin.get("password").setValue(...);
fixture.nativeElement.querySelector("#buttonLogin").click();

Para que las validaciones del formulario se cumplan.

Otra opción, si quieres algo más "manual", sería algo como

const usernameField = fixture.nativeElement.querySelector("#username");
usernameField.value= ...;
usernameField.dispatchEvent(new Event('input'));
2

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.