Jsdom: Implemente `element.getBoundingClientRect` e` element.getClientRects`

Acho que getBoundingClientRect deve pelo menos ser implementado como uma função fictícia que retornou valores padrão.

Isso parece razoável; zeros para tudo e tudo isso. Patch bem-vindo.

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

Obrigado, @ F1LT3R e @domenic! (Embora, nesse ínterim, eu já tenha movido esses testes de nodeunit para uma estrutura baseada na web apropriada: QUnit). : +1:

GetClientRects funciona em jsdom? De acordo com este tíquete do jquery , não

getClientRects não é compatível, apenas getBoundingClientRect. Um PR adicionando getClientRects () que sempre retorna um array vazio (ou talvez um array com um único retângulo com zeros para todos os seus valores ??) seria ótimo.

Sim jquery 1.12.0 acabou de atualizar sua função de estilo principal para usar getClientRects . Encontramos o mesmo problema. Posso ser capaz de fazer um PR adicionando isso na segunda-feira. No nosso caso, é a função .height() que está sendo lançada.

Não consegui obter os valores corretos de el.getBoundingClientRect (). O objeto que é retornado tem todas as chaves corretas (altura, largura, topo, etc), mas cada valor é sempre 0. Estou interessado em saber se mais alguém está experimentando isso.

Isso sempre falha:

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

Minha solução alternativa para fazer meus testes passarem (que é uma frase que me custa dizer) é mais ou menos assim:

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

Só pensei em compartilhar enquanto este problema ainda está aberto.

Não creio que tenha sido implementado com os valores corretos. Eu acho que foi
implementado para ter apenas os atributos corretos.
Em 14 de março de 2016, às 9h02, "lushfuture" [email protected] escreveu:

Não consegui obter os valores corretos de
el.getBoundingClientRect (). O objeto que é retornado tem todos os
chaves corretas (altura, largura, topo, etc), mas cada valor é sempre 0. Estou
interessado em saber se mais alguém está passando por isso.

Isso sempre falha:

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

Minha solução alternativa para fazer meus testes passarem (que é uma frase que me incomoda
dizer) é algo assim:

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

Só pensei em compartilhar enquanto este problema ainda está aberto.

-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/tmpvar/jsdom/issues/653#issuecomment -196300151.

Sim, fazê-lo retornar valores reais exigiria essencialmente a implementação de um mecanismo de layout completo, o que seria uma tarefa gigantesca. A edição 1322 cobre esse tópico.

É possível nos testes substituir esse método (para todos os elementos) para obter um valor utilizável ao testar o código que o usa?

Sim, da mesma forma que você faria em um navegador: Element.prototype.getBoundingClientRect = function () { ... }

Acabei fazendo
window._core. HTMLDivElement.prototype.getBoundingClientRect

Que funcionou muito bem.

Isso será interrompido em versões futuras do jsdom (muito em breve, na verdade). Basta remover o ._core .

Obrigado vou tentar isso
Em 2 de setembro de 2016, 21h03, "Domenic Denicola" [email protected] escreveu:

Isso será interrompido em versões futuras do jsdom (muito em breve, na verdade). Somente
remova o _core.

-
Você está recebendo isto porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/tmpvar/jsdom/issues/653#issuecomment -244520584 ou mudo
o segmento
https://github.com/notifications/unsubscribe-auth/AEtD9luz1uJWmJ3JlgdwuO1i5MP04_BXks5qmNWCgaJpZM4Ayv3U
.

para teste, se você controlar os elementos, também pode substituir por instância.

exemplo:

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

como escrever código karma se o método getboundingclientrect () estiver em uma condição if else no arquivo ts.
alguém pode por favor ajudar.

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

e também para compensar

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