Como yo copio y pego codigo en mi Notion, para dejar mis apuntes, en los recursos colocaron el link que no es.
Aqui dejo el comit de esta clase
step 8
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Llenar el campo desde UI
8/17Recursos
Aportes 3
Preguntas 1
Ordenar por:
Otra forma para obtener el input podrÃa ser:
const emailElement = query(fixture, 'input#email').nativeElement as HTMLInputElement;
**Notas:**
Cuando hacemos pruebas en los formularios, debemos tener en cuenta los diferentes eventos en los inputs como el evento BLUR.
Html ajustado:
```html
<section class="container">
<h6>Register</h6>
<form
[formGroup]="form"
novalidate
(ngSubmit)="register($event)"
autocomplete="off"
>
</form>
</section>
```
**Código de la prueba:**
```ts
it('should the emailField be invalid from UI', () => {
const inputDe = query(fixture, 'input#email');
const inputEl: HTMLInputElement = inputDe.nativeElement;
inputEl.value = "Valor correo";
inputEl.dispatchEvent(new Event('input'));
inputEl.dispatchEvent(new Event('blur'));
fixture.detectChanges();
expect(component.form.get('email')?.invalid).withContext('wrong email').toBeTruthy();
const textErrorDe = getText(fixture, 'emailField-email');
expect(textErrorDe).toContain("It's not a email");
});
```
<label for="name">
Full Name
<input
type="text"
id="name"
name="name"
placeholder="Full Name"
formControlName="name"
[attr.aria-invalid]="nameField?.touched ? nameField?.invalid : ''"
/>
<ng-container *ngIf="nameField?.touched && nameField?.errors">
<small *ngIf="nameField?.hasError('required')">*Required</small>
</ng-container>
</label>
<label for="email">
Email address
<input
type="email"
id="email"
name="email"
placeholder="Email address"
formControlName="email"
[attr.aria-invalid]="emailField?.touched ? emailField?.invalid : ''"
/>
<ng-container *ngIf="emailField?.touched && emailField?.errors">
<small data-testid="emailField-required" *ngIf="emailField?.hasError('required')">*Required</small>
<small data-testid="emailField-email" *ngIf="emailField?.hasError('email')"
>*It's not a email</small
>
</ng-container>
</label>
<label for="password">
Password
<input
type="password"
id="password"
name="password"
placeholder="Password"
formControlName="password"
[attr.aria-invalid]="
passwordField?.touched ? passwordField?.invalid : ''
"
/>
<ng-container *ngIf="passwordField?.touched && passwordField?.errors">
<small *ngIf="passwordField?.hasError('required')">*Required</small>
<small *ngIf="passwordField?.hasError('minlength')"
>*Should be greater 6</small
>
<small *ngIf="passwordField?.hasError('invalid_password')"
>*Should contain numbers</small
>
</ng-container>
</label>
<label for="confirmPassword">
Confirm Password
<input
type="password"
id="confirmPassword"
name="confirmPassword"
placeholder="Confirm password"
formControlName="confirmPassword"
[attr.aria-invalid]="
confirmPasswordField?.touched
? form?.hasError('match_password')
: ''
"
/>
<ng-container *ngIf="confirmPasswordField?.touched && form?.errors">
<small *ngIf="form?.hasError('match_password')">*Not matching</small>
</ng-container>
</label>
<fieldset>
<label for="terms">
<input
type="checkbox"
id="terms"
name="terms"
formControlName="checkTerms"
[attr.aria-invalid]="
checkTermsField?.touched ? checkTermsField?.invalid : ''
"
/>
I agree to the Terms and Conditions
</label>
</fieldset>
<button type="submit">Register</button>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?