Helper para llenar campos

Clase 9 de 17 • Curso de Angular: Unit Testing para Formularios

Contenido del curso

Aplica test en formularios

1
Conoce el proyecto del curso
03:25 min

Testing helpers

Pruebas a Fields

Pruebas a Forms

Pruebas a Validadores

Continua aplicando testing con Angular

17
Continúa con el Curso de Unit Testing Routing
02:19 min

Tomar examen

Comentarios

Gerardo Pérez Pérez

student•

Si quieren que se oculten las pruebas que no fueron ejecutadas en su karna.conf.js agreguen:

mochaReporter: {
    ignoreSkipped: true,
},

Jorge Luis Silva Medina

student•

excelente aporte, lo que necesitaba

Jorge Luis Silva Medina

student•

Para los que no saben en que parte va, es a este nivel

Enrique Carvajal

student•

El video no carga

David Castro

student•

Lo solucionaste? a mi si me cargó normal.

Enrique Carvajal

student•

si, gracias

Ana Velez Ossa

student•

Código del helper forms.ts

export function setInputValue<T>(
    fixture: ComponentFixture<T>,
    selector: string,
    value:string,
    withTestId: Boolean = false
) {
    let debugElement: DebugElement;
    if (withTestId) {
        debugElement = queryById(fixture, selector);
    }
    else {
        debugElement = query(fixture, selector);
    }

    const inputEl: HTMLInputElement = debugElement.nativeElement;

    inputEl.value = value;

    inputEl.dispatchEvent(new Event('input'));
    inputEl.dispatchEvent(new Event('blur'));

    //fixture.detectChanges() lo hacemos manual y lo controlamos en la prueba y no es buena practiva autimatizarlo en los helpers
    //expect tampoco se manejan en los helpers ya que seria de muy mala practica
}

Juan Felipe Vallejo Orozco

student•

Esta podría ser una prueba para el checkbox de los términos y condiciones, (se puede llenar el resto de los campos manual como las pruebas anteriores pero en este caso solo me interesaba hacerlo sobre el checkbox)

it('should the form be invalid because of CheckTerms from UI', () => {
    component.form.patchValue({
      name: 'Bruce',
      email: 'banner@gamma.com',
      password: 'asd12345',
      confirmPassword: 'asd12345',
    })
    
    let inputElement: HTMLInputElement = query(fixture, 'input#terms').nativeElement;
    inputElement.checked = false;
    inputElement.dispatchEvent(new Event('blur'));
    fixture.detectChanges();
    expect(component.checkTermsField?.invalid).withContext('terms is invalid because of unchecked').toBeTruthy();
    expect(inputElement.checked).withContext('element checkbox is false').toBeFalse();
    expect(component.form.invalid).withContext('form is invalid because of unchecked terms').toBeTrue();
  });

export function setInputValue<T>(
    fixture: ComponentFixture<T>,
    selector: string,
    value:string,
    withTestId: Boolean = false
) {
    let debugElement: DebugElement;
    if (withTestId) {
        debugElement = queryById(fixture, selector);
    }
    else {
        debugElement = query(fixture, selector);
    }

    const inputEl: HTMLInputElement = debugElement.nativeElement;

    inputEl.value = value;

    inputEl.dispatchEvent(new Event('input'));
    inputEl.dispatchEvent(new Event('blur'));

    //fixture.detectChanges() lo hacemos manual y lo controlamos en la prueba y no es buena practiva autimatizarlo en los helpers
    //expect tampoco se manejan en los helpers ya que seria de muy mala practica
}

it('should the form be invalid because of CheckTerms from UI', () => {
    component.form.patchValue({
      name: 'Bruce',
      email: 'banner@gamma.com',
      password: 'asd12345',
      confirmPassword: 'asd12345',
    })
    
    let inputElement: HTMLInputElement = query(fixture, 'input#terms').nativeElement;
    inputElement.checked = false;
    inputElement.dispatchEvent(new Event('blur'));
    fixture.detectChanges();
    expect(component.checkTermsField?.invalid).withContext('terms is invalid because of unchecked').toBeTruthy();
    expect(inputElement.checked).withContext('element checkbox is false').toBeFalse();
    expect(component.form.invalid).withContext('form is invalid because of unchecked terms').toBeTrue();
  });

Helper para llenar campos

Aplica test en formularios

Conoce el proyecto del curso

Testing helpers

Async Data

Finders

GetText

Click

Pruebas a Fields

Register Form

Pruebas a un campo

Llenar el campo desde UI