Angular 单元测试 - 组件中的服务模拟答案

【问题标题】：Angular Unit Testing- Mocking of Service in componentAngular 单元测试 - 组件中的服务模拟
【发布时间】：2020-04-19 15:18:08
【问题描述】：

我是 Angular 测试的新手，正在尝试使用 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();
    });
  }

提前致谢。

【问题讨论】：

标签： angular unit-testing service components

【解决方案1】：

因为它表明getPersonalSettings“真实”实现使用你订阅的Observable，所以在你的测试中你必须模拟一个Observable

import { of } from 'rxjs';

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

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

{
  provide: PersonalSettingsService,
  useValue: personalSettingsServiceMock
}

【讨论】：