8

我正在尝试在新的 Angular 7 / Ionic 4 应用程序中使用 Testbed，但无法运行任何测试，因为我的组件依赖于 Ionic 本机插件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()
    })
  }
}

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

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

我错过了什么？

4

3 回答 3

9

一、导入存储：

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

为模拟创建一个常量：

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

配置您的 TesBed

TestBed.configureTestingModule({
      imports: [],
      providers: [
        {
          provide: Storage,
          useValue: storageIonicMock
        }
      ]
    });
于 2019-06-13T08:49:02.100 回答
2

Ionic 插件存储也适用于浏览器环境。

你不需要创建一个 mock，你可以直接在你的组件中导入、定义和注入它（如果你在浏览器环境中运行你的测试）：

第一次导入：

import { Storage } from '@ionic/storage';
import { MyComponent } from './my-component';

声明一个全局组件变量：

let component: MyComponent;

然后，对于每个测试，定义并注入组件中的存储：

beforeEach(() => {
    const storage = new Storage({         // Define Storage
      name: '__mydb',
      driverOrder: ['indexeddb', 'sqlite', 'websql']
    });
    component = new MyComponent(storage); // Inject Storage in your component
  }
于 2019-06-23T01:37:04.977 回答
0

正如其他人所写，存储在浏览器中工作，所以我不需要模拟它来进行测试。这对我有用（StorageWrapperService 是我的服务，它依赖于 Ionic 的存储）：

import { TestBed } from '@angular/core/testing';

import { StorageWrapperService } from './storage-wrapper.service';
import { IonicStorageModule, Storage } from '@ionic/storage';

describe('StorageWrapperService', () => {
  let service: StorageWrapperService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        IonicStorageModule.forRoot({
          name: '__mydb',
          driverOrder: ['localstorage']
        })
      ],
    });
    service = TestBed.inject(StorageWrapperService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

});

附加信息：

localstorage 不会在测试之间被清除，所以可能你想使用这样的东西：

describe('StorageWrapperService', () => {
  let service: StorageWrapperService;
  let storage: Storage;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        IonicStorageModule.forRoot({
          name: '__mydb',
          driverOrder: ['localstorage']
        })
      ]
    });
    service = TestBed.inject(StorageWrapperService);
    storage = TestBed.inject(Storage);
  });

...
});

并在每次测试结束时清除存储：

  it('...', (done) => {
      storage.clear().then(() => done());
  });
于 2020-09-26T07:20:00.783 回答