How do I set a Custom Header on an Angular HttpClientTestingModule Test?
In a few other posts I wrote about how to access custom headers in an Angular GET HTTP call and how to set custom headers in an Angular PUT or POST call.
But, how do I test those methods creating a custom header? It isn't hard.
Let's assume I'm trying to test code like this:
let mySavedCustomHeader;
makeServiceCall(): Observable<object | MyCustomClass> {
return this.http.get(`url`, { observe: 'response' })
map((response: HttpResponse<object>) => {
// save header
mySavedCustomHeader = response.headers.get('my-custom-header-name');
// other processing as needed
Object.assign(new MyCustomClass(), response.body)
return myCustomResponse;
})
}
There is a method, presumably on a service. It makes a service call to some service and passes in a configuration object that says "return the response. The result handler accesses the header object in order to get our custom header returned from the service. Then it does other processing. this should be relatively straight forward.
So, how do we test this?
First, set up your TestBed, be sure to load the HttpClientTestingModule:
let service, httpMock;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
HttpClientTestingModule
],
providers: [
MyCustomService,
]
}).compileComponents()
.then (() => {
service = TestBed.get(MyCustomService
httpMock = TestBed.get(HttpTestingController);
});
}));
This code saves the service and httpMock values for later use in our test.
Start the test:
it('should call REST Endpoint with custom header', () => {
// all our other code will go here
});
First thing we want to do is make the service method. It returns an Observable so we'll subscribe to it and add some tests.
service.makeServiceCall().subscribe((value) => {
expect(service.mySavedCustomHeader).toBe('something');
});
Inside the service result handle we check for the custom header value on the service and make sure it was set. The assertions inside the result handler will run as the last piece of this method, even though the come first. Nothing has triggered the result handler yet.
How look for the mock HTTP call
const request = httpMock.expectOne('url');
I'll often run some assertions on the requestt
expect(request.method).toEqual('get');
Now create an HTTPHeader object:
const HttpHeader = {}
HttpHeader['my-custom-header-name'] = 'something';
And finally, flush the HTTP call:
req.flush(SomeCustomObjectWeDidNotCreateHere, {
headers: new HttpHraders(HttpHeader)
});
And that should be all you need to pass your custom header to the from your test into your service code.
