Терминал jQuery, Ember, QUnit - проблема автоматического тестирования

Question

Я работаю над приложением, которое сочетает в себе Ember с jquery-terminal чтобы помочь пользователям учиться. Я прошу прощения за длинный вопрос заранее!

Я люблю работать в стиле TDD, но изо всех сил пытаюсь заставить это работать.

Что я хочу сделать, это симулировать пользовательский ввод в jquery-terminal и утверждают, что правильный ответ отображается в терминале. Я копался в исходном коде и, возможно, я что-то упустил, но я не могу найти место для добавления пользовательского ввода. Терминал заканчивает тем, что выдает это:

<div id="terminal" class="terminal">
  <div class="terminal-output"></div>
  <div class="cmd" style="width: 100%;">
    <span class="prompt">TryRuby:&gt;&nbsp;</span>
    <span></span>
    <span class="cursor blink">&nbsp;</span>
    <span></span>
    <textarea class="clipboard"></textarea>
  </div>
</div>

Текст, введенный пользователем, отображается в первом безымянном интервале, но вставка текста здесь не делает его доступным для jquery-terminal при отправке я получаю такой же ответ, как если бы он был пустым.

То, что я хочу смоделировать это (псевдокод)

test('user enters help and submits', function() {
  var input = $('#terminal') // find the right node / place to bind is my problem
  input.text = 'help'
  keyEvent(input, 'keydown', 13) // simulate hitting enter
  var match = /next: move to the next lesson/
  ok(match.test($('.terminal-output'), 'Expected to find "next: move to the next lesson"')
})

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

Любые предложения приветствуются!

Answer 1

Вот код, который будет вводить текст и нажимать ввод:

terminal.insert("Hello");
var e = $.Event("keydown");
e.ctrlKey = false;
e.which = e.keyCode = 13;
$(document.documentElement || window).trigger(e);

вместо terminal::insert Вы также можете имитировать ввод текста с помощью событий jQuery:

function enter(text) {
    var e;
    var $root = $(document.documentElement || window);
    for (var i=0; i<text.length; ++i) {
        e = $.Event("keypress");
        e.which = text.charCodeAt(i);
        $root.trigger(e);
    }
}

ПРИМЕЧАНИЕ. Код, связывающий нажатие и нажатие клавиши, находится в cmd Плагин в конце:

$(document.documentElement || window).bind('keypress.cmd', function(e) {

    ...

}).bind('keydown.cmd', keydown_event);

keydown_event - это основная функция, которая обрабатывает все ярлыки, а нажатие клавиши - ввод текста.

Если вы хотите проверить, что находится внутри терминала, последний эхо-текст будет в:

 terminal.find('.terminal-output div:last').html()

и строка перед этим будет приглашением + текст, который вы вводите (я должен добавить определенный класс для этих строк).

Также, если вы хотите обрабатывать форматирование терминала, вам нужно взглянуть на правила форматирования в функции $.terminal.format. span для каждого форматирования со встроенным стилем, классом и атрибутами. Я думаю, что тестирование HTML вместо текста даст вам лучшие результаты. Строка с приглашением не будет иметь форматирования, поскольку промежутки отображаются в виде текста.