如何使用带有karma-Jasmine的angular2单元测试从服务方法调用到测试用例获取json数据？

I have trying to get json data from when i calling service method. I got a return object but i didn't get json data. Which part i have to change?

我试图从我调用服务方法时获取json数据。我有一个返回对象,但我没有得到json数据。我必须改变哪一部分?

"goods.services.ts"

getAllData(): Observable<Product>{

    let jwtTok1 ="Something";
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Authorization', 'Token ' + jwtTok1);
    let options = new RequestOptions({ headers: headers, body: {} });
    return this.http.get(BASE_URL_GOODS, options)
      .map((res:Response) => {return Observable.of ({type: "success", payload:  res.json().data})})

      .catch(error => this.handleError(error));

}

Another is test case file "goods.component.spec.ts"

另一个是测试用例文件“goods.component.spec.ts”

import {
    inject,
  TestBed,fakeAsync,tick
} from '@angular/core/testing';
import { Component } from '@angular/core';
import {
    BaseRequestOptions,
    ConnectionBackend,
    Http
} from '@angular/http';
import { MockBackend,MockConnection } from '@angular/http/testing';
// Load the implementations that should be tested
import { Observable } from 'rxjs/Rx';
import { AppState } from '../app.service';
import { ActionReducer, Action, Store } from '@ngrx/store';
import { AppStore } from '../models/appstore.model';
import {goodsDescriptionComponent } from './goods-desc.component';
import { goodsService } from '../common/service/goods.service';
import { goodsReducer } from '../common/reducers/goods.reducer';
import {provideStore} from '@ngrx/store';
import { goods} from '../common/models/goods.model';
import { Input } from '@angular/core';

describe('GoodsDescriptionComponent', () => {
  //let store:Store<AppStore>;
  beforeEach(() => TestBed.configureTestingModule({
    providers: [
      BaseRequestOptions,
      MockBackend,
      {
        provide: Http,
        useFactory: function(backend: ConnectionBackend, defaultOptions: BaseRequestOptions) {
          return new Http(backend, defaultOptions);
        },
        deps: [MockBackend, BaseRequestOptions]
      },
      goodsService, provideStore({goodsData: goodsReducer}),goodsDescriptionComponent
    ]}));
it('should url will be same  ', 
    inject(
      [goodsService, MockBackend],
      fakeAsync((service:ProductsService, backend: MockBackend) => {
        backend.connections.subscribe((connection: MockConnection) => {


          expect(connection.request.url).toBe(
            'http://localhost:3001/goodsMS/');

        });
        service.getAllData();

        console.log("goods what we got: ",service.getAllData());
      })));
});

Getting Response Result is,

获得响应结果是,

This Response object getting from console in google chrome. Still i can't get correct solution for getting json data from service method call.i can't reach json server. my json server URL is , "http://localhost:3001/goods". please anyone help me. Thanks in advance.

此响应对象来自谷歌浏览器中的控制台。仍然无法从服务方法call.i无法到达json服务器获取正确的解决方案。我的json服务器URL是“http:// localhost:3001 / goods”。请有人帮帮我。提前致谢。

1 个解决方案

#1

1. You need to set a response on the connection

   您需要在连接上设置响应

   backend.connections.subscribe((connection: MockConnection) => {
     expect(connection.request.url).toBe(
       'http://localhost:3001/goodsMS/');
   
     connection.mockRepond(new Response(new ResponseOptions({
       body: `{"some":"json", "response":"body"}`
     }));
   });
   

2. You need to subscribe to your service call

   您需要订阅您的服务电话

   service.getAllData().subscribe((result) => {
     expect(somethingWithData)
   })
   tick()
   

   since you are using fakeAsync, you need to tick to force completion of the asynchronous observable. If you use async instead of fakeAsync, then you don't need to call tick

   因为您使用的是fakeAsync,所以需要勾选以强制完成异步observable。如果您使用async而不是fakeAsync,那么您不需要调用tick

3. You should not be returning an Observable in the service method map function. Just return a normal object.

   您不应该在服务方法映射函数中返回Observable。只需返回一个普通对象。

   .map((res:Response) => {type: "success", payload:  res.json().data})