2

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);
});

});

1
  • Buena pregunta, con todo el código necesario para reproducir el problema. el 16 oct. 2020 a las 12:11

1 respuesta 1

2

El método login siempre devuelve false:

...
retorno = false; //valor inicial: false

...

login(form: NgForm){
   if (form.invalid){
     this.retorno = false; //aquí devolvería false
   }else{
   // aquí hay una llamada AJAX (código asíncrono)
      this.commonService.login(this.user)
      .subscribe((resp: any) => {
         // esto se ejecutará de manera asíncrona: el método login ya
         // ha terminado y ha devuelto false
         this.retorno = true;
      }, (error: Error) => {
        this.retorno = false;
      });
   }
   return this.retorno;
 }

Por tanto el método no debería devolver nada, pero puedes testear que tras su ejecución la propiedad retorno es true... dejando pasar un tiempo:

it('Probando Login Compoenent FALSE', fakeAsync(() => {
   const testForm = new NgForm([], []);
   component.login(testForm);
   tick(); //deja pasar el tiempo
   expect(component.retorno).toBe(false);
}));

it('Probando Login Component OK', fakeAsync(() => {
  const testForm = {
     value: {
        email: 'Hello',
       category: 'World'
    }
   } as NgForm;
  component.login(testForm)
  tick(); //deja pasar el tiempo, también podrías usar flush();
   expect(component.retorno).toBe(true);
});

Las funciones fakeAsync, tick y flush son parte del framework de Angular para testear componentes, aquí tienes una pregunta sobre el tema en inglés y un artículo en español para profundizar sobre el tema.

1
  • Gracias por tu ayuda, me sirvio la info para poder hacer el test. De todas forma estuve viendo que Probando Login Component OK, retorno siempre es false, no entiendo porque ya que probe en poner tick(10) hasta tick(1000). Asi que en tobe le puse false. Pero gracias por tu repuesta. el 17 oct. 2020 a las 2:49

Tu Respuesta

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

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