модульный тест объявления переменной внутри ngOnInit ()

Question

Я пытаюсь освоить навык в TDD, и я снова делаю все уроки, которые я мог выполнить в Angular. Но на этот раз я пытаюсь выполнить их модульное тестирование со 100% покрытием кода.

У меня глупый вопрос, который я не могу найти в документации . Также не могу найти такие простые вопросы в Stackoverflow.

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

Мой шаблон, конечно, очень прост:

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

Поэтому чтение документации поможет мне проверить secondes и counterSubscritpion ...

Но как мне проверить, что counter и dummy были объявлены так же, как и их значения? потому что отчет о тестировании покрытия Кармы говорит мне, что я должен протестировать вызовы interval (1000)

Пока я застрял с этим:

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

Answer 1

Сначала вы используете TestBed для создания AppComponent . TestBed настраивает и создает тестовый контекст . Можно создавать маршруты, службы и многое другое.

Но вы не используете его в своем it. Чтобы получить созданный компонент с помощью TestBed, вы можете вызвать TestBed.get(AppComponent) для его извлечения.

При создании компонента вне TestBed (т.е. с new) вы не будете возможность доступа к шаблону компонента. Хотя в некоторых ситуациях это может быть полезно, в вашем случае это может быть не так.

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

  ...

Чтобы проверить асин c механизм, прочитайте https://codecraft.tv/courses/angular/unit-testing/asynchronous/#_code_async_code_and_code_whenstable_code и https://codecraft.tv/courses/angular/unit-testing/asynchronous/#_code_async_code_and_code_whenstable_code. Который сводится к async, fakeAsync.