Jsdom: Implementieren Sie `element.getBoundingClientRect` und `element.getClientRects`

Ich denke, getBoundingClientRect sollte zumindest als Dummy-Funktion implementiert werden, die Standardwerte zurückgibt.

Das scheint vernünftig; Nullen für alles und so. Patch willkommen.

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

Danke, @F1LT3R und @domenic! (Obwohl ich in der Zwischenzeit eigentlich schon dazu übergegangen bin, diese Tests von nodeunit auf ein entsprechendes webbasiertes Framework zu portieren: QUnit). :+1:

Funktioniert getClientRects in jsdom? Laut diesem jquery-Ticket ist dies nicht der Fall

getClientRects wird nicht unterstützt, nur getBoundingClientRect. Ein PR, der getClientRects() hinzufügt, der immer ein leeres Array zurückgibt (oder vielleicht ein Array mit einem einzelnen Rect mit Nullen für alle seine Werte??) wäre großartig.

Ja, jquery 1.12.0 gerade seine Kernstilfunktion aktualisiert, um getClientRects . Wir sind auf das gleiche Problem gestoßen. Ich kann vielleicht in der Lage sein, eine PR zu machen, die dies am Montag hinzufügt. In unserem Fall war es die Funktion .height() , die jetzt auslöst.

Ich konnte nicht die richtigen Werte von el.getBoundingClientRect() abrufen. Das zurückgegebene Objekt hat alle richtigen Schlüssel (Höhe, Breite, Spitze usw.), aber jeder Wert ist immer 0. Ich bin daran interessiert zu wissen, ob dies bei anderen auch so ist.

Das schlägt immer fehl:

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

Meine Problemumgehung, um meine Tests zu bestehen (was ein Satz ist, der mich schmerzt) ist ungefähr so:

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

Ich dachte nur, ich würde es teilen, solange dieses Thema noch offen ist.

Ich glaube nicht, dass es implementiert wurde, um die richtigen Werte zu haben. Ich denke, es war
implementiert, um nur die richtigen Attribute zu haben.
Am 14. März 2016 um 09:02 schrieb "lushfuture" [email protected] :

Ich habe nicht die richtigen Werte von bekommen
el.getBoundingClientRect(). Das zurückgegebene Objekt hat alle
richtige Tasten (Höhe, Breite, Oben usw.), aber jeder Wert ist immer 0. Ich bin
interessiert, ob das noch jemand erlebt.

Das schlägt immer fehl:

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

Mein Workaround, um meine Tests zu bestehen (was ein Satz ist, der mich schmerzt
sagen) ist ungefähr so:

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

Ich dachte nur, ich würde es teilen, solange dieses Thema noch offen ist.

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/tmpvar/jsdom/issues/653#issuecomment -196300151.

Ja, um reale Werte zurückzugeben, müsste im Wesentlichen eine ganze Layout-Engine implementiert werden, was ein massives Unterfangen wäre. Ausgabe Nr. 1322 behandelt dieses Thema.

Ist es in Tests möglich, diese Methode (für alle Elemente) zu überschreiben, um beim Testen von Code, der sie verwendet, einen verwendbaren Wert zu erhalten?

Ja, genauso wie in einem Browser: Element.prototype.getBoundingClientRect = function () { ... }

Ich habe es letztendlich getan
Fenster._Kern. HTMLDivElement.prototype.getBoundingClientRect

Was gut funktionierte.

Das wird in zukünftigen Versionen von jsdom (eigentlich sehr bald) nicht mehr funktionieren. Entfernen Sie einfach das ._core .

Danke das werde ich versuchen
Am 2. September 2016 um 21:03 schrieb "Domenic Denicola" [email protected] :

Das wird in zukünftigen Versionen von jsdom (eigentlich sehr bald) nicht mehr funktionieren. Gerade
_core entfernen.

—
Sie erhalten dies, weil Sie einen Kommentar abgegeben haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/tmpvar/jsdom/issues/653#issuecomment -244520584 oder stumm
der Faden
https://github.com/notifications/unsubscribe-auth/AEtD9luz1uJWmJ3JlgdwuO1i5MP04_BXks5qmNWCgaJpZM4Ayv3U
.

zu Testzwecken können Sie, wenn Sie die Elemente steuern, auch pro Instanz überschreiben.

Beispiel:

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

wie man Karma-Code schreibt, wenn die Methode getboundingclientrect() in der if else-Bedingung in der ts-Datei ist.
kann mir bitte jemand helfen.

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

und auch das für Offset

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