CODEWITHSUNDEEP
angularunit-testingjasminekarma-runner
Nicolas HERMET
Nicolas HERMET

Reputation: 140

unit test a variable declaration inside ngOnInit()

I'm trying to skill up in TDD, and I'm doing again every tutorials I could followed in Angular. But this time trying to unit tests them with 100% code coverage.

I've a stupid question, that I can't find the answer in the documentation. Can't find questions that are that simple in Stackoverflow neither. 

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, interval, Subscription } from 'rxjs/';

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

  secondes: number;
  counterSubscritpion: Subscription;

  ngOnInit() {
    const counter = interval(1000);
    const dummy = 'foo';

    this.counterSubscritpion = counter.subscribe(
      (value) => {
        this.secondes = value;
    });
  }

  ngOnDestroy() {
    this.counterSubscritpion.unsubscribe();
  }

My template is of course very simple : 

<p> nothing should appear here : {{dummy}} </p>
<p> whereas here should be {{secondes}} secondes </p>

So reading the documentation will help me testing secondes and counterSubscritpion...

But how do I test that counter and dummy have been declared as well as their values ? because Karma's test coverage report tells me that I should test the `interval(1000) calls

So far i'm stuck with this : 

  let fixture: ComponentFixture<AppComponent>;
  let routerOutlet: any;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    });
    fixture = TestBed.createComponent(AppComponent);
  });

  it ('should declare dummy variable', () => {
    const appComp = new AppComponent();
    appComp.ngOnInit();
    // and so what ???
  });

Upvotes: 0

Views: 5537

Answers (1)

serrulien
serrulien

Reputation: 725

First, you are using TestBed to create the AppComponent. TestBed configures and create a test context. It's possible to create routes, services and much more.

But you're not using it in your it. To get the created component by the TestBed, you can call TestBed.get(AppComponent) to retrieve it.

When creating a component outside TestBed (i.e. with new), you won't be able to access component's template. While it can be useful in some situations, it may not be in your case.

  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    });
    fixture = TestBed.createComponent(AppComponent);
  });

  beforeEach(() => {
    component = TestBed.get(AppComponent);
  });

  it ('should create', () => {
    expect(component).toBeTruthy();
  });

  ...

To test async mecanism, read https://codecraft.tv/courses/angular/unit-testing/asynchronous/#_code_async_code_and_code_whenstable_code and https://codecraft.tv/courses/angular/unit-testing/asynchronous/#_code_async_code_and_code_whenstable_code. Which boils down to async, fakeAsync.

Upvotes: 1

Related Questions