Componentes con Inputs
Clase 6 de 23 • Curso de Angular: Unit Testing para Componentes
Contenido del curso
Daniel Meza
student•
hace 4 años
Clase 6 de 23 • Curso de Angular: Unit Testing para Componentes
Contenido del curso
Daniel Meza
Cesar Elías Armendariz Ruano
Reinaldo Mendoza
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 delbeforeEach(), 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.
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); });
Que buena expilcacion