Angular 2 Jasmine testing, Loading all components in app.component.ts?

Question

I\'m working on a small test app to learn Angular 2 and unit testing in Angular 2 a bit better. Coming from a react - Jest background; it feels weird to include all componen

Answer 1

Please give more details about the way you generate your project on Angular. I recommend you to use Angular CLI to generate your project/components/pipes/services because it will generate a spec.ts file for each on your behalf and will also link your components to a module.

Then, think about the test class of Angular as an empty test bench where you have to recreate the structure of your component in order to be able to test. In the actual app, all binding is made inside of the module, but this is not the case of tests where you have to import and declare all the components of a component in order for test framework to be able to build it and test it.

In the structure you presented, you are going to have a test class for each component like:

Nav.Component.spec.ts
Header.Component.spec.ts
Layout.Component.spec.ts
App.Component.spec.ts

And given the hierarchy, on each you will do something like:

Nav.Component.spec.ts

 import { NavComponent } from './your path to component';
 ...
 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ NavComponent  ]
    })
    .compileComponents();
 }));

Header.Component.spec.ts

 import { NavComponent } from './your path to component';
 import { HeaderComponent } from './your path to component';
 ...
 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ NavComponent , HeaderComponent ]
    })
    .compileComponents();
 }));

Layout.Component.spec.ts

 import { NavComponent } from './your path to component';
 import { HeaderComponent } from './your path to component';
 import { LayoutComponent } from './your path to component';
 ...
 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ NavComponent , HeaderComponent , LayoutComponent ]
    })
    .compileComponents();
 }));

App.Component.spec.ts

 import { NavComponent } from './your path to component';
 import { HeaderComponent } from './your path to component';
 import { LayoutComponent } from './your path to component';
 import { AppComponent } from './your path to component';
 ...
 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ NavComponent , HeaderComponent , LayoutComponent, AppComponent  ]
    })
    .compileComponents();
 }));

If you do it like this, should work. The whole idea is to reconstruct on test each element with all the elements it uses in order to work. If something is not clear enough or not working, put more details.

The example I give with importing each component is the way to make it work with your presented structure of components not linked on modules. But, as I told you, this is not the way it was intended to be built. If you generate with Angular CLI you can do the following: Generate your module like:

ng generate module layout -m app

This will generate your layout module and import it for you into app.module Generate then all your components the same way:

ng generate component layout -m layout
ng generate component header -m layout
ng generate component nav -m layout

This generates all you components, import each into the layout.module, which is already imported into app.module. This way you don't have to import anything more and your tests will just work.

This is how each element will look like after:

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { LayoutModule } from './layout/layout.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

layout module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LayoutComponent } from './layout.component';
import { HeaderComponent } from '../header/header.component';
import { NavComponent } from '../nav/nav.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [LayoutComponent, HeaderComponent, NavComponent]
})
export class LayoutModule { }

layout component

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit() {
  }

}

header component

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit() {
  }

}

nav component

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit() {
  }

}

Answer 2

If you have a few components grouped in one module you can import module to test instead of declaring each component.

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [AppComponent],
    imports: [SomeModule]
  }).compileComponents();
}));