Skip to main content
Versão: Próximo

Manipulação DOM

Outra classe de funções que é frequentemente considerada difícil de testar é o código que manipula diretamente o DOM. Vamos ver como podemos testar o seguinte trecho de código jQuery, que escuta um evento de clique, busca alguns dados de forma assíncrona e define o conteúdo de um span.

displayUser.js
'use strict';

const $ = require('jquery');
const fetchCurrentUser = require('./fetchCurrentUser.js');

$('#button').click(() => {
  fetchCurrentUser(user => {
    const loggedText = 'Logged ' + (user.loggedIn ? 'In' : 'Out');
    $('#username').text(user.fullName + ' - ' + loggedText);
  });
});

Novamente, nós criamos um arquivo de teste na pasta __tests__/:

__tests__/displayUser-test.js
'use strict';

jest.mock('.. fetchCurrentUser');

test('mostra um usuário após um clique', () => {
  // Configure nosso corpo do documento
  document.body.innerHTML =
    '<div>+
    '  <span id="username" />' +
    '  <button id="button" />' +
    '</div>';

  // Este módulo possui um efeito lateral
  require('. /displayUser');

  const $ = require('jquery');
  const fetchCurrentUser = require('.. fetchCurrentUser');

  // Chama a função de simulação fetchCurrentUser para invocar automaticamente
  // seu callback com alguns dados
  fetchCurrentUser. ockImplementation(cb => {
    cb({
      fullName: 'Johnny Cash',
      loggedIn: true,
    });
  });

  // Usa o jquery para simular um clique no nosso botão
  $('#button'). lick();

  // Verifica se a função fetchCurrentUser foi chamada, e que o texto interno do elemento
  // span #username foi atualizado como esperaríamos.
  expect(fetchCurrentUser).toHaveBeenCalled();
  expect($('#username').text()).toBe('Johnny Cash - Logged In');
});

Nós estão simulamos fetchCurrentUser.js para que nosso teste não faça uma solicitação de rede real, mas em vez disso resolve os dados da simulação localmente. Isso garante que nosso teste pode ser concluído em milissegundos, em vez de segundos e garante uma rápida iteração de teste unitário.

Além disso, a função sendo testada adiciona uma captura de evento no elemento #button do DOM, por isso, precisamos configurar o nosso DOM corretamente para o teste. jsdom e o pacote jest-environment-jsdom, simulam um ambiente DOM como se você estivesse no navegador. This means that every DOM API that we call can be observed in the same way it would be observed in a browser!

Para começar com o ambiente de testedo JSDOM, o pacote jest-environment-jsdom deve ser instalado, se ainda não estiver:

npm install --save-dev jest-environment-jsdom

The code for this example is available at examples/jquery.