将 HTTP 传递到 Angular 2 服务中

Question

我目前收到一个错误，说"无法读取 null 的属性'get'"，这是因为我将 null 作为我的第一个参数传递给 FirmService 构造函数在我的 beforeEverything...在这里模拟或传递 HTTP 到我的服务的最佳方法是什么？

@Injectable
export class FirmService {
 public stateObservable: Observable<FirmState>;
 constructor(private: $http: AuthHttp, private store: Store<FirmState>) {
    this.stateObservable = this.store.select('firmReducer');
  }
  public getFirms(value?: string) {
     return this.$http.get('/api/firm').map((response: Response) => {
           this.store.dispatch({
               type: firmActions.GET_FIRMS,
               payload: response.json()
            });
            return;
     }
  }
}

这是我对上述服务的单元测试：

import {Store} from '@ngrx/store';
import {FirmService} from './firm.service'
import {firmActions} from './firm.reducer'
import {FirmState} from './firm.state'
import {HttpModule, Http, Response, ResponseOptions, XHRBackend} from 'angular/http';
import {MockBackend, MockConnection} from '@angular/http/testing';
class MockStore extends Store<FirmState> {
    constructor() {
        super(null, null, null)
    }
    public dispatch () {
         return undefined;
     }
}
describe('firm actions', () => {
     it('getFirms should dispatch the GET_FIRMS action', () => {
          let connection: MockConnection;
          const expectedAction = {
             type: firmActions.GET_FIRMS
             payload: undefined
          }
 const mockBackendResponse = (connection: MockConnection, response: string) => {
  connection.mockRespond(new Response(new ResponseOptions({ body: response })));
      TestBed.configureTestingModule({
           imports: [HttpModule],
           providers: [
               {provide: XHRBackend, useClass: MockBackend}
           ]
       });
    spyOn(mockStore, 'dispatch');
    firmService.getFirms().subscribe(result => {
       expect(mockStore.dispatch).toHaveBeenCalled();
       expect(mockStore.dispatch).toHaveBeenCalledWith(expectedAction);
    };
  }
 }
} 

Answer 1

你可以从angular的http/testing库中使用MockBackd和MockConnection尝试一些东西：

import { ResponseOptions, Response, XHRBackend, HttpModule } from '@angular/http';
import { MockBackend, MockConnection } from '@angular/http/testing';
const mockBackendResponse = (connection: MockConnection, response: string) => {
  connection.mockRespond(new Response(new ResponseOptions({ body: response })));
};
// test module configuration for each test
const testModuleConfig = () => {
  TestBed.configureTestingModule({
    imports: [
      //.. your required modules for this test,
      HttpModule, RouterTestingModule
    ],
    providers: [
      // required services,
      { provide: XHRBackend, useClass: MockBackend }
    ]
  });
};

然后在每次测试之前：

beforeEach(() => {
      injector = getTestBed();
      backend = <any>injector.get(XHRBackend);
      store = injector.get(Store);
      // sets the connection when someone tries to access the backend with an xhr request
      backend.connections.subscribe((c: MockConnection) => connection = c);
      // construct after setting up connections above
        firmService = injector.get(FirmService);
    });

使用项目数组的示例测试结果：

t.it('should search', () => {
let list: Array<Item> = []; // ... your sample mock entity with fields
      observer.subscribe(result => {
        expect(result).toEqual(new SearchedAction(list));
      });
      // mock response after the xhr request (which happens in constructor), otherwise it will be undefined
      let expectedJSON:string = JSON.stringify(list);
      mockBackendResponse(connection, expectedJSON);
}