Validadores async en Form
Contenido del curso
Validadores async en Form
Contenido del curso
Miguel Angel Coy Triana
Carlos Alejandro Hernández Mejía
Ana Velez Ossa
Jorge Luis Silva Medina
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') }))
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); }));
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"); })
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'); });
