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

注意：绑定keypress和keydown的代码在最后的cmd插件中：

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

    ...

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

keydown_event 是处理所有快捷方式的主要功能，keypress 是输入文本。

如果你想测试终端内最后一个回显文本的内容：

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

之前的行将是您输入的提示+文本（我应该为这些行添加特定的类）。

另外，如果你想处理终端格式化，你需要查看 $.terminal.format 函数中的格式化规则，它为每个带有内联样式、类和属性的格式化创建span。我认为测试 html 而不是文本会给你更好的结果。带有提示的行将不具有跨度格式，它们显示为文本。