Pruebas a Directiva
Clase 19 de 23 • Curso de Angular: Unit Testing para Componentes
Contenido del curso
Cesar Elías Armendariz Ruano
student•
hace 4 años
Juan Luna
student•
hace 2 años
Cesar Elías Armendariz Ruano
Juan Luna
ahora debemos crear un host y hacer todas las configuraciones previas ademas podemos seleccionar mediante el queryelement las directivas
highligth.directive.spec.ts
import { Component, DebugElement } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { HighligthDirective } from './highligth.directive'; @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>`, }) class HostComponent {} fdescribe('HighligthDirective', () => { let component: HostComponent; let fixture: ComponentFixture<HostComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [ HostComponent, HighligthDirective ] }) .compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(HostComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); it('should have 3 <p> with "highlight" class', () => { // Arrange const elements = fixture.debugElement.queryAll(By.directive(HighligthDirective)); const elementsWithout = fixture.debugElement.queryAll(By.css('*:not(highligth)')); expect(elements.length).toBe(3); expect(elementsWithout.length).toBe(1); }); it('should the elements be match with bgColor', () => { // Arrange const elements = fixture.debugElement.queryAll(By.directive(HighligthDirective)); expect(elements[0].nativeElement.style.backgroundColor).toEqual('gray'); expect(elements[1].nativeElement.style.backgroundColor).toEqual('yellow'); expect(elements[2].nativeElement.style.backgroundColor).toEqual('blue'); }); 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); }); });
Si exportamos nuestro defaultColor podemos importarlo en la prueba y si el valor cambia de 'gray' a cualquier otro calor la prueba seguirá funcionando.
**highlight.directive.ts**
import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
export const DEFAULT_COLOR = 'gray';@Directive({ selector: '[highligth]',})export class HighligthDirective implements OnChanges { @Input('highligth') bgColor = '';
constructor(private elementRef: ElementRef) { this.elementRef.nativeElement.style.backgroundColor = DEFAULT_COLOR; } ngOnChanges(): void { this.elementRef.nativeElement.style.backgroundColor = this.bgColor || DEFAULT_COLOR; }}
**highlight.directive.spec.ts**
import { Component, DebugElement } from '@angular/core';import { ComponentFixture, TestBed } from '@angular/core/testing';import { By } from '@angular/platform-browser';
import { HighligthDirective, DEFAULT_COLOR } from './highligth.directive';
@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>`,})class HostComponent {}
fdescribe('HighligthDirective', () => { let component: HostComponent; let fixture: ComponentFixture<HostComponent>;
beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [HostComponent, HighligthDirective], }).compileComponents(); });
beforeEach(() => { fixture = TestBed.createComponent(HostComponent); component = fixture.componentInstance; fixture.detectChanges(); });
it('should create', () => { expect(component).toBeTruthy(); });
it('should have 3 <tags></tags> with "highligth" class', () => { // Arrange const elements = fixture.debugElement.queryAll( By.directive(HighligthDirective) ); const elementsWithout = fixture.debugElement.queryAll( By.css('*:not([highligth])') ); expect(elements.length).toBe(3); expect(elementsWithout.length).toBe(1); });
it('should the elements be match with bgColor', () => { // Arrange const elements = fixture.debugElement.queryAll( By.directive(HighligthDirective) ); expect(elements[0].nativeElement.style.backgroundColor).toEqual( DEFAULT_COLOR ); expect(elements[1].nativeElement.style.backgroundColor).toEqual('yellow'); expect(elements[2].nativeElement.style.backgroundColor).toEqual('blue'); });
it('should the h5.title be defaultColor', () => { // Arrange const titleDe = fixture.debugElement.query(By.css('.title')); // const dir = titleDe.injector.get(HighligthDirective); // innecesario ya que tenemos el DEFAULT_COLOR
expect(titleDe.nativeElement.style.backgroundColor).toEqual(DEFAULT_COLOR); });});