jQuery terminal, Ember, QUnit - Automated testing issue

Question

I'm working on an app that combines Ember with jquery-terminal to help users learn. I apologise for the long question up front!

I love to work in a TDD style, but am struggling to get this working.

What I want to do is simulate user input into jquery-terminal and assert that the correct response is displayed in the terminal. I've dug through the source code and perhaps I'm missing something, but I can't seem to find a place to add the user input. The terminal ends up outputting this:-

<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>

The text entered by the user is rendered in the first unnamed span, but inserting text here does not make it available to jquery-terminal on submit I get the same response as if it were blank.

What I want to simulate is this (pseudocode)

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"')
})

Now it all works perfectly if I visit the page and manually type in, but I want this done programatically.

Any suggestions would be welcome!

@jcubic Not any more. I build this in the end https://github.com/mfeckie/try-ruby-ember-edition but it's not been used much and hasn't received any love in a long time — muttonlamb, Aug 11 '16 at 04:50

jcubic · Accepted Answer · 2014-03-26T09:55:59.360

Here is the code that will enter text and press enter:

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

instead of terminal::insert you can also simulate entering text using jQuery events:

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

NOTE: The code that bind keypress and keydown is in cmd plugin at the end:

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

    ...

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

keydown_event is main function that process all short cuts and keypress is to enter text.

If you want to test what's inside terminal last echo text will be in:

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

and the line before that will be prompt + text you enter (I should add specific class for those lines).

Also if you want to handle terminal formatting you will need to look at the rules of formatting in $.terminal.format function, it create span for each formatting with inline style, class and attributes. Testing for html instead of text will give you better results I think. The line with prompt will not have formatting as spans they appear as text.

Had to add `.replace(/ /g, " ")` to the `.html()` to get the matchers working with QUnit, but other than that awesome stuff. — muttonlamb, Mar 26 '14 at 12:43
@muttonlamb terminal encode special characters, if you want to test if the text you entered is the same in terminal you should use `.text()`, look at $.terminal.encode, `.html()` proably would be better to test terminal itself. — jcubic, Mar 26 '14 at 13:40
if you use `.text()` you need to use `replace(/ /g, '\xA0');` on your desire text because that is non breaking space from `' '` and tabs `\t` are always 4 non breaking spaces. — jcubic, Jun 08 '18 at 07:10

jQuery terminal, Ember, QUnit - Automated testing issue

1 Answers1