Jest only - addEventListener ~ click assertion - jasmine

Question

I want to mock a normal dom click as indicated in the Jest docs:
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');
});
My function is as follows:
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;
}
And the test:
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'});
});
});
I expect the output to be vaguely:
{
click.Classes: ["j1 j2 j3"]
click.Destination: "https://www.google.com/"
click.ElementText: "Jest"
click.ID: "j"
}
But an empty object is returned instead.

Answer 1

clickTrack hooks up a click event listener and returns a data object that will be updated whenever a click event happens, so you only have to call clickTrack once.
Right now you are calling it again after your click event so it is creating an additional click listener and returning a new, empty data object.
You'll also want to use e.target.text for the text and get the class names by calling split(' ') on 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!
});
});