Validadores async en Form
Contenido del curso
Testing helpers
Pruebas a Fields
Pruebas a Forms
Pruebas a Validadores
Continua aplicando testing con Angular
Validadores async en Form
Contenido del curso
Validadores async en Form
Miguel Angel Coy Triana
Estudiante
Carlos Alejandro Hernández Mejía
Estudiante
Ana Velez Ossa
Estudiante
Jorge Luis Silva Medina
EstudianteReto:
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'); });