Jsdom: نفِّذ `element.getBoundingClientRect` و` element.getClientRects`

أعتقد أنه يجب تنفيذ getBoundingClientRect على الأقل كدالة وهمية تعيد القيم الافتراضية.

يبدو ذلك معقولا. أصفار لكل شيء وكل ذلك. ترحيب التصحيح.

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

شكرا ، @ F1LT3R و

هل يعمل getClientRects في jsdom؟ وفقًا لتذكرة المسج هذه ، فإنها لا تفعل ذلك

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 (el) {
رقم الإرجاع (window.getComputedStyle (el) .height.split ('px') [0])
}

فقط اعتقدت أنني سأشارك بينما لا تزال هذه المشكلة مفتوحة.

-
قم بالرد على هذا البريد الإلكتروني مباشرة أو قم بعرضه على GitHub
https://github.com/tmpvar/jsdom/issues/653#issuecomment -196300151.

نعم ، إن جعله يعود بقيم حقيقية سيتطلب بشكل أساسي تنفيذ محرك تخطيط كامل والذي سيكون مهمة ضخمة. يغطي العدد 1322 هذا الموضوع.

هل من الممكن في الاختبارات تجاوز هذه الطريقة (لجميع العناصر) للحصول على قيمة قابلة للاستخدام أثناء اختبار الكود الذي يستخدمها؟

نعم ، بنفس الطريقة التي تستخدمها في المتصفح: Element.prototype.getBoundingClientRect = function () { ... }

انتهى بي الأمر
window._core. HTMLDivElement.prototype.getBoundingClientRect

التي عملت بشكل جيد.

سيؤدي ذلك إلى كسر الإصدارات المستقبلية من jsdom (قريبًا جدًا ، في الواقع). فقط قم بإزالة ._core .

شكرا سأحاول ذلك
في 2 سبتمبر 2016 ، الساعة 9:03 مساءً ، كتب "Domenic Denicola" [email protected] :

سيؤدي ذلك إلى كسر الإصدارات المستقبلية من jsdom (قريبًا جدًا ، في الواقع). مجرد
إزالة _core.

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على 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 () في حالة if else في ملف 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 }
  }
})