2

我正在开发一款结合 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"')
})

现在，如果我访问该页面并手动输入，这一切都可以正常工作，但我希望以编程方式完成。

欢迎大家提出意见！

4

1 回答 1

1

这是将输入文本并按 Enter 的代码：

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 是处理所有快捷方式的主要功能，按键是输入文本。

如果您想测试终端内部的内容，最后一个回显文本将位于：

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

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

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

于 2014-03-26T09:39:44.220 回答