Validadores async en Form

Reto:

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

      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("[email protected]");
      expect(textError).toContain('*The email is already registered')
    }))

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 = '[email protected]';
  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);
})); 

Reto: ```ts it("should show text error - Reto", ()=>{ userService.isAvailableByEmail.and.returnValue(mockObservable({isAvailable:false})); setInputValue(fixture, 'input#email', '[email protected]'); //Act fixture.detectChanges(); //reto const textErrorDe = getText(fixture, 'emailField-not-available'); expect(textErrorDe).toContain("Registed email"); }) ```

Reto

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

    // Act
    fixture.detectChanges();
    // Assert
    expect(component.emailField?.invalid).withContext('true').toBeTrue();
    expect(userService.isAvailableByEmail)
      .withContext('isAvailableByEmail')
      .toHaveBeenCalledWith('[email protected]');
    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');
  });