Pruebas a Directiva

Clase 19 de 23 • Curso de Angular: Unit Testing para Componentes

Cesar Elías Armendariz Ruano

student•

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);
  });
});

Juan Luna

student•

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); });});

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);
  });
});

Pruebas a Directiva

Introducción

Unit Testing en Angular para Componentes

Creando el proyecto

Primera prueba

Componentes

Creando un componente & nativeElement

DebugElement & ByCss

Componentes con Inputs

Simulando el clic

Componentes con Outputs

Pruebas aisladas al componente

Pruebas con componente padre

Resolviendo el reto

Componentes con dependencias

Proyecto: creando product component

Componentes con dependencias

Pruebas a getAllProducts

FakeAsync and tick

Pruebas a promesas

Promesas simulando click

Directivas

Creando la Directiva

Pruebas a Directiva

Directiva con ngModel

Pipes

Creando pipe

Testing pipes

Próximos pasos

Continúa con el Curso de Testing en Formularios y Routing