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