admin管理员组

文章数量:1323715

I am trying to create a test case for a service in angular6. The service has a bunch of different http request methods (get, put, post etc) and within them an API call is made which fetches the appropriate response. I'm trying to create the test cases where a mock http request is made and a response is returned. However, I have followed a Tutorial which apparently helps me do exactly what I want.

However, when I run the test case for the service it gives me the following error (I've censored the URL in GET for privacy purposes:

Error: Expected no open requests, found 1: GET 
    at HttpClientTestingBackend.push../node_modules/@angular/mon/fesm5/http/testing.js.HttpClientTestingBackend.verify (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/mon/fesm5/http/testing.js:326:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/Services/adapter.service.spec.ts:22:13)
    at TestBed.push../node_modules/@angular/core/fesm5/testing.js.TestBed.execute (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:1073:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:1224:29)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:388:1)
    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:288:1)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:387:1)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:138:1)
    at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:509:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:524:1)

I've tried browsing through This solution as well as This one, but to no avail.

Here is the code for my service:

import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import {
  HttpHeaders,
    HttpClient,
    HttpParams,
} from '@angular/mon/http';
import { Request, RequestOptions, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { JwtService } from './jwt.service';

const API_URL = environment.api.host;

@Injectable({
    providedIn: 'root'
})
export class AdapterService {

    constructor(private http: HttpClient, private jwtService: JwtService) {}

    private formatErrors(self: AdapterService) {
        return (res: Response) => {
            return Observable.throw(res);
        };
    }

    private requestHeaders(path: string) {
    let headers;
    if (path !== 'oauth2/token') {
        headers = new HttpHeaders({
          'Accept':  'application/json',
          'Oauth-Token': this.jwtService.getToken()
        })
      }
        return headers;
    }

    get(path: string, params: HttpParams = new HttpParams()): Observable < any > {
    let headers = this.requestHeaders(path);
        return this.http.get(`${API_URL}${path}`, { headers })
            .catch(catchError(this.formatErrors(this)));
    }

    put(path: string, body: Object = {}): Observable < any > {
        return this.http.put(
            `${API_URL}${path}`,
            JSON.stringify(body),
        ).catch(catchError(this.formatErrors(this)));
    }

    post(path: string, body: Object = {}): Observable < any > {
    return this.http.post(
            `${API_URL}${path}`,
            JSON.stringify(body),
        ).catch(catchError(this.formatErrors(this)));
    }

    delete(path): Observable < any > {
    return this.http.delete(
            `${API_URL}${path}`,
        ).catch(catchError(this.formatErrors(this)));
    }
}

The Test Case:

import { TestBed, async, inject } from '@angular/core/testing';
import { HttpClientModule, HttpRequest, HttpParams } from '@angular/mon/http';
import { HttpClientTestingModule, HttpTestingController } from '@angular/mon/http/testing';

import { AdapterService } from './adapter.service';

describe('AdapterService', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientModule,
        HttpClientTestingModule
      ],
      providers: [
        AdapterService
      ]
    });
  });

  afterEach(inject([HttpTestingController], (backend: HttpTestingController) => {
    backend.verify();
  }));

  it('should send a valid get request for token', async(inject([AdapterService, HttpTestingController],
    (service: AdapterService, backend: HttpTestingController) => {
      service.get('oauth2/token').subscribe((next)=>{
        expect(next).toBeDefined();
      });
    })));
//  it('')
});

I am trying to create a test case for a service in angular6. The service has a bunch of different http request methods (get, put, post etc) and within them an API call is made which fetches the appropriate response. I'm trying to create the test cases where a mock http request is made and a response is returned. However, I have followed a Tutorial which apparently helps me do exactly what I want.

However, when I run the test case for the service it gives me the following error (I've censored the URL in GET for privacy purposes:

Error: Expected no open requests, found 1: GET https://staging.xxxxxxxxxx.co.uk/rest/v11_1/oauth2/token
    at HttpClientTestingBackend.push../node_modules/@angular/mon/fesm5/http/testing.js.HttpClientTestingBackend.verify (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/mon/fesm5/http/testing.js:326:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/Services/adapter.service.spec.ts:22:13)
    at TestBed.push../node_modules/@angular/core/fesm5/testing.js.TestBed.execute (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:1073:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:1224:29)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:388:1)
    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:288:1)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:387:1)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:138:1)
    at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:509:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:524:1)

I've tried browsing through This solution as well as This one, but to no avail.

Here is the code for my service:

import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import {
  HttpHeaders,
    HttpClient,
    HttpParams,
} from '@angular/mon/http';
import { Request, RequestOptions, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { JwtService } from './jwt.service';

const API_URL = environment.api.host;

@Injectable({
    providedIn: 'root'
})
export class AdapterService {

    constructor(private http: HttpClient, private jwtService: JwtService) {}

    private formatErrors(self: AdapterService) {
        return (res: Response) => {
            return Observable.throw(res);
        };
    }

    private requestHeaders(path: string) {
    let headers;
    if (path !== 'oauth2/token') {
        headers = new HttpHeaders({
          'Accept':  'application/json',
          'Oauth-Token': this.jwtService.getToken()
        })
      }
        return headers;
    }

    get(path: string, params: HttpParams = new HttpParams()): Observable < any > {
    let headers = this.requestHeaders(path);
        return this.http.get(`${API_URL}${path}`, { headers })
            .catch(catchError(this.formatErrors(this)));
    }

    put(path: string, body: Object = {}): Observable < any > {
        return this.http.put(
            `${API_URL}${path}`,
            JSON.stringify(body),
        ).catch(catchError(this.formatErrors(this)));
    }

    post(path: string, body: Object = {}): Observable < any > {
    return this.http.post(
            `${API_URL}${path}`,
            JSON.stringify(body),
        ).catch(catchError(this.formatErrors(this)));
    }

    delete(path): Observable < any > {
    return this.http.delete(
            `${API_URL}${path}`,
        ).catch(catchError(this.formatErrors(this)));
    }
}

The Test Case:

import { TestBed, async, inject } from '@angular/core/testing';
import { HttpClientModule, HttpRequest, HttpParams } from '@angular/mon/http';
import { HttpClientTestingModule, HttpTestingController } from '@angular/mon/http/testing';

import { AdapterService } from './adapter.service';

describe('AdapterService', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientModule,
        HttpClientTestingModule
      ],
      providers: [
        AdapterService
      ]
    });
  });

  afterEach(inject([HttpTestingController], (backend: HttpTestingController) => {
    backend.verify();
  }));

  it('should send a valid get request for token', async(inject([AdapterService, HttpTestingController],
    (service: AdapterService, backend: HttpTestingController) => {
      service.get('oauth2/token').subscribe((next)=>{
        expect(next).toBeDefined();
      });
    })));
//  it('')
});
Share Improve this question edited Nov 28, 2018 at 13:15 Muhammad Hamza asked Nov 28, 2018 at 12:10 Muhammad HamzaMuhammad Hamza 9132 gold badges19 silver badges47 bronze badges 2
  • 1 just add an answer to your own question, it's perfectly accepted in stackoverflow and it may help someone else facing the same problem in the future. – yms Commented Nov 28, 2018 at 12:42
  • Alright, will do, thanks! – Muhammad Hamza Commented Nov 28, 2018 at 13:13
Add a ment  | 

1 Answer 1

Reset to default 7

SOLVED I forgot to add an expectOne request for the API call within the test case:

backend.expectOne( API_URL + 'oauth2/token').flush(null, { status: 200, statusText:'Ok' });

A very naive observation, apologies for the inconvenience.

本文标签: javascriptError Expected no open requestsfound 1 (Angular)Stack Overflow