Angular 2 Observable Service Karma Jasmine 单元测试不起作用答案

【问题标题】：Angular 2 Observable Service Karma Jasmine Unit Test not workingAngular 2 Observable Service Karma Jasmine 单元测试不起作用
【发布时间】：2017-07-23 20:25:28
【问题描述】：

我是 Angular 2 和 Karma + Jasmine 单元测试的新手。我无法弄清楚我为了让这个单元测试使用模拟响应而犯了什么语义错误。在控制台中，当“expect(items[0].itemId).toBe(2);”运行时，它说 items[0].itemId 未定义。

有人可以帮助我或为我指明正确的方向吗？如果您需要任何其他信息，请告诉我。谢谢！

item.ts

export class Item {
     itemId: number;
     itemName: string;
     itemDescription: string;
}

item.service.ts

import { Injectable, Inject } from '@angular/core';
    import { Headers, Http } from '@angular/http';
    import { Observable } from 'rxjs/Rx';
    import { Item } from './item';
@Injectable()
export class ItemService {
    private headers = new Headers({'Content-Type': 'application/json'});

    constructor(
    private http: Http)
    {

    }

    getItems(listOptions: Object): Observable<Item[]> {
    return this.http.post('/listItems', listOptions, {headers:this.headers})
       .map(response => response.json() as Item[])
  }
}

item.service.spec.ts

import { TestBed, fakeAsync, inject, tick } from '@angular/core/testing';
import { MockBackend } from '@angular/http/testing';
import { Http, BaseRequestOptions, Response, ResponseOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { ItemService } from './item.service';
import { Item } from './item';


describe('ItemService', () => {
  let mockResponse, matchingItem, connection;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        ItemService,
        MockBackend,
        BaseRequestOptions,
        {
          provide: Http,
          useFactory: (backend, defaultOptions) => new Http(backend, defaultOptions),
          deps: [MockBackend, BaseRequestOptions]
        },
        // { provide: XHRBackend, useClass: MockBackend }        
      ]
    });

    const items = [
      {
        "itemId":2,
        "itemName":"test item1",
        "itemDescription":"hello hello"        
      },
      {
        "itemId":1,
        "itemName":"name2124111121",
        "itemDescription":"description212412112"        
      }
    ];
    mockResponse = new Response(new ResponseOptions({body: {data: items}, status: 200}));
  });

  describe('getItems', () => {

    //Subscribing to the connection and storing it for later
    it('should return all the items',inject([ItemService, MockBackend], (service: ItemService, backend: MockBackend) => {

        backend.connections.subscribe(connection => {
          connection.mockRespond(mockResponse);
        });
        service.getItems({isActive: true, sortColumn: "lastModifiedDateUtc", sortOrder: "desc"})
        .subscribe((items: Item[]) => {
          expect(items.length).toBe(2);
        });
      }));
    });
  });

Plunkr：https://plnkr.co/edit/m7In2eVh6oXu8VNYFf9l?p=preview （Plunkr 有一些错误，我也需要帮助，但主要文件在那里）

【问题讨论】：

response.json() 不是项目数组，response.json().data 是。
@jonrsharpe 谢谢！我收到一条错误消息，上面写着 Property 'data' does not exist on type 'Item[]'
是的，因为您使用了错误的参数类型。
@jonrsharpe 你能告诉我我应该使用什么类型吗？
反映您发送的实际对象的那个？在这种情况下，有一个名为 data 的字段包含项目数组。如果这与实际负载不同，请修复您的测试以反映真实结构。

标签： unit-testing angular jasmine

【解决方案1】：

模拟响应正文与实际响应正文不匹配，这就是我收到错误的原因。

mockResponse = new Response(new ResponseOptions({body: {data: items}, status: 200})); 应该是mockResponse = new Response(new ResponseOptions({body: items, status: 200}));

【讨论】：