角度单元测试 - 模拟组件中的服务

Question

我是角度测试的新手，并尝试使用 Angular 实现模拟服务的基本测试。 我在调用personalsettingmock.getPersonalSettings时收到"无法读取未定义的订阅" app.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PersonalSettingsComponent } from './personal-settings.component';
import { PersonalSettingsService } from './personal-settings.service';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { NotifyService } from 'src/app/_services/notify.service';
import { LoaderEmitterService } from 'src/app/_services/loader-emitter.service';
import { of } from 'rxjs/internal/observable/of';
fdescribe('PersonalSettingsComponent', () => {
let component: PersonalSettingsComponent;
let fixture: ComponentFixture<PersonalSettingsComponent>;
let personalSettingsServiceMock;
let notifyServiceMock;
let loaderEmitterServiceMock;
let data = {
email: 'asd', firstName: 'sff', lastName: 'sdf', phoneMobile: '+12355'
};
beforeEach(async(() => {
personalSettingsServiceMock = jasmine.createSpyObj(['getPersonalSettings']);
notifyServiceMock = jasmine.createSpyObj(['notifyUser']);
loaderEmitterServiceMock = jasmine.createSpyObj('LoaderEmitterSerivce', ['emitChange']);
TestBed.configureTestingModule({
declarations: [PersonalSettingsComponent],
imports: [
],
providers: [
{
provide: NotifyService,
useValue: notifyServiceMock
},
{
provide: LoaderEmitterService,
useValue: loaderEmitterServiceMock
}
],
schemas: [
NO_ERRORS_SCHEMA
]
});
TestBed.overrideProvider(PersonalSettingsService,{useValue: personalSettingsServiceMock});
TestBed.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PersonalSettingsComponent);
component = fixture.componentInstance;
personalSettingsServiceMock.getPersonalSettings.and.returnValue(of(data));
fixture.detectChanges();
});

it('should get user data from userService', () => {
expect(component).toBeTruthy();
expect(component.personalData).toBe(data);
fixture.detectChanges();
})
});

app.component.ts 以下是我需要在组件中测试的方法

getUserData () {
this._loaderEmitter.emitChange(APP_CONSTANTS.SHOW_LOADING);
this.personalSettingsService.getPersonalSettings().subscribe( (responseData:PERSONAL_DATA) => {
this._loaderEmitter.emitChange(APP_CONSTANTS.HIDE_LOADING);
this.personalData = responseData;
this.setSettingsData();
this.personalData = _.omit(this.personalData, 'email');
this.setChangeDetection();
});
}

提前谢谢。

Answer 1

正如它所表明的那样getPersonalSettings"真正的"实现使用您订阅的Observable，因此在您的测试中，您必须模拟Observable

import { of } from 'rxjs';
personalSettingsServiceMock = jasmine.createSpyObj('PersonalSettingsService', {
getPersonalSettings: of({})
});

然后您还需要以这种方式将其添加到提供程序：

{
provide: PersonalSettingsService,
useValue: personalSettingsServiceMock
}