Jsdom: Implémenter `element.getBoundingClientRect` et `element.getClientRects`

Je pense que getBoundingClientRect devrait au moins être implémenté en tant que fonction factice renvoyant des valeurs par défaut.

Cela semble raisonnable; des zéros pour tout et tout ça. Patch de bienvenue.

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

Merci @F1LT3R et @domenic ! (Bien que, entre-temps, je sois déjà passé à porter ces tests de nodeunit vers un framework Web approprié : QUnit). :+1:

getClientRects fonctionne-t-il dans jsdom ? D'après ce ticket jquery , il ne

getClientRects n'est pas pris en charge, seulement getBoundingClientRect. Un PR ajoutant getClientRects() qui renvoie toujours un tableau vide (ou peut-être un tableau avec un seul rect avec des zéros pour toutes ses valeurs ??) serait formidable.

Ouais jquery 1.12.0 vient de mettre à jour sa fonction de style de base pour utiliser getClientRects . Nous avons rencontré le même problème. Je pourrais peut-être envisager de faire un PR en ajoutant cela lundi. Dans notre cas, c'est la fonction .height() qui est maintenant lancée.

Je n'ai pas pu obtenir les valeurs correctes de el.getBoundingClientRect(). L'objet qui est renvoyé a toutes les clés correctes (hauteur, largeur, haut, etc.) mais chaque valeur est toujours 0. Je suis intéressé de savoir si quelqu'un d'autre rencontre cela.

Cela échoue toujours :

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

Ma solution de contournement pour que mes tests réussissent (ce qui est une phrase qui me fait mal à dire) est quelque chose comme ceci :

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

Je pensais juste partager pendant que ce problème est encore ouvert.

Je ne pense pas qu'il a été mis en œuvre pour avoir les valeurs correctes. Je pense que c'était
implémenté pour avoir les attributs corrects uniquement.
Le 14 mars 2016 à 09h02, "lushfuture" [email protected] a écrit :

Je n'ai pas été en mesure d'obtenir les valeurs correctes de
el.getBoundingClientRect(). L'objet renvoyé a tous les
clés correctes (hauteur, largeur, haut, etc.) mais chaque valeur est toujours 0. Je suis
intéressé de savoir si quelqu'un d'autre vit cela.

Cela échoue toujours :

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

Ma solution de contournement pour réussir mes tests (c'est une phrase qui me fait mal
disons) est quelque chose comme ceci :

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

Je pensais juste partager pendant que ce problème est encore ouvert.

-
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/tmpvar/jsdom/issues/653#issuecomment -196300151.

Oui, lui faire renvoyer des valeurs réelles nécessiterait essentiellement la mise en œuvre d'un moteur de mise en page complet, ce qui serait une entreprise colossale. Le numéro #1322 couvre ce sujet.

Est-il possible dans les tests de remplacer cette méthode (pour tous les éléments) pour obtenir une valeur utilisable tout en testant le code qui l'utilise ?

Oui, de la même manière que vous le feriez dans un navigateur : Element.prototype.getBoundingClientRect = function () { ... }

j'ai fini par faire
window._core. HTMLDivElement.prototype.getBoundingClientRect

Ce qui a très bien fonctionné.

Cela va casser dans les futures versions de jsdom (très bientôt, en fait). Supprimez simplement le ._core .

Merci je vais essayer ça
Le 2 septembre 2016 à 21h03, "Domenic Denicola" [email protected] a écrit :

Cela va casser dans les futures versions de jsdom (très bientôt, en fait). Seulement
supprimer le _core.

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/tmpvar/jsdom/issues/653#issuecomment -244520584, ou couper le son
le fil
https://github.com/notifications/unsubscribe-auth/AEtD9luz1uJWmJ3JlgdwuO1i5MP04_BXks5qmNWCgaJpZM4Ayv3U
.

pour les tests, si vous contrôlez les éléments, vous pouvez également surcharger par instance.

Exemple:

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

comment écrire le code de karma si la méthode getboundingclientrect() est dans la condition if else dans le fichier ts.
quelqu'un peut-il aider s'il vous plait.

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

et aussi ceci pour l'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 }
  }
})