Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Componentes con Inputs

6/23
Recursos

Aportes 1

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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.