Jsdom: `element.getBoundingClientRect` और `element.getClientRects` लागू करें

मुझे लगता है कि getBoundingClientRect को कम से कम एक डमी फ़ंक्शन के रूप में लागू किया जाना चाहिए जो डिफ़ॉल्ट मान लौटाता है।

यह उचित लगता है; सब कुछ और वह सब के लिए शून्य। पैच स्वागत है।

https://github.com/tmpvar/jsdom/pull/689

धन्यवाद, @F1LT3R और @domenic! (हालांकि, इस बीच, मैं वास्तव में पहले से ही इन परीक्षणों को नोडुनिट से उपयुक्त वेब-आधारित ढांचे में पोर्ट करने के लिए आगे बढ़ चुका हूं: क्विनिट)। :+1:

क्या getClientRects jsdom में काम करता है? इस jQuery टिकट के अनुसार, यह नहीं है

getClientRects समर्थित नहीं है, केवल getBoundingClientRect प्राप्त करें। एक पीआर getClientRects() जो हमेशा एक खाली सरणी देता है (या शायद अपने सभी मूल्यों के लिए शून्य के साथ एक रेक्ट के साथ एक सरणी ??) बहुत अच्छा होगा।

हाँ jQuery 1.12.0 getClientRects का उपयोग करने के लिए अभी अपने मूल स्टाइल फ़ंक्शन को अपडेट किया है। हम एक ही मुद्दे में भागे। मैं इसे सोमवार को जोड़कर एक पीआर करने में सक्षम हो सकता हूं। हमारे मामले में यह .height() फ़ंक्शन था जो अब फेंक रहा है।

मैं el.getBoundingClientRect() से सही मान प्राप्त करने में सक्षम नहीं हूं। लौटाई गई वस्तु में सभी सही कुंजियां (ऊंचाई, चौड़ाई, शीर्ष, आदि) होती हैं, लेकिन प्रत्येक मान हमेशा 0 होता है। मुझे यह जानने में दिलचस्पी है कि क्या कोई और इसका अनुभव कर रहा है।

यह हमेशा विफल रहता है:

    it('getBoundingClientRect produces correct height', () => {
      container.style.height = '300px'
      expect(container.getBoundingClientRect().height).eql(300)
    })

मेरे परीक्षणों को पास करने के लिए मेरा समाधान (जो एक ऐसा वाक्यांश है जो मुझे कहने के लिए पीड़ा देता है) कुछ इस तरह है:

getComputedElHeight(el) {
    return Number(window.getComputedStyle(el).height.split('px')[0])
  }

मैंने सोचा था कि जब तक यह मुद्दा खुला रहेगा, मैं इसे साझा करूंगा।

मुझे नहीं लगता कि इसे सही मूल्यों के लिए लागू किया गया था। मुझे लगता है कि यह था
केवल सही विशेषताओं के लिए लागू किया गया।
मार्च 14, वर्ष 2016 9:02 बजे, "lushfuture" [email protected] लिखा है:

मैं से सही मान प्राप्त करने में सक्षम नहीं हूँ
el.getBoundingClientRect ()। जो वस्तु वापस मिलती है, उसमें सब कुछ होता है
सही कुंजियाँ (ऊँचाई, चौड़ाई, ऊपर, आदि) लेकिन हर मान हमेशा 0 होता है। मैं हूँ
यह जानने में दिलचस्पी है कि कोई और इसका अनुभव कर रहा है या नहीं।

यह हमेशा विफल रहता है:

it('getBoundingClientRect produces correct height', () => {
  container.style.height = '300px'
  expect(container.getBoundingClientRect().height).eql(300)
})

मेरे परीक्षणों को पास करने के लिए मेरा समाधान (जो एक ऐसा वाक्यांश है जो मुझे पीड़ा देता है
कहते हैं) कुछ इस तरह है:

getComputedElHeight (एल) {
वापसी संख्या (window.getComputedStyle(el).height.split('px')[0])
}

मैंने सोचा था कि जब तक यह मुद्दा खुला रहेगा, मैं इसे साझा करूंगा।

-
इस ईमेल का सीधे उत्तर दें या इसे GitHub पर देखें
https://github.com/tmpvar/jsdom/issues/653#issuecomment -196300151।

हां, इसे वास्तविक मूल्यों को वापस करने के लिए अनिवार्य रूप से एक संपूर्ण लेआउट इंजन को लागू करने की आवश्यकता होगी जो एक बड़ा उपक्रम होगा। अंक #1322 उस विषय को शामिल करता है।

क्या परीक्षण में उस विधि (सभी तत्वों के लिए) को ओवरराइड करना संभव है ताकि इसका उपयोग करने वाले कोड का परीक्षण करते समय प्रयोग करने योग्य मूल्य प्राप्त हो सके?

हाँ, ठीक उसी तरह जैसे आप ब्राउज़र में करते हैं: Element.prototype.getBoundingClientRect = function () { ... }

मैंने करना समाप्त कर दिया
विंडो._कोर. HTMLDivElement.prototype.getBoundingClientRect

जो ठीक काम किया।

यह jsdom के भविष्य के रिलीज में टूट जाएगा (बहुत जल्द, वास्तव में)। बस ._core हटा दें।

धन्यवाद मैं कोशिश करूँगा कि
2 सितंबर 2016 को रात 9:03 बजे, "डोमेनिक डेनिकोला" नोटिफिकेशन @github.com ने लिखा:

यह jsdom के भविष्य के रिलीज में टूट जाएगा (बहुत जल्द, वास्तव में)। अभी - अभी
_कोर को हटा दें।

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की थी।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/tmpvar/jsdom/issues/653#issuecomment -244520584, या म्यूट करें
सूत्र
https://github.com/notifications/unsubscribe-auth/AEtD9luz1uJWmJ3JlgdwuO1i5MP04_BXks5qmNWCgaJpZM4Ayv3U
.

परीक्षण के लिए, यदि आप तत्वों को नियंत्रित करते हैं, तो आप प्रति उदाहरण ओवरराइड भी कर सकते हैं।

उदाहरण:

function createMockDiv (width, height) {
  const div = document.createElement("div");
  Object.assign(div.style, {
    width: width+"px",
    height: height+"px",
  });
  // we have to mock this for jsdom.
  div.getBoundingClientRect = () => ({
    width,
    height,
    top: 0,
    left: 0,
    right: width,
    bottom: height,
  });
  return div;
}

कर्म कोड कैसे लिखें यदि getboundingclientrect() विधि ts फ़ाइल में अन्य स्थिति में है।
क्या कोई कृपया मदद कर सकता है।

window.HTMLElement.prototype.getBoundingClientRect = function () {
  return {
    width: parseFloat(this.style.width) || 0,
    height: parseFloat(this.style.height) || 0,
    top: parseFloat(this.style.marginTop) || 0,
    left: parseFloat(this.style.marginLeft) || 0
  }
}

और यह भी ऑफसेट के लिए

Object.defineProperties(window.HTMLElement.prototype, {
  offsetWidth: {
    get () { return parseFloat(this.style.width) || 0 }
  },
  offsetHeight: {
    get () { return parseFloat(this.style.height) || 0 }
  },
  offsetTop: {
    get () { return parseFloat(this.style.marginTop) || 0 }
  },
  offsetLeft: {
    get () { return parseFloat(this.style.marginLeft) || 0 }
  }
})