Angular 7 Jasmine and Restangular: Cannot get proper testing module configuration

Issue

Given, a front-end component which imports RestAngular, declares it in CTOR and uses it in ngOnInit as shown here:

import { Restangular } from 'ngx-restangular'

constructor(
    private Restangular: Restangular,
    private ChangeDetectorRef: ChangeDetectorRef,

  ) { }

ngOnInit() {
 this.Restangular.all("Person")
      .all("Kind")
      .getList()
      .subscribe(pTypes => {
        this.personTypes = pTypes;
      }); 
}

The code above works perfect when code is served.

I’m trying to get Jasmine to create this class which choked on Restangular. So I included the following providers as follows:

  beforeEach(async () => {
    TestBed.configureTestingModule({
      providers:[Restangular, RestangularHttp, HttpBackend],

This seemed to fix all the Restangular dependencies, but now I’m seeing this:

Now I’m seeing this for an error TypeError: this.http.handle is not a function
this.http.handle is not a function

I don’t understand why on Jasmine side I have to provide these dependencies after all, doesn’t the front-end component deal with them just fine? Why doesn’t jasmine instantiate the front-end just like Angular does? It appears to be caused by no “real” instance of Restangular being injected.

Solution

Solution:
If the front-end component is attempting to use Restangular, the Jasmine test must import the Restangular Module. Like this:

import { RestangularModule } from "ngx-restangular"

  beforeEach(async () => {
    TestBed.configureTestingModule({      
      imports: [FontAwesomeModule, FormsModule, ReactiveFormsModule, NgSelectModule, RestangularModule],

This will minimally allow the component to be created in this code

  beforeEach(() => {

    fixture = TestBed.createComponent(Component);
    component = fixture.componentInstance;

Upon the component being created, it executes the ngOnInit code containing the restangular call like this:

this.Restangular.all("Something")()
  .subscribe(pTypes => {
    this.personTypes = pTypes;
  });

If the Restangular call above fails, the test doesn’t catch that because the component had already been created! You have to put in specific expect statements to be executed on bound data fields (for the Restangular call) to fail the test if call fails.

Answered By – JWP

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.