如何阅读 Angular 单元测试中的订阅？

Question

我正在尝试编写组件的测试用例，起初我试图检查基本测试用例是否有效。 在那里我遇到了一些与依赖注入相关的错误并解决了这些错误。 现在我面临的第一个问题是 mocking API 调用。

以下是我正在为其编写测试用例的组件代码：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClientService } from '@service/http-client.service';
import { CustomErrorStateMatcher } from '@validator/error-state-matcher';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-prep-card',
  templateUrl: './prep-card.component.html',
  styles: ['legend { width: fit-content !important; }']
})
export class PrepCardComponent implements OnInit {

  constructor(private fb: FormBuilder, private _http: HttpClientService, private toastr: ToastrService) { }
  
  foamTypeList: string[] = [];
  colorList: string[] = [];
   
  ngOnInit() { this.getFoam_ColorList() }

  private getFoam_ColorList() {
    this._http.getFoamType_ColorList('ABC').subscribe(response => {
      this.foamTypeList = response.data.foamTypesAndColors.foamTypes;
      this.colorList = response.data.foamTypesAndColors.colors;
    });
  }
}

起初，我尝试运行一个简单的测试用例来检查它是否工作正常。 下面是我写的测试用例：

import { ComponentFixture, inject, TestBed } from "@angular/core/testing";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClientService } from "@service/http-client.service";
import { ToastrService } from "ngx-toastr";
import { MaterialModule } from "src/app/material/material.module";
import { PrepCardComponent } from "./prep-card.component";

describe('PrepCardComponent', () => {
    let component: PrepCardComponent, fixture: ComponentFixture<PrepCardComponent>,
        _httpSpy: jasmine.SpyObj<HttpClientService>, _toastrSpy: jasmine.SpyObj<ToastrService>;

    beforeEach(async () => {
        const _httpSpyObj = jasmine.createSpyObj('HttpClientService', ['getFoamType_ColorList']),
            _toastrSpyObj = jasmine.createSpyObj('ToastrService', ['success', 'error']);

        await TestBed.configureTestingModule({
            declarations: [PrepCardComponent],
            imports: [
                RouterTestingModule, FormsModule, ReactiveFormsModule, MaterialModule
            ],
            providers: [
                { provide: HttpClientService, useValue: _httpSpyObj },
                { provide: ToastrService, useValue: _toastrSpyObj },
            ]
        }).compileComponents();
        fixture = TestBed.createComponent(PrepCardComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('test', () => expect('a').toBe('a'));
});

上面的代码片段抛出了以下错误：

TypeError：无法在 PrepCardComponent.getFoam_ColorList (http://localhost:9876/karma_webpack/ webpack :/src/app/pages/prep-card/prep-card.component.ts:57 读取未定义的属性（读取“订阅”） :52) 在 PrepCardComponent.setFormFieldValidator (http://localhost:9876/ karma_webpack /webpack:/src/app/pages/prep-card/prep-card.component.ts:65:10) 在 PrepCardComponent.createForm (http: //localhost:9876/ karma_webpack /webpack:/src/app/pages/prep-card/prep-card.component.ts:48:10) 在 PrepCardComponent.ngOnInit (http://localhost:9876/ karma_webpack /webpack: /src/app/pages/prep-card/prep-card.component.ts:28:10) 在 callHook (http://localhost:9876/ karma_webpack /webpack:/node_modules/@angular/core/fesm2015/core. mjs:2542:1) 在 callHooks (http://localhost:9876/karma_webpack/ webpack :/node_modules/@angular/core/fesm2015/core.mjs:2511:1) 在 executeInitAndCheckHooks (http://localhost:9876/ karma_webpack /webpack:/node_modules/@angular/core/fesm2015/core.mjs:2462:1) 在 refreshView (http:// localhost:9876/ karma_webpack /webpack:/node_modules/@angular/core/fesm2015/core.mjs:9499:1) 在 renderComponentOrTemplate (http://localhost:9876/ karma_webpack /webpack:/node_modules/@angular/core/fesm2015 /core.mjs:9598:1) 在tickRootContext (http://localhost:9876/ karma_webpack /webpack:/node_modules/@angular/core/fesm2015/core.mjs:10829:1)

为了解决这个问题，我在这里搜索了不同的问题，并看到了下面提到的常见解决方案以获得observable 。

it('Call Service', inject([HttpClientService], (_http: HttpClientService) => {
    spyOn(_http, 'getFoamType_ColorList').and.returnValue({subscribe: () => {}})
}));

编写上述测试用例在subscribe position 中引发错误（如下所述）。

类型 'void' 不可分配给类型 'Subscription'.ts(2322)

服务代码

getFoamType_ColorList(cardType: string) {
  return this.http.get<{ message: string, data: { foamTypesAndColors: { foamTypes: string[], colors: string[] } } }>
    (`${this.URL}/validate/foam-type-and-color/${cardType}`);
}

谁能帮我解决这个问题？

Answer 1

我会建议这个：

import { of } from 'rxjs';
spyOn(httpclientservice, 'getFoamType_ColorList').and.returnValue(of(YOUR VALUE));

Answer 2

试试这个也许

spyOn(_http,'getFoamType_ColorList').and.returnValue(Observable.of(Your_Value));