我正在尝试为我的应用程序创建单元测试。我的主要目标是为组件或服务创建一个基本规范文件,它只检查我们的组件所依赖的所有服务或组件是否正在被导入(这是我能想到的最基本的规范文件)。我尝试通过互联网搜索无法找到有用的东西。任何帮助将不胜感激。
问问题
203 次
1 回答
0
你应该看看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() {
}
}
生成的规范文件如下所示
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 测试主页的链接。它描述了使用依赖项测试组件
所以如果你想测试一个组件的注入服务。
应用程序/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
看起来像这样
应用程序/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"');
});
于 2016-09-29T16:39:48.830 回答