Pruebas con componentes anidados

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">
  <h1>Angular Testing</h1>
  <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();
  });

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