Contenido del curso
Componentes
Componentes con dependencias
Directivas
Pipes
Próximos pasos
Directiva con ngModel
Cesar Elías Armendariz Ruano
EstudianteContenido del curso
Directiva con ngModel
Cesar Elías Armendariz Ruano
Estudiante
Ana Velez Ossa
Estudiante
Yessica Alexandra Malaver Gómez
EstudianteAhora se va a probar las directiva con los Inputs, por lo que se va a simular con los inputs y las directivas en las pruebas
highligth.directive.spec.ts
import { FormsModule } from '@angular/forms'; @Component({ template: ` <h5 class="title" highligth>Hay un valor default</h6> <h5 highligth="yellow">Hay un valor</h6> <p highligth="blue">parrafo</p> <p>otro parrafo</p> <input [(ngModel)]="color" [highligth]="color">`, }) class HostComponent { color = 'pink'; } it('should the h5.title be defaultColor', () => { // Arrange const titleDe = fixture.debugElement.query(By.css('.title')); const dir = titleDe.injector.get(HighligthDirective); expect(titleDe.nativeElement.style.backgroundColor).toEqual(dir.defaultColor); }); it('should bind <input> and change the bgColor', () => { // Arrange const inputDe = fixture.debugElement.query(By.css('input')); const inputEl: HTMLInputElement = inputDe.nativeElement; // Act // Assert expect(inputEl.style.backgroundColor).toEqual('pink'); inputEl.value = 'red'; inputEl.dispatchEvent(new Event('input')); fixture.detectChanges(); expect(inputEl.style.backgroundColor).toEqual('red'); expect(component.color).toEqual('red'); });
Acá les comparto el ajuste de la prueba 'should have three highlight elements' que me funciono.
it('should have three highlight elements', () => { const elements = fixture.debugElement.queryAll(By.directive(HighligthDirective));//los que tienen directivas const allElements = fixture.debugElement.queryAll(By.css('*')); //todos los elementos del HostComponent const elementsWithout = allElements.filter(el => !el.injector.get(HighligthDirective, null)); // filtra los elementos que no tienen la directiva. expect(elements.length).toBe(4); expect(elementsWithout.length).toBe(1); });
dispatchEvent es un método que se utiliza en el contexto de DOM para desencadenar eventos en elementos HTML. Permite simular eventos como clics, teclas presionadas, etc. Este método es útil en pruebas unitarias, especialmente cuando se quiere verificar el comportamiento de un componente cuando se produce un evento específico, como un clic en un botón. En el contexto de Angular, se emplea a menudo al realizar pruebas con DebugElement y simular interacciones, lo que te ayudará a asegurar que tus componentes responden correctamente a los eventos.