Switch to vue (user frontend)

bower.json

@@ -21,7 +21,6 @@
         "datatables.net": "~1.10.12",
         "datatables.net-dt": "~1.10.12",
         "admin-lte": "~2.3.11",
-        "handlebars": "~4.0.5",
         "underscore": "~1.8.3",
         "html5shiv": "~3.7.3",
         "respond": "~1.4.2",

jstests/tests.html

@@ -14,6 +14,7 @@
     <div id="qunit"></div>
         <div id="qunit-fixture">
             <div id="applist"></div>
+            <div class="content-wrapper"></div>
         </div>
     </body>
 </html>

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, applicationListView, 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 appListView = new applicationListView.ApplicationListView({
+            data: function() { return { model: model }; }
+        }).$mount();
+
+        assert.ok(model.loading);
+        assert.equal(
+            appListView.$el.querySelector("#loading-spinner").style.display,
+            ""
+        );
+
+        model.update().done(function() { Vue.nextTick(function() {
+            assert.equal(
+                appListView.$el.querySelector("#no-app-msg").style.display,
+                "none"
+            );
+            assert.equal(
+                appListView.$el.querySelector("#loading-spinner").style.display,
+                "none"
+            );
+            assert.equal(
+                appListView.$el.querySelector("#applistentries").children.length,
+                model.appList.length
+            );
+
+            done();
+        })});
+    });
+
+    QUnit.test("rendering nothing in the list", function (assert) {
+        var done = assert.async();
+
+        var model = new models.ApplicationListModel();
+        var appListView = new applicationListView.ApplicationListView({
+            data: function() { return { model: model }; }
+        }).$mount();
+
+        model.loading = false;
+
+        Vue.nextTick(function() {
+            assert.equal(
+                appListView.$el.querySelector("#no-app-msg").style.display,
+                ""
+            );
+            assert.equal(
+                appListView.$el.querySelector("#loading-spinner").style.display,
+                "none"
+            );
+            assert.equal(
+                appListView.$el.querySelector("#applistentries").children.length,
+                0
+            );
+
+            done();
+        });
+    });
+
+    QUnit.test("search form", function (assert) {
+        var done = assert.async();
+
+        var model = new models.ApplicationListModel();
+        var appListView = new applicationListView.ApplicationListView({
+            data: function() { return { model: model }; }
+        }).$mount();
+
+        model.update().done(function() { Vue.nextTick(function() {
+            assert.notEqual(appListView.visibleList.length, 0);
+
+            appListView.searchInput = "heho";
+
+            Vue.nextTick(function() {
+                assert.equal(appListView.visibleList.length, 0);
+                assert.equal(
+                    appListView.$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, applicationView, Vue) {
+    "use strict";
+
+    QUnit.module("home.app_view");
+    QUnit.test("rendering form", function (assert) {
+        var done = assert.async();
+
+        var model = new models.ApplicationListModel();
+        var appView = new applicationView.ApplicationView({
+            data: function() { return { model: model }; }
+        }).$mount();
+
+        model.update().done(function() { Vue.nextTick(function() {
+            assert.equal(appView.$el.children[0].tagName, 'DIV');
+            assert.ok(appView.$el.children[0].classList.contains('row'));
+
+            assert.equal(
+                appView.$el.querySelector('.box-title').innerHTML,
+                model.appList[0].appData.image.ui_name
+            );
+
+            // Simulate application starting
+            model.appList[0].status = 'STARTING';
+
+            assert.equal(
+                appView.$el.querySelector('.box-title').innerHTML,
+                model.appList[0].appData.image.ui_name
+            );
+            assert.equal(
+                appView.$el.querySelector('#app-description').innerHTML,
+                model.appList[0].appData.image.description
+            );
+
+            done();
+        })});
+    });
+
+    QUnit.test("rendering iframe", function (assert) {
+        var done = assert.async();
+
+        var model = new models.ApplicationListModel();
+        var appView = new applicationView.ApplicationView({
+            data: function() { return { model: model }; }
+        }).$mount();
+
+        model.update().done(function() {
+            // Simulate application running
+            model.appList[0].status = 'RUNNING';
+            model.appList[0].appData.container = {};
+            model.appList[0].appData.container.url_id = 'https://127.0.0.1:1234/';
+
+            Vue.nextTick(function() {
+                assert.equal(appView.$el.children[0].tagName, 'IFRAME');
+
+                // Render form again by selecting the other application which is stopped
+                model.selectedIndex = 1;
+
+                Vue.nextTick(function() {
+                console.log(model.appList[1].ui_name)
+                    assert.equal(
+                        appView.$el.querySelector('.box-title').innerHTML,
+                        model.appList[1].appData.image.ui_name
+                    );
+
+                    done();
+                });
+            });
+        });
+    });
+});

jstests/tests/home/test_configurables.js

@@ -5,22 +5,21 @@ define([
 
     QUnit.module("home.configurables");
     QUnit.test("instantiation", function (assert) {
-        var resolution_class = configurables.from_tag("resolution");
-        var resolution = new resolution_class();
-        assert.equal(resolution.tag, "resolution");
-        assert.equal(resolution.resolution, "Window");
-
-        resolution.resolution = "1024x768";
-        assert.equal(resolution.as_config_dict().resolution, "1024x768");
+        var resolutionConf = new configurables.resolution.model();
+
+        assert.equal(resolutionConf.tag, "resolution");
+        assert.deepEqual(resolutionConf.configDict, { resolution: "Window" });
+        assert.notEqual(resolutionConf.asConfigDict().resolution, "Window");
+
+        resolutionConf.configDict = { resolution: '1280x1024' };
+        assert.equal(resolutionConf.asConfigDict().resolution, '1280x1024');
     });
-    
+
     QUnit.test("view", function (assert) {
-        var resolution_class = configurables.from_tag("resolution");
-        var resolution = new resolution_class();
+        var propsData = { configDict: { resolution: "Window" } };
+        var component = new configurables.resolution.component({propsData: propsData}).$mount();
 
-        var view = resolution.view();
-        assert.notEqual(view.find("select"), null);
-        assert.equal(view.find("option").length, 
-            resolution.resolution_options.length);
+        assert.notEqual(component.$el.querySelector("select"), null);
+        assert.equal(component.$el.querySelector("select").children.length, 5);
     });
-});
+});

jstests/tests/home/test_models.js

@@ -1,17 +1,21 @@
 define([
-    "home/models" 
+    "home/models"
 ], function (models) {
     "use strict";
-    
+
     QUnit.module("home.models");
     QUnit.test("instantiation", function (assert) {
         var model = new models.ApplicationListModel();
-        assert.equal(model.app_data.length, 0);
+
+        assert.equal(model.appList.length, 0);
+        assert.equal(model.selectedIndex, null);
+
         model.update().done(function() {
-            assert.equal(model.app_data.length, 2);
-            assert.equal(model.app_data[0].image.configurables[0], "resolution");
-            assert.notEqual(model.configurables[0].resolution, null);
-            assert.equal(model.configurables[0].resolution.resolution, "Window");
+            assert.equal(model.appList.length, 2);
+            assert.equal(model.selectedIndex, 0);
+
+            assert.equal(model.appList[0].appData.image.configurables[0], "resolution");
+            assert.equal(model.appList[0].configurables[0].configDict.resolution, "Window");
         });
     });
 });

jstests/tests/vue/components/test_ConfirmDialog.js

@@ -4,11 +4,16 @@ define([
   "jstests/helpers"
 ], function (Vue, ConfirmDialog, helpers) {
     "use strict";
-  
+
     QUnit.module("ConfirmDialog");
     QUnit.test("rendering", function (assert) {
         assert.equal(helpers.getRenderedText(ConfirmDialog, {
-          title: "This is the title"
+          title: "This is the title",
+          closeCallback: function() {}
         }), "This is the title  Cancel Ok");
+
+        assert.equal(helpers.getRenderedText(ConfirmDialog, {
+          title: "This is the title"
+        }), "This is the title   Ok");
     });
 });

jstests/testsuite.js

@@ -8,7 +8,6 @@
           bootstrap: '../components/bootstrap/js/bootstrap.min',
           moment: "../components/moment/moment",
           "jsapi/v1/resources": "../../../jstests/tests/home/mock_jsapi",
-          handlebars: "../components/handlebars/handlebars.amd.min",
           underscore: "../components/underscore/underscore-min"
         },
         shim: {
@@ -19,24 +18,23 @@
         }
     });
 
-	require([
-        "init",
+    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/vue/components/test_DataTable.js",
         "tests/vue/components/test_ConfirmDialog.js",
         "tests/test_utils.js",
         "tests/test_analytics.js"
-        ], function(init) {
+        ], function() {
             window.apidata = {
                 base_url: "/",
                 prefix: "/"
             };
-            init.handlebars();
-
+
             QUnit.load();
             QUnit.start();
-	    });
+        });
 }());
 

package.json

@@ -1,20 +1,19 @@
 {
-    "name": "simphony-remote-deps",
-    "version": "0.0.0",
-    "description": "SimPhoNy-remote nodejs dependencies",
-    "author": "Enthought",
-    "license": "BSD",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/simphony-remote/simphony-remote.git"
-    },
-    "dependencies": {
-        "bower": "*",
-        "configurable-http-proxy": "git://github.com/jupyterhub/configurable-http-proxy.git#2.0.1"
-    },
-    "devDependencies": {
-	    "jshint": "*",
-	    "node-qunit-phantomjs": "*"
-    }
+  "name": "simphony-remote-deps",
+  "version": "1.2.0",
+  "description": "SimPhoNy-remote nodejs dependencies",
+  "author": "Enthought",
+  "license": "BSD",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/simphony-remote/simphony-remote.git"
+  },
+  "dependencies": {
+    "bower": "*",
+    "configurable-http-proxy": "git://github.com/jupyterhub/configurable-http-proxy.git#2.0.1"
+  },
+  "devDependencies": {
+    "jshint": "*",
+    "node-qunit-phantomjs": "*"
+  }
 }
-