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!
CodePudding user response:
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
CodePudding user response:
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.