Componentes con Inputs

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

Daniel Meza

student•

Componentes con Input()

El componente tiene un @Input donde ha de recibir la info de una persona.

@Input() person: Person = new Person('', '', 0, 0, 0);

El archivo spec deberá contener una prueba de esto que está ingresando al componente.

En el método beforeEach() se crea la instancia de ese objeto que entra por Input().

beforeEach(() => {
    fixture = TestBed.createComponent(PersonComponent);
    component = fixture.componentInstance;
    component.person = new Person('Nicolas', 'Molina', 28, 89, 1.4)
    fixture.detectChanges();
  });

Ahora ya podemos llamar a component.person para crear los expect() que probarán la veracidad de este.

Verificar que el nombre sea el que le hemos asignado

it('should the name be "Nicolas"', () => {
    expect(component.person.name). toEqual('Nicolas');
});

la línea donde se hace la asignación de component.person, dentro del beforeEach(), está poniendo a disposición esa info para todas las pruebas. Si se desea crear una persona diferente para cada prueba, se puede meter esa inicialización, dentro del ambiente de cada prueba

it('should the name be "Nicolas"', () => {
    component.person = new Person('Nicolas', 'Molina', 28, 89, 1.4)
    expect(component.person.name). toEqual('Nicolas');
});

. . Aprovechando que se está probando un Input(). Rendericemos eso en el template y probemos que esté funcionando.

Hasta el momento se tiene esto:

<section class="container">
  <h4>Hola, PersonComponent</h4>
  <p>Soy un párrafo</p>
</section>

Cambiémoslo por esto:

<section class="container">
  <h4>Hola, {{person?.name}}</h4>
  <p>Mi altura es {{person?.heigth}}</p>
</section>

La prueba contiene:

it('should have <h4> with "Soy un párrafo"', () => {
    const personDegub: DebugElement = fixture.debugElement;
    const h3Debug: DebugElement = personDegub.query(By.css('h3'));
    const h3Element: HTMLElement = h3Debug.nativeElement;

    expect(h3Element?.textContent).toEqual('Soy un párrafo');

  });

Agregar la adaptación para renderear info de la persona

it('should have <h4> with "Soy un párrafo"', () => {
    // Arrange
    component.person = new Person('Daniel', 'Meza', 28, 89, 1.4)
    const expectMsg = `Hola, ${component.person.name}`
    const personDegub: DebugElement = fixture.debugElement;
    const h3Debug: DebugElement = personDegub.query(By.css('h3'));
    const h3Element: HTMLElement = h3Debug.nativeElement;

    // Act
    fixture.detectChanges()

    // Assert
    expect(h3Element?.textContent).toEqual('Soy un párrafo');

  });

Lo nuevo ahí es; la asignación del objeto Person, el mensaje a mostrar y:

fixture.detectChanges() ⇒ Esto es, porque cuando trabajamos enviando info de un componente a otro, existe ese ciclo de vida llamado onChanges(), que se ejecuta a cada cambio sucedido. Entonces. De manera que si no lo ejecutamos, el assert no se ejecutará, porque no verá todos los cambios que sucedieron.

Cesar Elías Armendariz Ruano

student•

Para hacer pruebas a componentes que tienen inputs podemos hacerlo de la siguiente manera

person.component.ts

import { Person } from 'src/app/models/person.model';

@Input() person!: Person;

person.component.html

<section class="container">
  <h4>Hola, {{person?.name}}</h4>
  <p>Mi altura es {{person?.heigth}} cm</p>
</section>

person.component.spect.ts

it('should the name be "Cesar"', () => {
    component.person = new Person('Cesar', 'Armendariz', 29, 120, 1.75);
    expect(component.person.name).toEqual('Cesar');
  });

  it('should have <p> with "Mi altura es {person.heigth}"</p>', () => {
    // Arrange
    component.person = new Person('Valentina', 'Armendariz', 29, 120, 1.75);
    const personDebug: DebugElement = fixture.debugElement;
    const expectedMsg = `Mi altura es ${component.person.heigth} cm`;
    const pDebug: DebugElement = personDebug.query(By.css('p'));
    const pElement: HTMLElement = pDebug.nativeElement;
    // Act
    fixture.detectChanges();
    // Assert
    expect(pElement?.textContent).toContain(expectedMsg);
  });

  it('should have <h4> with "Hola, {person.name}"</h4>', () => {
    // Arrange
    component.person = new Person('Valentina', 'Armendariz', 29, 120, 1.75);
    const expectedMsg = `Hola, ${component.person.name}`;
    const personDebug: DebugElement = fixture.debugElement;
    const h3Debug: DebugElement = personDebug.query(By.css('h3'));
    const h3: HTMLElement = h3Debug.nativeElement;
    // Act
    fixture.detectChanges();
    //Assert
    expect(h3?.textContent).toContain(expectedMsg);
  });

Reinaldo Mendoza

student•

Que buena expilcacion

beforeEach(() => {
    fixture = TestBed.createComponent(PersonComponent);
    component = fixture.componentInstance;
    component.person = new Person('Nicolas', 'Molina', 28, 89, 1.4)
    fixture.detectChanges();
  });

it('should have <h4> with "Soy un párrafo"', () => {
    const personDegub: DebugElement = fixture.debugElement;
    const h3Debug: DebugElement = personDegub.query(By.css('h3'));
    const h3Element: HTMLElement = h3Debug.nativeElement;

    expect(h3Element?.textContent).toEqual('Soy un párrafo');

  });

it('should have <h4> with "Soy un párrafo"', () => {
    // Arrange
    component.person = new Person('Daniel', 'Meza', 28, 89, 1.4)
    const expectMsg = `Hola, ${component.person.name}`
    const personDegub: DebugElement = fixture.debugElement;
    const h3Debug: DebugElement = personDegub.query(By.css('h3'));
    const h3Element: HTMLElement = h3Debug.nativeElement;

    // Act
    fixture.detectChanges()

    // Assert
    expect(h3Element?.textContent).toEqual('Soy un párrafo');

  });

it('should the name be "Cesar"', () => {
    component.person = new Person('Cesar', 'Armendariz', 29, 120, 1.75);
    expect(component.person.name).toEqual('Cesar');
  });

  it('should have <p> with "Mi altura es {person.heigth}"</p>', () => {
    // Arrange
    component.person = new Person('Valentina', 'Armendariz', 29, 120, 1.75);
    const personDebug: DebugElement = fixture.debugElement;
    const expectedMsg = `Mi altura es ${component.person.heigth} cm`;
    const pDebug: DebugElement = personDebug.query(By.css('p'));
    const pElement: HTMLElement = pDebug.nativeElement;
    // Act
    fixture.detectChanges();
    // Assert
    expect(pElement?.textContent).toContain(expectedMsg);
  });

  it('should have <h4> with "Hola, {person.name}"</h4>', () => {
    // Arrange
    component.person = new Person('Valentina', 'Armendariz', 29, 120, 1.75);
    const expectedMsg = `Hola, ${component.person.name}`;
    const personDebug: DebugElement = fixture.debugElement;
    const h3Debug: DebugElement = personDebug.query(By.css('h3'));
    const h3: HTMLElement = h3Debug.nativeElement;
    // Act
    fixture.detectChanges();
    //Assert
    expect(h3?.textContent).toContain(expectedMsg);
  });

Componentes con Inputs

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