diff --git a/jstests/tests/home/test_application_list_view.js b/jstests/tests/home/test_application_list_view.js new file mode 100644 index 000000000..bf264329d --- /dev/null +++ b/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(); + }) + })}); + }); +}); diff --git a/jstests/tests/home/test_application_view.js b/jstests/tests/home/test_application_view.js new file mode 100644 index 000000000..22bfb5370 --- /dev/null +++ b/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(); + }); + }); + }); + }); +}); diff --git a/jstests/tests/home/test_models.js b/jstests/tests/home/test_models.js index 1fdad11a8..25085eed6 100644 --- a/jstests/tests/home/test_models.js +++ b/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"); }); diff --git a/jstests/tests/home/test_views.js b/jstests/tests/home/test_views.js deleted file mode 100644 index 95352149f..000000000 --- a/jstests/tests/home/test_views.js +++ /dev/null @@ -1,27 +0,0 @@ -define([ - "home/models", - "home/views/application_list_view", - "jquery" -], function (models, application_list_view, $) { - "use strict"; - QUnit.module("home.views"); - QUnit.test("rendering", function (assert) { - assert.expect(2); - - var model = new models.ApplicationListModel(); - var view = new application_list_view.ApplicationListView( - { model: model } - ); - - assert.ok(model.loading); - - model.update() - .done(function() { - view.model = model; - model.loading = false; - } ) - .done(function() { - assert.notOk(model.loading); - }); - }); -}); diff --git a/jstests/testsuite.js b/jstests/testsuite.js index 3ac86753d..de7a0fe5b 100644 --- a/jstests/testsuite.js +++ b/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() { diff --git a/remoteappmanager/static/js/home/views/application_list_view.js b/remoteappmanager/static/js/home/views/application_list_view.js index 6996e622e..84f0a647a 100644 --- a/remoteappmanager/static/js/home/views/application_list_view.js +++ b/remoteappmanager/static/js/home/views/application_list_view.js @@ -17,7 +17,7 @@ define([ '' + '