依赖单元测试：Angular 2

Question

我正在尝试为我的应用创建单元测试。我的主要目标是为组件或服务创建一个基本规范文件，该文件仅检查我们的组件所依赖的所有服务或组件是否正在导入（这是我能想到的最基本的规范文件）。我尝试通过互联网搜索无法找到有用的东西。 任何帮助将不胜感激。

Answer 1

您应该查看Angular-Cli。它有助于构建 Angular 2 应用程序，当您生成组件 ng g component my-new-component 时，它们会自动为该组件创建一个 .spec 文件。 Angular-Cli 还按照HERE 的规定设置了整个测试环境。

我不知道这对你有多大帮助，但也许它足以帮助你。

所以我有一个导航栏组件

blah-nav-bar.component.ts

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

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

  constructor(private router: Router) { }

  ngOnInit() {
  }

}

而生成的spec文件是这样的

blah-nav-bar.component.spec.ts

import { By }           from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { async, inject } from '@angular/core/testing';
import { BlahNavBarComponent } from './blah-nav-bar.component';

describe('Component: BlahNavBar', () => {
  it('should create an instance', () => {
    let component = new BlahNavBarComponent();
    expect(component).toBeTruthy();
  });
});

我对此不太了解，因为我只是注释掉了规范文件，但也许它足以激发你开始的灵感

更新

我也在 Angular 2 官方网站 上找到了这个。这是Angular 2 Testing 主页的链接。它描述了Testing a Component with a Dependency

所以如果你想测试一个组件的注入服务。

app/welcome.component.ts

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

@Component({
  selector: 'app-welcome',
  template: '<h3 class="welcome"><i>{{welcome}}</i></h3>'
})
export class WelcomeComponent  implements OnInit {
  welcome = '-- not initialized yet --';
  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.welcome = this.userService.isLoggedIn ?
      'Welcome, ' + this.userService.user.name :
      'Please log in.';
  }
}

.spec 看起来像这样

app/welcome.component.spec.ts

import { WelcomeComponent } from './welcome.component';
import { UserService }       from './model';

beforeEach(() => {
  // stub UserService for test purposes
  userServiceStub = {
    isLoggedIn: true,
    user: {
      name: 'Test User'
    }
  };

  TestBed.configureTestingModule({
    declarations: [WelcomeComponent],
    providers: [{
      provide: UserService,
      useValue: userServiceStub
    }]
  });

  fixture = TestBed.createComponent(WelcomeComponent);
  comp = fixture.componentInstance;

  // UserService from the root injector
  userService = TestBed.get(UserService);

  //  get the "welcome" element by CSS selector (e.g., by class name)
  de = fixture.debugElement.query(By.css('.welcome'));
  el = de.nativeElement;


});


// The Tests
it('should welcome the user', () => {
  fixture.detectChanges();
  const content = el.textContent;
  expect(content).toContain('Welcome', '"Welcome ..."');
  expect(content).toContain('Test User', 'expected name');
});

it('should welcome "Bubba"', () => {
  userService.user.name = 'Bubba'; // welcome message hasn't been shown yet
  fixture.detectChanges();
  expect(el.textContent).toContain('Bubba');
});

it('should request login if not logged in', () => {
  userService.isLoggedIn = false; // welcome message hasn't been shown yet
  fixture.detectChanges();
  const content = el.textContent;
  expect(content).not.toContain('Welcome', 'not welcomed');
  expect(content).toMatch(/log in/i, '"log in"');
});