Wie verspottet man localStorage in JavaScript-Unit-Tests?

Gibt es da draußen Bibliotheken zum Verspotten localStorage?

Ich habe Sinon.JS für die meisten meiner anderen Javascript-Verspottungen verwendet und festgestellt, dass es wirklich großartig ist.

Meine ersten Tests haben gezeigt, dass localStorage sich weigert, in Firefox (sadface) zuweisbar zu sein, daher brauche ich wahrscheinlich eine Art Hack, um dies zu umgehen: /

Meine Optionen sind ab sofort (wie ich sehe) wie folgt:

1. Erstellen Sie Wrapping-Funktionen, die mein gesamter Code verwendet, und verspotten Sie diese
2. Erstellen Sie für localStorage eine Art (möglicherweise kompliziertes) Statusmanagement (Snapshot localStorage vor dem Test, im Bereinigungs-Wiederherstellungs-Snapshot).
3. ??????

Was halten Sie von diesen Ansätzen und glauben Sie, dass es andere bessere Möglichkeiten gibt, dies zu tun? In jedem Fall werde ich die resultierende "Bibliothek", die ich am Ende mache, für Open Source-Güte auf Github stellen.

Hier ist eine einfache Möglichkeit, es mit Jasmine zu verspotten:

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 den lokalen Speicher in all Ihren Tests verspotten möchten, deklarieren Sie die beforeEach()oben gezeigte Funktion im globalen Bereich Ihrer Tests (der übliche Ort ist ein specHelper.js- Skript).

Verspotten Sie einfach den globalen localStorage / sessionStorage (sie haben dieselbe API) für Ihre Anforderungen.
Beispielsweise:

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

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

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

Berücksichtigen Sie auch die Option, Abhängigkeiten in die Konstruktorfunktion eines Objekts einzufügen.

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 Verspottungen und Unit-Tests möchte ich das Testen der Speicherimplementierung vermeiden. Zum Beispiel macht es keinen Sinn zu überprüfen, ob sich die Speicherlänge nach dem Festlegen eines Elements usw. erhöht hat.

Da es offensichtlich unzuverlässig ist, Methoden für das reale localStorage-Objekt zu ersetzen, verwenden Sie einen "dummen" mockStorage und stubben Sie die einzelnen Methoden wie gewünscht, z.

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

Das ist was ich mache...

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

Die aktuellen Lösungen funktionieren in Firefox nicht. Dies liegt daran, dass localStorage in der HTML-Spezifikation als nicht änderbar definiert ist. Sie können dies jedoch umgehen, indem Sie direkt auf den Prototyp von localStorage zugreifen.

Die Cross-Browser-Lösung besteht darin, die Objekte Storage.prototypez

anstelle von spyOn (localStorage, 'setItem') verwenden

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

entnommen aus den Antworten von bzbarsky und teogeos hier https://github.com/jasmine/jasmine/issues/299

Gibt es da draußen Bibliotheken zum Verspotten localStorage?

Ich habe gerade einen geschrieben:

(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 weigert, in Firefox zuweisbar zu sein

Nur im globalen Kontext. Mit einer Wrapper-Funktion wie oben funktioniert es einwandfrei.

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

Das Überschreiben der localStorageEigenschaft des globalen windowObjekts, wie in einigen Antworten vorgeschlagen, funktioniert in den meisten JS-Engines nicht, da die localStorageDateneigenschaft als nicht beschreibbar und nicht konfigurierbar deklariert wird .

Ich fand jedoch heraus, dass Sie zumindest mit der WebKit-Version von PhantomJS (Version 1.9.8) die Legacy-API verwenden können, um __defineGetter__zu steuern, was passiert, wenn auf sie localStoragezugegriffen wird. Trotzdem wäre es interessant, wenn dies auch in anderen Browsern funktioniert.

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 besteht darin, dass Sie den zu testenden Code nicht ändern müssen.

Sie müssen das Speicherobjekt nicht an jede Methode übergeben, die es verwendet. Stattdessen können Sie einen Konfigurationsparameter für jedes Modul verwenden, das den Speicheradapter berührt.

Dein altes Modul

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

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

Ihr neues Modul mit Konfigurationsfunktion "Wrapper"

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

Wenn Sie das Modul zum Testen von Code verwenden

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

Die MockStorageKlasse könnte so 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 im Produktionscode verwenden, übergeben Sie stattdessen den echten localStorage-Adapter

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

Ich habe beschlossen, meinen Kommentar zur Antwort von Pumbaa80 als separate Antwort zu wiederholen, damit es einfacher ist, ihn als Bibliothek wiederzuverwenden.

Ich nahm den Code von Pumbaa80, verfeinerte ihn ein wenig, fügte Tests hinzu und veröffentlichte ihn hier als npm-Modul: https://www.npmjs.com/package/mock-local-storage .

Hier ist ein Quellcode: 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

Das Modul erstellt Mock LocalStorage und SessionStorage für das globale Objekt (Fenster oder global, welches davon definiert ist).

In den Tests meines anderen Projekts habe ich es mit Mokka wie folgt benötigt: mocha -r mock-local-storageum globale Definitionen für den gesamten getesteten Code verfügbar zu machen.

Grundsätzlich sieht Code 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, die über hinzugefügt wurden, Object.definePropertydamit sie nicht als reguläre Elemente iteriert, aufgerufen oder entfernt werden und nicht in der Länge zählen. Außerdem habe ich eine Möglichkeit hinzugefügt, einen Rückruf zu registrieren, der aufgerufen wird, wenn ein Element in ein Objekt eingefügt werden soll. Dieser Rückruf kann verwendet werden, um einen Fehler zu emulieren, bei dem das Kontingent überschritten wurde.

Ich stellte fest, dass ich mich nicht darüber lustig machen musste. Ich könnte den tatsächlichen lokalen Speicher in den Status ändern, über den ich ihn haben möchte setItem, und dann einfach die Werte abfragen, um festzustellen, ob er sich über geändert hat getItem. Es ist nicht ganz so mächtig wie spöttisch, da man nicht sehen kann, wie oft etwas geändert wurde, aber es hat für meine Zwecke funktioniert.

Leider können wir das localStorage-Objekt in einem Testszenario nur verspotten, indem wir den Code ändern, den wir testen. Sie müssen Ihren Code in eine anonyme Funktion einschließen (was Sie sowieso tun sollten) und "Abhängigkeitsinjektion" verwenden, um einen Verweis auf das Fensterobjekt zu übergeben. Etwas wie:

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

Innerhalb Ihres Tests können Sie dann Folgendes angeben:

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

So mache ich es gerne. 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;
      });

    });
  });

Credits an https://medium.com/@armno/til-mocking-localstorage-and-sessionstorage-in-angular-unit-tests-a765abdc9d87 Machen Sie einen gefälschten lokalen Speicher und spionieren Sie den lokalen Speicher aus, wenn er gespeichert ist

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

Und hier benutzen wir es

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

    expect(...
  });