angular


Angular 2+: Inject real http in Tesbed


I have two services: API and Cfg. API consumes a json API while Cfg provides configurations such as url, api key and so on. API receives an injected instance of Cfg and components receive an injected instance of API.
Here how it looks like:
import { ComponentFixture, TestBed, async } from '#angular/core/testing';
import { TranslateService } from '#ngx-translate/core';
import { EventEmitter } from '#angular/core';
import { HttpModule } from '#angular/http';
import { FormsModule } from '#angular/forms';
import { Component } from '#angular/core';
import { Http } from '#angular/http';
import {
Validators,
FormBuilder
} from '#angular/forms';
import { Injectable } from '#angular/core';
#Injectable()
export class CfgService {
constructor(private baseUrl: string, private assetsUrl: string) { }
public getAPIUrl(): string {
return this.baseUrl;
}
public getAssetsUrl(): string {
return this.assetsUrl;
}
}
#Injectable()
export class APIService {
constructor(
public http: Http,
public config: CfgService) {
}
}
export function configurationProvider(
baseUrl: string = "https://xxx.xxx/api/",
assetsUrl: string = "assets"): CfgService {
return new CfgService(baseUrl, assetsUrl);
}
#Component({
template: ''
})
export class MyComponent {
constructor(
protected translate: TranslateService,
private api: APIService,
private formBuilder: FormBuilder
) {
}
}
describe('bob', () => {
let comp: MyComponent;
let fixture: ComponentFixture<MyComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MyComponent],
providers: [
{ provide: CfgService, useValue: configurationProvider("http://192.168.0.112:8282/api/") },
APIService
],
imports: [
FormsModule,
HttpModule
]
}).compileComponents().then(() => {
fixture = TestBed.createComponent(MyComponent);
comp = fixture.componentInstance;
});;
}));
it('should work', async(() => {
expect(true).toEqual(true);
}));
});
Upon execution, it fails with:
bob
✖ should work
PhantomJS 2.1.1 (Linux 0.0.0) bob should work FAILED
ZoneAwareError#webpack:///~/zone.js/dist/zone.js:923:0 <- config/spec-bundle.js:71103:28
invokeTask#webpack:///~/zone.js/dist/zone.js:398:0 <- config/spec-bundle.js:70578:36
onInvokeTask#webpack:///~/zone.js/dist/proxy.js:103:0 <- config/spec-bundle.js:70100:49
invokeTask#webpack:///~/zone.js/dist/zone.js:397:0 <- config/spec-bundle.js:70577:48
runTask#webpack:///~/zone.js/dist/zone.js:165:0 <- config/spec-bundle.js:70345:57
drainMicroTaskQueue#webpack:///~/zone.js/dist/zone.js:593:0 <- config/spec-bundle.js:70773:42
invoke#webpack:///~/zone.js/dist/zone.js:464:0 <- config/spec-bundle.js:70644:44
timer#webpack:///~/zone.js/dist/zone.js:1540:0 <- config/spec-bundle.js:71720:34
resolvePromise#webpack:///~/zone.js/dist/zone.js:712:0 <- config/spec-bundle.js:70892:40
webpack:///~/zone.js/dist/zone.js:763:0 <- config/spec-bundle.js:70943:31
Any ideas?
Thanks.
Update:
FormsModule doesn't contain FormBuilder provider. Import ReactiveFormsModule instead
Old version:
Move CfgService above before APIService
#Injectable()
export class CfgService {
constructor(private baseUrl: string,private assetsUrl: string) {}
public getAPIUrl(): string {
return this.baseUrl;
}
public getAssetsUrl(): string {
return this.assetsUrl;
}
}
#Injectable()
export class APIService {
constructor(
public http: Http,
public config: CfgService) {
}
}
or use forwardRef like
import { forwardRef } from '#angular/core';
#Injectable()
export class APIService {
constructor(
public http: Http,
#Inject(forwardRef(() => CfgService) public config: CfgService) {
}
}

Related Links

Font Awesome with Ionic2
angular view is not updating after component value gets changed
how do I merge the values of the child components of angular2 into reactive form object?
Angular2 multiple components different imports
Update an array with new objects
Dropbox service with popup
Sending Emails Using TinyMce- Angular 2
Nested form tags in angular 2
Toggle Value in Angular Material CheckBox
Angular2 cli error cannot resolve #angular animations from primeng2 components
ionic2 AlertController, how to return the buttons clicked value from method
Cannot read property 'stateChangeExpr' of null at _parseAnimationStateTransition
Angular2 : not able to install xml2json
Ionic 3 - Supplied parameters do not match any signature of call target
Angular2/Rxjs HTTP Catch Asynchronous Transform Issue
Angular2 get if router has canActivate()

Categories

HOME
menu
drools
soap
logistic-regression
integration-testing
windows-installer
aws-codepipeline
facebook-live-api
distributed-database
netfilter
codeception
bpm
boost-intrusive
affinity
logstash-grok
riscv
netbeans-7.3
google-app-invites
stackdriver
gun
deprecation-warning
ssis-2008
actionlink
angular-openlayers
jointjs
bing-api
fxml
uilabel
week-number
na
protobuf-c
puma
slamdata
lsmeans
fixtures
lightgallery
azure-virtual-machine
web.py
each
cachemanager
model-driven
multibox
imei
rethinkdb-python
canvas-lms
gm
mockery
post-commit
webtorrent
correspondence-analysis
arithmetic-expressions
ienumerable
website-deployment
google-roads-api
f#-interactive
mime-mail
xcode4
http-accept-header
javascript-globalize
fedora-commons
android-context
html5-template
cpanm
ekeventstore
soundex
wunderlist
openni
voog
mashape
dynamicquery
wpftoolkit
like
dcraw
gliffy
httplib
usleep
tracker
policies
qglviewer
where-in
inner-classes
fubumvc
divshot
struts2-tiles-plugin
backbone-forms
addr2line
iphone-4
mobile-phones
in-app
bionic
expandoobject
iphone-sdk-4.1
zend-navigation
resource-cleanup

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile