From 7b37f6840d4b66f0989e45508c63cde8a4b4503e Mon Sep 17 00:00:00 2001 From: Michael Hackstein Date: Thu, 16 Jan 2014 15:58:39 +0100 Subject: [PATCH] Added first version of cluster database overview. Right now only datbase name is presented to the user --- .../js/templates/clusterDatabaseView.ejs | 21 ++++- .../frontend/js/views/clusterDatabaseView.js | 20 ++++- .../specs/graphViewer/helper/uiMatchers.js | 8 ++ .../specs/views/clusterDatabaseViewSpec.js | 82 +++++++++++++------ .../specs/views/clusterOverviewViewSpec.js | 30 +------ .../test/specs/views/clusterServerViewSpec.js | 14 +--- 6 files changed, 108 insertions(+), 67 deletions(-) diff --git a/js/apps/system/aardvark/frontend/js/templates/clusterDatabaseView.ejs b/js/apps/system/aardvark/frontend/js/templates/clusterDatabaseView.ejs index 9a160338e4..3253ff0727 100644 --- a/js/apps/system/aardvark/frontend/js/templates/clusterDatabaseView.ejs +++ b/js/apps/system/aardvark/frontend/js/templates/clusterDatabaseView.ejs @@ -1,4 +1,19 @@ +<% var statusClass = function(s) { + switch (s) { + case "ok": + return "success"; + case "warning": + return "warning"; + case "critical": + return "danger"; + } + }; +%>

Databases

- - - + diff --git a/js/apps/system/aardvark/frontend/js/views/clusterDatabaseView.js b/js/apps/system/aardvark/frontend/js/views/clusterDatabaseView.js index 6f491fce41..dd604c60cb 100644 --- a/js/apps/system/aardvark/frontend/js/views/clusterDatabaseView.js +++ b/js/apps/system/aardvark/frontend/js/views/clusterDatabaseView.js @@ -16,6 +16,22 @@ initialize: function() { this.colView = new window.ClusterCollectionView(); + this.fakeData = { + databases: [ + { + name: "_system", + status: "ok" + }, + { + name: "myDatabase", + status: "warning" + }, + { + name: "otherDatabase", + status: "critical" + } + ] + }; }, loadDatabase: function(e) { @@ -24,7 +40,9 @@ }, render: function(){ - $(this.el).html(this.template.render({})); + $(this.el).html(this.template.render({ + databases: this.fakeData.databases + })); return this; } diff --git a/js/apps/system/aardvark/test/specs/graphViewer/helper/uiMatchers.js b/js/apps/system/aardvark/test/specs/graphViewer/helper/uiMatchers.js index c9a6166292..c4cc080679 100644 --- a/js/apps/system/aardvark/test/specs/graphViewer/helper/uiMatchers.js +++ b/js/apps/system/aardvark/test/specs/graphViewer/helper/uiMatchers.js @@ -52,6 +52,14 @@ var uiMatchers = uiMatchers || {}; return el.hasClass(name); }, + toNotHaveClass: function(name) { + var el = $(this.actual); + this.message = function() { + return "Expected \"" + el.attr("class") + "\" to not contain " + name; + }; + return !el.hasClass(name); + }, + toBeADropdownMenu: function() { var div = this.actual, btn = div.children[0], diff --git a/js/apps/system/aardvark/test/specs/views/clusterDatabaseViewSpec.js b/js/apps/system/aardvark/test/specs/views/clusterDatabaseViewSpec.js index d03311ea6c..253f45457c 100644 --- a/js/apps/system/aardvark/test/specs/views/clusterDatabaseViewSpec.js +++ b/js/apps/system/aardvark/test/specs/views/clusterDatabaseViewSpec.js @@ -1,7 +1,7 @@ /*jslint indent: 2, nomen: true, maxlen: 100, white: true plusplus: true, browser: true*/ /*global describe, beforeEach, afterEach, it, */ /*global spyOn, expect*/ -/*global templateEngine, $*/ +/*global templateEngine, $, uiMatchers*/ (function() { "use strict"; @@ -16,6 +16,7 @@ render: function(){} }; spyOn(window, "ClusterCollectionView").andReturn(colView); + uiMatchers.define(this); }); afterEach(function() { @@ -33,46 +34,81 @@ describe("rendering", function() { + var db1, db2, db3, databases, + checkButtonContent = function(db, cls) { + var btn = document.getElementById(db.name); + expect(btn).toBeOfClass("btn"); + expect(btn).toBeOfClass("btn-server"); + expect(btn).toBeOfClass("database"); + expect(btn).toBeOfClass("btn-" + cls); + expect($(btn).text()).toEqual(db.name); + }; + + beforeEach(function() { spyOn(colView, "render"); + db1 = { + name: "_system", + status: "ok" + }; + db2 = { + name: "myDatabase", + status: "warning" + }; + db3 = { + name: "otherDatabase", + status: "critical" + }; + databases = [ + db1, + db2, + db3 + ]; view = new window.ClusterDatabaseView(); + view.fakeData.databases = databases; + view.render(); }); it("should not render the Server view", function() { - view.render(); expect(colView.render).not.toHaveBeenCalled(); }); - }); - describe("user actions", function() { - var db; - - beforeEach(function() { - spyOn(colView, "render"); - view = new window.ClusterDatabaseView(); - view.render(); + it("should render the ok database", function() { + checkButtonContent(db1, "success"); }); - it("should be able to navigate to _system", function() { - db = "_system"; - $("#" + db).click(); - expect(colView.render).toHaveBeenCalledWith(db); + it("should render the warning database", function() { + checkButtonContent(db2, "warning"); }); - it("should be able to navigate to myDatabase", function() { - db = "myDatabase"; - $("#" + db).click(); - expect(colView.render).toHaveBeenCalledWith(db); + it("should render the error database", function() { + checkButtonContent(db3, "danger"); }); - it("should be able to navigate to otherDatabase", function() { - db = "otherDatabase"; - $("#" + db).click(); - expect(colView.render).toHaveBeenCalledWith(db); + describe("user actions", function() { + var db; + + it("should be able to navigate to _system", function() { + db = "_system"; + $("#" + db).click(); + expect(colView.render).toHaveBeenCalledWith(db); + }); + + it("should be able to navigate to myDatabase", function() { + db = "myDatabase"; + $("#" + db).click(); + expect(colView.render).toHaveBeenCalledWith(db); + }); + + it("should be able to navigate to otherDatabase", function() { + db = "otherDatabase"; + $("#" + db).click(); + expect(colView.render).toHaveBeenCalledWith(db); + }); + }); }); - }); }()); diff --git a/js/apps/system/aardvark/test/specs/views/clusterOverviewViewSpec.js b/js/apps/system/aardvark/test/specs/views/clusterOverviewViewSpec.js index 87d4c5c29a..083b148634 100644 --- a/js/apps/system/aardvark/test/specs/views/clusterOverviewViewSpec.js +++ b/js/apps/system/aardvark/test/specs/views/clusterOverviewViewSpec.js @@ -1,7 +1,7 @@ /*jslint indent: 2, nomen: true, maxlen: 100, white: true plusplus: true, browser: true*/ /*global describe, beforeEach, afterEach, it, */ /*global spyOn, expect*/ -/*global templateEngine, $, _*/ +/*global templateEngine, $, _, uiMatchers*/ (function() { "use strict"; @@ -20,33 +20,7 @@ }; spyOn(window, "ClusterServerView").andReturn(serverView); spyOn(window, "ClusterCoordinatorView").andReturn(coordinatorView); - this.addMatchers({ - - toBeTag: function(name) { - var el = this.actual; - this.message = function() { - return "Expected " + el.tagName.toLowerCase() + " to be a " + name; - }; - return el.tagName.toLowerCase() === name; - }, - - toBeOfClass: function(name) { - var el = $(this.actual); - this.message = function() { - return "Expected \"" + el.attr("class") + "\" to contain " + name; - }; - return el.hasClass(name); - }, - - toNotHaveClass: function(name) { - var el = $(this.actual); - this.message = function() { - return "Expected \"" + el.attr("class") + "\" to not contain " + name; - }; - return !el.hasClass(name); - } - - }); + uiMatchers.define(this); }); afterEach(function() { diff --git a/js/apps/system/aardvark/test/specs/views/clusterServerViewSpec.js b/js/apps/system/aardvark/test/specs/views/clusterServerViewSpec.js index 6555c0c9a2..6f3cf6ac6e 100644 --- a/js/apps/system/aardvark/test/specs/views/clusterServerViewSpec.js +++ b/js/apps/system/aardvark/test/specs/views/clusterServerViewSpec.js @@ -1,7 +1,7 @@ /*jslint indent: 2, nomen: true, maxlen: 100, white: true plusplus: true, browser: true*/ /*global describe, beforeEach, afterEach, it, */ /*global spyOn, expect*/ -/*global templateEngine, $, _*/ +/*global templateEngine, $, _, uiMatchers*/ (function() { "use strict"; @@ -16,17 +16,7 @@ render: function(){} }; spyOn(window, "ClusterDatabaseView").andReturn(dbView); - - this.addMatchers({ - toBeOfClass: function(name) { - var el = $(this.actual); - this.message = function() { - return "Expected \"" + el.attr("class") + "\" to contain " + name; - }; - return el.hasClass(name); - } - }); - + uiMatchers.define(this); }); afterEach(function() {