No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Componentes con Inputs

6/23
Recursos

Aportes 2

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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