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

Question

I am new to angular testing, and trying to implement a basic testing of mock service with Angular. I get the 'Cannot read subscribe of undefined' when calling 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 Below is the method i need to test in component

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

Thanks in advance.

Answer 1

As it indicates getPersonalSettings "real" implementation uses an Observable that you subscribe to, so in your test you have to mock an Observable

import { of } from 'rxjs';

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

and then you also need to add it to the providers this way:

{
  provide: PersonalSettingsService,
  useValue: personalSettingsServiceMock
}