单元测试 ngOnInit() 中的变量声明

Question

我正在尝试提高 TDD 的技能，并且我正在重做我在 Angular 中可以遵循的所有教程。但是这次尝试以 100% 的代码覆盖率对它们进行单元测试。

我有一个愚蠢的问题，我在 the documentation 中找不到答案。在 Whosebug 中也找不到那么简单的问题。

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 以及它们的值已声明？ 因为 Karma 的测试覆盖率报告告诉我应该测试 `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();
  });

  ...

要测试异步机制，请阅读 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。归结为 async、fakeAsync.

单元测试 ngOnInit() 中的变量声明

unit test a variable declaration inside ngOnInit()

unit-testing

jasmine

karma-runner

angular