How to add InAppBrowser to Spec file to stop error?

Question

The question I have is, How do I add the InAppBrowser to a spec file so It's defined when tests run? I'm using InAppBrowser for an Angular Ionic application, but when I run npm test, I'm getting this error

error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'InAppBrowser', 'InAppBrowser' ] })
NullInjectorError: R3InjectorError(DynamicTestModule)[InAppBrowser -> InAppBrowser]: 
  NullInjectorError: No provider for InAppBrowser!
    at NullInjector.get (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:11100:1)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:11267:1)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:11267:1)
    at NgModuleRef$1.get (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:25365:1)
    at Object.get (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:25079:1)
    at lookupTokenUsingModuleInjector (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:3342:1)
    at getOrCreateInjectable (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:3454:1)
    at ɵɵdirectiveInject (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:14736:1)
    at NodeInjectorFactory.TrainingComponent_Factory [as factory] (ng:///TrainingComponent/ɵfac.js:5:7)
    at getNodeInjectable (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:3549:1)

I've tried adding it into the imports of the TestBed within the Spec file, but then I end up getting a different error

error TS2749: 'InAppBrowser' refers to a value, but is being used as a type here. Did you mean 'typeof InAppBrowser'?

16     private browser: InAppBrowser

Edit: for reference here's the spec and the sample of the AppModule. I already have the InAppBrowser in the providers so that isn't necessarily the issue.

Spec File

import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser';

import { TrainingComponent } from './training.component';

describe('TrainingComponent', () => {
  let component: TrainingComponent;
  let fixture: ComponentFixture<TrainingComponent>;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ TrainingComponent ],
      imports: [
        IonicModule.forRoot(),
        HttpClientTestingModule,
        InAppBrowser
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(TrainingComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

AppModule

import { ErrorHandler, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { Deploy } from 'cordova-plugin-ionic/dist/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { PreparePage } from './login/prepare/prepare.page';
import { ReferPage } from './referrals/refer/refer.page';
import { SafetyWarningPage } from './login/safety-warning/safety-warning.page';
import { AckTipsPage } from './earnings/ack-tips/ack-tips.page';

import { AppAvailability } from '@ionic-native/app-availability/ngx';
import { SentryIonicErrorHandler } from './shared/sentry-ionic-error-handler.service';
import { httpInterceptorProviders } from './http-interceptors';
import { OrderDeliveredPage } from './orders/order-delivered/order-delivered.page';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser/ngx';
@NgModule({
  declarations: [AppComponent, PreparePage, ReferPage, SafetyWarningPage, AckTipsPage, OrderDeliveredPage],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: ErrorHandler, useClass: SentryIonicErrorHandler },
    httpInterceptorProviders,
    AppAvailability,
    Deploy,
    InAppBrowser,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Any ideas of how to fix this would be very helpful!

please post your code for spec file and unit under test. https://stackoverflow.com/help/how-to-ask Short answer is you want to provide a mock for InAppBrowser but without code of what you have tried so far it will be difficult to answer accurately. — , Apr 15 '22 at 00:46

score 1 · Accepted Answer · answered Apr 18 '22 at 13:43

I solved this by just mocking the InAppBrowser using a spy. Like this

import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser/ngx';

import { TrainingComponent } from './training.component';

describe('TrainingComponent', () => {
  let component: TrainingComponent;
  let fixture: ComponentFixture<TrainingComponent>;
  let browserSpy: jasmine.SpyObj<InAppBrowser>;

  beforeEach(waitForAsync(() => {
    let browserSpy = jasmine.createSpyObj<InAppBrowser>(['create'])

    TestBed.configureTestingModule({
      declarations: [ TrainingComponent ],
      imports: [
        IonicModule.forRoot(),
        HttpClientTestingModule
      ],
      providers: [
        { provide: InAppBrowser, useValue: browserSpy}
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(TrainingComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

However, this led me to another error similar to the one on this post. I followed the answer there to resolve that issue.

Callan · Answer 2 · 2022-04-16T06:24:40.427

-1

You need to add it to your providers like it says here: https://stackoverflow.com/a/55619166/15947768

Depending on the version of Angular, you need to be careful with the import, see this: https://stackoverflow.com/a/69295268/15947768

Edit: Thanks for clarifying. Can you check your import in the specs files? Should be like this: import { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser/ngx';

Blockquote

edited Apr 16 '22 at 06:24

answered Apr 15 '22 at 05:25

Callan

1,179
1
7
18

This isn't the issue as I have it in the providers. It works fine when I run the application, just not when the tests are run. – jward8 Apr 15 '22 at 13:44
Add ngx at the spec file import. Check my answer, I edited it – Callan Apr 16 '22 at 06:25

How to add InAppBrowser to Spec file to stop error?

2 Answers2