Pruebas con componentes anidados

Clase 10 de 20 • Curso de Angular: Unit Testing para Rutas

Contenido del curso

Creación de pruebas a parámetros

Parámetros

Routing components

Integration tests

Cierre

20
Angular Unit Testing Hero
01:59 min

Tomar examen

Comentarios

Cesar Elías Armendariz Ruano

student•

todos los frameworks basan la renderización basado en componentes aninados, para poder hacer las pruebas desde Angular sería así

primero generamos los componentes que vamos a renderizar dentro del app.component.html

ng g c components/banner

ng g c components/footer

luego los ingresamos en el html de app.component

<app-banner></app-banner>
<header class="container">
  <h2>Angular Testing</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae illum saepe odio suscipit id sapiente consequuntur, ipsa laboriosam eius debitis quidem nisi quos veritatis eum soluta adipisci repellat commodi. Esse.</p>
  <nav>
    <ul>
      <li><a routerLink="/">Home</a></li>
      <li><a routerLink="/auth/register">Register</a></li>
      <li><a routerLink="/people">People</a></li>
      <li><a routerLink="/products">Products</a></li>
      <li><a routerLink="/others">others</a></li>
      <li><a routerLink="/pico-preview">Pico Preview</a></li>
      <li><a routerLink="/auth/login">Login</a></li>
    </ul>
  </nav>
</header>
<router-outlet></router-outlet>
<app-footer></app-footer>

ahora podemos hacer las pruebas aunque se puede hacer de dos formas, la una ignarando la renderización de estos dos componentes o la otra creando substitutos vacios para que no generen errores ni advertencias.

app.component.spec.ts

@Component({
  selector: 'app-banner'
})
class BannerComponentStub {}

@Component({
  selector: 'app-footer'
})
class FooterComponentStub {}


fdescribe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent,
        RouterLinkDirectiveStub,
        BannerComponentStub,
        FooterComponentStub
      ],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
  });

ntt data

student•

Intento usar la forma que indicas para probar este componente:

import { Component, OnInit, ViewChild } from '@angular/core';
import { ModalComponent } from 'src/app/ui/components/modal/modal.component';

@Component({
  selector: 'app-recharges',
  templateUrl: './recharges.component.html',
  styleUrls: ['./recharges.component.scss']
})
export class RechargesComponent implements OnInit {

  @ViewChild('modalDownloadReport') modalContainer!: ModalComponent;
  showModal = false;
  constructor() { }

  ngOnInit(): void {
  }

  toogleModal(event: boolean) {
    console.log(event);
    if(!event) {
      this.modalContainer.openModal();
    }
    this.showModal = event;
  }

}

En el .html solo tiene la inyeccion del componente ModalComponent:

<div class="mainContainer">
  <app-modal #modalDownloadReport>
  </app-modal>
  <div class="oneSection">
	'Mi contenido...'
  </div>
</div>

Me dice: Cannot find module 'src/app/ui/components/modal/modal.component'

Carlos Alejandro Hernández Mejía

student•

Componentes anidados

Todos los frameworks basan la renderización en componentes de forma anidada, dónde cada uno de estos componentes puede llegar a tener su propia lógica, sus propias dependencias, etc.
Sí tenemos un componente padre con componentes hijos anidados y ejecutamos nuestras las pruebas del componente padre es posible que Angular no encuentre dichos elementos y te muestre un error con un texto similar a este:

Error: Template parse errors:
'app-my-component' is not a known element:
1. If 'app-my-component' is an Angular component, then verify that it is part of this module.
2. If 'app-my-component' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this

Existen 3 formas de resolver este error, las cuales se detallan a continuación:

Agregar dichos componentes al contexto de nuestro entorno de pruebas. Por ejemplo

  ```tsx
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [
        AppComponent,
        **MyComponent**,
  			// Other components, directives or pipes
      ],
    }).compileComponents();
  
    fixture = TestBed.createComponent(AppComponent);
    app = fixture.componentInstance;
  });
  ```

Pero, cómo dicho componentes anidados deberían tener sus propias pruebas unitarias, no es necesario que agreguemos estos componentes en las pruebas del componente padre, ya que esto podría afectar el rendimientos de nuestras pruebas e incluso, generarnos más dolores de cabeza.

Indicarle a nuestro entorno de pruebas que ignore los elementos desconocidos con la constante NO_ERRORS_SCHEMA proporcionada por @angular/core. Por ejemplo

  ```tsx
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [AppComponent],
  		schemas: [NO_ERRORS_SCHEMA],		
    }).compileComponents();
  
    fixture = TestBed.createComponent(AppComponent);
    app = fixture.componentInstance;
  });
  ```

Crear un componente sustituto que posea el mismo selector que nuestros componentes anidados, pero no que no posea ninguna funcionalidad. Por ejemplo

  ```tsx
  // ComponentStub
  @Component({
    selector: 'app-my',
  })
  class MyComponentStub {}
  
  // Test environment
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [AppComponent, MyComponentStub],
    }).compileComponents();
  
    fixture = TestBed.createComponent(AppComponent);
    app = fixture.componentInstance;
  });
  ```

<app-banner></app-banner>
<header class="container">
  <h2>Angular Testing</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae illum saepe odio suscipit id sapiente consequuntur, ipsa laboriosam eius debitis quidem nisi quos veritatis eum soluta adipisci repellat commodi. Esse.</p>
  <nav>
    <ul>
      <li><a routerLink="/">Home</a></li>
      <li><a routerLink="/auth/register">Register</a></li>
      <li><a routerLink="/people">People</a></li>
      <li><a routerLink="/products">Products</a></li>
      <li><a routerLink="/others">others</a></li>
      <li><a routerLink="/pico-preview">Pico Preview</a></li>
      <li><a routerLink="/auth/login">Login</a></li>
    </ul>
  </nav>
</header>
<router-outlet></router-outlet>
<app-footer></app-footer>

@Component({
  selector: 'app-banner'
})
class BannerComponentStub {}

@Component({
  selector: 'app-footer'
})
class FooterComponentStub {}


fdescribe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent,
        RouterLinkDirectiveStub,
        BannerComponentStub,
        FooterComponentStub
      ],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
  });

import { Component, OnInit, ViewChild } from '@angular/core';
import { ModalComponent } from 'src/app/ui/components/modal/modal.component';

@Component({
  selector: 'app-recharges',
  templateUrl: './recharges.component.html',
  styleUrls: ['./recharges.component.scss']
})
export class RechargesComponent implements OnInit {

  @ViewChild('modalDownloadReport') modalContainer!: ModalComponent;
  showModal = false;
  constructor() { }

  ngOnInit(): void {
  }

  toogleModal(event: boolean) {
    console.log(event);
    if(!event) {
      this.modalContainer.openModal();
    }
    this.showModal = event;
  }

}

Error: Template parse errors:
'app-my-component' is not a known element:
1. If 'app-my-component' is an Angular component, then verify that it is part of this module.
2. If 'app-my-component' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this

  ```tsx
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [
        AppComponent,
        **MyComponent**,
  			// Other components, directives or pipes
      ],
    }).compileComponents();
  
    fixture = TestBed.createComponent(AppComponent);
    app = fixture.componentInstance;
  });
  ```
  

  ```tsx
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [AppComponent],
  		schemas: [NO_ERRORS_SCHEMA],		
    }).compileComponents();
  
    fixture = TestBed.createComponent(AppComponent);
    app = fixture.componentInstance;
  });
  ```
  

  ```tsx
  // ComponentStub
  @Component({
    selector: 'app-my',
  })
  class MyComponentStub {}
  
  // Test environment
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [AppComponent, MyComponentStub],
    }).compileComponents();
  
    fixture = TestBed.createComponent(AppComponent);
    app = fixture.componentInstance;
  });
  ```

Pruebas con componentes anidados

Creación de pruebas a parámetros

Configurando el proyecto

Probando el Router

Parámetros

Product Detail

Pruebas a los parámetros

Pruebas al render

Pruebas inválidas del parámetro

Solución del reto: fakeAsync & tick

Pruebas a QueryParams

Routing components

Componentes con RouterLink