Estoy tratando de hacer un test de un componente(login) y me está arrojando que unas de las pruebas falla. Para el formulario estoy usando Ngform. Por lo que estoy viendo siempre me está arrojando que es false al hacer el test. Cuando pongo a funcionar la app funciona correctamente, obtengo la respuesta del servidor correctamente. Por lo que pienso siempre esta el form.invalid en true al hacer el test pero no se porque. A continuación pongo el código del test que falla.
it('Probando Login Compoenent OK', () => {
const testForm = {
value: {
email: 'mailqmail.com',
password: '1w2e345t6'
}
} as NgForm;
expect(component.login(testForm)).toBe(true);
});
Siempre me arroja false y no encuentro el porque. Sospecho que es la constante testForm que pueda estar mal, pero no se que estaría mal. Lo que muestra por consola es
LoginComponent Probando Login Compoenent OK FAILED Error: Expected false to be true.
Dejo el código del componente entero.
login.component.html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/"></ion-back-button>
</ion-buttons>
<ion-title>Ingrese a su cuenta</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid class="color-fondo centrar">
<ion-row>
<ion-col size=12>
<img src="/assets/img/logo.png" alt="MobiusApp">
</ion-col>
</ion-row>
<form (ngSubmit)="login(formLogin)" #formLogin="ngForm">
<ion-item color="danger" *ngIf="formLogin.submitted && (formLogin.controls['email'].errors || formLogin.controls['password'].errors)">
<ion-label>
Email o contraseña invalida
</ion-label>
</ion-item>
<ion-row>
<ion-col size="12">
<ion-item>
<ion-label position="floating" color="ligth">Email</ion-label>
<ion-input type="email" name="email" value="{{user.email}}" [(ngModel)]="user.email" required minlength="5" maxlength="50"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12">
<ion-item>
<ion-label position="floating">Password</ion-label>
<ion-input type="password" name="password" [(ngModel)]="user.password" required minlength="6" maxlength="16"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12">
<ion-button shape="round" expand="block" color="primary" type="submit">INGRESAR</ion-button>
</ion-col>
</ion-row>
</form>
<ion-row>
<ion-col size="12">
<a routerLink="/">¿Olvidó su contraseña?</a>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12">
<a routerLink="/registrar">¿No tienes cuenta?</a>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
login.component.ts
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AppComponent } from 'src/app/app.component';
import { CommonService } from 'src/app/services/common/common.service';
import { User } from '../models/User';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
user: User;
primaryApp: AppComponent = null;
retorno = false;
constructor(public commonService: CommonService, public app: AppComponent) {
this.user = new User();
}
ngOnInit() {
this.user = new User();
}
login(form: NgForm){
if (form.invalid){
this.retorno = false;
}else{
this.commonService.login(this.user)
.subscribe((resp: any) => {
this.retorno = true;
}, (error: Error) => {
this.retorno = false;
});
}
return this.retorno;
}
}
login.component.spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { LoginComponent } from './login.component';
import { CommonService } from 'src/app/services/common/common.service';
import { HttpClient, HttpHandler } from '@angular/common/http';
import { User } from '../models/User';
import { AppComponent } from 'src/app/app.component';
import { NgForm } from '@angular/forms';
import { Input } from '@angular/core';
describe('LoginComponent', () => {
let component: LoginComponent;
let service: CommonService;
// tslint:disable-next-line: prefer-const
let http: HttpClient;
let user: User;
// tslint:disable-next-line: prefer-const
let httpHandler: HttpHandler;
let app: AppComponent;
beforeEach(() => {
service = new CommonService(http, httpHandler);
component = new LoginComponent(service, app);
app = component.primaryApp;
user = new User();
user.email = 'pepe@gmail.com';
user.password = '123456';
component.ngOnInit();
});
afterEach(() => {
service = null;
component = null;
user = null;
});
it('Probando Login Compoenent FALSE', () => {
const testForm = new NgForm([], []);
component.login(testForm);
expect(component.retorno).toBe(false);
});
it('Probando Login Compoenent OK', () => {
const testForm = {
value: {
email: 'Hello',
category: 'World'
}
} as NgForm;
expect(component.login(testForm)).toBe(true);
});
it('Probando User', () => {
expect(component.user).toBeTruthy();
});
it('Probando email', () => {
component.user.email = 'pepe@gmail.com';
// tslint:disable-next-line: object-literal-key-quotes
expect('pepe@gmail.com').toEqual(user.email);
});
it('Probando5', () => {
component.user.password = '1234567';
// tslint:disable-next-line: object-literal-key-quotes
expect('1234567').toEqual(user.password);
});
});