angular 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();
}
);
});
我收到错误，我在互联网上找不到任何解决方案，因为我不熟悉 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:../../../../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"
}
]
推荐答案
如果我的回答不如上一个完整，我很抱歉，但我正在打电话.如果你需要更多的解释，周一通知我，我会有一台电脑来帮助你.
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();
瞧！
这篇关于angular httpClientTestingModule httpMock 给出错误:找到 2 个请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
