mercredi 27 juillet 2016

Unit testing Angular 2 component that subscribes to a service class

I have an Angular 2 component called OnlineReturn, it looks like the following...

@Component({
    selector: 'online-return',
    templateUrl: 'views/OnlineReturnEligibility.html',
    directives:[ReturnStarted],
    providers: [craService]
})

The class that uses this component is as follows...

export class OnlineReturn implements OnInit{
   constructor (private _cra : craService){}
//Fields and methods omitted.
   submitClicked(){
        let order = new Order();
        order.emailId = this.email;
        this._cra.postAggDetails(order, this.vendors, this.email).subscribe(
            data => this.goodCra(data.json()),
            err => this.badCra(err)
        );
    }
}

Essentially, I am subsciring to a method in the service provider that takes an observable and returns a response JSON object. The service looks like this:

@Injectable()
export class craService{
    postAggDetails(order : Order, shipments: Array<Shipment>, email : string):Observable<any>{
    let order_json = this.buildAggRequest(order, shipments);
    if (this.hardcoded && email == "success@test.com"){
        return this._http.get('./app/apiresponse/second_agg/SuccessResponse.json');
    }
    if (this.hardcoded && email == "failure@test.com"){
        return this._http.get('./app/apiresponse/second_agg/ErrorResponse.json');
    }
    else {return this._http.get('./app/apiresponse/second_agg/SuccessResponse.json');}
}

I want to unit test the submitClicked() method in the component using Jasmine. The problem is that right now the service is simply returning hard-coded responses, but eventually once the API endpoint is online, I will be returning responses from the API.

I'm not sure this matters however. Ultimately, I want to control what JSON is returned for the unit tests, and simulate different http response codes to trigger the success or error handlers in Angular. I know of using the mockBackend to test the service call itself and return Response objects, but how do I do this with the component call to the service? Perhaps I need to inject a mockService into the component?

I am over-thinking this, but my test keeps saying subscribe is undefined. I have tried the following in Jasmine...

describe('Testing the service calls in the component', () =>{
    beforeEachProviders(() => {
        return [HTTP_PROVIDERS, provide(XHRBackend, {useClass: MockBackend}), OnlineReturn, craService];
    });

    it('should make successful call to the service when submit button clicked', inject([XHRBackend, ssrOnlineReturn, craService], (mockBackend, comp, serv) =>{
        comp.email = "failure@hd.com";
        comp.vendors.push(build_shipment());

        mockBackend.connections.subscribe(
            (connection: MockConnection) => {
                connection.mockRespond(new Response(
                    new ResponseOptions({
                            body: secondAggFailure
                        }
                    )));
            });

        comp.submitClicked().subscribe((res) => {
            expect(res).toEqual(secondAggFailure);
        });
    }));
});

Any help would be greatly appreciated!

Aucun commentaire:

Enregistrer un commentaire