Comment se moquer de localStorage dans les tests unitaires JavaScript?

Y a-t-il des bibliothèques à se moquer localStorage?

J'ai utilisé Sinon.JS pour la plupart de mes autres moqueries javascript et j'ai trouvé que c'était vraiment génial.

Mes tests initiaux montrent que localStorage refuse d'être assignable dans Firefox (sadface) donc j'aurai probablement besoin d'une sorte de piratage autour de ceci: /

Mes options pour le moment (comme je le vois) sont les suivantes:

1. Créer des fonctions d'emballage que tout mon code utilise et se moquer de celles-ci
2. Créez une sorte de gestion de l'état (qui peut être compliquée) (instantané localStorage avant le test, dans le nettoyage de l'instantané de restauration) pour localStorage.
3. ??????

Que pensez-vous de ces approches et pensez-vous qu'il existe d'autres moyens plus efficaces pour y parvenir? Quoi qu'il en soit, je mettrai la "bibliothèque" résultante que je finis par créer sur github pour la bonté open source.

Voici un moyen simple de se moquer de 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 = {};
  });
});

Si vous souhaitez vous moquer du stockage local dans tous vos tests, déclarez la beforeEach()fonction ci-dessus dans la portée globale de vos tests (l'emplacement habituel est un script specHelper.js ).

simulez simplement le localStorage / sessionStorage global (ils ont la même API) pour vos besoins.
Par exemple:

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

Et puis ce que vous faites réellement, c'est quelque chose comme ça:

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

Envisagez également la possibilité d'injecter des dépendances dans la fonction constructeur d'un objet.

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)

Dans la lignée des moqueries et des tests unitaires, j'aime éviter de tester l'implémentation du stockage. Par exemple, inutile de vérifier si la durée de stockage a augmenté après avoir défini un élément, etc.

Puisqu'il n'est évidemment pas fiable de remplacer les méthodes sur le véritable objet localStorage, utilisez un mockStorage "stupide" et stub les méthodes individuelles comme vous le souhaitez, comme:

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

C'est ce que je fais...

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

Les solutions actuelles ne fonctionneront pas dans Firefox. C'est parce que localStorage est défini par la spécification html comme n'étant pas modifiable. Vous pouvez cependant contourner ce problème en accédant directement au prototype de localStorage.

La solution de navigateur croisé consiste à se moquer des objets sur Storage.prototypepar exemple

au lieu de spyOn (localStorage, 'setItem') utilisez

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

extrait des réponses de bzbarsky et teogeos ici https://github.com/jasmine/jasmine/issues/299

Y a-t-il des bibliothèques à se moquer localStorage?

Je viens d'en écrire un:

(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

})();

Mes premiers tests montrent que localStorage refuse d'être assignable dans Firefox

Uniquement dans un contexte mondial. Avec une fonction wrapper comme ci-dessus, cela fonctionne très bien.

Voici un exemple utilisant sinon spy et 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();

L'écrasement de la localStoragepropriété de l' windowobjet global comme suggéré dans certaines des réponses ne fonctionnera pas dans la plupart des moteurs JS, car ils déclarent la localStoragepropriété data comme non accessible en écriture et non configurable.

Cependant, j'ai découvert qu'au moins avec la version WebKit de PhantomJS (version 1.9.8), vous pouviez utiliser l'ancienne API __defineGetter__pour contrôler ce qui se passe en cas d' localStorageaccès. Néanmoins, il serait intéressant que cela fonctionne également dans d'autres navigateurs.

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

L'avantage de cette approche est que vous n'auriez pas à modifier le code que vous êtes sur le point de tester.

Vous n'êtes pas obligé de transmettre l'objet de stockage à chaque méthode qui l'utilise. Au lieu de cela, vous pouvez utiliser un paramètre de configuration pour tout module qui touche l'adaptateur de stockage.

Votre ancien module

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

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

Votre nouveau module avec la fonction de configuration "wrapper"

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

Lorsque vous utilisez le module pour tester le 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')
})

La MockStorageclasse pourrait ressembler à ceci

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

Lorsque vous utilisez votre module dans le code de production, passez plutôt l'adaptateur de stockage local réel

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

J'ai décidé de réitérer mon commentaire sur la réponse de Pumbaa80 en tant que réponse séparée afin qu'il soit plus facile de le réutiliser comme bibliothèque.

J'ai pris le code de Pumbaa80, je l'ai raffiné un peu, j'ai ajouté des tests et je l'ai publié en tant que module npm ici: https://www.npmjs.com/package/mock-local-storage .

Voici un code source: https://github.com/letsrock-today/mock-local-storage/blob/master/src/mock-localstorage.js

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

Le module crée un mock localStorage et sessionStorage sur l'objet global (window ou global, lequel d'entre eux est défini).

Dans les tests de mon autre projet, je l'ai exigé avec mocha comme ceci: mocha -r mock-local-storagepour rendre les définitions globales disponibles pour tout le code sous test.

Fondamentalement, le code ressemble à ceci:

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

Notez que toutes les méthodes ajoutées via Object.definePropertyafin qu'elles ne soient pas répétées, consultées ou supprimées en tant qu'éléments normaux et ne comptent pas dans leur longueur. J'ai également ajouté un moyen d'enregistrer le rappel qui est appelé lorsqu'un élément est sur le point d'être placé dans l'objet. Ce rappel peut être utilisé pour émuler une erreur de dépassement de quota dans les tests.

J'ai trouvé que je n'avais pas besoin de m'en moquer. Je pourrais changer le stockage local réel dans l'état où je le voulais setItem, puis interroger simplement les valeurs pour voir si cela a changé via getItem. Ce n'est pas aussi puissant que moqueur car vous ne pouvez pas voir combien de fois quelque chose a été changé, mais cela a fonctionné pour mes besoins.

Malheureusement, la seule façon de se moquer de l'objet localStorage dans un scénario de test est de modifier le code que nous testons. Vous devez envelopper votre code dans une fonction anonyme (ce que vous devriez faire de toute façon) et utiliser "injection de dépendances" pour passer une référence à l'objet window. Quelque chose comme:

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

Ensuite, à l'intérieur de votre test, vous pouvez spécifier:

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

C'est comme ça que j'aime le faire. Reste simple.

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

    });
  });

crédits à https://medium.com/@armno/til-mocking-localstorage-and-sessionstorage-in-angular-unit-tests-a765abdc9d87 Faites un faux stockage local, et espionnez le stockage local, quand il est appelé

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

Et ici on l'utilise

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

    expect(...
  });