angular - 如何修复 'TypeError: this.productService.getProducts is not a function' 错误？

Question

我正在使用最新版本的 Angular，我正在尝试编写单元测试来测试从 Angular 中的 Web API 获取产品列表的服务，我对此并不陌生。我能够让产品显示在页面上，所以 get 方法似乎有效但无法解决测试错误。有什么帮助吗？

在可视代码终端中运行 ng test 时测试失败:“应该通过 Get 从 API 检索产品”有错误:

should retrieve products from the API via Get

TypeError: mockService.getProducts is not a function
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/services/product.service.spec.ts:45:19)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:391:1)
    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:289:1)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:390:1)
    at Zone../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:150:1)

app.component.ts

import { Component,OnInit } from '@angular/core';
import { ProductService } from './services/product.service';
import { Product } from './models/product.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})  
export class AppComponent implements OnInit{

  title = 'Products App';
  products : Product[];

  constructor(private productService:ProductService)
  {
     console.log('constructor ran');
  }

  ngOnInit()
  {
    console.log('ngOnInit ran...');
    this.productService.getProducts().subscribe(products=> {
      console.log(products);
      this.products = products.map(x => new Product(x));
    })
  }
}

product.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { map } from  'rxjs/operators'
import { Product } from './../models/product.model';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private http:Http) { 
    console.log('Product Service connected...');    
  }

  getProducts(){
      return this.http.get('http://localhost:50324/v1/products')
      .pipe(map(res=> res.json()));
  }  
}

product.service.spec.ts

import { TestBed } from '@angular/core/testing';
import { MockBackend } from '@angular/http/testing';
// import { HttpClient } from '@angular/common/http';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

import { ProductService } from './product.service';
import { Product } from '../models/product.model';

import {HttpClientModule} from '@angular/common/http';
import {AbstractMockObservableService} from './../services/AbstractMockObservableService.service';
import { AppComponent } from '../app.component';

class MockService extends AbstractMockObservableService {
  doStuff() {
    return this;
  }
}

let mockService;
beforeEach(() => {
  mockService = new MockService();
  TestBed.configureTestingModule({
    providers: [{provide: ProductService, useValue: ProductService }],
    declarations: [ AppComponent ]
  });
});
it('should retrieve products from the API via Get', () => {
      const testProducts : Product[]= [
        { id: 1, productName: "G1", modelCode: "SM1", serialNumber: "SN1"},
        { id: 2, productName: "G2", modelCode: "SM2", serialNumber: "SN2"},
        { id: 3, productName: "G3", modelCode: "SM3", serialNumber: "SN3"}
      ];
      mockService.getProducts().subscribe(products => {
        expect(products.length).toBe(3);
        expect(products).toEqual(testProducts);
      })

Answer 1

TypeError 的原因是 console.log() 在它被赋值之前就在工作。您可以提供一个 setTimeout 函数，以便您可以将结果记录在控制台上