Angular 2/4 Jasmine单元测试具有json对象结构的服务

Question

I have a service that I want to unit test. It has a current json array object in which when this observable is subscribed to, it works fine.

However, what am I doing wrong with my unit test?

Service code

getTrackerData(): (Observable<any>) {
    return Observable.of(tracker)
        .do(data => console.log('trackerdata', data))
        .catch(this.handleError)
}

private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
}

}

DATA

const tracker =
[{
    "tracker": "2278474849", "task": 1, "agent": 1, "session": "2278474849-1-1"
 }
]

Unit Test

/// <reference path="../../../../node_modules/@types/jasmine/index.d.ts" />
import { TestBed, fakeAsync, inject, tick, async, ComponentFixture, ComponentFixtureAutoDetect } from '@angular/core/testing';
import { MockBackend } from '@angular/http/testing'
import { Http, BaseRequestOptions, Response, ResponseOptions } from '@angular/http'
import { BrowserModule, By } from "@angular/platform-browser";
import { ReactiveFormsModule } from '@angular/forms';
import { Observable } from 'rxjs/Rx'
import { TrackerService } from './tracker.service'


describe('tracker service', () => {

    let mockResponse, matchingItem, connection

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            providers: [
                TrackerService,
                MockBackend,
                BaseRequestOptions,
                {
                    provide: Http,
                    useFactory: (backend, defaultOptions) => new Http(backend, defaultOptions),
                    deps: [MockBackend, BaseRequestOptions]
                },
            ]
        });
        const items =
            [{
                "tracker": "2278474849", "task": 1, "agent": 1, "session": "2278474849-1-1"
            }
            ];
        mockResponse = new Response(new ResponseOptions({ body: items, status: 200 }));
    }));


    describe('getTrackerData', () => {
        //subscribe to connection and storing it later
        it('should return all items', inject([TrackerService, MockBackend], (service: TrackerService, backend: MockBackend) => {
            backend.connections.subscribe(connection => {
                connection.mockRespond(mockResponse);
            });
            service.getTrackerData() //{ "tracker": "2278474849", "task": 1, "agent": 1, "session": "2278474849-1-1"  }
                .subscribe((items: any => {
                   expect(this).toBe(2);
            }));

    })

});

I seem to be getting errors in the describe section , Problem is that I'm not used to writing javascript/angular unit test, along with mixing up a few examples in the project I'm on coupled with online examples.

Seems like what I want/need to do should be way simple , but yet I imported so many dependencies that this is now just confusing.

Anyone know what I need to do?

Answer 1

I've been testing services by getting the service instance from the getTestBed function. Try changing your inner describe block to:

describe('getTrackerData', () => {
    it('should return all items', (done) => {
        let service: TrackerService;
        let bed = getTestBed();

          backend.connections.subscribe(connection => {
              connection.mockRespond(mockResponse);
          });

          service = bed.get(TrackerService);

          service.getTrackerData()
              .subscribe((items: any => {
                 expect(this).toBe(2);
                 done();
          }));
})

Make sure to import getTestBed from '@angular/core/testing' . I'm also not sure you need any of these imports:

import { BrowserModule, By } from "@angular/platform-browser";
import { ReactiveFormsModule } from '@angular/forms';
import { Observable } from 'rxjs/Rx'