Ionic 4:创建模拟存储

问题描述

我正在尝试在新的Angular 7/Ionic 4应用程序中使用Testbed，但无法运行任何测试，因为我的组件依赖于Ionic本机插件存储.

I am trying to use Testbed in a new Angular 7 / Ionic 4 app but cannot run any tests because my components depend on an Ionic native plugin, storage.

app.component.spec.ts

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import {TestBed, async, fakeAsync, tick} from '@angular/core/testing';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import {RouterTestingModule} from '@angular/router/testing';
import {Router} from '@angular/router';
import {Location} from '@angular/common'

import { LoginPage } from './pages/login/login.page';
import { routes } from "./app-routing.module";
import {HttpClientTestingModule} from '@angular/common/http/testing';
import {StorageMock} from './testing/mocks/storage.mock';
import {IonicStorageModule} from '@ionic/storage';

describe('AppComponent', () => {

  let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy, storageSpy;
  let router: Router;
  let location: Location;
  let fixture;
  let comp: AppComponent;

  beforeEach(async(() => {
    statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
    splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
    platformReadySpy = Promise.resolve();
    platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
    storageSpy = jasmine.createSpyObj('Storage', ['get', 'set', 'clear', 'remove', 'ready']);

    TestBed.configureTestingModule({
      declarations: [AppComponent],
      imports: [
        RouterTestingModule.withRoutes(routes),
        IonicStorageModule.forRoot(),
        HttpClientTestingModule,
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      providers: [
        { provide: StatusBar, useValue: statusBarSpy },
        { provide: SplashScreen, useValue: splashScreenSpy },
        { provide: Platform, useValue: platformSpy },
        { provide: Storage, useClass: StorageMock }
      ],
    }).compileComponents();

    router = TestBed.get(Router);
    location = TestBed.get(Location);
    fixture = TestBed.createComponent(AppComponent);
    comp = fixture.componentInstance;
    router.initialNavigation();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  it('should initialize the app', async () => {
    TestBed.createComponent(AppComponent);
    expect(platformSpy.ready).toHaveBeenCalled();
    await platformReadySpy;
    expect(statusBarSpy.styleDefault).toHaveBeenCalled();
    expect(splashScreenSpy.hide).toHaveBeenCalled();
  });

  it('navigates to "" redirects you to /login', fakeAsync(() => {
    router.navigate(['']);
    tick();
    expect(location.path()).toBe('/login')
  }));

  afterEach(() => {
    fixture.destroy();
    comp = null
  })
});

并创建了自己的 StorageMock :

import {Storage, StorageConfig} from '@ionic/storage';

export class StorageMock extends Storage {
  driver: string;
  vals: {};

  constructor(config: StorageConfig) {
    super({})
  }

  clear() {
    return new Promise<void>((res) => res())
  }

  ready() {
    return new Promise<LocalForage>((res) => res())
  }

  get(key: string) {
    return new Promise((res) => res(this.vals[key]))
  }

  set(key, val) {
    return new Promise((res) => {
      this.vals[key] = val;
      res()
    })
  }

  remove(key) {
    return new Promise((res) => {
      delete this.vals[key];
      res()
    })
  }
}

但是，当我运行测试时，我仍然看到:

However when I run my test, I still see:

Error: Can't resolve all parameters for Storage: (?).

我想念什么?

推荐答案

首先，导入存储:

import { Storage } from '@ionic/storage';

为模拟创建一个常量:

 const storageIonicMock: any = {
     get: () => new Promise<any>((resolve, reject) => resolve('As2342fAfgsdr')),
     set: () => ...
    };

配置您的TesBed

Configure your TesBed

TestBed.configureTestingModule({
      imports: [],
      providers: [
        {
          provide: Storage,
          useValue: storageIonicMock
        }
      ]
    });

这篇关于Ionic 4:创建模拟存储的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！