Refactor view.
This commit is contained in:
parent
0be36ea9e8
commit
d5221c0d17
16 changed files with 421 additions and 161 deletions
|
@ -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) {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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();
|
||||
});
|
|
@ -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
|
||||
};
|
||||
});
|
||||
|
|
9
src/_h5ai/client/js/inc/view/mainrow.js
Normal file
9
src/_h5ai/client/js/inc/view/mainrow.js
Normal file
|
@ -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
|
||||
};
|
||||
});
|
10
src/_h5ai/client/js/inc/view/root.js
Normal file
10
src/_h5ai/client/js/inc/view/root.js
Normal file
|
@ -0,0 +1,10 @@
|
|||
modulejs.define('view/root', ['$'], function ($) {
|
||||
|
||||
var $el = $('body').attr('id', 'root');
|
||||
|
||||
$('#fallback, #fallback-hints').remove();
|
||||
|
||||
return {
|
||||
$el: $el
|
||||
};
|
||||
});
|
|
@ -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
|
||||
};
|
||||
});
|
||||
|
|
19
src/_h5ai/client/js/inc/view/topbar.js
Normal file
19
src/_h5ai/client/js/inc/view/topbar.js
Normal file
|
@ -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')
|
||||
};
|
||||
});
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -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 () {
|
||||
|
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
}());
|
||||
|
|
93
test/tests/unit/view/mainrow.js
Normal file
93
test/tests/unit/view/mainrow.js
Normal file
|
@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
}());
|
107
test/tests/unit/view/root.js
Normal file
107
test/tests/unit/view/root.js
Normal file
|
@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
}());
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
}());
|
||||
|
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
}());
|
|
@ -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]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue