Как смоделировать нажатие кнопки в Jest с нереактивным кодом - PullRequest
Новая
       16

Как смоделировать нажатие кнопки в Jest с нереактивным кодом

0 голосов
/ 10 февраля 2020

У меня есть некоторые фрагменты кода Vanilla Javascript (с JQuery, но без каких-либо основных интерфейсных сред, таких как React / Angular). Код выглядит следующим образом: 

setupIconClickEvents() {
    $('#someButton').on('click', (e) => {
        callFunction(parameters);
        e.stopPropagation();
    });
}

Я хочу смоделировать нажатие кнопки, чтобы проверить, была ли вызвана функция, что я легко могу сделать с помощью шпиона. Однако функция никогда не попадет внутрь. Это моя текущая попытка 

describe('setupIconClickEvents()', () => {
    beforeAll(() => {
        object.setupIconClickEvents();
        document.body.innerHTML = `
            <div>
                <button id="someButton"></div>
            </div>
        `;
    });

    describe('rankIcon', () => {
        it('should stop event propagation', () => {
            jest.spyOn(object, 'callFunction');
            $('#someButton').trigger('click');
            expect(object.callFunction).toHaveBeenCalled();
        });
    });
});

Как попасть внутрь фрагмента кода, когда я нажимаю кнопку?

Ответы [ 2 ]

1 голос
/ 10 февраля 2020

  1. Вы уверены, что кодовый блок, в котором размещен вызов триггера, вообще выполняется (отследите его, добавив console.log('hit'); перед строкой триггера)?

  2. Работает ли селектор (выдает его результат - console.log($('#someButton'));? - учитывая, что вы генерируете html динамически, это распространенная ошибка - смешивать порядок операций и пытаться выбрать элемент, которого нет на странице.

  3. Есть ли событие нажатия кнопки ( проверьте вкладку событий инспектора браузера )?

0 голосов
/ 10 февраля 2020

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

...