预期的响应，状态为:null为URL无效:为null等于'Project11' [英] Expected Response with status: null null for URL: null to equal 'Project11'
本文介绍了预期的响应，状态为:null为URL无效:为null等于'Project11'的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用angular7并在茉莉花和业力中进行单元测试.而且我正面临错误-
错误:状态为预期的响应:null，URL为null:等于'Project11'.
我的软件包版本为-
"@ types/茉莉花":〜2.8.6"， "@ types/jasminewd2":〜2.0.3"， "@ types/jquery":"^ 3.3.22"， "@ types/node":〜8.9.4"， "codelyzer":〜4.2.1"， 茉莉花芯":〜2.99.1"， "jasmine-spec-reporter":〜4.2.1"， "karma":〜1.7.1"， "karma-chrome-launcher":〜2.2.0"， 业力报废的伊斯坦布尔记者":〜1.4.2"， 业力茉莉花":〜1.1.1"， "karma-jasmine-html-reporter":"^ 0.2.2"， 量角器":"^ 5.4.1"， "ts-node":〜5.0.1"， "tslint":〜5.9.1"， "typescript":〜3.1.3"
import { inject } from '@angular/core/testing';
import { MockBackend, MockConnection } from '@angular/http/testing';
import {
Http, HttpModule, XHRBackend, ResponseOptions,
Response, BaseRequestOptions
} from '@angular/http';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from '@angular/core';;
fdescribe('ProjectManagementComponent', () => {
let comp: ProjectManagementComponent;
let fixture: ComponentFixture<ProjectManagementComponent>;
let de: DebugElement;
let el: HTMLElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProjectManagementComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
imports: [HttpClientModule, RouterTestingModule, RouterModule, NgbModule, NgxPaginationModule, FormsModule, ReactiveFormsModule, BrowserModule,],
providers: [{ provide: ProjectManagementServiceStub, useClass: ProjectManagementServiceStub },
{ provide: ProductsService, useClass: ProductsService }, {
provide: HttpClient,Http, useFactory: (backend, options) => {
return new Http(backend, options);
},
deps: [MockBackend, BaseRequestOptions]
},
MockBackend,
BaseRequestOptions,ProjectManagementService
]
}) .compileComponents()
}));
beforeEach(async(() => {
fixture = TestBed.createComponent(ProjectManagementComponent);
comp = fixture.componentInstance;
fixture.nativeElement.querySelectorAll('button');
}));
it('should create component', () => {
fixture = TestBed.createComponent(ProjectManagementComponent);
comp = fixture.componentInstance;
expect(comp).toBeTruthy();
});
it('should get value of toEqual', async(inject([ProjectManagementServiceStub, MockBackend],
(service: ProjectManagementServiceStub, backend: MockBackend) => {
backend.connections.subscribe((conn: MockConnection) => {
const options: ResponseOptions = new ResponseOptions({ body: 'Project11' });
conn.mockRespond(new Response(options));
});
service.getProject("http://192.168.5.140:3002/api/project/").subscribe(res => {
console.log("Subscription called")
expect(res).toEqual('Project11')
})
})))
});
app.component.service.stub.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { config } from "config";
import { Observable } from "rxjs";
const baseUrl: string = config.url;
@Injectable()
export class ProjectManagementServiceStub {
constructor(private http: HttpClient) { }
getProject(url) :Observable<any>{
return this.http.get(url )
.pipe(map(Response => Response))
}
}
解决方案
@Stevy和Shashank，谢谢您的建议.我创建了一个单独的service.spec.ts文件，并像这样测试了该服务-
fdescribe('ProjectManagementServiceStub', () => {
let service: ProjectManagementServiceStub;
let httpMock: HttpTestingController;
beforeEach(()=>{
TestBed.configureTestingModule({ providers : [
ProjectManagementServiceStub] ,
imports: [HttpClientModule, HttpClientTestingModule,RouterTestingModule, RouterModule, NgbModule, NgxPaginationModule, FormsModule, ReactiveFormsModule, BrowserModule,]
,})
service = TestBed.get(ProjectManagementServiceStub);
httpMock = TestBed.get(HttpTestingController);
})
it("should be initialized ", inject([ProjectManagementServiceStub], (service1:ProjectManagementServiceStub)=>{
expect(service1).toBeTruthy();
}));
it("should fetch data asynchronously",
fakeAsync(
inject(
[ProjectManagementServiceStub, HttpTestingController],
(service1: ProjectManagementServiceStub, backend : HttpTestingController)=>{
const url = "http://192.168.x.xxx:3002/api/project/";
const responseObject :any[]= [{
projectId: "ID123",
name: 'Project1'
}]
let response = null;
service1.getProject().subscribe(
(receivedResponse : any) =>{
response = receivedResponse;
console.log("Response = ", response)
expect (response).toEqual(responseObject);
expect(receivedResponse.length).toBe(1);
},
(error: any) =>{}
);
const requestWrapper = backend.expectOne({url :"http://192.168.x.xxx:3002/api/project/" });
expect (requestWrapper.request.method). toEqual('GET');
expect(requestWrapper.cancelled).toBeFalsy();
requestWrapper.flush(responseObject)
}
)
))
afterEach(() => {
httpMock.verify();
});
});
courtsey- https://blog.knoldus. com/unit-testing-of-angular-service-with-httpclient/
https://alligator.io/angular/testing-httpclient/
I am using angular7 and doing unit testing in jasmine and karma. And I am facing error -
Error: Expected Response with status: null null for URL: null to equal 'Project11'.
My packages versions are -
"@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/jquery": "^3.3.22", "@types/node": "~8.9.4", "codelyzer": "~4.2.1", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~1.4.2", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "^5.4.1", "ts-node": "~5.0.1", "tslint": "~5.9.1", "typescript": "~3.1.3"
Testing - Can't resolve all parameters for (ClassName)
import { inject } from '@angular/core/testing';
import { MockBackend, MockConnection } from '@angular/http/testing';
import {
Http, HttpModule, XHRBackend, ResponseOptions,
Response, BaseRequestOptions
} from '@angular/http';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from '@angular/core';;
fdescribe('ProjectManagementComponent', () => {
let comp: ProjectManagementComponent;
let fixture: ComponentFixture<ProjectManagementComponent>;
let de: DebugElement;
let el: HTMLElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProjectManagementComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
imports: [HttpClientModule, RouterTestingModule, RouterModule, NgbModule, NgxPaginationModule, FormsModule, ReactiveFormsModule, BrowserModule,],
providers: [{ provide: ProjectManagementServiceStub, useClass: ProjectManagementServiceStub },
{ provide: ProductsService, useClass: ProductsService }, {
provide: HttpClient,Http, useFactory: (backend, options) => {
return new Http(backend, options);
},
deps: [MockBackend, BaseRequestOptions]
},
MockBackend,
BaseRequestOptions,ProjectManagementService
]
}) .compileComponents()
}));
beforeEach(async(() => {
fixture = TestBed.createComponent(ProjectManagementComponent);
comp = fixture.componentInstance;
fixture.nativeElement.querySelectorAll('button');
}));
it('should create component', () => {
fixture = TestBed.createComponent(ProjectManagementComponent);
comp = fixture.componentInstance;
expect(comp).toBeTruthy();
});
it('should get value of toEqual', async(inject([ProjectManagementServiceStub, MockBackend],
(service: ProjectManagementServiceStub, backend: MockBackend) => {
backend.connections.subscribe((conn: MockConnection) => {
const options: ResponseOptions = new ResponseOptions({ body: 'Project11' });
conn.mockRespond(new Response(options));
});
service.getProject("http://192.168.5.140:3002/api/project/").subscribe(res => {
console.log("Subscription called")
expect(res).toEqual('Project11')
})
})))
});
app.component.service.stub.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { config } from "config";
import { Observable } from "rxjs";
const baseUrl: string = config.url;
@Injectable()
export class ProjectManagementServiceStub {
constructor(private http: HttpClient) { }
getProject(url) :Observable<any>{
return this.http.get(url )
.pipe(map(Response => Response))
}
}
解决方案
@Stevy and Shashank, Thanks for your advice. I created a separate service.spec.ts file and tested the service like this -
fdescribe('ProjectManagementServiceStub', () => {
let service: ProjectManagementServiceStub;
let httpMock: HttpTestingController;
beforeEach(()=>{
TestBed.configureTestingModule({ providers : [
ProjectManagementServiceStub] ,
imports: [HttpClientModule, HttpClientTestingModule,RouterTestingModule, RouterModule, NgbModule, NgxPaginationModule, FormsModule, ReactiveFormsModule, BrowserModule,]
,})
service = TestBed.get(ProjectManagementServiceStub);
httpMock = TestBed.get(HttpTestingController);
})
it("should be initialized ", inject([ProjectManagementServiceStub], (service1:ProjectManagementServiceStub)=>{
expect(service1).toBeTruthy();
}));
it("should fetch data asynchronously",
fakeAsync(
inject(
[ProjectManagementServiceStub, HttpTestingController],
(service1: ProjectManagementServiceStub, backend : HttpTestingController)=>{
const url = "http://192.168.x.xxx:3002/api/project/";
const responseObject :any[]= [{
projectId: "ID123",
name: 'Project1'
}]
let response = null;
service1.getProject().subscribe(
(receivedResponse : any) =>{
response = receivedResponse;
console.log("Response = ", response)
expect (response).toEqual(responseObject);
expect(receivedResponse.length).toBe(1);
},
(error: any) =>{}
);
const requestWrapper = backend.expectOne({url :"http://192.168.x.xxx:3002/api/project/" });
expect (requestWrapper.request.method). toEqual('GET');
expect(requestWrapper.cancelled).toBeFalsy();
requestWrapper.flush(responseObject)
}
)
))
afterEach(() => {
httpMock.verify();
});
});
courtsey - https://blog.knoldus.com/unit-testing-of-angular-service-with-httpclient/
https://alligator.io/angular/testing-httpclient/
这篇关于预期的响应，状态为:null为URL无效:为null等于'Project11'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
