Jsdom: Implementar `element.getBoundingClientRect` y` element.getClientRects`

Creo que getBoundingClientRect debería al menos implementarse como una función ficticia que devolvió valores predeterminados.

Eso parece razonable; ceros para todo y todo eso. Parche de bienvenida.

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

¡Gracias, @ F1LT3R y @domenic! (Aunque, mientras tanto, en realidad ya pasé a migrar estas pruebas de nodeunit a un marco web apropiado: QUnit). : +1:

¿Funciona getClientRects en jsdom? Según este ticket de jquery , no

getClientRects no es compatible, solo getBoundingClientRect. Un PR que agregue getClientRects () que siempre devuelva una matriz vacía (¿o tal vez una matriz con un solo rect con ceros para todos sus valores?) Sería genial.

Sí, jquery 1.12.0 acaba de actualizar su función de estilo principal para usar getClientRects . Nos encontramos con el mismo problema. Es posible que pueda considerar hacer un PR agregando esto el lunes. En nuestro caso, fue la función .height() que ahora está lanzando.

No he podido obtener los valores correctos de el.getBoundingClientRect (). El objeto que se devuelve tiene todas las claves correctas (altura, ancho, parte superior, etc.) pero cada valor es siempre 0. Estoy interesado en saber si alguien más está experimentando esto.

Esto siempre falla:

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

Mi solución para hacer que mis pruebas pasen (que es una frase que me duele decir) es algo como esto:

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

Solo pensé en compartir mientras este problema aún está abierto.

No creo que se haya implementado para tener los valores correctos. yo pienso que fue
implementado para tener solo los atributos correctos.
El 14 de marzo de 2016 a las 9:02 a. M., "Lushfuture" [email protected] escribió:

No he podido obtener los valores correctos de
el.getBoundingClientRect (). El objeto que se devuelve tiene todas las
claves correctas (alto, ancho, superior, etc.) pero cada valor es siempre 0. Estoy
interesado en saber si alguien más está experimentando esto.

Esto siempre falla:

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

Mi solución para hacer que mis pruebas pasen (que es una frase que me duele
decir) es algo como esto:

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

Solo pensé en compartir mientras este problema aún está abierto.

-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/tmpvar/jsdom/issues/653#issuecomment -196300151.

Sí, hacer que devuelva valores reales esencialmente requeriría implementar un motor de diseño completo, lo que sería una empresa enorme. El número 1322 cubre ese tema.

¿Es posible en las pruebas anular ese método (para todos los elementos) para obtener un valor utilizable mientras se prueba el código que lo usa?

Sí, de la misma manera que lo haría en un navegador: Element.prototype.getBoundingClientRect = function () { ... }

Terminé haciendo
window._core. HTMLDivElement.prototype.getBoundingClientRect

Que funcionó bien.

Eso se romperá en futuras versiones de jsdom (muy pronto, en realidad). Simplemente elimine el ._core .

Gracias lo intentaré
El 2 de septiembre de 2016 a las 21:03, "Domenic Denicola" [email protected] escribió:

Eso se romperá en futuras versiones de jsdom (muy pronto, en realidad). Solo
eliminar el _core.

-
Estás recibiendo esto porque hiciste un comentario.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/tmpvar/jsdom/issues/653#issuecomment -244520584, o silenciar
la amenaza
https://github.com/notifications/unsubscribe-auth/AEtD9luz1uJWmJ3JlgdwuO1i5MP04_BXks5qmNWCgaJpZM4Ayv3U
.

para las pruebas, si controla los elementos, también puede anular por instancia.

ejemplo:

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

cómo escribir código karma si el método getboundingclientrect () está en la condición if else en el archivo ts.
Alguien puede ayudarme porfavor.

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

y también esto para compensación

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