জাভাস্ক্রিপ্ট ইউনিট পরীক্ষায় লোকালস্টোরেজকে কীভাবে উপহাস করবেন?

Question 1

বিদ্রূপ করার জন্য কোনও লাইব্রেরি আছে? localStorage ?

আমি ব্যবহার করছি আমার অন্যান্য জাভাস্ক্রিপ্টের বেশিরভাগ উপহাসের জন্য সিনন.জেএস এবং এটি পেয়েছি যে এটি সত্যিই দুর্দান্ত।

আমার প্রাথমিক পরীক্ষাটি দেখায় যে লোকালস্টোরেশন ফায়ারফক্সে (স্যাডফেস) অ্যাসাইনযোগ্য হতে অস্বীকৃতি জানায় তাই আমার সম্ভবত এটির জন্য কিছুটা হ্যাক প্রয়োজন: /

আমার এখন পর্যন্ত বিকল্পগুলি (যেমন আমি দেখছি) নীচে রয়েছে:

আমার সমস্ত কোড ব্যবহার করে এমন মোড়ক ফাংশন তৈরি করুন এবং সেগুলি উপহাস করুন
লোকালস্টোরেশনের জন্য কিছু প্রকারের (জটিল হতে পারে) স্টেট ম্যানেজমেন্ট (পরীক্ষার আগে স্ন্যাপশট লোকালস্টোরেজ, ক্লিনআপ পুনরুদ্ধার স্ন্যাপশটে) তৈরি করুন local
??????

আপনি এই পদ্ধতির বিষয়ে কী ভাবেন এবং আপনার কি মনে হয় যে এটির আরও ভাল উপায় আছে? যে কোনও উপায়ে আমি ওপেন সোর্স সদ্ব্যবহারের জন্য গিথুব তৈরির ফলস্বরূপ "লাইব্রেরি" রাখব।

Question 2

জেসমিনের সাথে এটি উপহাস করার সহজ উপায়:

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()গ্লোবাল স্কোপে উপরে দেখানো ফাংশনটি ঘোষণা করুন (সাধারণ জায়গাটি একটি স্পেশাল্পার.জেএস স্ক্রিপ্ট)।

Question 3

আপনার প্রয়োজনের জন্য কেবল গ্লোবাল লোকালস্টোর / সেশনস স্টোরেজ (তাদের একই এপিআই রয়েছে) উপহাস করুন।
উদাহরণ স্বরূপ:

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

Question 4

কোনও অবজেক্টের কনস্ট্রাক্টর ফাংশনে নির্ভরতা ইনজেকশনের বিকল্পটিও বিবেচনা করুন।

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)

উপহাস এবং ইউনিট পরীক্ষার সাথে সামঞ্জস্য রেখে আমি স্টোরেজ বাস্তবায়নের পরীক্ষা এড়াতে পছন্দ করি। উদাহরণস্বরূপ, আপনি কোনও আইটেম সেট করার পরে স্টোরেজের দৈর্ঘ্য বৃদ্ধি পেয়েছে কিনা তা পরীক্ষা করে দেখার কোনও অর্থ নেই etc.

যেহেতু প্রকৃত লোকালস্টোরেজ অবজেক্টে পদ্ধতিগুলি প্রতিস্থাপন করা স্পষ্টত অবিশ্বাস্য তাই একটি "বোবা" মক স্টোরেজ ব্যবহার করুন এবং স্বতন্ত্র পদ্ধতিগুলি পছন্দমতো স্ট্যাব করুন যেমন:

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

Question 5

এই আমি কি কি...

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

Question 6

বর্তমান সমাধানগুলি ফায়ারফক্সে কাজ করবে না। এটি হ'ল লোকালস্টোরেশনটি এইচটিএমএল স্পেক দ্বারা সংশোধনযোগ্য নয় বলে সংজ্ঞায়িত করা হয়েছে। তবে স্থানীয় স্থানীয় স্টোরেজের প্রোটোটাইপটি সরাসরি অ্যাক্সেস করে আপনি এটি পেতে পারেন।

ক্রস ব্রাউজার সমাধানটি Storage.prototypeউদাহরণস্বরূপ বস্তুগুলিকে বিদ্রূপ করা

পরিবর্তে spyOn (localStorage, 'setItem') ব্যবহার

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

থেকে নেওয়া bzbarsky এবং teogeos এখানে এর জবাব দেওয়া https://github.com/jasmine/jasmine/issues/299

Question 7

বিদ্রূপ করার জন্য কোনও লাইব্রেরি আছে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

})();

আমার প্রাথমিক পরীক্ষাটি দেখায় যে লোকালস্টোরেশন ফায়ারফক্সে যোগ্য হতে অস্বীকার করে

শুধুমাত্র বৈশ্বিক প্রসঙ্গে। উপরের মতো মোড়ক ফাংশন সহ, এটি ঠিক কাজ করে।

Question 8

সিনোন স্পাই এবং মক ব্যবহারের উদাহরণ এখানে রয়েছে:

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

Question 9

কয়েকটি জবাব হিসাবে প্রস্তাবিত হিসাবে localStorageগ্লোবাল windowঅবজেক্টের সম্পত্তি ওভাররাইটিং করা বেশিরভাগ জেএস ইঞ্জিনগুলিতে কাজ করবে না, কারণ তারা localStorageডেটা সম্পত্তিটি লিখিতযোগ্য এবং কনফিগারযোগ্য না হিসাবে ঘোষণা করে ।

তবে আমি জানতে পেরেছিলাম যে কমপক্ষে ফ্যান্টমজেএসের (সংস্করণ 1.9.8) ওয়েবকিট সংস্করণ সহ আপনি লগ্যাসি এপিআই ব্যবহার করতে পারবেন __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 });

এই পদ্ধতির সুবিধা হ'ল আপনি যে কোডটি পরীক্ষা করতে চলেছেন তা আপনাকে সংশোধন করতে হবে না।

Question 10

স্টোরেজ অবজেক্টটি ব্যবহার করা প্রতিটি পদ্ধতিতে আপনাকে পাস করতে হবে না। পরিবর্তে, আপনি স্টোরেজ অ্যাডাপ্টার স্পর্শ যে কোনও মডিউল জন্য একটি কনফিগারেশন প্যারামিটার ব্যবহার করতে পারেন।

আপনার পুরানো মডিউল

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

উত্পাদন কোডে আপনার মডিউলটি ব্যবহার করার সময়, এর পরিবর্তে আসল লোকালস্টোরেজ অ্যাডাপ্টারটি পাস করুন

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

Question 11

আমি পৃথক উত্তর হিসাবে পুম্বা ৮০ এর উত্তরে আমার মন্তব্যটি পুনরায় বলার সিদ্ধান্ত নিয়েছি যাতে এটি একটি গ্রন্থাগার হিসাবে পুনরায় ব্যবহার করা সহজ হবে।

আমি পুম্বা 80 এর কোডটি নিয়েছি, এটি কিছুটা পরিমার্জন করেছি, পরীক্ষা যুক্ত করেছি এবং এটি এনপিএম মডিউল হিসাবে এখানে প্রকাশ করেছি: https://www.npmjs.com/package/mock-local-stores ।

এখানে একটি উত্স কোড: https://github.com/letsrock-today/mock-local-storage/blob/master/src/mock-localstores.js

কিছু পরীক্ষা: https://github.com/letsrock-today/mock-local-stores/blob/master/test/mock-localstores.js

মডিউল গ্লোবাল অবজেক্টে মক লোকাল স্টোরেজ এবং সেশন স্টোরেজ তৈরি করে (উইন্ডো বা গ্লোবাল, যার মধ্যে কোনটি সংজ্ঞায়িত করা হয়)।

আমার অন্যান্য প্রকল্পের পরীক্ষাগুলিতে আমি এটি মোচা সহ এটি প্রয়োজনীয়: mocha -r mock-local-storageপরীক্ষার অধীনে সমস্ত কোডের জন্য বিশ্বব্যাপী সংজ্ঞা উপলব্ধ করতে available

মূলত, কোডটি নীচের মত দেখাচ্ছে:

(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যাতে নিয়মিত আইটেম হিসাবে সেগুলি পুনরাবৃত্তি, অ্যাক্সেস বা সরিয়ে ফেলা হবে না এবং দৈর্ঘ্যে গণনা করা হবে না। এছাড়াও আমি কলব্যাকটি নিবন্ধ করার জন্য একটি উপায় যুক্ত করেছি যা বলা হয় যখন কোনও আইটেম বস্তুতে রাখা হয়। এই কলব্যাক পরীক্ষার ক্ষেত্রে কোটা ছাড়িয়ে গিয়ে কোটা অনুকরণ করতে ব্যবহৃত হতে পারে।

Question 12

আমি খুঁজে পেয়েছি যে এটির উপহাস করার দরকার নেই। আমি আসল স্থানীয় স্টোরেজকে যে রাজ্যটি দিয়ে চাইছিলাম সেই স্থানে পরিবর্তন করতে পারি setItem, তারপরে মানগুলি জিজ্ঞাসা করে এটির মাধ্যমে পরিবর্তন হয়েছে কিনা তা দেখুন getItem। এটি ঠাট্টা-বিদ্রূপ করার মতো ততটা শক্তিশালী নয় কারণ আপনি দেখতে পাচ্ছেন না যে কতবার কিছু পরিবর্তন হয়েছিল, কিন্তু এটি আমার উদ্দেশ্যে কাজ করেছে।

Question 13

দুর্ভাগ্যক্রমে, আমরা পরীক্ষার দৃশ্যে স্থানীয় স্টোরেজ অবজেক্টকে উপহাস করার একমাত্র উপায় হ'ল আমরা যা পরীক্ষা করছি সে কোডটি পরিবর্তন করা। আপনাকে আপনার কোড একটি বেনামে ফাংশনে আবদ্ধ করতে হবে (যা আপনার যাইহোক করা উচিত) এবং উইন্ডো অবজেক্টের একটি রেফারেন্স পাস করার জন্য "নির্ভরতা ইনজেকশন" ব্যবহার করুন। কিছুটা এইরকম:

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

তারপরে, আপনার পরীক্ষার অভ্যন্তরে, আপনি উল্লেখ করতে পারেন:

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

Question 14

এইভাবে আমি এটি করতে পছন্দ করি। এটি সহজ রাখে।

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

    });
  });

Question 15

https://medium.com/@armno/til-mocking-localstores-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(...
  });