Validadores async en Form

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

Miguel Angel Coy Triana

student•

Reto:

   it('Should show error with an email invalid', fakeAsync(() => {
      const inputDebug = query(fixture, 'input#email');
      const inputEl: HTMLInputElement = inputDebug.nativeElement;
      inputEl.value = "miguel@gmail.com"

      userService.isAvailableByEmail.and.returnValue(mockObservable({isAvailable: false}));
      tick();

      inputEl.dispatchEvent(new Event('input'));
      inputEl.dispatchEvent(new Event('blur'));
      fixture.detectChanges();
      const textError = getText(fixture, 'email-error-async');

      expect(component.emailField?.invalid).toBeTrue();
      expect(userService.isAvailableByEmail).toHaveBeenCalledWith("miguel@gmail.com");
      expect(textError).toContain('*The email is already registered')
    }))

Carlos Alejandro Hernández Mejía

student•

Mi solución al reto:

it('should be show a message if the email is already registered', fakeAsync(() => {
  const emailNative: HTMLInputElement = emailDebug.nativeElement;
  const email = 'test@test.com';
  userServiceSpy.isAvailableByEmail.and.returnValue(
    observableData({ isAvailable: false })
  );
  setValueOnInputElement(emailNative, email);

  fixture.detectChanges();
  tick();

  const errorNative: HTMLElement = query(
    fixture,
    'email-exists',
    true
  ).nativeElement;

  textContext = 'Method "isAvailableByEmail" should be called';
  expect(userServiceSpy.isAvailableByEmail).withContext(textContext).toHaveBeenCalledWith(email);
  textContext = 'Check if there is an error message';
  expect(errorNative).withContext(textContext).toBeDefined();
  expect(userServiceSpy.isAvailableByEmail).toHaveBeenCalledWith(email);
}));

Ana Velez Ossa

student•

Reto:

it("should show text error - Reto", ()=>{
    userService.isAvailableByEmail.and.returnValue(mockObservable({isAvailable:false}));
    setInputValue(fixture, 'input#email', 'ana@gmail.com');
    
    //Act
    fixture.detectChanges();

    //reto
    const textErrorDe = getText(fixture, 'emailField-not-available');
    expect(textErrorDe).toContain("Registed email");
  })

Jorge Luis Silva Medina

student•

Reto

  it('should show error with an email invalid', () => {
    // Arrange
    userService.isAvailableByEmail.and.returnValue(
      mockObservable({ isAvailable: false })
    );
    setInputValue(fixture, 'input#email', 'jorge@gmail.com');

    // Act
    fixture.detectChanges();
    // Assert
    expect(component.emailField?.invalid).withContext('true').toBeTrue();
    expect(userService.isAvailableByEmail)
      .withContext('isAvailableByEmail')
      .toHaveBeenCalledWith('jorge@gmail.com');
    const notAvalilableMsjEl = queryById(fixture, 'emailField-no-available');
    const errorMsj = getText(fixture, 'emailField-no-available');
    expect(notAvalilableMsjEl).withContext('to be exist').toBeTruthy();
    expect(errorMsj)
      .withContext('msj no available')
      .toEqual('The email is already registered');
  });

   it('Should show error with an email invalid', fakeAsync(() => {
      const inputDebug = query(fixture, 'input#email');
      const inputEl: HTMLInputElement = inputDebug.nativeElement;
      inputEl.value = "miguel@gmail.com"

      userService.isAvailableByEmail.and.returnValue(mockObservable({isAvailable: false}));
      tick();

      inputEl.dispatchEvent(new Event('input'));
      inputEl.dispatchEvent(new Event('blur'));
      fixture.detectChanges();
      const textError = getText(fixture, 'email-error-async');

      expect(component.emailField?.invalid).toBeTrue();
      expect(userService.isAvailableByEmail).toHaveBeenCalledWith("miguel@gmail.com");
      expect(textError).toContain('*The email is already registered')
    }))

it('should be show a message if the email is already registered', fakeAsync(() => {
  const emailNative: HTMLInputElement = emailDebug.nativeElement;
  const email = 'test@test.com';
  userServiceSpy.isAvailableByEmail.and.returnValue(
    observableData({ isAvailable: false })
  );
  setValueOnInputElement(emailNative, email);

  fixture.detectChanges();
  tick();

  const errorNative: HTMLElement = query(
    fixture,
    'email-exists',
    true
  ).nativeElement;

  textContext = 'Method "isAvailableByEmail" should be called';
  expect(userServiceSpy.isAvailableByEmail).withContext(textContext).toHaveBeenCalledWith(email);
  textContext = 'Check if there is an error message';
  expect(errorNative).withContext(textContext).toBeDefined();
  expect(userServiceSpy.isAvailableByEmail).toHaveBeenCalledWith(email);
})); 

it("should show text error - Reto", ()=>{
    userService.isAvailableByEmail.and.returnValue(mockObservable({isAvailable:false}));
    setInputValue(fixture, 'input#email', 'ana@gmail.com');
    
    //Act
    fixture.detectChanges();

    //reto
    const textErrorDe = getText(fixture, 'emailField-not-available');
    expect(textErrorDe).toContain("Registed email");
  })

  it('should show error with an email invalid', () => {
    // Arrange
    userService.isAvailableByEmail.and.returnValue(
      mockObservable({ isAvailable: false })
    );
    setInputValue(fixture, 'input#email', 'jorge@gmail.com');

    // Act
    fixture.detectChanges();
    // Assert
    expect(component.emailField?.invalid).withContext('true').toBeTrue();
    expect(userService.isAvailableByEmail)
      .withContext('isAvailableByEmail')
      .toHaveBeenCalledWith('jorge@gmail.com');
    const notAvalilableMsjEl = queryById(fixture, 'emailField-no-available');
    const errorMsj = getText(fixture, 'emailField-no-available');
    expect(notAvalilableMsjEl).withContext('to be exist').toBeTruthy();
    expect(errorMsj)
      .withContext('msj no available')
      .toEqual('The email is already registered');
  });

Validadores async en Form

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

Helper para llenar campos

Pruebas a Forms

Pruebas para envío de form

Envío del form con FakeAsync

Llenar el form de una UI

Pruebas para fallas en servicio

Pruebas a Validadores

Pruebas a validadores

Pruebas a validadores async

Validadores async en Form

Continua aplicando testing con Angular

Continúa con el Curso de Unit Testing Routing