我正在尝试测试一个具有ngOnDestroy((方法的组件,该方法具有所有的unsubscribe((调用。但是,在测试时,当我运行测试文件(规范文件(时,它会给我一个错误,说:
cannot read property 'unsubscribe' of undefined
我已经在我的测试文件中完成了以下导入:
import { Subscription } from 'rxjs/Subscription';
所以我认为这应该足以获得Subscription中的所有方法,但错误仍然存在。此外,我尝试将"Subscription"添加到测试文件的"imports"、"declarations"one_answers"providers"列表中,但错误仍然存在。
下面是一个代码片段:
//component
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import {
NinjaService } from '../../../../ninja.service';
@Component({
selector: 'ninja-files',
templateUrl: './ninja-files.component.html',
styleUrls: ['./ninja-files.component.css']
})
export class ninjaFilesComponent implements OnInit, OnDestroy {
showNinjaFiles: boolean = true;
addFileSubscription: Subscription;
constructor(private ninjaService: NinjaService) {
........
}
ngOnInit() {
this.addFileSubscription = this.NinjaService.AddedFile$
.subscribe((fileFormat: FileFormat) => {
console.log('File being added: ' + fileFormat.fileName); }
ngOnDestroy() {
this.addFileSubscription.unsubscribe();
}
}
然后我有这个组件的测试文件如下:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import {
NinjaService } from '../../../../ninja.service';
import { TestBed, async, fakeAsync ,ComponentFixture, } from '@angular/core/testing';
import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';
import {} from 'jasmine';
describe('Component: NinjaFiles', () => {
let fixture: ComponentFixture<ninjaFilesComponent>;
let component: ninjaFilesComponent;
let ninjaServiceStub;
beforeEach( async(() => {
//stub NinjaService
let ninjaServiceStub= {};
fixture = TestBed.configureTestingModule({
declarations: [ ninjaFilesComponent],
}).createComponent(ninjaFilesComponent);
component = fixture.componentInstance;
}));
it('Page Title', async(() => {
let pageTitle = fixture.debugElement.query(By.css('.page-title'));
expect(pageTitle).toBeTruthy();
}));
it('Counting the files', () => {
let fileCount= fixture.debugElement.query(By.css('.file-count'));
expect(fileCount).toBeTruthy();
});
当我运行上面的测试代码时,它会给我一个错误,说"无法读取未定义的属性‘unsubscribe’"(这意味着它无法定义我在组件类中定义的订阅对象‘addFileSubscription’。
有人能提出一个变通办法吗?
import { Subscription } from 'rxjs/Subscription';
所有这些意味着您可以从ninjaFilesComponent
类文件访问Subscription
类。
问题是addFileSubscription
从未被初始化。为了调用ngOnInit
,您需要调用
fixture.detectChanges();
除此之外,我看到的其他问题是:
您永远不会将存根添加到提供商
TestBed.configureTestingModule({ providers: [ { provide: NinjaService, useValue: ninjaServiceStub } ] })
你需要在存根中实际实现一些东西
let ninjaServiceStub = { AddedFile$: Observable.of(new FileFormat(...)) }
您没有正确使用组件中的服务
this.NinjaService.AddedFile$ // should be this.ninjaService.AddedFile$ // lowercase
将fixture.detectChanges();
添加到我的测试中解决了我在使用Angular 2 CLI和Material Design运行测试时遇到的这个问题。
感谢您的解决方法!