Error this.http.post is not a function with Jasmine

huangapple
go评论90阅读模式
英文:

Error this.http.post is not a function with Jasmine

问题

以下是您要翻译的部分：

I just started testing my software with Jasmine and Karma (haven't done any unit testing not E2E yet so I'm just a newbie here).

What I have been asked to do is to create a generic API service that you call every time you need to make an HTTP request, in order to avoid repeating code and making programming faster. I show you what I already have:

api.service.ts

  1. import { HttpClient, HttpContext, HttpParams } from '@angular/common/http'
  2. import { Injectable } from '@angular/core'
  3. import { Observable } from 'rxjs'
  5. @Injectable({
  6.   providedIn: 'root'
  7. })
  8. export class ApiService {
  9.   headers: ApiRequests = {
  10.     httpHeaderAccept: 'application/json',
  11.     context: new HttpContext(),
  12.     params: new HttpParams()
  13.   }
  15.   constructor(private _http: HttpClient) {}
  17.   post<T>(url: string, body: object): Observable<T> {
  18.     return this._http.post<T>(url, body, { ...this.headers })
  19.   }
  20. }

I do not show the rest of the HTTP methods because they are very similar, POST will do the trick here.

And now this is my .spec.ts file:

  1. import { HttpClient } from '@angular/common/http'
  2. import { TestBed } from '@angular/core/testing'
  3. import { of } from 'rxjs'
  4. import { ApiService } from './api.service'
  6. describe('ApiService', () => {
  7.   let service: ApiService
  8.   let httpClientSpyPost: {
  9.     post: jasmine.Spy
  10.   }
  12.   beforeEach(() => {
  13.     TestBed.configureTestingModule({
  14.       providers: [
  15.         ApiService,
  16.         { provide: HttpClient, useValue: httpClientSpyPost }
  17.       ]
  18.     })
  19.     service = TestBed.inject(ApiService)
  20.     httpClientSpyPost = jasmine.createSpyObj('HttpClient', ['post'])
  21.   })
  23.   it('should be created', () => {
  24.     expect(service).toBeTruthy()
  25.   })
  27.   it('(POST) -> should return a response with a body', (done: DoneFn) => {
  28.     const body = {}
  29.     const expectedResponse = {}
  30.     httpClientSpyPost.post.and.returnValue(of(expectedResponse))
  31.     service.post('url', body).subscribe((response) => {
  32.       expect(response).toEqual(expectedResponse)
  33.       done()
  34.     })
  35.   })
  36. })

And this is the error Jasmine is throwing me:

  1. TypeError: this._http.post is not a function

I don't really know what it does really mean and I think I've set up everything correct and tried some things I've read here.

英文:

I just started testing my software with Jasmine and Karma (haven't done any unit testing not E2E yet so I'm just a newbie here).

What I have been asked to do is to create a generic API service that you call everytime you need to make an HTTP request, in order to avoid repeating code and making programming faster. I show you what I already have:

api.service.ts

  1. import { HttpClient, HttpContext, HttpParams } from &#39;@angular/common/http&#39;
  2. import { Injectable } from &#39;@angular/core&#39;
  3. import { Observable } from &#39;rxjs&#39;
  5. @Injectable({
  6.   providedIn: &#39;root&#39;
  7. })
  8. export class ApiService {
  9.   headers: ApiRequests = {
  10.     httpHeaderAccept: &#39;application/json&#39;,
  11.     context: new HttpContext(),
  12.     params: new HttpParams()
  13.   }
  15.   constructor(private _http: HttpClient) {}
  17.   post&lt;T&gt;(url: string, body: object): Observable&lt;T&gt; {
  18.     return this._http.post&lt;T&gt;(url, body, { ...this.headers })
  19.   }
  20. }

I do not show the rest of the HTTP methods because they are very similar, POST will do the trick here.

And now this is my .spec.ts file:

  1. import { HttpClient } from &#39;@angular/common/http&#39;
  2. import { TestBed } from &#39;@angular/core/testing&#39;
  3. import { of } from &#39;rxjs&#39;
  4. import { ApiService } from &#39;./api.service&#39;
  6. describe(&#39;ApiService&#39;, () =&gt; {
  7.   let service: ApiService
  8.   let httpClientSpyPost: {
  9.     post: jasmine.Spy
  10.   }
  12.   beforeEach(() =&gt; {
  13.     TestBed.configureTestingModule({
  14.       providers: [
  15.         ApiService,
  16.         { provide: HttpClient, useValue: httpClientSpyPost }
  17.       ]
  18.     })
  19.     service = TestBed.inject(ApiService)
  20.     httpClientSpyPost = jasmine.createSpyObj(&#39;HttpClient&#39;, [&#39;post&#39;])
  21.   })
  23.   it(&#39;should be created&#39;, () =&gt; {
  24.     expect(service).toBeTruthy()
  25.   })
  27.   it(&#39;(POST) -&gt; should return a response with a body&#39;, (done: DoneFn) =&gt; {
  28.     const body = {}
  29.     const expectedResponse = {}
  30.     httpClientSpyPost.post.and.returnValue(of(expectedResponse))
  31.     service.post(&#39;url&#39;, body).subscribe((response) =&gt; {
  32.       expect(response).toEqual(expectedResponse)
  33.       done()
  34.     })
  35.   })
  36. })

And this is the error Jasmine is throwing me:

  1. TypeError: this._http.post is not a function

I don't really know what it does really mean and I think I've set up everything correct and tried some things I've read here.

答案1

得分: 1

  1. import { HttpClient } from '@angular/common/http'
  2. import { TestBed } from '@angular/core/testing'
  3. import { of } from 'rxjs'
  4. import { ApiService } from './api.service'
  6. describe('ApiService', () => {
  7.   let service: ApiService
  8.   let httpClientSpyPost: {
  9.     post: jasmine.Spy
  10.   }
  12.   beforeEach(() => {
  13.     httpClientSpyPost = jasmine.createSpyObj('HttpClient', ['post'])
  15.     TestBed.configureTestingModule({
  16.       providers: [
  17.         ApiService,
  18.         { provide: HttpClient, useValue: httpClientSpyPost }
  19.       ]
  20.     })
  21.     service = TestBed.inject(ApiService)
  22.   })
  24.   it('should be created', () => {
  25.     expect(service).toBeTruthy()
  26.   })
  28.   it('(POST) -> should return a response with a body', (done: DoneFn) => {
  29.     const body = {}
  30.     const expectedResponse = {}
  31.     httpClientSpyPost.post.and.returnValue(of(expectedResponse))
  32.     service.post('url', body).subscribe((response) => {
  33.       expect(response).toEqual(expectedResponse)
  34.       done()
  35.     })
  36.   })
  37. })

这是您提供的代码的翻译部分。

英文: 
  1. import { HttpClient } from &#39;@angular/common/http&#39;
  2. import { TestBed } from &#39;@angular/core/testing&#39;
  3. import { of } from &#39;rxjs&#39;
  4. import { ApiService } from &#39;./api.service&#39;
  6. describe(&#39;ApiService&#39;, () =&gt; {
  7.   let service: ApiService
  8.   let httpClientSpyPost: {
  9.     post: jasmine.Spy
  10.   }
  12.   beforeEach(() =&gt; {
  13.     httpClientSpyPost = jasmine.createSpyObj(&#39;HttpClient&#39;, [&#39;post&#39;])
  15.     TestBed.configureTestingModule({
  16.       providers: [
  17.         ApiService,
  18.         { provide: HttpClient, useValue: httpClientSpyPost }
  19.       ]
  20.     })
  21.     service = TestBed.inject(ApiService)
  22.   })
  24.   it(&#39;should be created&#39;, () =&gt; {
  25.     expect(service).toBeTruthy()
  26.   })
  28.   it(&#39;(POST) -&gt; should return a response with a body&#39;, (done: DoneFn) =&gt; {
  29.     const body = {}
  30.     const expectedResponse = {}
  31.     httpClientSpyPost.post.and.returnValue(of(expectedResponse))
  32.     service.post(&#39;url&#39;, body).subscribe((response) =&gt; {
  33.       expect(response).toEqual(expectedResponse)
  34.       done()
  35.     })
  36.   })
  37. })

Try assign httpClientSpyPost before TestBed being configured. It looks like you passing undefined value and later on your assign don't have effect.

答案2

得分: 1

Probably due to the service being created with the initialized spy object injected into it.

Initialize the spy object before the service = line or even safer before the call to configureTestModule:

  1. httpClientSpyPost = jasmine.createSpyObj('HttpClient', ['post'])
  2. TestBed.configureTestingModule(
  3. ...
英文:

Probably due to the service being created with the initialized spy object injected into it.

Initialize the spy object before the service = line or even safer before the call to configureTestModule:

  1. httpClientSpyPost = jasmine.createSpyObj(&#39;HttpClient&#39;, [&#39;post&#39;])
  2. TestBed.configureTestingModule(
  3. ...

huangapple
  • 本文由 发表于 2023年2月24日 16:07:30
  • 转载请务必保留本文链接：https://go.coder-hub.com/75554006.html
  • angular
  • jasmine
  • testing
  • unit-testing
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定