From f3012aacc6e44f682dc1458c95b3d16c633c2427 Mon Sep 17 00:00:00 2001 From: martinRenou Date: Tue, 9 May 2017 16:06:02 +0100 Subject: [PATCH 01/14] Export filters in a seperate file --- remoteappmanager/static/js/filters.js | 22 +++++++++++++++++++ remoteappmanager/static/js/home/controller.js | 19 ++-------------- 2 files changed, 24 insertions(+), 17 deletions(-) create mode 100644 remoteappmanager/static/js/filters.js diff --git a/remoteappmanager/static/js/filters.js b/remoteappmanager/static/js/filters.js new file mode 100644 index 000000000..55d364423 --- /dev/null +++ b/remoteappmanager/static/js/filters.js @@ -0,0 +1,22 @@ +define([ + '../../components/vue/dist/vue', + "urlutils" +], function (Vue, urlutils) { + 'use strict'; + + Vue.filter('icon_src', function(icon_data) { + return ( + icon_data ? + 'data:image/png;base64,' + icon_data : + urlutils.path_join( + window.apidata.base_url, 'static', 'images', 'generic_appicon_128.png' + ) + ); + }); + + Vue.filter('app_name', function(image) { + return image.ui_name? image.ui_name: image.name; + }); + + return null; +}); diff --git a/remoteappmanager/static/js/home/controller.js b/remoteappmanager/static/js/home/controller.js index 8d6c0ad3a..bfa1fc255 100644 --- a/remoteappmanager/static/js/home/controller.js +++ b/remoteappmanager/static/js/home/controller.js @@ -5,30 +5,15 @@ require([ "home/views/application_view", "components/vue/dist/vue", "gamodule", - 'urlutils' + "filters" ], function( models, application_list_view, application_view, Vue, - gamodule, - urlutils) { + gamodule) { "use strict"; - Vue.filter('icon_src', function(icon_data) { - return ( - icon_data ? - 'data:image/png;base64,' + icon_data : - urlutils.path_join( - window.apidata.base_url, 'static', 'images', 'generic_appicon_128.png' - ) - ); - }); - - Vue.filter('app_name', function(image) { - return image.ui_name? image.ui_name: image.name; - }); - // This model keeps the retrieved content from the REST query locally. // It is only synchronized at initial load. var model = new models.ApplicationListModel(); From 479cba65650dae2ba29c1dcedcadb37e85e5fdd2 Mon Sep 17 00:00:00 2001 From: martinRenou Date: Tue, 9 May 2017 16:29:04 +0100 Subject: [PATCH 02/14] Add tests for the application list view --- jstests/tests/home/test_views.js | 82 ++++++++++++++++++++++++++------ 1 file changed, 67 insertions(+), 15 deletions(-) diff --git a/jstests/tests/home/test_views.js b/jstests/tests/home/test_views.js index 95352149f..6abd6e48f 100644 --- a/jstests/tests/home/test_views.js +++ b/jstests/tests/home/test_views.js @@ -1,27 +1,79 @@ define([ "home/models", "home/views/application_list_view", - "jquery" -], function (models, application_list_view, $) { + "components/vue/dist/vue", + "filters" +], function (models, application_list_view, Vue) { "use strict"; - QUnit.module("home.views"); - QUnit.test("rendering", function (assert) { - assert.expect(2); + + QUnit.module("home.app_list_view"); + QUnit.test("rendering list", function (assert) { + var done = assert.async(); var model = new models.ApplicationListModel(); - var view = new application_list_view.ApplicationListView( - { model: model } - ); + 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("#loading-spinner").style.display, + "none" + ) + + assert.equal( + app_list_view.$el.querySelector("#applistentries").children.length, + model.app_list.length + 2 + ) + + // Clear the model's application list + model.app_list = []; - model.update() - .done(function() { - view.model = model; - model.loading = false; - } ) - .done(function() { - assert.notOk(model.loading); + Vue.nextTick(function() { + assert.equal( + app_list_view.$el.querySelector("#applistentries > li > a").style.display, + "" + ) + + assert.equal( + app_list_view.$el.querySelector("#applistentries").children.length, + 2 + ) + + 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(); + }) + })}); }); }); From 291f564050f829c4152e4eb20f6bcdbd3689ff98 Mon Sep 17 00:00:00 2001 From: martinRenou Date: Tue, 9 May 2017 16:06:02 +0100 Subject: [PATCH 03/14] Export filters in a seperate file --- remoteappmanager/static/js/filters.js | 22 +++++++++++++++++++ remoteappmanager/static/js/home/controller.js | 19 ++-------------- 2 files changed, 24 insertions(+), 17 deletions(-) create mode 100644 remoteappmanager/static/js/filters.js diff --git a/remoteappmanager/static/js/filters.js b/remoteappmanager/static/js/filters.js new file mode 100644 index 000000000..b6d40d2fe --- /dev/null +++ b/remoteappmanager/static/js/filters.js @@ -0,0 +1,22 @@ +define([ + "../components/vue/dist/vue", + "urlutils" +], function (Vue, urlutils) { + 'use strict'; + + Vue.filter('icon_src', function(icon_data) { + return ( + icon_data ? + 'data:image/png;base64,' + icon_data : + urlutils.path_join( + window.apidata.base_url, 'static', 'images', 'generic_appicon_128.png' + ) + ); + }); + + Vue.filter('app_name', function(image) { + return image.ui_name? image.ui_name: image.name; + }); + + return null; +}); diff --git a/remoteappmanager/static/js/home/controller.js b/remoteappmanager/static/js/home/controller.js index 8d6c0ad3a..bfa1fc255 100644 --- a/remoteappmanager/static/js/home/controller.js +++ b/remoteappmanager/static/js/home/controller.js @@ -5,30 +5,15 @@ require([ "home/views/application_view", "components/vue/dist/vue", "gamodule", - 'urlutils' + "filters" ], function( models, application_list_view, application_view, Vue, - gamodule, - urlutils) { + gamodule) { "use strict"; - Vue.filter('icon_src', function(icon_data) { - return ( - icon_data ? - 'data:image/png;base64,' + icon_data : - urlutils.path_join( - window.apidata.base_url, 'static', 'images', 'generic_appicon_128.png' - ) - ); - }); - - Vue.filter('app_name', function(image) { - return image.ui_name? image.ui_name: image.name; - }); - // This model keeps the retrieved content from the REST query locally. // It is only synchronized at initial load. var model = new models.ApplicationListModel(); From 4a26ebc49e44c1f75e085adcfa9ca88c3a64a37f Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 10 May 2017 09:58:45 +0100 Subject: [PATCH 04/14] Fix jstest --- jstests/testsuite.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/jstests/testsuite.js b/jstests/testsuite.js index e143b43c6..ea9089920 100644 --- a/jstests/testsuite.js +++ b/jstests/testsuite.js @@ -8,8 +8,7 @@ moment: "../components/moment/moment", "jsapi/v1/resources": "../../../jstests/tests/home/mock_jsapi", handlebars: "../components/handlebars/handlebars.amd.min", - underscore: "../components/underscore/underscore-min", - vue: "../components/vue/dist/vue" + underscore: "../components/underscore/underscore-min" }, shim: { bootstrap: { From 7da2df50b5474a1d49c47e0ef198da3dcd881d1e Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 10 May 2017 10:02:28 +0100 Subject: [PATCH 05/14] Remove trailing filters file --- remoteappmanager/static/js/filters.js | 22 ---------------------- 1 file changed, 22 deletions(-) delete mode 100644 remoteappmanager/static/js/filters.js diff --git a/remoteappmanager/static/js/filters.js b/remoteappmanager/static/js/filters.js deleted file mode 100644 index b6d40d2fe..000000000 --- a/remoteappmanager/static/js/filters.js +++ /dev/null @@ -1,22 +0,0 @@ -define([ - "../components/vue/dist/vue", - "urlutils" -], function (Vue, urlutils) { - 'use strict'; - - Vue.filter('icon_src', function(icon_data) { - return ( - icon_data ? - 'data:image/png;base64,' + icon_data : - urlutils.path_join( - window.apidata.base_url, 'static', 'images', 'generic_appicon_128.png' - ) - ); - }); - - Vue.filter('app_name', function(image) { - return image.ui_name? image.ui_name: image.name; - }); - - return null; -}); From a79b4223bc9192f244caac3d3529609ec6ca5ecb Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 10 May 2017 13:13:56 +0100 Subject: [PATCH 06/14] Add tests for the model --- jstests/tests/home/test_models.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/jstests/tests/home/test_models.js b/jstests/tests/home/test_models.js index 90ab0e4d4..56ffcecec 100644 --- a/jstests/tests/home/test_models.js +++ b/jstests/tests/home/test_models.js @@ -2,13 +2,18 @@ define([ "home/models" ], function (models) { "use strict"; - + 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].resolution, "Window"); }); From 50e13f704278ad6ffa8881fd9e9ce32ee69f950c Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 10 May 2017 13:43:38 +0100 Subject: [PATCH 07/14] Add tests for the application view form --- jstests/tests/home/test_views.js | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/jstests/tests/home/test_views.js b/jstests/tests/home/test_views.js index 4b74581e7..7d5ea0ace 100644 --- a/jstests/tests/home/test_views.js +++ b/jstests/tests/home/test_views.js @@ -1,9 +1,10 @@ define([ "home/models", "home/views/application_list_view", + "home/views/application_view", "components/vue/dist/vue", "vue/filters" -], function (models, application_list_view, Vue) { +], function (models, application_list_view, application_view, Vue) { "use strict"; QUnit.module("home.app_list_view"); @@ -76,4 +77,31 @@ define([ }) })}); }); + + 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')); + + // Simulate application starting + model.app_list[0].status = 'STARTING'; + + Vue.nextTick(function() { + assert.ok(app_view.$el.querySelector('.start-button').disabled); + + done(); + }); + })}); + }); + + // assert.equal(app_view.$el.children[0].tagName, 'IFRAME'); }); From c0b88f5d2bd1ecc8fc56019372eb39bd42c54c25 Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 10 May 2017 14:17:35 +0100 Subject: [PATCH 08/14] Refactor files names --- ...views.js => test_application_list_view.js} | 30 +--------------- jstests/tests/home/test_application_view.js | 35 +++++++++++++++++++ jstests/testsuite.js | 3 +- 3 files changed, 38 insertions(+), 30 deletions(-) rename jstests/tests/home/{test_views.js => test_application_list_view.js} (70%) create mode 100644 jstests/tests/home/test_application_view.js diff --git a/jstests/tests/home/test_views.js b/jstests/tests/home/test_application_list_view.js similarity index 70% rename from jstests/tests/home/test_views.js rename to jstests/tests/home/test_application_list_view.js index 7d5ea0ace..4b74581e7 100644 --- a/jstests/tests/home/test_views.js +++ b/jstests/tests/home/test_application_list_view.js @@ -1,10 +1,9 @@ define([ "home/models", "home/views/application_list_view", - "home/views/application_view", "components/vue/dist/vue", "vue/filters" -], function (models, application_list_view, application_view, Vue) { +], function (models, application_list_view, Vue) { "use strict"; QUnit.module("home.app_list_view"); @@ -77,31 +76,4 @@ define([ }) })}); }); - - 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')); - - // Simulate application starting - model.app_list[0].status = 'STARTING'; - - Vue.nextTick(function() { - assert.ok(app_view.$el.querySelector('.start-button').disabled); - - done(); - }); - })}); - }); - - // assert.equal(app_view.$el.children[0].tagName, 'IFRAME'); }); diff --git a/jstests/tests/home/test_application_view.js b/jstests/tests/home/test_application_view.js new file mode 100644 index 000000000..7892e3a19 --- /dev/null +++ b/jstests/tests/home/test_application_view.js @@ -0,0 +1,35 @@ +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')); + + // Simulate application starting + model.app_list[0].status = 'STARTING'; + + Vue.nextTick(function() { + assert.ok(app_view.$el.querySelector('.start-button').disabled); + + done(); + }); + })}); + }); + + // assert.equal(app_view.$el.children[0].tagName, 'IFRAME'); +}); diff --git a/jstests/testsuite.js b/jstests/testsuite.js index ea9089920..f90e4e12f 100644 --- a/jstests/testsuite.js +++ b/jstests/testsuite.js @@ -21,7 +21,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(init) { From f4546218ded44447a1e2d8539541bd750327c44b Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 10 May 2017 14:49:44 +0100 Subject: [PATCH 09/14] Add iframe rendering test --- jstests/tests/home/test_application_view.js | 33 +++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/jstests/tests/home/test_application_view.js b/jstests/tests/home/test_application_view.js index 7892e3a19..183425b73 100644 --- a/jstests/tests/home/test_application_view.js +++ b/jstests/tests/home/test_application_view.js @@ -11,7 +11,6 @@ define([ var done = assert.async(); var model = new models.ApplicationListModel(); - var app_view = new application_view.ApplicationView({ data: function() { return { model: model }; } }).$mount(); @@ -20,6 +19,8 @@ define([ 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, 'Application 1'); + // Simulate application starting model.app_list[0].status = 'STARTING'; @@ -31,5 +32,33 @@ define([ })}); }); - // assert.equal(app_view.$el.children[0].tagName, 'IFRAME'); + 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 = 'blabla.com'; + + 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() { + assert.equal(app_view.$el.children[0].tagName, 'DIV'); + assert.ok(app_view.$el.children[0].classList.contains('row')); + + done(); + }); + }); + }); + }); }); From 2a4312d800ce2dfee42366124d42616cc07c4ba3 Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 10 May 2017 16:16:04 +0100 Subject: [PATCH 10/14] Change url --- jstests/tests/home/test_application_view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jstests/tests/home/test_application_view.js b/jstests/tests/home/test_application_view.js index 183425b73..917f9634c 100644 --- a/jstests/tests/home/test_application_view.js +++ b/jstests/tests/home/test_application_view.js @@ -44,7 +44,7 @@ define([ // 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 = 'blabla.com'; + 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'); From 5f460bbc2acea59f529b67447c418d80949f3ee4 Mon Sep 17 00:00:00 2001 From: martinRenou Date: Wed, 10 May 2017 16:19:13 +0100 Subject: [PATCH 11/14] Changed check --- jstests/tests/home/test_application_view.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/jstests/tests/home/test_application_view.js b/jstests/tests/home/test_application_view.js index 917f9634c..3754dfce1 100644 --- a/jstests/tests/home/test_application_view.js +++ b/jstests/tests/home/test_application_view.js @@ -19,7 +19,10 @@ define([ 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, 'Application 1'); + 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'; @@ -53,8 +56,11 @@ define([ model.selected_index = 1; Vue.nextTick(function() { - assert.equal(app_view.$el.children[0].tagName, 'DIV'); - assert.ok(app_view.$el.children[0].classList.contains('row')); + 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(); }); From a84e9ec69077f18b497509fd63aabc6ec0719027 Mon Sep 17 00:00:00 2001 From: martinRenou Date: Thu, 11 May 2017 13:20:01 +0100 Subject: [PATCH 12/14] Fix tests and add some tests --- .../tests/home/test_application_list_view.js | 58 +++++++++++++------ jstests/tests/home/test_application_view.js | 14 +++-- .../js/home/views/application_list_view.js | 2 +- .../static/js/home/views/application_view.js | 2 +- 4 files changed, 51 insertions(+), 25 deletions(-) diff --git a/jstests/tests/home/test_application_list_view.js b/jstests/tests/home/test_application_list_view.js index 4b74581e7..c57f92f4f 100644 --- a/jstests/tests/home/test_application_list_view.js +++ b/jstests/tests/home/test_application_list_view.js @@ -19,36 +19,56 @@ define([ 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 + 2 - ) + model.app_list.length + ); - // Clear the model's application list - model.app_list = []; + done(); + })}); + }); - Vue.nextTick(function() { - assert.equal( - app_list_view.$el.querySelector("#applistentries > li > a").style.display, - "" - ) + QUnit.test("rendering nothing in the list", function (assert) { + var done = assert.async(); - assert.equal( - app_list_view.$el.querySelector("#applistentries").children.length, - 2 - ) + var model = new models.ApplicationListModel(); + var app_list_view = new application_list_view.ApplicationListView({ + data: function() { return { model: model }; } + }).$mount(); - done(); - }); - })}); + 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) { @@ -62,7 +82,7 @@ define([ model.update().done(function() { Vue.nextTick(function() { assert.notEqual(app_list_view.visible_list.length, 0); - app_list_view.search_input = "heho" + app_list_view.search_input = "heho"; Vue.nextTick(function() { assert.equal(app_list_view.visible_list.length, 0); diff --git a/jstests/tests/home/test_application_view.js b/jstests/tests/home/test_application_view.js index 3754dfce1..26da2d80d 100644 --- a/jstests/tests/home/test_application_view.js +++ b/jstests/tests/home/test_application_view.js @@ -27,11 +27,17 @@ define([ // Simulate application starting model.app_list[0].status = 'STARTING'; - Vue.nextTick(function() { - assert.ok(app_view.$el.querySelector('.start-button').disabled); + assert.equal( + app_view.$el.querySelector('.box-title').innerHTML, + model.app_list[0].app_data.image.ui_name + ); - done(); - }); + assert.equal( + app_view.$el.querySelector('#app-description').innerHTML, + model.app_list[0].app_data.image.description + ); + + done(); })}); }); 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([ '' + '