依赖单元测试: Angular 2

Question

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

Answer 1

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

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

所以我有一个nav-bar组件

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的上也找到了这个。这是主页的链接。它描述了

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

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