No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Pruebas con componentes anidados

10/20
Recursos

Aportes 1

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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