Jest only - addEventListener ~ 点击断言

Question

我想模拟正常的 dom 点击作为 Jest 文档中的 indicated:

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

但是返回了一个空对象。

Answer 1

clickTrack 连接一个 click 事件侦听器和 returns 一个 data 对象，只要发生点击事件就会更新，所以你只需要调用 clickTrack一次。

现在你再次调用它在你的点击事件之后它会创建一个附加 click监听器并返回一个新的空 data 对象。

您还需要对文本使用 e.target.text，并通过在 e.target.className 上调用 split(' ') 获得 class 名称：

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

});

Jest only - addEventListener ~ 点击断言

Jest only - addEventListener ~ click assertion

tdd

jasmine

jsdom

jestjs