CODEWITHSUNDEEP
unit-testingangularjasmine
fips
fips

Reputation: 4379

How to properly unit test an Angular2 http service with the MockBackend?

When running npm test I get this error:

src/client/app/shared/services/scientist.service.spec.ts(20,7): error TS2345: Argument of type 'Function' is not assignable to parameter of type '(done: () => void) => void'.
  Type 'Function' provides no match for the signature '(done: () => void): void'

I'am using this angular2 seed: https://github.com/mgechev/angular2-seed and I changed the scientist name-list service to get the data from http, based on this blog: http://chariotsolutions.com/blog/post/testing-http-services-angular-2-jasmine/.

So I created my Scientist class with asScientist and asScientists methods that create instances from json.

scientist.service.ts:

import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Observable';

import {Scientist} from './scientist';

@Injectable()
export class ScientistService {
  private url = 'http://path/to/scientists/';

  constructor(private http:Http) {
  }

  get():Observable<Scientist[]> {
    return this.http.get(this.url)
      .map((res:Response) => {
        return Scientist.asScientists(res.json());
      });
  }
}

scientist.service.spec.ts:

import {provide} from 'angular2/core';
import {beforeEachProviders, inject} from 'angular2/testing';
import {XHRBackend, ResponseOptions, Response} from 'angular2/http';
import {MockBackend, MockConnection} from 'angular2/src/http/backends/mock_backend';

import {Scientist} from './scientist';
import {ScientistService} from './scientist.service.ts';

export function main() {
  describe('Scientist Service', () => {
    beforeEachProviders(() => {
      return [HTTP_PROVIDERS, provide(XHRBackend, {useClass: MockBackend}), ScientistService];
    });

    it('should get the list of scientists',
      // ##### Line below causes the error #####
      inject([XHRBackend, ScientistService], (mockBackend:MockBackend, scientistService:ScientistService) => {
        mockBackend.connections.subscribe(
          (connection:MockConnection) => {
            // Haven't changed these yet since I want to make the test pass first
            connection.mockRespond(new Response(
              new ResponseOptions({
                  body: [
                    {
                      id: 26,
                      contentRendered: '<p><b>Hi there</b></p>',
                      contentMarkdown: '*Hi there*'
                    }]
                }
              )));
          });
        scientistService.get().subscribe((scientists:Scientist[]) => {
            expect(scientists.length).toBe(1);
            //expect(scientists[0].id).toBe(26);
            //expect(data[0].contentMarkdown).toBe('*Hi there*');
          },
          (error:any) => {
            // we can call a failure case here...
            fail(error);
          });
      }));
  });
}

It seems to be a syntax error but not a very obvious one, so any kind of help will be appreciated!

Upvotes: 2

Views: 906

Answers (1)

Mengxi Wang
Mengxi Wang

Reputation: 81

Maybe you need import all test methods from the angular2/testing module.

Like this:

import {it, beforeEachProviders, describe, expect, beforeEach, inject, injectAsync} from 'angular2/testing';

Because in your code I saw you just import "beforeEachProviders" and "inject".

Upvotes: 1

Related Questions