From d5221c0d17c6e4639f8a5064a8d4fbead9c433e6 Mon Sep 17 00:00:00 2001
From: Lars Jung <lrsjng@gmail.com>
Date: Sat, 25 Apr 2015 13:24:34 +0200
Subject: [PATCH] Refactor view.

---
 src/_h5ai/client/js/inc/main/index.js       |   3 -
 src/_h5ai/client/js/inc/model/item.js       |   4 +-
 src/_h5ai/client/js/inc/view/base.js        |  29 ------
 src/_h5ai/client/js/inc/view/content.js     |  26 ++---
 src/_h5ai/client/js/inc/view/mainrow.js     |   9 ++
 src/_h5ai/client/js/inc/view/root.js        |  10 ++
 src/_h5ai/client/js/inc/view/sidebar.js     |  33 +++---
 src/_h5ai/client/js/inc/view/topbar.js      |  19 ++++
 src/_h5ai/client/js/inc/view/viewmode.js    |  25 +----
 test/tests/unit/main/index.js               |  18 +++-
 test/tests/unit/view/content.js             |  63 ++++++++++--
 test/tests/unit/view/mainrow.js             |  93 +++++++++++++++++
 test/tests/unit/view/root.js                | 107 ++++++++++++++++++++
 test/tests/unit/view/sidebar.js             |  27 +++--
 test/tests/unit/view/{base.js => topbar.js} |  85 +++++++++-------
 test/tests/unit/view/viewmode.js            |  31 ++----
 16 files changed, 421 insertions(+), 161 deletions(-)
 delete mode 100644 src/_h5ai/client/js/inc/view/base.js
 create mode 100644 src/_h5ai/client/js/inc/view/mainrow.js
 create mode 100644 src/_h5ai/client/js/inc/view/root.js
 create mode 100644 src/_h5ai/client/js/inc/view/topbar.js
 create mode 100644 test/tests/unit/view/mainrow.js
 create mode 100644 test/tests/unit/view/root.js
 rename test/tests/unit/view/{base.js => topbar.js} (57%)

diff --git a/src/_h5ai/client/js/inc/main/index.js b/src/_h5ai/client/js/inc/main/index.js
index b8008a80..6c59eee4 100644
--- a/src/_h5ai/client/js/inc/main/index.js
+++ b/src/_h5ai/client/js/inc/main/index.js
@@ -1,8 +1,5 @@
 modulejs.define('main/index', ['_', 'core/event'], function (_, event) {
 
-    modulejs.require('view/base');
-    modulejs.require('view/content');
-    modulejs.require('view/sidebar');
     modulejs.require('view/viewmode');
 
     _.each(modulejs.state(), function (state, id) {
diff --git a/src/_h5ai/client/js/inc/model/item.js b/src/_h5ai/client/js/inc/model/item.js
index 06269787..093be356 100644
--- a/src/_h5ai/client/js/inc/model/item.js
+++ b/src/_h5ai/client/js/inc/model/item.js
@@ -7,11 +7,11 @@ modulejs.define('model/item', ['_', 'core/event', 'core/location', 'core/server'
 
     function startsWith(sequence, part) {
 
-        if (!sequence || !sequence.substr || !part || !part.length) {
+        if (!sequence || !sequence.indexOf) {
             return false;
         }
 
-        return sequence.substr(0, part.length) === part;
+        return sequence.indexOf(part) === 0;
     }
 
     function createLabel(sequence) {
diff --git a/src/_h5ai/client/js/inc/view/base.js b/src/_h5ai/client/js/inc/view/base.js
deleted file mode 100644
index 9312d7b5..00000000
--- a/src/_h5ai/client/js/inc/view/base.js
+++ /dev/null
@@ -1,29 +0,0 @@
-modulejs.define('view/base', ['$', 'config'], function ($, config) {
-
-    var templateTopbar =
-            '<div id="topbar">' +
-                '<div id="toolbar"/>' +
-                '<div id="crumbbar"/>' +
-            '</div>';
-    var templateMainRow =
-            '<div id="main-row">' +
-                '<div id="sidebar"/>' +
-            '</div>';
-    var templateBacklink =
-            '<a id="backlink" href="http://larsjung.de/h5ai/" title="powered by h5ai ' + config.setup.VERSION + '">' +
-                '<div>powered</div>' +
-                '<div>by h5ai</div>' +
-            '</a>';
-
-
-    function init() {
-
-        $('#fallback, #fallback-hints').remove();
-        $(templateTopbar).appendTo('body');
-        $(templateMainRow).appendTo('body');
-        $(templateBacklink).appendTo('#topbar');
-    }
-
-
-    init();
-});
diff --git a/src/_h5ai/client/js/inc/view/content.js b/src/_h5ai/client/js/inc/view/content.js
index f9df8f23..b069cbd8 100644
--- a/src/_h5ai/client/js/inc/view/content.js
+++ b/src/_h5ai/client/js/inc/view/content.js
@@ -1,4 +1,4 @@
-modulejs.define('view/content', ['_', '$', 'core/event', 'core/format', 'core/location', 'core/resource', 'core/settings'], function (_, $, event, format, location, resource, allsettings) {
+modulejs.define('view/content', ['_', '$', 'core/event', 'core/format', 'core/location', 'core/resource', 'core/settings', 'view/mainrow'], function (_, $, event, format, location, resource, allsettings, mainrow) {
 
     var settings = _.extend({
             binaryPrefix: false,
@@ -30,6 +30,10 @@ modulejs.define('view/content', ['_', '$', 'core/event', 'core/format', 'core/lo
                     '<div class="empty l10n-empty"/>' +
                 '</div>' +
             '</div>';
+    var $content = $(contentTemplate);
+    var $view = $content.find('#view');
+    var $items = $view.find('#items');
+    var $empty = $view.find('.empty');
 
 
     function update(item) {
@@ -88,9 +92,6 @@ modulejs.define('view/content', ['_', '$', 'core/event', 'core/format', 'core/lo
 
     function onLocationChanged(item) {
 
-        var $items = $('#items');
-        var $empty = $('#view').find('.empty');
-
         $items.find('.item').remove();
 
         if (item.parent && !settings.hideParentFolder) {
@@ -115,9 +116,6 @@ modulejs.define('view/content', ['_', '$', 'core/event', 'core/format', 'core/lo
 
     function onLocationRefreshed(item, added, removed) {
 
-        var $items = $('#items');
-        var $empty = $('#view').find('.empty');
-
         _.each(added, function (item) {
 
             if (!(item.isFolder() && settings.hideFolders)) {
@@ -141,10 +139,8 @@ modulejs.define('view/content', ['_', '$', 'core/event', 'core/format', 'core/lo
 
     function init() {
 
-        var $content = $(contentTemplate);
-        var $view = $content.find('#view');
-        var $items = $view.find('#items');
-        $view.find('.empty').hide();
+        $content.appendTo(mainrow.$el);
+        $empty.hide();
 
         format.setDefaultMetric(settings.binaryPrefix);
 
@@ -154,10 +150,14 @@ modulejs.define('view/content', ['_', '$', 'core/event', 'core/format', 'core/lo
 
         event.sub('location.changed', onLocationChanged);
         event.sub('location.refreshed', onLocationRefreshed);
-
-        $content.appendTo('#main-row');
     }
 
 
     init();
+
+    return {
+        $el: $content,
+        $view: $view,
+        $items: $items
+    };
 });
diff --git a/src/_h5ai/client/js/inc/view/mainrow.js b/src/_h5ai/client/js/inc/view/mainrow.js
new file mode 100644
index 00000000..07e818b9
--- /dev/null
+++ b/src/_h5ai/client/js/inc/view/mainrow.js
@@ -0,0 +1,9 @@
+modulejs.define('view/mainrow', ['$', 'view/root'], function ($, root) {
+
+    var template = '<div id="main-row"/>';
+    var $el = $(template).appendTo(root.$el);
+
+    return {
+        $el: $el
+    };
+});
diff --git a/src/_h5ai/client/js/inc/view/root.js b/src/_h5ai/client/js/inc/view/root.js
new file mode 100644
index 00000000..8f1f6c01
--- /dev/null
+++ b/src/_h5ai/client/js/inc/view/root.js
@@ -0,0 +1,10 @@
+modulejs.define('view/root', ['$'], function ($) {
+
+    var $el = $('body').attr('id', 'root');
+
+    $('#fallback, #fallback-hints').remove();
+
+    return {
+        $el: $el
+    };
+});
diff --git a/src/_h5ai/client/js/inc/view/sidebar.js b/src/_h5ai/client/js/inc/view/sidebar.js
index d3443013..9104a7fd 100644
--- a/src/_h5ai/client/js/inc/view/sidebar.js
+++ b/src/_h5ai/client/js/inc/view/sidebar.js
@@ -1,17 +1,18 @@
-modulejs.define('view/sidebar', ['$', 'core/resource', 'core/store'], function ($, resource, store) {
+modulejs.define('view/sidebar', ['$', 'core/resource', 'core/store', 'view/mainrow', 'view/topbar'], function ($, resource, store, mainrow, topbar) {
 
     var storekey = 'sidebarIsVisible';
+    var template = '<div id="sidebar"/>';
     var toggleTemplate =
             '<div id="sidebar-toggle" class="tool">' +
                 '<img alt="sidebar"/>' +
             '</div>';
+    var $sidebar = $(template);
+    var $toggle = $(toggleTemplate);
+    var $img = $toggle.find('img');
 
 
     function update(toggle) {
 
-        var $toggle = $('#sidebar-toggle');
-        var $img = $toggle.find('img');
-        var $sidebar = $('#sidebar');
         var isVisible = store.get(storekey);
 
         if (toggle) {
@@ -20,29 +21,23 @@ modulejs.define('view/sidebar', ['$', 'core/resource', 'core/store'], function (
         }
 
         if (isVisible) {
-            $toggle.addClass('current');
+            $toggle.addClass('active');
             $img.attr('src', resource.image('back'));
             $sidebar.show();
         } else {
-            $toggle.removeClass('current');
+            $toggle.removeClass('active');
             $img.attr('src', resource.image('sidebar'));
             $sidebar.hide();
         }
     }
 
-    function init() {
 
-        $(toggleTemplate)
-            .appendTo('#toolbar')
-            .on('click', function (ev) {
+    $sidebar.appendTo(mainrow.$el);
+    $toggle.appendTo(topbar.$toolbar)
+        .on('click', function () { update(true); });
+    update(false);
 
-                update(true);
-                ev.preventDefault();
-            });
-
-        update(false);
-    }
-
-
-    init();
+    return {
+        $el: $sidebar
+    };
 });
diff --git a/src/_h5ai/client/js/inc/view/topbar.js b/src/_h5ai/client/js/inc/view/topbar.js
new file mode 100644
index 00000000..e8c35943
--- /dev/null
+++ b/src/_h5ai/client/js/inc/view/topbar.js
@@ -0,0 +1,19 @@
+modulejs.define('view/topbar', ['$', 'config', 'view/root'], function ($, config, root) {
+
+    var template =
+            '<div id="topbar">' +
+                '<div id="toolbar"/>' +
+                '<div id="crumbbar"/>' +
+                '<a id="backlink" href="http://larsjung.de/h5ai/" title="powered by h5ai ' + config.setup.VERSION + '">' +
+                    '<div>powered</div>' +
+                    '<div>by h5ai</div>' +
+                '</a>' +
+            '</div>';
+    var $el = $(template).appendTo(root.$el);
+
+    return {
+        $el: $el,
+        $toolbar: $el.find('#toolbar'),
+        $crumbbar: $el.find('#crumbbar')
+    };
+});
diff --git a/src/_h5ai/client/js/inc/view/viewmode.js b/src/_h5ai/client/js/inc/view/viewmode.js
index 50bd7db1..94c9b453 100644
--- a/src/_h5ai/client/js/inc/view/viewmode.js
+++ b/src/_h5ai/client/js/inc/view/viewmode.js
@@ -1,4 +1,4 @@
-modulejs.define('view/viewmode', ['_', '$', 'core/event', 'core/resource', 'core/settings', 'core/store'], function (_, $, event, resource, allsettings, store) {
+modulejs.define('view/viewmode', ['_', '$', 'core/resource', 'core/settings', 'core/store', 'view/content', 'view/sidebar'], function (_, $, resource, allsettings, store, content, sidebar) {
 
     var modes = ['details', 'grid', 'icons'];
     var settings = _.extend({}, {
@@ -16,11 +16,6 @@ modulejs.define('view/viewmode', ['_', '$', 'core/event', 'core/resource', 'core
     var dynamicStyleTag = null;
 
 
-    function adjustSpacing() {
-
-        // kept here for later use
-    }
-
     function applyCss(rules) {
 
         if (dynamicStyleTag) {
@@ -69,7 +64,6 @@ modulejs.define('view/viewmode', ['_', '$', 'core/event', 'core/resource', 'core
 
     function update(mode, size) {
 
-        var $view = $('#view');
         var stored = store.get(storekey);
 
         mode = mode || stored && stored.mode;
@@ -81,17 +75,15 @@ modulejs.define('view/viewmode', ['_', '$', 'core/event', 'core/resource', 'core
         _.each(modes, function (m) {
             if (m === mode) {
                 $('#view-' + m).addClass('active');
-                $view.addClass('view-' + m).show();
+                content.$view.addClass('view-' + m).show();
             } else {
                 $('#view-' + m).removeClass('active');
-                $view.removeClass('view-' + m);
+                content.$view.removeClass('view-' + m);
             }
         });
 
         applyCssSizes(size);
         $('#view-size').val(_.indexOf(sortedSizes, size));
-
-        adjustSpacing();
     }
 
     function addViewSettings() {
@@ -110,11 +102,7 @@ modulejs.define('view/viewmode', ['_', '$', 'core/event', 'core/resource', 'core
                 if (_.contains(settings.modes, mode)) {
                     $(modeTemplate.replace(/\[MODE\]/g, mode))
                         .appendTo($viewBlock)
-                        .on('click', function (ev) {
-
-                            update(mode);
-                            ev.preventDefault();
-                        });
+                        .on('click', function () { update(mode); });
                 }
             });
         }
@@ -130,16 +118,13 @@ modulejs.define('view/viewmode', ['_', '$', 'core/event', 'core/resource', 'core
                 .appendTo($viewBlock);
         }
 
-        $viewBlock.appendTo('#sidebar');
+        $viewBlock.appendTo(sidebar.$el);
     }
 
     function init() {
 
         addViewSettings();
         update();
-
-        event.sub('location.changed', adjustSpacing);
-        $(window).on('resize', adjustSpacing);
     }
 
 
diff --git a/test/tests/unit/main/index.js b/test/tests/unit/main/index.js
index 54cc98f9..779463ac 100644
--- a/test/tests/unit/main/index.js
+++ b/test/tests/unit/main/index.js
@@ -77,22 +77,30 @@ describe('module \'' + ID + '\'', function () {
             assert.deepEqual(this.xEvent.pub.firstCall.args, ['ready']);
         });
 
-        it('requires all views and extensions (only)', function () {
+        it('requires view/viewmode', function () {
 
             this.applyFn();
-            var re = /^(view|ext)\//;
+            assert.isTrue(this.xRequire.calledWithExactly('view/viewmode'));
+        });
+
+        it('requires all extensions', function () {
+
+            this.applyFn();
+            var re = /^ext\//;
             var self = this;
-            var counter = 0;
 
             _.each(modulejs.state(), function (state, id) {
 
                 if (re.test(id)) {
-                    counter += 1;
                     assert.isTrue(self.xRequire.calledWithExactly(id));
                 }
             });
+        });
 
-            assert.strictEqual(self.xRequire.callCount, counter);
+        it('requires only views and extensions', function () {
+
+            this.applyFn();
+            assert.isTrue(this.xRequire.alwaysCalledWithMatch(/^(view|ext)\//));
         });
 
         it('requires views before extensions', function () {
diff --git a/test/tests/unit/view/content.js b/test/tests/unit/view/content.js
index 3f0156bb..deb51239 100644
--- a/test/tests/unit/view/content.js
+++ b/test/tests/unit/view/content.js
@@ -2,7 +2,7 @@
 'use strict';
 
 var ID = 'view/content';
-var DEPS = ['_', '$', 'core/event', 'core/format', 'core/location', 'core/resource', 'core/settings'];
+var DEPS = ['_', '$', 'core/event', 'core/format', 'core/location', 'core/resource', 'core/settings', 'view/mainrow'];
 
 describe('module \'' + ID + '\'', function () {
 
@@ -26,6 +26,8 @@ describe('module \'' + ID + '\'', function () {
         this.xLocation = {
             setLink: sinon.stub()
         };
+        this.xMainrow = {$el: null};
+
         this.applyFn = function () {
 
             this.xResource.icon.reset();
@@ -36,7 +38,7 @@ describe('module \'' + ID + '\'', function () {
             this.xEvent.pub.reset();
             this.xLocation.setLink.reset();
 
-            return this.definition.fn(_, $, this.xEvent, this.xFormat, this.xLocation, this.xResource, this.xSettings);
+            return this.definition.fn(_, $, this.xEvent, this.xFormat, this.xLocation, this.xResource, this.xSettings, this.xMainrow);
         };
     });
 
@@ -48,7 +50,7 @@ describe('module \'' + ID + '\'', function () {
     beforeEach(function () {
 
         util.restoreHtml();
-        $('<div id="main-row"/>').appendTo('body');
+        this.xMainrow.$el = $('<div id="main-row"/>').appendTo('body');
     });
 
     describe('definition', function () {
@@ -86,18 +88,31 @@ describe('module \'' + ID + '\'', function () {
 
     describe('application', function () {
 
-        it('returns undefined', function () {
+        it('returns object with 3 properties', function () {
 
             var instance = this.applyFn();
-            assert.isUndefined(instance);
+            assert.isPlainObject(instance);
+            assert.lengthOfKeys(instance, 3);
         });
 
-        it('adds HTML #content', function () {
+        it('adds HTML #content to #main-row', function () {
 
             this.applyFn();
             assert.lengthOf($('#main-row > #content'), 1);
         });
 
+        it('adds HTML #view to #content', function () {
+
+            this.applyFn();
+            assert.lengthOf($('#content > #view'), 1);
+        });
+
+        it('adds HTML #items to #view', function () {
+
+            this.applyFn();
+            assert.lengthOf($('#view > #items'), 1);
+        });
+
         it('sets default metric', function () {
 
             this.applyFn();
@@ -124,6 +139,42 @@ describe('module \'' + ID + '\'', function () {
             assert.isFunction(this.xEvent.sub.secondCall.args[1]);
         });
     });
+
+    describe('.$el', function () {
+
+        it('is $(\'#content\')', function () {
+
+            var instance = this.applyFn();
+            assert.isObject(instance.$el);
+            assert.lengthOf(instance.$el, 1);
+            assert.isString(instance.$el.jquery);
+            assert.strictEqual(instance.$el.attr('id'), 'content');
+        });
+    });
+
+    describe('.$view', function () {
+
+        it('is $(\'#view\')', function () {
+
+            var instance = this.applyFn();
+            assert.isObject(instance.$view);
+            assert.lengthOf(instance.$view, 1);
+            assert.isString(instance.$view.jquery);
+            assert.strictEqual(instance.$view.attr('id'), 'view');
+        });
+    });
+
+    describe('.$items', function () {
+
+        it('is $(\'#items\')', function () {
+
+            var instance = this.applyFn();
+            assert.isObject(instance.$items);
+            assert.lengthOf(instance.$items, 1);
+            assert.isString(instance.$items.jquery);
+            assert.strictEqual(instance.$items.attr('id'), 'items');
+        });
+    });
 });
 
 }());
diff --git a/test/tests/unit/view/mainrow.js b/test/tests/unit/view/mainrow.js
new file mode 100644
index 00000000..d3997d5b
--- /dev/null
+++ b/test/tests/unit/view/mainrow.js
@@ -0,0 +1,93 @@
+(function () {
+'use strict';
+
+var ID = 'view/mainrow';
+var DEPS = ['$', 'view/root'];
+
+describe('module \'' + ID + '\'', function () {
+
+    before(function () {
+
+        this.definition = modulejs._private.definitions[ID];
+
+        this.xRoot = {$el: null};
+        this.applyFn = function () {
+
+            return this.definition.fn($, this.xRoot);
+        };
+    });
+
+    after(function () {
+
+        util.restoreHtml();
+    });
+
+    beforeEach(function () {
+
+        util.restoreHtml();
+        this.xRoot.$el = $('<div id="root"/>').appendTo('body');
+    });
+
+    describe('definition', function () {
+
+        it('is defined', function () {
+
+            assert.isPlainObject(this.definition);
+        });
+
+        it('has correct id', function () {
+
+            assert.strictEqual(this.definition.id, ID);
+        });
+
+        it('requires correct', function () {
+
+            assert.deepEqual(this.definition.deps, DEPS);
+        });
+
+        it('args for each request', function () {
+
+            assert.strictEqual(this.definition.deps.length, this.definition.fn.length);
+        });
+
+        it('has no instance', function () {
+
+            assert.notProperty(modulejs._private.instances, ID);
+        });
+
+        it('inits without errors', function () {
+
+            this.applyFn();
+        });
+    });
+
+    describe('application', function () {
+
+        it('returns object with 1 property', function () {
+
+            var instance = this.applyFn();
+            assert.isPlainObject(instance);
+            assert.lengthOfKeys(instance, 1);
+        });
+
+        it('adds HTML #main-row to #root', function () {
+
+            this.applyFn();
+            assert.lengthOf($('#root > #main-row'), 1);
+        });
+    });
+
+    describe('.$el', function () {
+
+        it('is $(\'#main-row\')', function () {
+
+            var instance = this.applyFn();
+            assert.isObject(instance.$el);
+            assert.lengthOf(instance.$el, 1);
+            assert.isString(instance.$el.jquery);
+            assert.strictEqual(instance.$el.attr('id'), 'main-row');
+        });
+    });
+});
+
+}());
diff --git a/test/tests/unit/view/root.js b/test/tests/unit/view/root.js
new file mode 100644
index 00000000..f7f2c3d6
--- /dev/null
+++ b/test/tests/unit/view/root.js
@@ -0,0 +1,107 @@
+(function () {
+'use strict';
+
+var ID = 'view/root';
+var DEPS = ['$'];
+
+describe('module \'' + ID + '\'', function () {
+
+    before(function () {
+
+        this.definition = modulejs._private.definitions[ID];
+
+        this.applyFn = function () {
+
+            return this.definition.fn($);
+        };
+    });
+
+    after(function () {
+
+        util.restoreHtml();
+        $('body').removeAttr('id');
+    });
+
+    beforeEach(function () {
+
+        util.restoreHtml();
+        $('body').removeAttr('id');
+        $('<div id="fallback"/>').appendTo('body');
+        $('<div id="fallback-hints"/>').appendTo('body');
+    });
+
+    describe('definition', function () {
+
+        it('is defined', function () {
+
+            assert.isPlainObject(this.definition);
+        });
+
+        it('has correct id', function () {
+
+            assert.strictEqual(this.definition.id, ID);
+        });
+
+        it('requires correct', function () {
+
+            assert.deepEqual(this.definition.deps, DEPS);
+        });
+
+        it('args for each request', function () {
+
+            assert.strictEqual(this.definition.deps.length, this.definition.fn.length);
+        });
+
+        it('has no instance', function () {
+
+            assert.notProperty(modulejs._private.instances, ID);
+        });
+
+        it('inits without errors', function () {
+
+            this.applyFn();
+        });
+    });
+
+    describe('application', function () {
+
+        it('returns object with 1 property', function () {
+
+            var instance = this.applyFn();
+            assert.isPlainObject(instance);
+            assert.lengthOfKeys(instance, 1);
+        });
+
+        it('adds id root to body', function () {
+
+            this.applyFn();
+            assert.strictEqual($('body').attr('id'), 'root');
+        });
+
+        it('removes HTML #fallback', function () {
+
+            this.applyFn();
+            assert.lengthOf($('#fallback'), 0);
+        });
+
+        it('removes HTML #fallback-hints', function () {
+
+            this.applyFn();
+            assert.lengthOf($('#fallback-hints'), 0);
+        });
+    });
+
+    describe('.$el', function () {
+
+        it('is $(\'#root\')', function () {
+
+            var instance = this.applyFn();
+            assert.isObject(instance.$el);
+            assert.lengthOf(instance.$el, 1);
+            assert.isString(instance.$el.jquery);
+            assert.strictEqual(instance.$el.attr('id'), 'root');
+        });
+    });
+});
+
+}());
diff --git a/test/tests/unit/view/sidebar.js b/test/tests/unit/view/sidebar.js
index 390a5bf7..9f654722 100644
--- a/test/tests/unit/view/sidebar.js
+++ b/test/tests/unit/view/sidebar.js
@@ -2,7 +2,7 @@
 'use strict';
 
 var ID = 'view/sidebar';
-var DEPS = ['$', 'core/resource', 'core/store'];
+var DEPS = ['$', 'core/resource', 'core/store', 'view/mainrow', 'view/topbar'];
 
 describe('module \'' + ID + '\'', function () {
 
@@ -20,13 +20,15 @@ describe('module \'' + ID + '\'', function () {
             put: sinon.stub()
         };
         this.xStore.get.returns(false);
+        this.xMainrow = {$el: null};
+        this.xTopbar = {$toolbar: null};
         this.applyFn = function () {
 
             this.xResource.image.reset();
             this.xStore.get.reset();
             this.xStore.put.reset();
 
-            return this.definition.fn($, this.xResource, this.xStore);
+            return this.definition.fn($, this.xResource, this.xStore, this.xMainrow, this.xTopbar);
         };
     });
 
@@ -38,8 +40,8 @@ describe('module \'' + ID + '\'', function () {
     beforeEach(function () {
 
         util.restoreHtml();
-        $('<div id="toolbar"/>').appendTo('body');
-        $('<div id="sidebar"/>').appendTo('body');
+        this.xMainrow.$el = $('<div id="main-row"/>').appendTo('body');
+        this.xTopbar.$toolbar = $('<div id="toolbar"/>').appendTo('body');
     });
 
 
@@ -78,10 +80,11 @@ describe('module \'' + ID + '\'', function () {
 
     describe('application', function () {
 
-        it('returns undefined', function () {
+        it('returns object with 1 property', function () {
 
             var instance = this.applyFn();
-            assert.isUndefined(instance);
+            assert.isPlainObject(instance);
+            assert.lengthOfKeys(instance, 1);
         });
 
         it('adds HTML #sidebar-toggle', function () {
@@ -122,6 +125,18 @@ describe('module \'' + ID + '\'', function () {
             assert.lengthOf($('#sidebar:visible'), 0);
         });
     });
+
+    describe('.$el', function () {
+
+        it('is $(\'#sidebar\')', function () {
+
+            var instance = this.applyFn();
+            assert.isObject(instance.$el);
+            assert.lengthOf(instance.$el, 1);
+            assert.isString(instance.$el.jquery);
+            assert.strictEqual(instance.$el.attr('id'), 'sidebar');
+        });
+    });
 });
 
 }());
diff --git a/test/tests/unit/view/base.js b/test/tests/unit/view/topbar.js
similarity index 57%
rename from test/tests/unit/view/base.js
rename to test/tests/unit/view/topbar.js
index ef57eb3a..a4df8a0f 100644
--- a/test/tests/unit/view/base.js
+++ b/test/tests/unit/view/topbar.js
@@ -1,8 +1,8 @@
 (function () {
 'use strict';
 
-var ID = 'view/base';
-var DEPS = ['$', 'config'];
+var ID = 'view/topbar';
+var DEPS = ['$', 'config', 'view/root'];
 
 describe('module \'' + ID + '\'', function () {
 
@@ -11,9 +11,10 @@ describe('module \'' + ID + '\'', function () {
         this.definition = modulejs._private.definitions[ID];
 
         this.xConfig = {setup: {VERSION: util.uniqId()}};
+        this.xRoot = {$el: null};
         this.applyFn = function () {
 
-            return this.definition.fn($, this.xConfig);
+            return this.definition.fn($, this.xConfig, this.xRoot);
         };
     });
 
@@ -25,8 +26,7 @@ describe('module \'' + ID + '\'', function () {
     beforeEach(function () {
 
         util.restoreHtml();
-        $('<div ID="fallback"/>').appendTo('body');
-        $('<div id="fallback-hints"/>').appendTo('body');
+        this.xRoot.$el = $('<div id="root"/>').appendTo('body');
     });
 
     describe('definition', function () {
@@ -64,55 +64,32 @@ describe('module \'' + ID + '\'', function () {
 
     describe('application', function () {
 
-        it('returns undefined', function () {
+        it('returns object with 3 properties', function () {
 
             var instance = this.applyFn();
-            assert.isUndefined(instance);
+            assert.isPlainObject(instance);
+            assert.lengthOfKeys(instance, 3);
         });
 
-        it('removes HTML #fallback', function () {
+        it('adds HTML #topbar to #root', function () {
 
             this.applyFn();
-            assert.lengthOf($('#fallback'), 0);
+            assert.lengthOf($('#root > #topbar'), 1);
         });
 
-        it('removes HTML #fallback-hints', function () {
-
-            this.applyFn();
-            assert.lengthOf($('#fallback-hints'), 0);
-        });
-
-        it('adds HTML #topbar', function () {
-
-            this.applyFn();
-            assert.lengthOf($('body > #topbar'), 1);
-        });
-
-        it('adds HTML #toolbar', function () {
+        it('adds HTML #toolbar to #topbar', function () {
 
             this.applyFn();
             assert.lengthOf($('#topbar > #toolbar'), 1);
         });
 
-        it('adds HTML #crumbbar', function () {
+        it('adds HTML #crumbbar to #topbar', function () {
 
             this.applyFn();
             assert.lengthOf($('#topbar > #crumbbar'), 1);
         });
 
-        it('adds HTML #main-row', function () {
-
-            this.applyFn();
-            assert.lengthOf($('body > #main-row'), 1);
-        });
-
-        it('adds HTML #sidebar', function () {
-
-            this.applyFn();
-            assert.lengthOf($('#main-row > #sidebar'), 1);
-        });
-
-        it('adds HTML #backlink', function () {
+        it('adds HTML #backlink to #topbar', function () {
 
             this.applyFn();
             assert.lengthOf($('#topbar > #backlink'), 1);
@@ -137,6 +114,42 @@ describe('module \'' + ID + '\'', function () {
             assert.strictEqual($('#backlink > div').eq(1).text(), 'by h5ai');
         });
     });
+
+    describe('.$el', function () {
+
+        it('is $(\'#topbar\')', function () {
+
+            var instance = this.applyFn();
+            assert.isObject(instance.$el);
+            assert.lengthOf(instance.$el, 1);
+            assert.isString(instance.$el.jquery);
+            assert.strictEqual(instance.$el.attr('id'), 'topbar');
+        });
+    });
+
+    describe('.$toolbar', function () {
+
+        it('is $(\'#toolbar\')', function () {
+
+            var instance = this.applyFn();
+            assert.isObject(instance.$toolbar);
+            assert.lengthOf(instance.$toolbar, 1);
+            assert.isString(instance.$toolbar.jquery);
+            assert.strictEqual(instance.$toolbar.attr('id'), 'toolbar');
+        });
+    });
+
+    describe('.$crumbbar', function () {
+
+        it('is $(\'#crumbbar\')', function () {
+
+            var instance = this.applyFn();
+            assert.isObject(instance.$crumbbar);
+            assert.lengthOf(instance.$crumbbar, 1);
+            assert.isString(instance.$crumbbar.jquery);
+            assert.strictEqual(instance.$crumbbar.attr('id'), 'crumbbar');
+        });
+    });
 });
 
 }());
diff --git a/test/tests/unit/view/viewmode.js b/test/tests/unit/view/viewmode.js
index 67968aad..23ef79f4 100644
--- a/test/tests/unit/view/viewmode.js
+++ b/test/tests/unit/view/viewmode.js
@@ -2,7 +2,7 @@
 'use strict';
 
 var ID = 'view/viewmode';
-var DEPS = ['_', '$', 'core/event', 'core/resource', 'core/settings', 'core/store'];
+var DEPS = ['_', '$', 'core/resource', 'core/settings', 'core/store', 'view/content', 'view/sidebar'];
 
 describe('module \'' + ID + '\'', function () {
 
@@ -20,17 +20,16 @@ describe('module \'' + ID + '\'', function () {
             get: sinon.stub(),
             put: sinon.stub()
         };
-        this.xEvent = {
-            sub: sinon.stub()
-        };
+        this.xContent = {$view: null};
+        this.xSidebar = {$el: null};
+
         this.applyFn = function () {
 
             this.xResource.image.reset();
             this.xStore.get.reset();
             this.xStore.put.reset();
-            this.xEvent.sub.reset();
 
-            return this.definition.fn(_, $, this.xEvent, this.xResource, this.xSettings, this.xStore);
+            return this.definition.fn(_, $, this.xResource, this.xSettings, this.xStore, this.xContent, this.xSidebar);
         };
     });
 
@@ -42,7 +41,8 @@ describe('module \'' + ID + '\'', function () {
     beforeEach(function () {
 
         util.restoreHtml();
-        $('<div id="sidebar"/>').appendTo('body');
+        this.xContent.$view = $('<div id="view"/>').appendTo('body');
+        this.xSidebar.$el = $('<div id="sidebar"/>').appendTo('body');
     });
 
     describe('definition', function () {
@@ -86,31 +86,18 @@ describe('module \'' + ID + '\'', function () {
             assert.isUndefined(instance);
         });
 
-        it('adds HTML', function () {
+        it('adds HTML to #sidebar', function () {
 
             this.applyFn();
             assert.lengthOf($('#sidebar > .block > .l10n-view'), 1);
         });
 
-        it('adds Style', function () {
+        it('adds Style to head', function () {
 
             var styleTagCount = $('head > style').length;
             this.applyFn();
             assert.lengthOf($('head > style'), styleTagCount + 1);
         });
-
-        it('subscribes to 1 event', function () {
-
-            this.applyFn();
-            assert.isTrue(this.xEvent.sub.calledOnce);
-        });
-
-        it('subscribes to location.changed', function () {
-
-            this.applyFn();
-            assert.strictEqual(this.xEvent.sub.firstCall.args[0], 'location.changed');
-            assert.isFunction(this.xEvent.sub.firstCall.args[1]);
-        });
     });
 });