依赖单元测试:Angular 2

Question

我试图为我的应用程序创建单元测试。我的主要目标是为组件或服务创建一个基本的规范文件，它只是检查我们的组件所依赖的所有服务或组件是否被导入(这是我能想到的最基本的规范文件)。我试着在网上搜索，但找不到有用的东西。

Answer 1

你应该看看Angular-Cli。它有助于构建Angular 2应用，当你生成一个组件ng g component my-new-component时，它们会自动为该组件创建一个.spec文件。Angular-Cli还会设置整个测试环境，如此处所指定的。

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

我有一个导航栏组件

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

生成的规范文件如下所示

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主页的链接。它描述了测试带有依赖项的组件

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

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"');
});