How to mock http requests like Angular does as web


#1

Hi guys! Is it possible to mock http requests data in NS + Angular?

I’m mean, I want to make it into the application, not in only tests.
I think it’s not, how can I suggest it to NS team? :nativescript::a::eyes:

I see it in Angular as web using in-memory-web-api feature.


#2

I don’t see why you can’t use the same package in Nativescript app?


#3

I thought before testing someone could tell me that it is a feature independent of LocalStorage or something specific to the web platform.

I mean, I think using memory data is different on the mobile platform. :eyes:

Edit - I’m trying to do that right now

In my app.module.ts I imported “pure” Angular dependencies and NativeScript as well:

import {NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
import {NativeScriptModule} from 'nativescript-angular/nativescript.module';

// import {NativeScriptHttpModule} from "nativescript-angular/http";
import {HttpClientModule} from '@angular/common/http';
import {HttpClientInMemoryWebApiModule} from 'angular-in-memory-web-api';

// ... another dependencies - it is working fine.

import {InMemDataService} from './share/InMemDataService';

// ... my components imports - it is working fine.
import {AppComponent} from './app.component';

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  imports: [
    NativeScriptModule,
    // NativeScriptHttpModule,
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(InMemDataService),
    // ... another module's import.
  ],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

Compile error output:

ActivityManager: Start proc 6912:org.nativescript.myProject/u0a90 for activity org.nativescript.myProject/com.tns.NativeScriptActivity

System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: 
System.err: Error calling module function 
System.err: Error calling module function 
System.err: Error calling module function 
System.err: Error calling module function 
System.err: Error calling module function 
System.err: Error calling module function 
System.err: Error calling module function 
System.err: Error calling module function 
System.err: Error calling module function 
System.err: Error calling module function 
System.err: Error calling module function 
System.err: TypeError: document.createElement is not a function
System.err: File: "file:///data/data/org.nativescript.myProject/files/app/tns_modules/rxjs/util/Immediate.js, line: 56, column: 68
System.err: StackTrace: 
System.err: 	Frame: function:'ImmediateDefinition.canUseReadyStateChange', file:'file:///data/data/org.nativescript.myProject/files/app/tns_modules/rxjs/util/Immediate.js', line: 56, column: 69
System.err: 	Frame: function:'ImmediateDefinition', file:'file:///data/data/org.nativescript.myProject/files/app/tns_modules/rxjs/util/Immediate.js', line: 30, column: 27
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.myProject/files/app/tns_modules/rxjs/util/Immediate.js', line: 208, column: 21
System.err: 	Frame: function:'require', file:'', line: 1, column: 266
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.myProject/files/app/tns_modules/rxjs/scheduler/AsapAction.js', line: 7, column: 19
System.err: 	Frame: function:'require', file:'', line: 1, column: 266
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.myProject/files/app/tns_modules/rxjs/scheduler/asap.js', line: 2, column: 20
System.err: 	Frame: function:'require', file:'', line: 1, column: 266
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.myProject/files/app/tns_modules/rxjs/observable/SubscribeOnObservable.js', line: 8, column: 14
System.err: 	Frame: function:'require', file:'', line: 1, column: 266
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.myProject/files/app/tns_modules/rxjs/operators/subscribeOn.js', line: 2, column: 31
System.err: 	Frame: function:'require', file:'', line: 1, column: 266
System.err: 	Frame: function:'', file:'file:///data/data/org.nativescript.myProject/files/app/tns_modules/rxjs/operator/subscribeOn.js', line: 2, column: 21

#4

If you use HttpClient and Interceptors, you don’t even need a separate plugin / module to do this job for you. You can simply add a interceptor that can update your request object’s URL to a JSON file or something to return mocked response.


#5

The difference is that in-memory-web-api offers a DB Service to “mock” data manipulation and interceptors without many hard-coded adjustments.