Як знущатися з локального зберігання в тестах блоку JavaScript?

Чи є там бібліотеки, щоб знущатися localStorage?

Я використовую Sinon.JS для більшості моїх інших глузувань JavaScript, і я виявив, що це справді чудово.

Моє первісне тестування показує, що localStorage відмовляється призначатись у firefox (sadface), тому мені, певно, знадобиться якийсь злом навколо цього: /

На сьогоднішній день мої варіанти (як я бачу) такі:

1. Створіть функції обгортання, які використовує весь мій код, і знущаються над ними
2. Створіть якесь (може бути складне) управління державою (знімок localStorage перед тестом, під час очищення знімка відновлення) для localStorage.
3. ??????

Як ви думаєте про ці підходи та чи вважаєте ви, що є інші кращі способи досягти цього? У будь-якому випадку я покладу отриману "бібліотеку", яку я в кінцевому підсумку буду створювати на github для відкритого коду.

Ось простий спосіб знущатися з Жасмін:

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

Якщо ви хочете знущатися над локальним сховищем у всіх своїх тестах, оголосьте про beforeEach()функцію, показану вище, у глобальній області ваших тестів (звичайне місце - це сценарій specHelper.js ).

просто знущайтеся над глобальним localStorage / sessionStorage (у них той самий API) для ваших потреб.
Наприклад:

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

І тоді те, що ви насправді робите, - це щось таке:

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

Також розглянемо варіант введення залежностей у функцію конструктора об'єкта.

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)

Відповідно до глузуючого та блочного тестування, мені подобається уникати тестування реалізації пам’яті. Наприклад, немає сенсу перевіряти, чи збільшилась тривалість зберігання після встановлення елемента тощо.

Оскільки явно ненадійно замінити методи на реальний об’єкт localStorage, використовуйте "тупу" mockStorage та заглушуйте окремі методи за бажанням, наприклад:

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

Це те, що я роблю ...

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

Поточні рішення не працюватимуть у Firefox. Це тому, що localStorage визначається специфікацією html як такий, що не може бути змінений. Однак ви зможете обійти це, звернувшись безпосередньо до прототипу localStorage.

Рішення перехресного браузера - це знущання над об'єктами, Storage.prototypeнаприклад

замість spyOn (localStorage, 'setItem') використовуйте

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

взяті з відповідей bzbarsky та teogeos тут https://github.com/jasmine/jasmine/isissue/299

Чи є там бібліотеки, щоб знущатися localStorage?

Я тільки що написав:

(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

})();

Моє первісне тестування показує, що localStorage відмовляється призначатись у firefox

Тільки в глобальному контексті. З функцією обгортки, як описано вище, вона працює чудово.

Ось приклад використання синона шпигуна та знущань:

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

Перезапис localStorageвластивостей глобального windowоб'єкта, як це пропонується в деяких відповідях, не працюватиме в більшості двигунів JS, оскільки вони оголошують localStorageвластивість даних не підлягає запису і не можна настроювати.

Однак я дізнався, що принаймні за допомогою версії WebKit PhantomJS (версія 1.9.8) ви можете використовувати застарілий API __defineGetter__для контролю того, що відбувається, якщо до localStorageнього звертаються. І все-таки було б цікаво, якби це працювало і в інших браузерах.

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

Перевага такого підходу полягає в тому, що вам не доведеться змінювати код, який ви збираєтеся протестувати.

Не потрібно передавати об’єкт зберігання кожному методу, який його використовує. Натомість ви можете використовувати параметр конфігурації для будь-якого модуля, який стосується адаптера пам'яті.

Ваш старий модуль

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

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

Ваш новий модуль з функцією конфігурації "обгортка"

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

Коли ви використовуєте модуль для тестування коду

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

MockStorageКлас може виглядати наступним чином

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

Використовуючи модуль у виробничому коді, замість цього передавайте справжній адаптер localStorage

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

Я вирішив повторити свій коментар до відповіді Pumbaa80 як окрему відповідь, щоб було простіше використовувати його як бібліотеку.

Я взяв код Pumbaa80, трохи уточнив його, додав тести і опублікував тут як модуль npm: https://www.npmjs.com/package/mock-local-storage .

Ось вихідний код: https://github.com/letsrock-today/mock-local-storage/blob/master/src/mock-localstorage.js

Деякі тести: https://github.com/letsrock-today/mock-local-storage/blob/master/test/mock-localstorage.js

Модуль створює макет localStorage і sessionStorage на глобальному об'єкті (вікно або глобальний, хто з них визначений).

У інших тестах мого проекту я вимагав цього mocha -r mock-local-storageзробити так, щоб зробити глобальні визначення доступними для всіх тестових кодів.

В основному код виглядає так:

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

Зауважте, що всі методи, додані через, Object.definePropertyщоб їх не повторювали, не мали доступу та не видаляли як звичайні елементи та не враховували в довжину. Також я додав спосіб зареєструвати зворотний виклик, який викликається, коли елемент збирається ввести в об’єкт. Цей зворотний виклик може використовуватися для імітації перевищення квоти в тестах.

Я виявив, що мені не потрібно знущатися над цим. Я міг би змінити фактичну локальну пам’ять на стан, через який я хотів setItem, а потім просто запитати значення, щоб побачити, чи змінилось воно через getItem. Це не настільки потужно, як глузування, тому що ви не бачите, скільки разів щось змінювали, але це працювало для моїх цілей.

На жаль, єдиний спосіб, коли ми можемо знущатися над об'єктом localStorage в тестовому сценарії, - це змінити код, який ми тестуємо. Вам потрібно загорнути свій код в анонімну функцію (яку ви все одно повинні робити) і використовувати "введення залежності" для передачі посилання на об'єкт вікна. Щось на зразок:

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

Потім всередині вашого тесту ви можете вказати:

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

Ось як мені подобається це робити. Зберігає це просто.

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

    });
  });

кредити на https://medium.com/@armno/til-mocking-localstorage-and-sessionstorage-in-angular-unit-tests-a765abdc9d87 Зробіть підроблений локальний сховище та шпигуйте за локальним зберіганням, коли воно встановлено

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

І ось ми його використовуємо

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

    expect(...
  });