Только Jest - addEventListener ~ щелкните утверждение - PullRequest
Новая
       21

Только Jest - addEventListener ~ щелкните утверждение

2 голосов
/ 18 марта 2019

Я хочу издеваться над обычным щелчком мыши, как указано в документации Jest: 

test('displays a user after a click', () => {

  document.body.innerHTML =
    '<div>' +
    '  <span id="username" />' +
    '  <button id="button" />' +
    '</div>';

  // Use jquery to emulate a click on our button
  $('#button').click();

  expect($('#username').text()).toEqual('Johnny Cash - Logged In');
});

Моя функция выглядит следующим образом: 

function clickTrack() {
    const data = {};
    document.addEventListener('click', function clicked(e) {
        if (e.target.matches('a')) {
            e.preventDefault();
            data['click.Classes'] = e.target.classList;
            data['click.ID'] = e.target.id;
            data['click.Destination'] = e.target.href;
            data['click.ElementText'] = e.target.innerText;
        }
    }, false);
    return data;
}

И тест: 

describe('Click Tracking', () => {

    test('Clicking on an a tag will collect its information', () => {
        clickTrack();
        document.body.innerHTML = '<a class="j1 j2 j3" id="j" href="http://www.google.com/">Jest</a>';
        document.getElementById('j').click();
        expect(clickTrack()).toEqual({a:'b'});
    });

});

Я ожидаю, что результат будет расплывчатым: 

   {
    click.Classes: ["j1 j2 j3"]
    click.Destination: "https://www.google.com/"
    click.ElementText: "Jest"
    click.ID: "j"
   }

Но вместо этого возвращается пустой объект.

1 Ответ

1 голос
/ 19 марта 2019

clickTrack подключает прослушиватель событий click и возвращает объект data, который будет обновляться всякий раз, когда происходит событие щелчка, поэтому вам нужно всего лишь один раз вызвать clickTrack.

Прямо сейчасВы вызываете его снова после вашего события щелчка, поэтому он создает дополнительный click слушатель и возвращает новый пустой data объект.

You 'Также вы захотите использовать e.target.text для текста и получить имена классов, вызвав split(' ') на e.target.className: 

function clickTrack() {
  const data = {};
  document.addEventListener('click', function clicked(e) {
    if (e.target.matches('a')) {
      e.preventDefault();
      data['click.Classes'] = e.target.className.split(' ');
      data['click.ID'] = e.target.id;
      data['click.Destination'] = e.target.href;
      data['click.ElementText'] = e.target.text;
    }
  }, false);
  return data;
}

describe('Click Tracking', () => {

  test('Clicking on an a tag will collect its information', () => {
    const data = clickTrack();
    document.body.innerHTML = '<a class="j1 j2 j3" id="j" href="http://www.google.com/">Jest</a>';
    document.getElementById('j').click();
    expect(data).toEqual({
      'click.Classes': ['j1', 'j2', 'j3'],
      'click.Destination': 'http://www.google.com/',
      'click.ElementText': 'Jest',
      'click.ID': 'j'
    });  // Success!
  });

});
...