Componentes con Inputs

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">
  <h3>Hola, PersonComponent</h3>
  <p>Soy un párrafo</p>
</section>

Cambiémoslo por esto:

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

La prueba contiene:

it('should have <h3> 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 <h3> 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.

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">
  <h3>Hola, {{person?.name}}</h3>
  <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 <h3> with "Hola, {person.name}"</h3>', () => {
    // 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);
  });