Refactor view.

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 () {

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');
+        });
+    });
 });
 
 }());

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');
+        });
+    });
+});
+
+}());

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');
+        });
+    });
+});
+
+}());

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');
+        });
+    });
 });
 
 }());

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');
+        });
+    });
 });
 
 }());

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]);
-        });
     });
 });