jasmine - 仅开 Jest - addEventListener ~ 单击断言

Question

我想将正常的 dom 点击模拟为 indicated在 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"
   }

但返回的是一个空对象。

Answer 1

clickTrack 连接一个 click 事件监听器并返回一个 data 对象，该对象将在单击事件发生时更新，因此您只需调用一次clickTrack。

现在，您在点击事件之后再次调用它，因此它正在创建一个额外 点击监听器并返回一个新的空数据对象。

您还需要使用 e.target.text 作为文本，并通过在 e 上调用 split(' ') 来获取类名称。目标.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!
  });

});