Ionic 4: Creating mock storage

Question

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

Answer 1

As others wrote, Storage works in browsers, so I did not need mocking it for testing. This worked for me (StorageWrapperService is my service which depends on Ionic's Storage):

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

});

Additional info:

localstorage will not be cleared between tests, so probably you want to use something like this:

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

...
});

And clear storage at the end of every tests:

  it('...', (done) => {
      storage.clear().then(() => done());
  });

Answer 2

The Ionic plugin storage also works in a browser environment.

You don't need to create a mock and you can directly import, define and inject it in your component (if you are running your test in a browser environment) :

First import :

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

Declare a global component variable :

let component: MyComponent;

Then and for each test, define and inject the storage in your component :

beforeEach(() => {
    const storage = new Storage({         // Define Storage
      name: '__mydb',
      driverOrder: ['indexeddb', 'sqlite', 'websql']
    });
    component = new MyComponent(storage); // Inject Storage in your component
  }

Answer 3

First, import Storage:

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

Create a const for mock:

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

Configure your TesBed

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