如何模拟 RxJS 主题并在 Angular 单元测试中调用下一个方法

Question

我试图模拟 RxJS 主题，它是服务的属性。 此服务在 class 组件构造函数中作为依赖注入调用。 我有两种方法storeProduct() && responseHandler()所以在 responseHandler 方法中我订阅了这个主题。 所以我尝试为这两种方法编写单元测试，但我不能模拟这个主题并称他为下一个方法。我需要帮助看看我做错了什么。

这是我的代码：

应用程序组件.ts

import { Component } from '@angular/core';
import { UtilsService } from './services/utils.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
message!: string;

constructor(private utilsService: UtilsService) { }

storeProduct() {
  this.utilsService.storeProductDetails();
  this.responseHandler();
}

responseHandler() {
  this.utilsService._httpResponse$.subscribe(({ message }) => {
  this.message = message;
  });
 }
}

实用程序.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { CoreService } from './core.service';

@Injectable({
   providedIn: 'root'
})

export class UtilsService {
  _httpResponse$ = new Subject<any>()
  constructor(private coreService: CoreService) { }

  storeProductDetails() {
    this.coreService.storeProductDetails().subscribe(res => {
    this.httpResponse(res.content, null);
  })
 }

  httpResponse(content: any, errors: any) {
  this._httpResponse$.next({
    message: content,
    errors: errors
  });
 }
}

核心服务.ts

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class CoreService {
  storeProductDetails(): Observable<any> {
    return of({ content: 'Product was stored succesffuly' });
  }
}

app.component.spec.ts

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { AppComponent } from './app.component';
import { CoreService } from './services/core.service';
import { UtilsService } from './services/utils.service';
import { of } from 'rxjs';

describe('AppComponent', () => {
  let app: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let coreServiceSpy: jasmine.SpyObj<CoreService>;
  let utilsService: UtilsService;

  beforeEach(async () => {
    coreServiceSpy = jasmine.createSpyObj('CoreService', ['storeProductDetails']);

    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        HttpClientTestingModule
      ],
      declarations: [
        AppComponent
      ],
      providers: [
        {
          provide: CoreService,
          useValue: coreServiceSpy
        }
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    utilsService = TestBed.inject(UtilsService);
   fixture = TestBed.createComponent(AppComponent);
   app = fixture.componentInstance;
 })

  it('should store product details succesful and show message', () => {
    coreServiceSpy.storeProductDetails.and.returnValue(of({ content: 'The product details was stored succesful.' }))
    utilsService._httpResponse$.next({ message: 'The product details was stored succesful.', errors: null });
    fixture.detectChanges();
    app.storeProduct();
    expect(app.message).toEqual('The product details was stored succesful.');
  });
});

Answer 1

我认为您的utilsService._httpResponse$.next在测试中被调用可能存在问题，与屏幕截图中发布的错误消息有关。

我发现使用普通对象模拟您的服务更容易，为您的服务 class（包含您的 jasmine 间谍的对象）建模。

类似于此的方法，希望对您有所帮助：

mockCoreService = {
    getMessage:jasmine.createSpy('openConfirmModal').and.returnValue(
     of({ content: 'The product details was stored successful.' }))
    }

mockUtilsService = {
   _httpResponse$: new Subject<any>() /// Or of(message: content, errors:errors), 
   httpResponse : jasmine.createSpy('httpResponse').and...
   storeProductDetails: jasmine.createSpy('storeProductDetails').and...
}

然后只需将模拟对象作为提供者传递

providers: [
        {
          provide: CoreService,
          useValue: mockCoreService
        },
        {
          provide: UtilsService,
          useValue: mockUtilService
        }
      ]