Render the default mockup from the templates

The default mockup is now a "live mockup" in the sense that it renders based
upon the templates in `src/templates`.

We use Jasmine and the test_utils to render the different elements.

updates #576

mockup/main.js

+// Extra test dependencies
+config.baseUrl = '../';
+config.paths.mock = "tests/mock";
+config.paths.test_utils = "tests/utils";
+config.paths.jasmine = "components/jasmine/lib/jasmine-core/jasmine";
+config.paths["jasmine-html"] = "components/jasmine/lib/jasmine-core/jasmine-html";
+config.paths["console-runner"] = "node_modules/phantom-jasmine/lib/console-runner";
+config.shim['jasmine-html'] = {
+    deps: ['jasmine'],
+    exports: 'jasmine'
+};
+require.config(config);
+
+// Polyfill 'bind' which is not available in phantomjs < 2.0
+if (!Function.prototype.bind) {
+    Function.prototype.bind = function (oThis) {
+        if (typeof this !== "function") {
+            // closest thing possible to the ECMAScript 5 internal IsCallable function
+            throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+        }
+        var aArgs = Array.prototype.slice.call(arguments, 1),
+            fToBind = this,
+            fNOP = function () {},
+            fBound = function () {
+            return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
+                aArgs.concat(Array.prototype.slice.call(arguments)));
+            };
+        fNOP.prototype = this.prototype;
+        fBound.prototype = new fNOP();
+        return fBound;
+    };
+}
+
+require([
+    "jquery",
+    "converse",
+    "mock",
+    "jasmine-html"
+    ], function($, converse, mock, jasmine) {
+        // Set up converse.js
+        window.converse_api = converse;
+        window.localStorage.clear();
+        window.sessionStorage.clear();
+
+        converse.initialize({
+            i18n: window.locales.en,
+            auto_subscribe: false,
+            animate: false,
+            connection: mock.mock_connection,
+            no_trimming: true,
+            debug: false
+        }, function (converse) {
+            window.converse = converse;
+            window.crypto = {
+                getRandomValues: function (buf) {
+                    var i;
+                    for (i=0, len=buf.length; i<len; i++) {
+                        buf[i] = Math.floor(Math.random()*256);
+                    }
+                }
+            };
+            require([
+                "console-runner",
+                "mockup/mockup"
+            ], function () {
+                // Make sure this callback is only called once.
+                delete converse.callback;
+                // Stub the trimChat method. It causes havoc when running with
+                // phantomJS.
+                converse.ChatBoxViews.prototype.trimChat = function () {};
+
+                // Jasmine stuff
+                var jasmineEnv = jasmine.getEnv();
+                var reporter;
+                if (/PhantomJS/.test(navigator.userAgent)) {
+                    reporter = new jasmine.ConsoleReporter();
+                    window.console_reporter = reporter;
+                    jasmineEnv.addReporter(reporter);
+                    jasmineEnv.updateInterval = 0;
+                } else {
+                    reporter = new jasmine.HtmlReporter();
+                    jasmineEnv.addReporter(reporter);
+                    jasmineEnv.specFilter = function(spec) {
+                        return reporter.specFilter(spec);
+                    };
+                    jasmineEnv.updateInterval = 0;
+                }
+                jasmineEnv.execute();
+            });
+        });
+    }
+);

mockup/mockup.js

+/*global converse */
+(function (root, factory) {
+    define(["jquery", "mock", "test_utils"], factory);
+} (this, function ($, mock, test_utils) {
+    var $msg = converse_api.env.$msg;
+    test_utils.clearBrowserStorage();
+
+    return describe("Live Mockup", $.proxy(function(mock, test_utils) {
+        describe("Click the links below to view the different elements", function () {
+            beforeEach(function () {
+                test_utils.initConverse();
+                test_utils.createContacts('all');
+            });
+
+            it("Show a chat room", function () {
+                test_utils.openChatRoom('lounge', 'localhost', 'dummy');
+                var view = converse.chatboxviews.get('lounge@localhost');
+                if (!view.$el.find('.chat-area').length) { view.renderChatArea(); }
+                var text = 'This is a sent message';
+                view.$el.find('.chat-textarea').text(text);
+                view.$el.find('textarea.chat-textarea').trigger($.Event('keypress', {keyCode: 13}));
+                var message = $msg({
+                    from: 'lounge@localhost/dummy',
+                    to: 'dummy@localhost.com',
+                    type: 'groupchat',
+                    id: view.model.messages.at(0).get('msgid')
+                }).c('body').t(text);
+                view.onChatRoomMessage(message.nodeTree);
+
+                var nick = mock.chatroom_names[0];
+                text = 'This is a received message';
+                message = $msg({
+                    from: 'lounge@localhost/'+nick,
+                    id: '1',
+                    to: 'dummy@localhost',
+                    type: 'groupchat'
+                }).c('body').t(text);
+                view.onChatRoomMessage(message.nodeTree);
+            });
+
+            it("Show a private chat box", function () {
+                var contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@localhost';
+                var chatbox = test_utils.openChatBoxFor(contact_jid);
+                var view = converse.chatboxviews.get(contact_jid);
+                var message = 'This message is sent from this chatbox';
+                test_utils.sendMessage(view, message);
+                message = 'This is a received message';
+                var msg = $msg({
+                        from: contact_jid,
+                        to: converse.connection.jid,
+                        type: 'chat',
+                        id: (new Date()).getTime()
+                    }).c('body').t(message).up()
+                        .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
+                converse.chatboxes.onMessage(msg);
+            });
+
+            it("Show the control box", function () {
+                test_utils.openControlBox();
+                test_utils.openContactsPanel();
+            });
+        });
+    }, window, mock, test_utils));
+}));