角度httpClientTestingModule httpMock提供错误:找到2个请求 [英] angular httpClientTestingModule httpMock giving error: found 2 requests
问题描述
我已经编写了第一个测试来测试服务等级:
I have written first test to test service class:
服务类别:
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import {IComment} from "../../models/comments";
import {Observable} from "rxjs/observable";
import { mergeMap } from 'rxjs/operators';
@Injectable()
export class CommentsDataService {
public _url:string = "../../../../assets/json/comments.json";
constructor(private http: HttpClient) { }
/**
* Return Sample json for
* Comment listing.
* @returns {json)
*/
getComments():Observable<IComment>
{
return this.http.get<IComment>(this._url)
}
/**
*
* @param commentObj
*/
saveComment(commentObj){
console.log(commentObj);
}
}
规格文件:
import { async, ComponentFixture, TestBed,fakeAsync, tick, inject } from '@angular/core/testing';
import { HttpClientModule, HttpClient, HttpEvent, HttpEventType} from '@angular/common/http';
import { Component,DebugElement} from "@angular/core";
import 'reflect-metadata';
import {By} from "@angular/platform-browser";
import { FormsModule } from '@angular/forms';
import {of} from 'rxjs/observable/of';
import { ListCommentsComponent } from './list-comments.component';
import {CommentsDataService} from '../../services/comments/comments-data.service'
// import {BaseRequestOptions, RequestOptions,Http, ResponseOptions} from '@angular/http';
// import {MockBackend} from "@angular/http/testing";
import {HttpClientTestingModule,HttpTestingController} from '@angular/common/http/testing';
import { Observable } from 'rxjs/Observable';
describe('ListCommentsComponent', () => {
let component: ListCommentsComponent;
let fixture: ComponentFixture<ListCommentsComponent>;
let debugElement:DebugElement;
let htmlElement:HTMLElement;
let addCommentBtn:DebugElement;
let httpMock: HttpTestingController;
let commentService:CommentsDataService;
// let service: CommentsDataService;
// let backend: MockBackend;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ FormsModule, HttpClientModule, HttpClientTestingModule],
declarations: [ ListCommentsComponent ],
providers: [
CommentsDataService
// MockBackend,
// BaseRequestOptions,
// {
// provide: Http,
// useFactory: (backend, options) => new Http(backend, options),
// deps: [MockBackend, BaseRequestOptions]
// }
]
// providers:[HttpClientModule, HttpClient]
})
.compileComponents();
httpMock = TestBed.get(HttpTestingController);
commentService = TestBed.get(CommentsDataService);
/*
// Get the MockBackend
backend = TestBed.get(MockBackend);
// Returns a service with the MockBackend so we can test with dummy responses
service = TestBed.get(CommentsDataService);
*/
}));
beforeEach(() => {
fixture = TestBed.createComponent(ListCommentsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
fit('should have a defined component', () => {
expect(component).toBeDefined();
});
fit(
'should return comments',() => {
const mockComments = [
{
"id": "123",
"root_id": "234",
"target_id": "2",
"object": "Nice!",
"actor": "user:123",
"time_stamp": "2 min ago",
"profile_image": "/../../assets/images/no-user.png",
"first_name": "john",
"comment": [
{
"id": "124",
"root_id": "234",
"target_id": "3",
"object": "Well!!",
"actor": "user:123",
"time_stamp": "2 min ago",
"first_name": "john",
"profile_image": "/../../assets/images/no-user.png"
},
{
"id": "125",
"root_id": "234",
"target_id": "3",
"object": "Great!",
"actor": "user:125",
"time_stamp": "2 min ago",
"first_name": "john",
"profile_image": "/../../assets/images/no-user.png"
}
]
},
];
commentService.getComments().subscribe((comments) => {
expect(comments).toBe('json');
expect(comments).toContain('comments');
});
const mockReq = httpMock.expectOne(commentService._url);
// expect(mockReq.cancelled).toBeFalsy();
expect(mockReq.request.method).toEqual('GET');
mockReq.flush(mockComments);
httpMock.verify();
}
);
});
我遇到了错误，我在Internet上找不到任何解决方案，而且我不熟悉 httpClientTestingModule 的实际工作方式以及什么 这些代码行意味着我无法调试或理解该错误，因此变得无能为力.
I am getting error for which I have not find any solution on internet and as I am not familiar with how httpClientTestingModule actually work and what These line of code means I am not able to debug or understand the error and hence helpless.
commentService.getComments().subscribe((comments) => {
expect(comments).toBe('json');
expect(comments).toContain('comments');
});
const mockReq = httpMock.expectOne(commentService._url);
// expect(mockReq.cancelled).toBeFalsy();
expect(mockReq.request.method).toEqual('GET');
mockReq.flush(mockComments);
httpMock.verify();
错误:
错误:预期对标准匹配URL:1个匹配请求: ../../../../assets/json/comments.json，发现2个请求.
Error: Expected one matching request for criteria "Match URL: ../../../../assets/json/comments.json", found 2 requests.
我在服务文件中向其请求的
Comments.json文件:
Comments.json file to which I am making request in service file:
[{ "id":"123",
"root_id":"234",
"target_id": "2",
"object":"Nice!",
"actor":"user:123",
"time_stamp": "2 min ago",
"profile_image":"/../../assets/images/no-user.png",
"first_name" : "john",
"comment":[
{
"id": "124",
"root_id":"234",
"target_id":"3",
"object":"Well!!",
"actor":"user:123",
"time_stamp": "2 min ago",
"first_name" : "john",
"profile_image":"/../../assets/images/no-user.png"
},
{
"id": "125",
"root_id":"234",
"target_id":"3",
"object":"Great!",
"actor":"user:125",
"time_stamp":"2 min ago",
"first_name" : "john",
"profile_image":"/../../assets/images/no-user.png"
}
]
},
{
"id":"126",
"root_id":"234",
"target_id": "2",
"object":"Super.",
"actor":"user:124",
"time_stamp": "2 min ago",
"first_name" : "Jill",
"profile_image":"/../../assets/images/no-user.png",
"comment":[
{
"id": "234",
"root_id":"234",
"target_id":"",
"object":"Cool.",
"actor":"user:123",
"first_name" : "john",
"profile_image":"/../../assets/images/no-user.png"
},
{
"id": "236",
"root_id":"234",
"target_id":"3",
"object":"hiii.",
"actor":"user:123",
"first_name" : "jack",
"profile_image":"/../../assets/images/no-user.png"
}
]
}, {
"id":"345",
"root_id":"234",
"target_id": "12",
"object":"Interesting.",
"actor":"user:124",
"time_stamp": "2 min ago",
"first_name" : "john",
"profile_image":"/../../assets/images/no-user.png"
}, {
"id":"444",
"root_id":"234",
"target_id": "12",
"actor":"user:125",
"object":"Cool.",
"time_stamp": "2 min ago",
"first_name" : "Simon",
"profile_image":"/../../assets/images/no-user.png"
},
{
"id":"567",
"root_id":"234",
"target_id": "12",
"object":"Last Comment..",
"actor":"user:125",
"time_stamp": "2 min ago",
"first_name" : "jack",
"profile_image":"/../../assets/images/no-user.png"
}
]
推荐答案
很抱歉，我的回答不如上一个完整，但我正在打电话.如果您需要更多说明，请在周一通知我，il将会有一台计算机为您提供帮助.
I'm sorry if my answer is not as complete as the previous one, but I am on phone. If you need more explanation, notify me on Monday, il will have a computer to help you.
我可以在这里看到您正在测试组件.
I can see here that you're testing a component.
在单元测试中，您应该测试正在使用的功能.由于http调用是由您的服务进行的，因此您应该在服务的测试中(而不是在组件中)测试它们是否正确.
In unit testing, you are supposed to test the feature you're on. Since the http calls are made by your service, you should test if they are correct in the tests of your service, not in your component.
这意味着在组件中，您仅测试是否调用了正确的服务方法.这是通过使用茉莉花间谍来完成的.
This means that in your component, you only test if the correct method of your service is called. This is done by using jasmine spies.
这也意味着您可以模拟您的服务.如果您模拟服务，则不必模拟其依赖关系，因为您将提供一个没有依赖关系的简单对象.
This also means that you can mock your service. If you mock your service, you won't have to mock its dependencies, because you will provide a simple object that has no dependency.
要模拟服务，您需要向模拟提供您在组件中使用的所有属性.据我所知，您只使用getComments，所以让我们来模拟一下:
To mock a service, you will need to provide all the properties you are using in your component to your mock. From what I see, you only use getComments, so let's mock :
const serviceMock = {
provide: YourServiceName,
useValue: {
getComments: () => Observable.of(null)
}
};
这是模拟的格式.它必须遵守一些条件:
This is the format of a mock. It must respect some conditions :
- 如前所述，它必须包含所有使用的属性. 这些属性必须具有相同的签名.在这里，
getComments是一个返回可观察到的注释的函数(每种类型都为null)，就像在服务中一样.
- as said previously, it must contain all of the properties used.
- those properties must have the same signature. Here,
getCommentsis a function that returns an observable of comments (null is every type), just like in your service.
现在，您可以将此模拟程序放入测试床了:
Now, you can put this mock into your test bed :
providers: [serviceMock]
获取服务实例的逻辑与我在上一个问题中解释的相同.
The logic to get the service instance is the same I explained in your previous question.
现在，您可以编写一个测试，检查组件是否正确调用了服务！您只需要做一个间谍，调用您的组件函数，然后期望即可.
Now, you can write a test that checks if the component is calling the service correctly ! You just have to make a spy, call your component function, and expect.
spyOn(serviceInstance, 'getComments').and.callThrough(); // use returnValue(Observable.of(commentsMock)) instead of callThrough() if you want to test your logic made on the value returned by the function
component.functionCall();
expect(serviceInstance.getComments).toHaveBeenCalled();
瞧瞧！
这篇关于角度httpClientTestingModule httpMock提供错误:找到2个请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
