Утилизация текстовых манипуляций в DOM с использованием jQuery

Question

Я пытаюсь протестировать простые манипуляции с DOM и столкнуться с некоторыми проблемами. Представьте себе следующее простое событие щелчка:

$('.js-click-me').on('click', function(e) { 
    e.preventDefault(); 

    $('.some-span').text('changed text'); 
}); 

Теперь же представьте, что мой HTML содержит следующее:

<span class="some-span">Original Text</span> 
<button class="js-click-me">Click Me</button> 

Хорошо, так что теперь у меня есть блок тестирует

describe('text change test', function() { 
    it('The text of .some-span should change when button is clicked', function() { 
    assert.equal('Original Text', $('.some-span').text()); 
    $('.js-click-me').click(); 
    assert.equal('changed text', $('.some-span').text()); 
    }); 
}); 

Я ожидаю, что первое утверждение будет проходить, потому что исходный текст, по сути, «Исходный текст» (это делается только для установки базовой линии и, возможно, не требуется).

Второе утверждение, которое я ожидаю пройти, потому что после щелчка он меняет текст с «Исходный текст» на «измененный текст». Однако, когда я запускаю такие тесты, второе утверждение терпит неудачу, потому что тест запускает сразу после и DOM еще не обновил текст.

Я могу добавить второе испытание в обертку setTimeout, но это не кажется правильным или эффективным.

Любые советы по этому вопросу?

Answer 1

использование. затем функция. Как показано ниже, код

describe('text change test', function() { 
    it('The text of .some-span should change when button is clicked', function() { 
    assert.equal('Original Text', $('.some-span').text()); 
    $('.js-click-me').click().then(function(){ 
     assert.equal('changed text', $('.some-span').text()); 
    });  
    }); 
});