Jsdom: `element.getBoundingClientRect` 및 `element.getClientRects` 구현

getBoundingClientRect는 최소한 기본값을 반환하는 더미 함수로 구현되어야 한다고 생각합니다.

합리적으로 보입니다. 모든 것에 대해 0입니다. 패치를 환영합니다.

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

@F1LT3R , @domenic 감사합니다! (그 사이에 나는 실제로 이미 이러한 테스트를 nodeunit에서 적절한 웹 기반 프레임워크인 QUnit으로 이식하기로 했습니다.) :+1:

getClientRects가 jsdom에서 작동합니까? 이 jquery 티켓 에 따르면,

getClientRects는 지원되지 않고 getBoundingClientRect만 지원됩니다. 항상 빈 배열(또는 모든 값에 대해 0이 있는 단일 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시 2분에 "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 제거하면 됩니다.

감사합니다 시도해보겠습니다
2016년 9월 2일 오후 9시 3분에 "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() 메서드가 ts 파일의 if else 조건에 있는 경우 카르마 코드를 작성하는 방법.
누구든지 도와주세요.

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