如何将 InAppBrowser 添加到 Spec 文件以停止错误？

Question

我的问题是，如何将 InAppBrowser 添加到规范文件以便在测试时定义它运行？我将 InAppBrowser 用于 Angular Ionic 应用程序，但是当我运行 npm 测试时，出现此错误

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.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)

我尝试将它添加到 Spec 文件中的 TestBed 导入中，但最终我得到了一个不同的错误

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

16     private browser: InAppBrowser

编辑：这里是 AppModule 的规范和示例，供参考。我已经在提供程序中安装了 InAppBrowser，所以这不一定是问题所在。

规格文件

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 { }

关于如何解决此问题的任何想法都将非常有帮助！

Answer 1

您需要将其添加到您的提供商中，如下所示：

根据 Angular 的版本，您需要小心导入，请参阅：

编辑：感谢您的澄清。你能在规格文件中检查你的导入吗？应该是这样的：import { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser/ngx';

Blockquote

Answer 2

我通过使用间谍模拟 InAppBrowser 解决了这个问题。像这样

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();
  });
});

然而，这导致我遇到另一个类似于 the one on this post 的错误。我按照那里的答案解决了这个问题。

如何将 InAppBrowser 添加到 Spec 文件以停止错误？

How to add InAppBrowser to Spec file to stop error?

ionic-framework

angular