javascript - 模拟测试 http - angular2

Question

我在这里阅读了很多问题和一些教程，但我仍然无法正常工作，我已经逐字逐句地复制了教程，但仍然没有成功，所以我不知道问题出在哪里。我对这东西很陌生。这是我的代码:

import { TestBed, inject, async } from '@angular/core/testing';
import { MockBackend } from '@angular/http/testing';
import {
  BaseRequestOptions,
  HttpModule,
  Http,
  Response,
  ResponseOptions
} from '@angular/http';

import { ItemsService } from './items.service';
import { MOCKITEMS } from './mock-items';

describe('ItemsService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpModule],
      providers: [ItemsService]
    });
  });

  it('should construct', inject([ItemsService], (service) => {
      expect(service).toBeDefined();
  }));
});

describe('ItemsService Mock', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        ItemsService,
        MockBackend,
        BaseRequestOptions,
        {
          provide: Http,
          useFactory: (backend, opts) => new Http(backend, opts),
          deps: [MockBackend, BaseRequestOptions]
        }
      ],
      imports: [HttpModule]
    });
  });

  it('should construct', inject([ItemsService, MockBackend], (service, mockBackend) => {
    expect(service).toBeDefined();
  }));

  describe('#getItems()', () => {
    it('should return <Array<Items>>', inject([ItemsService, MockBackend], (service, mockBackend) => {
      const mockReponse = {
        data: [
          { itemCharId: 1, itemName: 'milk' },
          { itemCharId: 2, itemName: 'eggs' },
          { itemCharId: 3, itemName: 'meat' }
        ]
      }

      mockBackend.connections.subscribe((connection) => {
        connection.mockRespond(new Response(new ResponseOptions({ body: JSON.stringify(mockReponse) })));
      });

      service.getItems().subscribe((items) => {
        expect(items.length).toBe(3);
        expect(items[0].itemName).toEqual('milk');
        expect(items[1].itemName).toEqual('eggs');
        expect(items[2].itemName).toEqual('meat');
      });
    }));
  });
});

测试失败，预期 undefined 为 3，等等。所以我假设它实际上没有将我的 mockResonse obj 作为响应或那些行上的东西？我想也可能只是一些小东西。

服务代码:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class ItemsService {

  constructor(private http: Http) { }

  getItems() {
    return this.http.get('/api/items');
  }
}

非常感谢任何帮助。

Answer 1

在the tutorial that was likely was followed ，服务方法返回response.json().data:

  getHeroes(): Promise<String[]> {
    return this.http.get('myservices.de/api/heroes')
        .toPromise()
        .then(response => response.json().data)
        .catch(e => this.handleError(e));
  }

因此响应被模拟为 { data: [...] } 。

虽然在问题的示例中它返回 this.http.get('/api/items') 并且不调用 response.json()。

这就是除了失败的断言之外没有错误的原因； items 必须等于 mockReponse。

应该是

  getItems() {
    return this.http.get('/api/items').map(res => res.json());
  }

和

  const mockReponse = [
      { itemCharId: 1, itemName: 'milk' },
      { itemCharId: 2, itemName: 'eggs' },
      { itemCharId: 3, itemName: 'meat' }
  ]

这可以另外断言

expect(items).toEqual(mockResponse);