Jsdom: लोकलस्टोरेज jsdom के भीतर काम नहीं करता है

ये दुर्भाग्य से ES2015 प्रॉक्सी के बिना काफी कठिन हैं :(। हम getItem/setItem/etc काम कर सकते हैं, लेकिन संपत्ति संशोधनों को सही ढंग से लागू करना वास्तव में संभव नहीं है।

यह अच्छा होगा कि कम से कम एक इन-मेमोरी अनुभव यानी लोकलस्टोरेज में सेशनस्टोरेज के समान व्यवहार हो
यह कम जटिल नहीं होना चाहिए?

नहीं, क्योंकि हम पर्याप्त रूप से एपीआई का अनुकरण नहीं कर सकते। सरल उपयोग-मामलों के लिए (यानी केवल getItem/setItem का उपयोग करके) यह काम कर सकता है, लेकिन जैसे ही गुणों को सीधे एक्सेस किया जाता है, हमारा कार्यान्वयन टूट जाएगा।

@ सेबमास्टर : मैंने एक अलग पैकेज के लिए अपने यूनिट परीक्षणों में उपयोग के लिए स्टोरेज इंटरफेस के लिए एक साधारण शिम लिखा था।

https://github.com/mnahkies/node-storage-shim

यह वर्तमान में एक क्षणिक समाधान है, और उन कुंजियों की सेटिंग को प्रतिबंधित करता है जो स्टोरेज इंटरफ़ेस के विधि नामों से टकराती हैं। यह वर्तमान में कल्पना के ईवेंट फायरिंग भागों को भी लागू नहीं करता है।

रियल लोकलस्टोरेज इन चाबियों को सेट करने के लिए सेटआइटम का उपयोग करने की अनुमति देता है, लेकिन प्रॉपर्टी एक्सेस का उपयोग करने से फ़ंक्शन परिभाषाएं उड़ जाती हैं, और एक बार सेट हो जाने पर आप प्रॉपर्टी एक्सेस का उपयोग करके उन कुंजियों तक नहीं पहुंच सकते।

हालाँकि इन सीमाओं से अलग मुझे लगता है कि यह एक बहुत ही वफादार कार्यान्वयन है:
https://github.com/mnahkies/node-storage-shim/blob/master/test.js

क्या आप विस्तार से बता सकते हैं कि एपीआई के किन पहलुओं का पर्याप्त रूप से अनुकरण नहीं किया जा सकता है?

जहां तक ​​​​मैं मुख्य बात बता सकता हूं कि वर्तमान में अनुकरण करना संभव नहीं है, संपत्ति सेटिंग के जवाब में स्टोरेज इवेंट फायरिंग है।

मुझे इसे jsdom के साथ एकीकृत करने में खुशी होगी यदि आपको लगता है कि यह उल्लेखित चेतावनी के साथ पर्याप्त था।

क्या आप विस्तार से बता सकते हैं कि एपीआई के किन पहलुओं का पर्याप्त रूप से अनुकरण नहीं किया जा सकता है?

लोकलस्टोरेज किसी भी संपत्ति के नाम को सीधे इंटरफ़ेस पर सेट करने का समर्थन करता है जैसा कि in

localStorage.myKey = "myVal";
localStorage.getItem('myKey') // 'myVal'

localStorage.setItem('otherKey', 'val')
localStorage.otherKey // 'val'

जिसे हम हमेशा एक गेटटर बनाकर कुछ हद तक अनुकरण कर सकते हैं यदि सेटइटम कहा जाता है, लेकिन हम प्रॉक्सी के बिना दूसरी तरफ (ऑब्जेक्ट पर मनमानी गुण सेट करना) का समर्थन करने में सक्षम नहीं होंगे।

ठीक है, मुझे लगता है कि संपत्ति के उपयोग से कुंजी सेट करने के संबंध में मुख्य मुद्दा यह है कि हम मूल्यों को सही ढंग से स्ट्रिंग करने के लिए मजबूर नहीं कर सकते हैं, जैसा कि वास्तविक इंटरफ़ेस करता है।

हाँ, यह स्थानीय भंडारण का एक बहुत ही महत्वपूर्ण पहलू है। हमें इसके लिए ES6 प्रॉक्सी की आवश्यकता है, v8 ने इसे अभी तक लागू नहीं किया है (माइक्रोसॉफ्ट और मोज़िला के पास पहले से ही है!)

हम इसी रोड ब्लॉक को jsdom में कई स्थानों पर मार रहे हैं

मुझे समझ में नहीं आता कि यह क्यों काम नहीं करेगा:

var localStorage = {
  getItem: function (key) {
    return this[key];
  },
  setItem: function (key, value) {
    this[key] = value;
  }
};

localStorage.setItem('foo', 'bar');
localStorage.bar = 'foo'
assert(localStorage.foo === 'bar')
assert(localStorage.getItem('bar') === 'foo')

मुझे किसकी याद आ रही है?

जब आप प्रॉपर्टी एक्सेस का उपयोग करके आइटम सेट करते हैं, तो वास्तविक लोकलस्टोरेज हमेशा मान को एक स्ट्रिंग के लिए मजबूर करता है।

जैसे:

localStorage.foo = 35
assert(typeof localStorage.foo === "string")

localStorage.foo = {my: 'object'}
assert(localStorage.foo === "[object Object]")

यह ES6 प्रॉक्सी के बिना संभव नहीं है, और स्थानीय स्टोरेज की एक महत्वपूर्ण विशेषता है

अच्छा ऐसा है। हालाँकि यदि आप वह शर्म कर रहे हैं;)

मुझे लगता है कि अधिक महत्वपूर्ण बात यह है कि यदि आप वस्तुओं के साथ ऐसा कर रहे हैं तो शायद यह एक बग है जिसे जेएसडॉम द्वारा मुखौटा किया जाएगा और फिर ब्राउज़र में होगा

+1

+1

शायद ऐसा कुछ काम करेगा https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage ?

मुझे लगता है कि आप पाएंगे कि आप अभी भी कुछ ऐसे व्यवहारों को याद कर रहे हैं जो वास्तविक स्थानीय भंडारण में ऊपर बताए गए हैं।

जुड़ा हुआ समाधान एक अच्छा पॉलीफिल बनाता है लेकिन मुझे नहीं लगता कि यह jsdom के लिए एक वफादार पर्याप्त कार्यान्वयन होगा

@mnahkies ईमानदारी से,

अंतिम टिप्पणी के लिए +1, एमडीएन पर उदाहरण setItem और getItem को भंडारण के एक्सेसर्स के रूप में उपयोग करता है। तो इसे एक सामान्य उपयोग के मामले के रूप में माना जा सकता है कि हम वास्तव में गायब हैं।

अभी के लिए, मैं इसे jasmine.createSpy साथ हल करता हूं (क्योंकि मैं जैस्मीन के साथ काम करता हूं, अन्य जासूस libs भी इसे कर सकते हैं)

@justinmchase का समाधान परीक्षण के लिए बहुत अच्छा है। सेशनस्टोरेज भी जोड़ना चाह सकते हैं।

    var jsdom = require('jsdom').jsdom;
    document = jsdom('hello world');
    window = document.defaultView;
    navigator = window.navigator;
    window.localStorage = window.sessionStorage = {
        getItem: function (key) {
            return this[key];
        },
        setItem: function (key, value) {
            this[key] = value;
        }
    };

FAIK यह अच्छी तरह से मजाक करता है। मेरे कुछ परीक्षणों को ठीक करता है। धन्यवाद।

यह आपके परीक्षणों को तब तक ठीक करता है जब तक कि कोई व्यक्ति गलती से संपत्ति के उपयोग का उपयोग करके स्थानीय भंडारण में एक वस्तु लिखता है और एक सूक्ष्म बग बनाता है।

मेरी राय में आप एक ऐसी वस्तु रखने से बेहतर होंगे जो एक स्वैपेबल स्टोरेज बैकएंड के साथ स्टोरेज को सारगर्भित करे जिसे आप अपने परीक्षणों में मेमोरी सॉल्यूशन के साथ संचालित कर सकते हैं।

इससे एन्क्रिप्शन, संपीड़न, कैशिंग के माध्यम से लिखने आदि जैसी अधिक जटिल चीजें करना आसान हो जाता है यदि आपको बाद की तारीख में इसकी आवश्यकता होती है।

यह समय है!!!

Node.js v6 आ गया है, और इसके साथ... PROXIES.

@Sebmaster , क्या आप webidl2js को अपडेट करने के लिए तैयार होंगे, जब नामित गेटर्स/सेटर्स/डिलीटर्स मौजूद हों? मुझे लगता है कि NamedNodeMap या NodeList या जो कुछ भी अन्य सामान के बारे में चिंता करने से पहले, हमें पहले इस अनुरोध को लक्षित करना चाहिए। यह अच्छा और स्व-निहित है और कोर प्राइमेटिव के प्रदर्शन को प्रभावित नहीं करेगा।

https://html.spec.whatwg.org/multipage/webstorage.html#storage -2 में आईडीएल है जिसे हमें समर्थन देने की आवश्यकता है। मुझे लगता है कि जाने का तरीका केवल प्रॉक्सी के व्यवहार को इम्प्लांट के getItem, आदि के लिए प्रतिनिधि बनाना होगा।

+1

आप नोड-लोकलस्टोरेज का उपयोग कर सकते हैं

var LocalStorage = require('node-localstorage').LocalStorage;
global.localStorage = new LocalStorage('./build/localStorageTemp');

global.document = jsdom('');

global.window = document.defaultView;
global.window.localStorage = global.localStorage;

@adjavaherian @justinmchase मैं jsdom के साथ खेल रहा था जिसका उपयोग मैं प्रतिक्रिया-jwt-auth और प्रतिक्रिया-jwt-auth-redux दोनों में परीक्षण के लिए करता हूं और यह बहुत अच्छा काम करता है। हालांकि, मैं आइसोमॉर्फिक विकास के लिए localStorage और sessionStorage । मैंने ठीक उसी समस्या का सामना किया है कि इसे कैसे ठीक से परीक्षण किया जाए और आपका पॉलीफिल बहुत अच्छा काम करता है। आप लोगों को धन्यवाद! यह बहुत अच्छा होगा यदि यह डिफ़ॉल्ट रूप से jsdom के साथ आता है।

इसके लिए webidl2js सपोर्ट अब मौजूद है। अगर लोग इसे लेना चाहते हैं, तो मैं हाल ही में उतरे DOMStringList कार्यान्वयन (डेटासेट के लिए) का अध्ययन करने का सुझाव दूंगा।

अभी के लिए हम सब कुछ इन-मेमोरी रख सकते हैं, हालाँकि अंततः हमें डिस्क को स्टोर करने का एक तरीका प्रदान करना चाहिए यदि लोग ऐसा चाहते हैं। (क्या लोग ऐसा चाहते हैं?)

मैं इसे लागू करने पर काम करना चाहता हूं। आप मुझे यह मुद्दा सौंप सकते हैं।

यह नकली बेहतर काम करता है क्योंकि जब कोई कुंजी संग्रहीत नहीं होती है, तो localStorage.getItem() को null लौटाना चाहिए, न कि undefined :

const jsdom = require('jsdom');
// setup the simplest document possible
const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');;

// get the window object out of the document
const win = doc.defaultView;

win.localStorage = win.sessionStorage = {
  getItem: function(key) {
    const value = this[key];
    return typeof value === 'undefined' ? null : value;
  },
  setItem: function (key, value) {
    this[key] = value;
  },
  removeItem: function(key) {
    return delete this[key]
  }
};

// set globals for mocha that make access to document and window feel
// natural in the test environment
global.document = doc;
global.window = win;

यह प्रासंगिक क्यों है? ब्राउज़र वातावरण में नीचे दी गई रेखा ठीक काम करती है। json.parse() विफल रहता है अगर तर्क के रूप में undefined पारित किया जाता है, लेकिन पैरामीटर के रूप में null साथ ठीक काम करता है:

let users = JSON.parse(localStorage.getItem('users')) || [];

@simoami बस win.localStorage = win.sessionStorage = { ... } साथ अपने असाइनमेंट चेनिंग के साथ देखें। यह वही ऑब्जेक्ट रेफरेंस है जो दोनों वेरिएबल्स को असाइन किया गया है इसलिए किसी भी गेट/सेट फ़ंक्शंस को कॉल करना उसी अंतर्निहित ऑब्जेक्ट तक पहुंच जाएगा। उदाहरण के लिए localStorage.set('foo', 'bar') कॉल करने का मतलब है कि sessionStorage.get('foo') काम करेगा - यह साधारण परीक्षणों के लिए ठीक हो सकता है, लेकिन कुछ भी गड़बड़ कर देगा जिसके लिए अलग भंडारण की आवश्यकता होती है।

https://gist.github.com/rkurbatov/17468b2ade459a7498c8209800287a03 - हम इस पॉलीफिल का उपयोग स्थानीय/सत्र भंडारण दोनों के लिए करते हैं। यह @capaj . द्वारा https://github.com/capaj/localstorage-polyfill पर आधारित है

जो लोग बाद में इस धागे पर ठोकर खाते हैं, हाल के jsdom सुधारों के बाद आपको window._localStorage को अपने स्वयं के नकली भंडारण में सेट करने की आवश्यकता है

प्रतिक्रिया के रूप में, मैं इस समस्या के समाधान के रूप में उल्लिखित स्थानीय स्थानीय स्टोरेज ईवेंट नहीं ढूंढ सका

और जो कोई भी समानांतर में jsdom का उपयोग करता है और स्थानीय स्टोरेज का भारी उपयोग करता है, node-localstorage आदि बहुत अधिक बेकार हैं, आप पहिया का पुन: आविष्कार भी कर सकते हैं, वे समानांतर उपयोग के लिए भी डिज़ाइन नहीं किए गए हैं, बुनियादी चीजें जैसे for(var key in localStorage) या Object.keys(localStorage) आदि या तो काम नहीं करती हैं