Тестирование событий с Mocha и Vanilla Javascript

Question

Я новичок в модульных тестах и ​​хочу создать тест, который будет отслеживать внутренний html после события щелчка, который будет указывать на переключение между двумя пользователями.Я провел несколько поисков и не смог понять, как правильно прикрепить модульный тест к событию.

Большинство найденных мной ресурсов, похоже, связаны с React, а не с Vanilla Javascript,Это мой код переднего конца:

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

Это мой тестовый файл:

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>

Так что в основном будет переключательмежду xplayer и yplayer, которые я хотел бы проверить, чтобы увидеть, происходит ли это из события click

Answer 1

Есть способ, которым вы можете смоделировать событие на элементе DOM вручную. Это упомянуто здесь . Он включает в себя создание нового Event (MouseEvent в вашем случае), а затем вызов с ним dispatchEvent для элемента DOM, который вы хотите смоделировать. Это довольно утомительно и имеет проблемы с кросс-браузерами.

Существует популярная библиотека simulant, которая делает это действительно простым делом. Событие щелчка будет просто, как

simulant.fire( target, 'click' );

, где target - это элемент DOM, который вы хотите смоделировать.

Простая демонстрация, в которой я симулирую нажатие кнопки.

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>