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

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();
    });
  }

谢谢。

1 个答案:

答案 0 :(得分：1)

它表明getPersonalSettings的“真实”实现使用了您订阅的Observable，因此在测试中，您必须模拟Observable

import { of } from 'rxjs';

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

，然后您还需要通过以下方式将其添加到提供程序中：

{
  provide: PersonalSettingsService,
  useValue: personalSettingsServiceMock
}