Jsdom: `element.getBoundingClientRect`と` element.getClientRects`を実装します

getBoundingClientRectは、少なくともデフォルト値を返すダミー関数として実装する必要があると思います。

それは合理的なようです。 すべてのゼロ。 パッチを歓迎します。

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

ありがとう、 @ F1LT3Rと@domenic！ （ただし、その間に、私は実際にこれらのテストをノードユニットから適切なWebベースのフレームワークであるQUnitに移植するようになりました）。 ：+1：

getClientRectsはjsdomで機能しますか？ このjqueryチケットによると、

getClientRectsはサポートされておらず、getBoundingClientRectのみがサポートされています。 常に空の配列（または、すべての値がゼロの単一のrectを持つ配列??）を常に返すgetClientRects（）を追加するPRは素晴らしいでしょう。

ええ、jquery 1.12.0 、コアスタイル関数をgetClientRectsを使用するように更新しました。 同じ問題が発生しました。 月曜日にこれを追加してPRを行うことを検討できるかもしれません。 私たちの場合、現在スローされているのは.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])
  }

この問題がまだ開いている間に私が共有したいと思っただけです。

正しい値になるように実装されたとは思いません。 私はそれがそうだったと思う
正しい属性のみを持つように実装されています。
2016年3月14日午前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）{
Number（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削除するだけです。

ありがとう私はそれを試してみます
2016年9月2日午後9時3分、「DomenicDenicola」 [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（）メソッドがtsファイルのifelse条件にある場合のカルマコードの記述方法。
誰でも助けてくれませんか。

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