In this blog, I’ll be sharing how we are testing services which we are using in Susper development.We’re using Angular 4 in our project as tech stack and we use Jasmine for testing purpose.
Tests are written to avoid issues which occur again and again. For example: Since we have implemented knowledge graph, we faced a lot of issues like:
- When a user enters a query, search results appear but knowledge graph does not appear.
- When a fresh query is entered or page is refreshed, knowledge graph does not appear.
- The API which we have used is not responding.
We overcome this issue by writing test. The data is being taken with the help of an API. So, it will require testing using HTTP. Instead of testing like this, there is a better way by using MockBackend.
Testing with MockBackend is a more sensible approach. This allows us to mock our responses and avoid hitting the actual backend which results in boosting our testing.
To use the MockBackend feature, it requires creating a mock. For knowledge-service it looks like this:
results: {
uri: ‘http://dbpedia.org/resource/Berlin’,
label: ‘Berlin’,
}
MaxHits: 5
};
To use the MockBackend feature, import MockBackend, MockConnection, BaseRequestOptions and MockKnowledgeApi.
import { MockKnowledgeApi } from ‘./shared/mock-backend/knowledge.mock’;
import { BaseRequestOptions } from ‘@angular/http’;
Create a mock setup. In this case, we will create mock setup w.r.t HTTP because data from API is being returned as HTTP. If data, is being returned in JSON format, create a mock setup w.r.t jsonp.
provide: Http,
deps: [MockBackend, BaseRequestOptions],
useFactory: (backend: MockBackend,options: BaseRequestOptions) => {
return new Http(backend, options);
}
};
Now, describe the test suite. Inside, describe the function, don’t import MockConnection. It will throw error since it is only used to create a fake backend. It should look like this:
KnowledgeapiService,
MockBackend,
BaseRequestOptions,
mockHttp_provider,
]
The written specs should look like this. I won’t go much in detail here, but I’ll cover up the key points of code.
backend.connections.subscribe((connection: MockConnection) => {
const options = new ResponseOptions({
body: JSON.stringify(MockKnowledgeApi)
});connection.mockRespond(new Response(options));
expect(connection.request.method).toEqual(RequestMethod.Get);
});
It should have a link to API and should be equal to searchquery which we have defined already as ‘Berlin’.
`http://lookup.dbpedia.org/api/search/KeywordSearch` +
`?&QueryString=${searchquery}`
);
At last, it will check if it’s working or not. If it’s working, then test case will pass. Please note, it will not hit the actual backend.
expect(res).toEqual(MockKnowledgeApi);
);