jasmine

In Loklak search, it can be tricky to write tests for services as these services are customizable and not fixed. Therefore, we need to test every query parameter of the URL. Moreover, we need to test if service is parsing data in a correct manner and returns only data of type ApiResponse. In this blog here, we are going to see how to build different components for unit testing services. We will be going to test Search service in loklak search which makes Jsonp request to get the response from the loklak search.json API which are displayed as feeds on loklak search. We need to test if the service handles the response in a correct way and if the request parameters are exactly according to customization. Service to test Search service in loklak search is one of the most important component in the loklak search. SearchService is a class with a method fetchQuery() which takes parameter and sets up URL parameters for the search.json API of loklak. Now, it makes a JSONP request and maps the API response. The Method fetchQuery() can be called from other components with parameters query and lastRecord to get the response from the server based on a certain search query and the last record to implement pagination feature in loklak search. Now as the data is retrieved, a callback function is called to access the response returned by the API. Now, the response received from the server is parsed to JSON format data to extract data from the response easily. @Injectable() export class SearchService { private static readonly apiUrl: URL = new URL('https://api.loklak.org/api/search.json'); private static maximum_records_fetch = 20; private static minified_results = true; private static source = 'all'; private static fields = 'created_at,screen_name,mentions,hashtags'; private static limit = 10; private static timezoneOffset: string = new Date().getTimezoneOffset().toString();constructor( private jsonp: Jsonp ) { }// TODO: make the searchParams as configureable model rather than this approach. public fetchQuery(query: string, lastRecord = 0): Observable<ApiResponse> { const searchParams = new URLSearchParams(); searchParams.set('q', query); searchParams.set('callback', 'JSONP_CALLBACK'); searchParams.set('minified', SearchService.minified_results.toString()); searchParams.set('source', SearchService.source); searchParams.set('maximumRecords', SearchService.maximum_records_fetch.toString()); searchParams.set('timezoneOffset', SearchService.timezoneOffset); searchParams.set('startRecord', (lastRecord + 1).toString()); searchParams.set('fields', SearchService.fields); searchParams.set('limit', SearchService.limit.toString()); return this.jsonp.get(SearchService.apiUrl.toString(), { search: searchParams }) .map(this.extractData)}private extractData(res: Response): ApiResponse { try { return <ApiResponse>res.json(); } catch (error) { console.error(error); } } Testing the service Create a mock backend to assure that we are not making any Jsonp request. We need to use Mock Jsonp provider for this. This provider sets up MockBackend and wires up all the dependencies to override the Request Options used by the JSONP request. const mockJsonpProvider = { provide: Jsonp, deps: [MockBackend, BaseRequestOptions], useFactory: (backend: MockBackend, defaultOptions: BaseRequestOptions) => { return new Jsonp(backend, defaultOptions); } };   Now, we need to configure the testing module to isolate service from other dependencies. With this, we can instantiate services manually. We have to use TestBed for unit testing and provide all necessary imports/providers for creating and testing services in the unit test. describe('Service: Search', () => { let service: SearchService = null; let backend: MockBackend = null;…