Directiva con ngModel
Clase 20 de 23 • Curso de Angular: Unit Testing para Componentes
Contenido del curso
Cesar Elías Armendariz Ruano
student•
hace 4 años
Clase 20 de 23 • Curso de Angular: Unit Testing para Componentes
Contenido del curso
Cesar Elías Armendariz Ruano
Ana Velez Ossa
Yessica Alexandra Malaver Gómez
Ahora 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.