Jsdom: 实现`element.getBoundingClientRect`和`element.getClientRects`

我认为 getBoundingClientRect 至少应该作为一个返回默认值的虚拟函数来实现。

这似乎是合理的； 一切都归零。 欢迎打补丁。

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

谢谢@F1LT3R和@domenic！ （尽管与此同时，我实际上已经开始将这些测试从 nodeunit 移植到适当的基于 Web 的框架：QUnit）。 ：+1：

getClientRects 在 jsdom 中工作吗？ 根据这个jquery ticket ，它没有

不支持 getClientRects，只支持 getBoundingClientRect。 一个 PR 添加 getClientRects() 总是返回一个空数组（或者可能是一个具有单个矩形的数组，其所有值都为零？？）会很棒。

是的 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”通知@github.com 写道：

我无法从中获得正确的值
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])
}

只是想我会在这个问题仍然存在的时候分享。

—
直接回复此邮件或在 GitHub 上查看
https://github.com/tmpvar/jsdom/issues/653#issuecomment -196300151。

是的，让它返回真实值本质上需要实现一个完整的布局引擎，这将是一项艰巨的任务。 问题 #1322 涵盖了该主题。

在测试中是否有可能在测试使用它的代码时覆盖该方法（对于所有元素）以获得可用值？

是的，就像在浏览器中一样： Element.prototype.getBoundingClientRect = function () { ... }

我最终做了
窗口._核心。 HTMLDivElement.prototype.getBoundingClientRect

哪个工作得很好。

这将在 jsdom 的未来版本中打破（实际上很快）。 只需删除._core 。

谢谢我试试
2016 年 9 月 2 日晚上 9:03，“Domenic Denicola”通知@github.com 写道：

这将在 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 文件中的 if else 条件下，如何编写 karma 代码。
任何人都可以帮忙。

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