jasmine test cases dependency in angular 2 with stub - unit-testing

Question

Here I'm new to angular 2 test cases with jasmine + karma and I'm following this testing guide I tried to write test case but unable to write correctly and getting routing error as test cases are going to server while running, although it should not.
There is a question similar to this but didn't help me to solve the problem. Please guide me.
Here is my component
import { Component, OnInit, ViewChild } from '#angular/core';
import { Router, ActivatedRoute } from '#angular/router';
import { Checklist } from './checklist';
import { Job } from '../+job/job';
import { OriginalService } from './original.service';
import { UserService } from '../core/user/user.service';
import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap';
#Component({
selector: 'app-selector',
templateUrl: './original.component.html',
providers: [OriginalService]
})
export class OriginalComponent implements OnInit {
items = []
job: Job;
checklist: Checklist;
user: any;
shopId: any;
jobId: any;
constructor ( private orgService: OriginalService, private route: ActivatedRoute, private router: Router, userService: UserService) {
this.user = userService.user();
}
ngOnInit() {
this.route.params
.map(params => params['job_id'])
.subscribe(
job_id => this.jobId = job_id
);
this.getChecklist();
this.getJob();
}
getChecklist() {
this.orgService.getChecklists({
jobId: this.jobId
})
.then(checklist=> {
this.gotJobdata = true;
this.checklist = checklist.response})
.catch(error => this.error = error);
}
getJob(){
this.orgService.getJob({
jobId: this.jobId
})
.then(job => this.job = job.response)
.catch(error => this.error = error);
}
}
Here's my service
import { Injectable, ViewChildren } from '#angular/core';
import { Http, Response, Headers, RequestOptions } from '#angular/http';
import { environment } from '../../environments/environment'
import 'rxjs/add/operator/toPromise';
import { Checklist } from './checklist';
import { Job } from '../+job/job';
import { UserService } from '../core/user/user.service';
#Injectable()
export class OriginalService {
shopId: any;
constructor(private http: Http, private userService: UserService ) {
this.shopId = userService.shopId();
}
getChecklists(svc): Promise<Checklist> {
return this.http.get(environment.apiUrl + this.shopId + '/jobs/' + svc.jobId + '/checklists_path/' + 'check_item.json')
.toPromise()
.then(response => response.json())
.catch(this.handleError);
}
getJob(svc): Promise<Job> {
return this.http.get(return environment.apiUrl + this.shopId + '/jobs/' + svc.jobId + '.json')
.toPromise()
.then(response => response.json())
.catch(this.handleError);
}
}
Here's the spec what I've tried:
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { SharedModule } from '../shared/shared.module';
import { ModalModule } from 'ng2-bootstrap/ng2-bootstrap';
import { HttpModule } from '#angular/http';
import { Router, ActivatedRoute, Params } from '#angular/router';
import { ComponentLoaderFactory } from 'ng2-bootstrap/component-loader';
import { Subject } from 'rxjs/Subject';
import { UserService } from '../core/user/user.service';
import { OriginalService } from './original.service';
import { OriginalComponent } from './original.component';
describe('OriginalComponent', () => {
let component: OriginalComponent;
let fixture: ComponentFixture<OriginalComponent>;
let params: Subject<Params>;
let userService, orgService;
let userServiceStub = {
isLoggedIn: true,
user: { name: 'Test User'}
};
beforeEach(async(() => {
params = new Subject<Params>();
TestBed.configureTestingModule({
imports: [ ModalModule.forRoot(), SharedModule, HttpModule ],
declarations: [ OriginalComponent ],
providers: [ OriginalService, UserService, ComponentLoaderFactory,
{ provide: Router, useValue: userServiceStub }, {provide: ActivatedRoute, useValue: { params: params }} ]
})
.compileComponents();
})
);
beforeEach(() => {
fixture = TestBed.createComponent(ChecklistComponent);
component = fixture.componentInstance;
fixture.detectChanges();
it('should create', () => {
expect(component).toBeTruthy();
});
});
Please correct me how to properly use routing in test cases or stubs where I'm doing wrong.