Wie spottet localStorage in JavaScript-Unit-Tests?

Gibt es keine Bibliotheken gibt, um mock localStorage?

Habe ich mit Sinon.JS für die meisten meiner anderen javascript mocking und haben festgestellt, es ist wirklich toll.

Meine ersten Tests haben gezeigt, dass localStorage sich belegbar in firefox (sadface) also ich werde wahrscheinlich brauchen irgendeine Art von hack umgehen :/

Meine Optionen jetzt (wie ich sehe) sind wie folgt:

Erstellen wrapping-Funktionen, die alle meinen code nutzt und verspotten diejenigen, die
Erstellen Sie eine Art von (möglicherweise komplizierte) state management (snapshot localStorage vor dem test, im cleanup-restore-snapshot) für localStorage.
??????

Was haltet Ihr von diesen Ansätzen und denkst du, es gibt andere bessere Wege zu gehen über diese? So oder so werde ich die daraus resultierende "Bibliothek", die ich am Ende machen auf github für open-source-Güte.

InformationsquelleAutor der Frage Anthony Sottile | 2012-07-14

103

Hier ist eine einfache Möglichkeit, zu verhöhnen, als es mit Jasmin:

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

Wenn Sie wollen, zu verspotten, die den lokalen Speicher in allen tests, die erklären, die beforeEach() Funktion oben dargestellt in den globalen Gültigkeitsbereich des tests (der üblichen Stelle ist eine specHelper.js Skript).

InformationsquelleAutor der Antwort Andreas Köberle

nur Modell der globalen localStorage - /sessionStorage (Sie haben die gleiche API) für Ihre Bedürfnisse.

Zum Beispiel:

 //Storage Mock
  function storageMock() {
    var 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) {
        var keys = Object.keys(storage);
        return keys[i] || null;
      }
    };
  }

Und dann, was Sie tatsächlich tun, ist etwas wie das:

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

InformationsquelleAutor der Antwort a8m

Berücksichtigen Sie auch die option zum injizieren von Abhängigkeiten in der Objekt-Konstruktor-Funktion.

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)

Im Einklang mit mocking und unit-Tests, die ich mag zu vermeiden, testen Sie die Speicher-Implementierung. Zum Beispiel keinen Sinn, die Prüfung, ob die Dauer der Speicherung erhöht, nachdem Sie einen Artikel, etc.

Da ist es natürlich unzuverlässige zu ersetzen, die Methoden auf die Reale localStorage-Objekt, verwenden Sie eine "dumme" mockStorage und stub die einzelnen Methoden, wie gewünscht, wie zum Beispiel:

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

InformationsquelleAutor der Antwort Claudijo

Gibt es keine Bibliotheken gibt, um mock localStorage?

Schrieb ich einfach einmal:

(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

})();

Meine ersten Tests haben gezeigt, dass localStorage sich belegbar in firefox

Nur im globalen Kontext. Mit einem wrapper-Funktion wie oben, funktioniert es Prima.

InformationsquelleAutor der Antwort user123444555621

Dies ist, was ich Tue...

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

InformationsquelleAutor der Antwort CharlesJHardy

Hier ist ein Beispiel mit sinon spy-und 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();

InformationsquelleAutor der Antwort Manuel Bitto

Sie nicht haben, um passieren das storage-Objekt, um jede Methode, die verwendet wird. Stattdessen können Sie eine Konfigurations-parameter für jedes Modul, das berührt den Speicher-adapter.

Ihre alte Modul

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

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

Neuen Moduls mit der config "wrapper" - Funktion

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

Wenn Sie das Modul in den Test-code

//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')
})

Den MockStorage Klasse könnte wie folgt Aussehen

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

Wenn Sie Ihr Modul in der Produktion code, stattdessen übergeben Sie die real-localStorage-adapter

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

InformationsquelleAutor der Antwort user633183

3

Überschreiben der localStorage Eigenschaft der globalen window Objekt, wie vorgeschlagen, einige der Antworten, die nicht funktionieren in den meisten JS-engines, denn Sie erklären die localStorage Daten Eigenschaft als nicht beschreibbar und nicht konfigurierbar.

Jedoch fand ich heraus, dass zumindest mit PhantomJS s (version 1.9.8) WebKit-version, die Sie verwenden könnten, die legacy-API __defineGetter__ zu kontrollieren, was passiert, wenn localStorage zugegriffen wird. Es wäre noch interessant, ob das funktioniert in anderen Browsern auch.
```
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 });
```
Der Vorteil dieses Ansatzes ist, dass Sie nicht haben, ändern Sie den code, den Sie zu testen.

InformationsquelleAutor der Antwort Conrad Calmez
1

Leider nur so können wir verspotten das localStorage-Objekt in einem test-Szenario ist um den code zu ändern, testen wir. Sie müssen wickeln Sie Ihren code in eine anonyme Funktion (die Sie sollten tun sowieso) und "dependency injection" übergeben Sie eine Referenz auf das window-Objekt. So etwas wie:
```
(function (window) {
   //Your code
}(window.mockWindow || window));
```
Dann, in Ihren test, können Sie angeben:
```
window.mockWindow = { localStorage: { ... } };
```
InformationsquelleAutor der Antwort John Kurlak

Entschied ich mich zu wiederholen, mein Kommentar zu Pumbaa80 die Antwort als separate Antwort so, dass es dann einfacher zu verwenden als eine Bibliothek.

Nahm ich Pumbaa80 code, verfeinert es ein bisschen, zusätzlichen tests und veröffentlicht es als npm-Modul hier:
https://www.npmjs.com/package/mock-local-storage.

Hier ist ein source-code:
https://github.com/letsrock-today/mock-local-storage/blob/master/src/mock-localstorage.js

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

Modul erstellt mock-localStorage und sessionStorage auf das Globale Objekt (window oder global, die von Ihnen definiert).

In meine anderen Projekt-tests, den ich mit mocha geht das: mocha -r mock-local-storage zu machen, globalen Definitionen für alle code unter test.

Grundsätzlich-code sieht wie folgt aus:

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

Beachten Sie, dass alle Methoden Hinzugefügt, die über Object.defineProperty so dass Sie nicht Durchlaufen werden, auf die Sie zugreifen oder entfernt, die als reguläre Elemente und werden nicht gezählt in der Länge. Auch ich habe eine Art der Registrierung von callback, die aufgerufen wird, wenn ein Element über in das Objekt. Dieser Rückruf kann verwendet werden, um zu emulieren Kontingent überschritten Fehler in den tests.

InformationsquelleAutor der Antwort nikolay_turpitko

Dies ist, wie ich mag, es zu tun. Hält es einfach.

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

    });
  });

InformationsquelleAutor der Antwort Eduardo La Hoz Miranda

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.