Merge pull request #436 from simphony/add_view_tests

Add javascript tests for the Vue objects

jstests/tests/home/test_application_list_view.js

@@ -0,0 +1,94 @@
+define([
+    "home/models",
+    "home/views/application_list_view",
+    "components/vue/dist/vue",
+    "vue/filters"
+], function (models, application_list_view, Vue) {
+    "use strict";
+
+    QUnit.module("home.app_list_view");
+    QUnit.test("rendering list", function (assert) {
+        var done = assert.async();
+
+        var model = new models.ApplicationListModel();
+        var app_list_view = new application_list_view.ApplicationListView({
+            data: function() { return { model: model }; }
+        }).$mount();
+
+        assert.ok(model.loading);
+        assert.equal(
+            app_list_view.$el.querySelector("#loading-spinner").style.display,
+            ""
+        );
+
+        model.update().done(function() { Vue.nextTick(function() {
+            assert.equal(
+                app_list_view.$el.querySelector("#no-app-msg").style.display,
+                "none"
+            );
+            assert.equal(
+                app_list_view.$el.querySelector("#loading-spinner").style.display,
+                "none"
+            );
+            assert.equal(
+                app_list_view.$el.querySelector("#applistentries").children.length,
+                model.app_list.length
+            );
+
+            done();
+        })});
+    });
+
+    QUnit.test("rendering nothing in the list", function (assert) {
+        var done = assert.async();
+
+        var model = new models.ApplicationListModel();
+        var app_list_view = new application_list_view.ApplicationListView({
+            data: function() { return { model: model }; }
+        }).$mount();
+
+        model.loading = false;
+
+        Vue.nextTick(function() {
+            assert.equal(
+                app_list_view.$el.querySelector("#no-app-msg").style.display,
+                ""
+            );
+            assert.equal(
+                app_list_view.$el.querySelector("#loading-spinner").style.display,
+                "none"
+            );
+            assert.equal(
+                app_list_view.$el.querySelector("#applistentries").children.length,
+                0
+            );
+
+            done();
+        });
+    });
+
+    QUnit.test("search form", function (assert) {
+        var done = assert.async();
+
+        var model = new models.ApplicationListModel();
+        var app_list_view = new application_list_view.ApplicationListView({
+            data: function() { return { model: model }; }
+        }).$mount();
+
+        model.update().done(function() { Vue.nextTick(function() {
+            assert.notEqual(app_list_view.visible_list.length, 0);
+
+            app_list_view.search_input = "heho";
+
+            Vue.nextTick(function() {
+                assert.equal(app_list_view.visible_list.length, 0);
+                assert.equal(
+                    app_list_view.$el.querySelector("input[name=q]").value,
+                    "heho"
+                );
+
+                done();
+            })
+        })});
+    });
+});

jstests/tests/home/test_application_view.js

@@ -0,0 +1,75 @@
+define([
+    "home/models",
+    "home/views/application_view",
+    "components/vue/dist/vue",
+    "vue/filters"
+], function (models, application_view, Vue) {
+    "use strict";
+
+    QUnit.module("home.app_view");
+    QUnit.test("rendering form", function (assert) {
+        var done = assert.async();
+
+        var model = new models.ApplicationListModel();
+        var app_view = new application_view.ApplicationView({
+            data: function() { return { model: model }; }
+        }).$mount();
+
+        model.update().done(function() { Vue.nextTick(function() {
+            assert.equal(app_view.$el.children[0].tagName, 'DIV');
+            assert.ok(app_view.$el.children[0].classList.contains('row'));
+
+            assert.equal(
+                app_view.$el.querySelector('.box-title').innerHTML,
+                model.app_list[0].app_data.image.ui_name
+            );
+
+            // Simulate application starting
+            model.app_list[0].status = 'STARTING';
+
+            assert.equal(
+                app_view.$el.querySelector('.box-title').innerHTML,
+                model.app_list[0].app_data.image.ui_name
+            );
+            assert.equal(
+                app_view.$el.querySelector('#app-description').innerHTML,
+                model.app_list[0].app_data.image.description
+            );
+
+            done();
+        })});
+    });
+
+    QUnit.test("rendering iframe", function (assert) {
+        var done = assert.async();
+
+        var model = new models.ApplicationListModel();
+        var app_view = new application_view.ApplicationView({
+            data: function() { return { model: model }; }
+        }).$mount();
+
+        model.update().done(function() {
+            // Simulate application running
+            model.app_list[0].status = 'RUNNING';
+            model.app_list[0].app_data.container = {};
+            model.app_list[0].app_data.container.url_id = 'https://127.0.0.1:1234/';
+
+            Vue.nextTick(function() {
+                assert.equal(app_view.$el.children[0].tagName, 'IFRAME');
+
+                // Render form again by selecting the other application which is stopped
+                model.selected_index = 1;
+
+                Vue.nextTick(function() {
+                console.log(model.app_list[1].ui_name)
+                    assert.equal(
+                        app_view.$el.querySelector('.box-title').innerHTML,
+                        model.app_list[1].app_data.image.ui_name
+                    );
+
+                    done();
+                });
+            });
+        });
+    });
+});

jstests/tests/home/test_models.js

@@ -6,9 +6,14 @@ define([
     QUnit.module("home.models");
     QUnit.test("instantiation", function (assert) {
         var model = new models.ApplicationListModel();
+
         assert.equal(model.app_list.length, 0);
+        assert.equal(model.selected_index, null);
+
         model.update().done(function() {
             assert.equal(model.app_list.length, 2);
+            assert.equal(model.selected_index, 0);
+
             assert.equal(model.app_list[0].app_data.image.configurables[0], "resolution");
             assert.equal(model.app_list[0].configurables[0].config_dict.resolution, "Window");
         });

jstests/testsuite.js

@@ -7,8 +7,7 @@
           bootstrap: '../components/bootstrap/js/bootstrap.min',
           moment: "../components/moment/moment",
           "jsapi/v1/resources": "../../../jstests/tests/home/mock_jsapi",
-          underscore: "../components/underscore/underscore-min",
-          vue: "../components/vue/dist/vue"
+          underscore: "../components/underscore/underscore-min"
         },
         shim: {
           bootstrap: {
@@ -21,7 +20,8 @@
     require([
         "tests/home/test_configurables.js",
         "tests/home/test_models.js",
-        "tests/home/test_views.js",
+        "tests/home/test_application_list_view.js",
+        "tests/home/test_application_view.js",
         "tests/test_utils.js",
         "tests/test_analytics.js"
         ], function() {

remoteappmanager/static/js/home/views/application_list_view.js

@@ -17,7 +17,7 @@ define([
               '</ul>' +
 
               '<ul class="sidebar-menu">' +
-              '  <li v-show="!model.loading && model.app_list.length === 0">' +
+              '  <li v-show="!model.loading && model.app_list.length === 0" id="no-app-msg">' +
               '    <a href="#">No applications found</a>' +
               '  </li>' +
 

remoteappmanager/static/js/home/views/application_view.js

@@ -22,7 +22,7 @@ define([
             '        </div>' +
             '        <div class="box-body">' +
             '          <h4>Description</h4>' +
-            '          <span>{{ current_app.app_data.image.description }}</span>' +
+            '          <span id="app-description">{{ current_app.app_data.image.description }}</span>' +
 
             '          <h4>Policy</h4>' +