Come simulare localStorage negli unit test JavaScript?

Ci sono biblioteche là fuori da prendere in giro localStorage?

Ho usato Sinon.JS per la maggior parte dei miei altri javascript mocking e ho trovato che è davvero fantastico.

I miei test iniziali mostrano che localStorage rifiuta di essere assegnabile in firefox (sadface) quindi probabilmente avrò bisogno di una sorta di hack attorno a questo: /

Le mie opzioni al momento (come vedo) sono le seguenti:

1. Crea funzioni di wrapping utilizzate da tutto il mio codice e deride quelle
2. Creare una sorta di (potrebbe essere complicata) gestione dello stato (snapshot localStorage prima del test, in cleanup restore snapshot) per localStorage.
3. ??????

Cosa ne pensi di questi approcci e pensi che ci siano altri modi migliori per farlo? Ad ogni modo metterò la "libreria" risultante che finisco per creare su GitHub per la bontà open source.

Ecco un modo semplice per deriderlo con Jasmine:

beforeEach(function () {
  var store = {};

  spyOn(localStorage, 'getItem').andCallFake(function (key) {
    return store[key];
  });
  spyOn(localStorage, 'setItem').andCallFake(function (key, value) {
    return store[key] = value + '';
  });
  spyOn(localStorage, 'clear').andCallFake(function () {
      store = {};
  });
});

Se vuoi deridere l'archiviazione locale in tutti i tuoi test, dichiara la beforeEach()funzione mostrata sopra nell'ambito globale dei tuoi test (il solito posto è uno script specHelper.js ).

prendi in giro localStorage / sessionStorage globali (hanno la stessa API) per le tue esigenze.
Per esempio:

 // Storage Mock
  function storageMock() {
    let storage = {};

    return {
      setItem: function(key, value) {
        storage[key] = value || '';
      },
      getItem: function(key) {
        return key in storage ? storage[key] : null;
      },
      removeItem: function(key) {
        delete storage[key];
      },
      get length() {
        return Object.keys(storage).length;
      },
      key: function(i) {
        const keys = Object.keys(storage);
        return keys[i] || null;
      }
    };
  }

E poi quello che fai effettivamente è qualcosa del genere:

// mock the localStorage
window.localStorage = storageMock();
// mock the sessionStorage
window.sessionStorage = storageMock();

Considera anche l'opzione per inserire dipendenze nella funzione di costruzione di un oggetto.

var SomeObject(storage) {
  this.storge = storage || window.localStorage;
  // ...
}

SomeObject.prototype.doSomeStorageRelatedStuff = function() {
  var myValue = this.storage.getItem('myKey');
  // ...
}

// In src
var myObj = new SomeObject();

// In test
var myObj = new SomeObject(mockStorage)

In linea con il mocking e il test unitario, mi piace evitare di testare l'implementazione dello storage. Ad esempio, non ha senso controllare se la durata dell'archiviazione è aumentata dopo aver impostato un elemento, ecc.

Poiché è ovviamente inaffidabile sostituire i metodi sull'oggetto localStorage reale, utilizzare un mockStorage "stupido" e stub i singoli metodi come desiderato, ad esempio:

var mockStorage = {
  setItem: function() {},
  removeItem: function() {},
  key: function() {},
  getItem: function() {},
  removeItem: function() {},
  length: 0
};

// Then in test that needs to know if and how setItem was called
sinon.stub(mockStorage, 'setItem');
var myObj = new SomeObject(mockStorage);

myObj.doSomeStorageRelatedStuff();
expect(mockStorage.setItem).toHaveBeenCalledWith('myKey');

Questo è ciò che faccio...

var mock = (function() {
  var store = {};
  return {
    getItem: function(key) {
      return store[key];
    },
    setItem: function(key, value) {
      store[key] = value.toString();
    },
    clear: function() {
      store = {};
    }
  };
})();

Object.defineProperty(window, 'localStorage', { 
  value: mock,
});

Le soluzioni attuali non funzioneranno in Firefox. Questo perché localStorage è definito dalle specifiche html come non modificabile. Puoi comunque aggirare il problema accedendo direttamente al prototipo di localStorage.

La soluzione cross browser consiste nel deridere gli oggetti ad Storage.prototypees

invece di spyOn (localStorage, 'setItem') usa

spyOn(Storage.prototype, 'setItem')
spyOn(Storage.prototype, 'getItem')

tratto dalle risposte di bzbarsky e teogeos qui https://github.com/jasmine/jasmine/issues/299

Ci sono biblioteche là fuori da prendere in giro localStorage?

Ne ho appena scritto uno:

(function () {
    var localStorage = {};
    localStorage.setItem = function (key, val) {
         this[key] = val + '';
    }
    localStorage.getItem = function (key) {
        return this[key];
    }
    Object.defineProperty(localStorage, 'length', {
        get: function () { return Object.keys(this).length - 2; }
    });

    // Your tests here

})();

I miei test iniziali mostrano che localStorage rifiuta di essere assegnabile in Firefox

Solo in un contesto globale. Con una funzione wrapper come sopra, funziona perfettamente.

Ecco un esempio che utilizza sinon spy e mock:

// window.localStorage.setItem
var spy = sinon.spy(window.localStorage, "setItem");

// You can use this in your assertions
spy.calledWith(aKey, aValue)

// Reset localStorage.setItem method    
spy.reset();



// window.localStorage.getItem
var stub = sinon.stub(window.localStorage, "getItem");
stub.returns(aValue);

// You can use this in your assertions
stub.calledWith(aKey)

// Reset localStorage.getItem method
stub.reset();

La sovrascrittura della localStorageproprietà windowdell'oggetto globale come suggerito in alcune delle risposte non funzionerà nella maggior parte dei motori JS, perché dichiarano la localStorageproprietà dei dati come non scrivibile e non configurabile.

Tuttavia ho scoperto che almeno con la versione WebKit di PhantomJS (versione 1.9.8) è possibile utilizzare l'API legacy __defineGetter__per controllare cosa succede se localStoragesi accede. Tuttavia sarebbe interessante se questo funzionasse anche su altri browser.

var tmpStorage = window.localStorage;

// replace local storage
window.__defineGetter__('localStorage', function () {
    throw new Error("localStorage not available");
    // you could also return some other object here as a mock
});

// do your tests here    

// restore old getter to actual local storage
window.__defineGetter__('localStorage',
                        function () { return tmpStorage });

Il vantaggio di questo approccio è che non dovresti modificare il codice che stai per testare.

Non è necessario passare l'oggetto di archiviazione a ogni metodo che lo utilizza. È invece possibile utilizzare un parametro di configurazione per qualsiasi modulo che tocchi l'adattatore di archiviazione.

Il tuo vecchio modulo

// hard to test !
export const someFunction (x) {
  window.localStorage.setItem('foo', x)
}

// hard to test !
export const anotherFunction () {
  return window.localStorage.getItem('foo')
}

Il tuo nuovo modulo con la funzione "wrapper" di configurazione

export default function (storage) {
  return {
    someFunction (x) {
      storage.setItem('foo', x)
    }
    anotherFunction () {
      storage.getItem('foo')
    }
  }
}

Quando usi il modulo per testare il codice

// import mock storage adapater
const MockStorage = require('./mock-storage')

// create a new mock storage instance
const mock = new MockStorage()

// pass mock storage instance as configuration argument to your module
const myModule = require('./my-module')(mock)

// reset before each test
beforeEach(function() {
  mock.clear()
})

// your tests
it('should set foo', function() {
  myModule.someFunction('bar')
  assert.equal(mock.getItem('foo'), 'bar')
})

it('should get foo', function() {
  mock.setItem('foo', 'bar')
  assert.equal(myModule.anotherFunction(), 'bar')
})

La MockStorageclasse potrebbe assomigliare a questa

export default class MockStorage {
  constructor () {
    this.storage = new Map()
  }
  setItem (key, value) {
    this.storage.set(key, value)
  }
  getItem (key) {
    return this.storage.get(key)
  }
  removeItem (key) {
    this.storage.delete(key)
  }
  clear () {
    this.constructor()
  }
}

Quando si utilizza il modulo nel codice di produzione, passare invece l'adattatore localStorage reale

const myModule = require('./my-module')(window.localStorage)

Ho deciso di ribadire il mio commento alla risposta di Pumbaa80 come risposta separata in modo che sia più facile riutilizzarla come libreria.

Ho preso il codice di Pumbaa80, l'ho perfezionato un po ', ho aggiunto dei test e l'ho pubblicato come modulo npm qui: https://www.npmjs.com/package/mock-local-storage .

Ecco un codice sorgente: https://github.com/letsrock-today/mock-local-storage/blob/master/src/mock-localstorage.js

Alcuni test: https://github.com/letsrock-today/mock-local-storage/blob/master/test/mock-localstorage.js

Il modulo crea finto localStorage e sessionStorage sull'oggetto globale (finestra o globale, quale di essi è definito).

Negli altri test del mio progetto l'ho richiesto con mocha come questo: mocha -r mock-local-storageper rendere disponibili definizioni globali per tutto il codice sotto test.

Fondamentalmente, il codice ha il seguente aspetto:

(function (glob) {

    function createStorage() {
        let s = {},
            noopCallback = () => {},
            _itemInsertionCallback = noopCallback;

        Object.defineProperty(s, 'setItem', {
            get: () => {
                return (k, v) => {
                    k = k + '';
                    _itemInsertionCallback(s.length);
                    s[k] = v + '';
                };
            }
        });
        Object.defineProperty(s, 'getItem', {
            // ...
        });
        Object.defineProperty(s, 'removeItem', {
            // ...
        });
        Object.defineProperty(s, 'clear', {
            // ...
        });
        Object.defineProperty(s, 'length', {
            get: () => {
                return Object.keys(s).length;
            }
        });
        Object.defineProperty(s, "key", {
            // ...
        });
        Object.defineProperty(s, 'itemInsertionCallback', {
            get: () => {
                return _itemInsertionCallback;
            },
            set: v => {
                if (!v || typeof v != 'function') {
                    v = noopCallback;
                }
                _itemInsertionCallback = v;
            }
        });
        return s;
    }

    glob.localStorage = createStorage();
    glob.sessionStorage = createStorage();
}(typeof window !== 'undefined' ? window : global));

Nota che tutti i metodi aggiunti tramite in Object.definePropertymodo che non vengano iterati, acceduti o rimossi come elementi normali e non conteranno in lunghezza. Inoltre ho aggiunto un modo per registrare il callback che viene chiamato quando un elemento sta per essere inserito nell'oggetto. Questo callback può essere utilizzato per emulare l'errore di quota superata nei test.

Ho scoperto che non avevo bisogno di deriderlo. Potrei cambiare l'effettiva memoria locale nello stato che volevo tramite setItem, quindi interrogare i valori per vedere se è cambiato tramite getItem. Non è così potente come beffardo come non puoi vedere quante volte qualcosa è stato cambiato, ma ha funzionato per i miei scopi.

Sfortunatamente, l'unico modo in cui possiamo deridere l'oggetto localStorage in uno scenario di test è cambiare il codice che stiamo testando. Devi racchiudere il tuo codice in una funzione anonima (cosa che dovresti fare comunque) e usare "iniezione di dipendenze" per passare un riferimento all'oggetto finestra. Qualcosa di simile a:

(function (window) {
   // Your code
}(window.mockWindow || window));

Quindi, all'interno del tuo test, puoi specificare:

window.mockWindow = { localStorage: { ... } };

È così che mi piace farlo. Mantiene le cose semplici.

  let localStoreMock: any = {};

  beforeEach(() => {

    angular.mock.module('yourApp');

    angular.mock.module(function ($provide: any) {

      $provide.service('localStorageService', function () {
        this.get = (key: any) => localStoreMock[key];
        this.set = (key: any, value: any) => localStoreMock[key] = value;
      });

    });
  });

crediti a https://medium.com/@armno/til-mocking-localstorage-and-sessionstorage-in-angular-unit-tests-a765abdc9d87 Crea un localstorage falso e spiare localstorage, quando viene chiamato

 beforeAll( () => {
    let store = {};
    const mockLocalStorage = {
      getItem: (key: string): string => {
        return key in store ? store[key] : null;
      },
      setItem: (key: string, value: string) => {
        store[key] = `${value}`;
      },
      removeItem: (key: string) => {
        delete store[key];
      },
      clear: () => {
        store = {};
      }
    };

    spyOn(localStorage, 'getItem')
      .and.callFake(mockLocalStorage.getItem);
    spyOn(localStorage, 'setItem')
      .and.callFake(mockLocalStorage.setItem);
    spyOn(localStorage, 'removeItem')
      .and.callFake(mockLocalStorage.removeItem);
    spyOn(localStorage, 'clear')
      .and.callFake(mockLocalStorage.clear);
  })

E qui lo usiamo

it('providing search value should return matched item', () => {
    localStorage.setItem('defaultLanguage', 'en-US');

    expect(...
  });