使用Mocha和Vanilla Javascript进行事件测试

Question

I am new to unit tests and want to create a test that will track the inner html after a click event which will indicate the switching between two users. I have done several searches and have not been able to figure how to properly attach the unit test to the event.

Most of the resources that I have found that are similar seem to be related to React and not Vanilla Javascript. This is my front-end code:

const xPlayer = 'X';
const oPlayer = 'O';
const boardSquares = document.querySelectorAll('.square');

let whosTurn = 0;
let board;

gameSetup();

function gameSetup() {
board = Array.from(Array(9).keys());
for (var i = 0; i < boardSquares.length; i++) {
    boardSquares[i].innerText = '';
    boardSquares[i].addEventListener('click', turnClick, false);
}
}

function turnClick(currentDiv) {
  if(document.getElementById(currentDiv.target.id).innerHTML === '') {
    writeInSquare(currentDiv);
  }
}

function writeInSquare(currentDiv) {
  if (whosTurn % 2 === 0) {
    document.getElementById(currentDiv.target.id).innerHTML = xPlayer;
    whosTurn++;
  }
  else {
    document.getElementById(currentDiv.target.id).innerHTML = oPlayer;
    whosTurn++;
  }
}

export default{
  boardSquares, whosTurn, gameSetup, turnClick, writeInSquare, checkIfGameComplete
};

This is my test file:

import sum from './index.js';

describe('sum', function() {
   it('should change from xPlayer to oPlayer based on if whoseTurn is even or odd', function ({

   }))
})

Html:

<div class="wrapper">
    <div class="square" id="0">
    </div>
    <div class="square" id="1">
    </div>
    <div class="square" id="2">
    </div>
    <div class="square" id="3">
    </div>
    <div class="square" id="4">
    </div>
    <div class="square" id="5">
</div>
<div id="mocha"></div>

So basically there would be a switch between xplayer and yplayer that I would want to test to see if is happening from the click event

Answer 1

There is a way you could simulate an event on a DOM element manually. That's mentioned here . It involves creating a new Event ( MouseEvent in your case) and then calling dispatchEvent with it, on the DOM element you wish to simulate the click. It's pretty tedious and has issues cross-browsers.

There is a popular library called simulant , that makes this really easy. A click event would be as simple as

simulant.fire( target, 'click' );

where target is the DOM element you want to simulate the click.

A simple demo where I simulate a click on a button.

 const target = document.getElementById("target"); const simulate = document.getElementById("simulate"); target.addEventListener("click", () => alert("Target clicked!")) simulate.addEventListener("click", () => simulant.fire(target, "click")) 

 <script src="https://unpkg.com/simulant/dist/simulant.umd.js"></script> <button id="target">Click me</button> <button id="simulate">Simulate</button>