wbrawner/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated tests according to new system

Browse source 
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2017-11-08 16:00:40 +01:00
parent 176ad7670f
commit 267b673ccb
No known key found for this signature in database
GPG key ID: FB5ACEED51955BF8
3 changed files with 113 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
apps/files/js/breadcrumb.js
View file

@ -234,6 +234,36 @@
return crumbs;
},
/**
* Show/hide breadcrumbs to fit the given width
* Mostly used by tests
*
* @param {int} availableWidth available width
*/
setMaxWidth: function (availableWidth) {
if (this.availableWidth !== availableWidth) {
this.availableWidth = availableWidth;
this._resize();
}
},
/**
* Calculate real width based on individual crumbs
* More accurate and works with tests
*
* @param {boolean} ignoreHidden ignore hidden crumbs
*/
getTotalWidth: function(ignoreHidden) {
var totalWidth = 0;
for (var i = 0; i < this.breadcrumbs.length; i++ ) {
var $crumb = $(this.breadcrumbs[i]);
if(!$crumb.hasClass('hidden') || ignoreHidden) {
totalWidth += $crumb.width();
}
}
return totalWidth;
},
/**
* Hide the middle crumb
*/
@ -290,10 +320,11 @@
},
_resize: function() {
var i, $crumb, $ellipsisCrumb;
// Used for testing since this.$el.parent fails
if (!this.availableWidth) {
this.availableWidth = this.$el.width();
this.usedWidth = this.$el.parent().width();
} else {
this.usedWidth = this.availableWidth;
}
if (this.breadcrumbs.length <= 1) {
@ -301,13 +332,13 @@
}
// If container is smaller than content
while (this.$el.width() > this.$el.parent().width()) {
while (this.getTotalWidth() > this.usedWidth) {
this._hideCrumb();
}
// If container is bigger than content + element to be shown
// AND if there is at least one hidden crumb
while (this.$el.find('.crumb.hidden').length > 0
&& this.$el.width() + this._getCrumbElement().width() < this.$el.parent().width()) {
&& this.getTotalWidth() + this._getCrumbElement().width() < this.usedWidth) {
this._showCrumb();
}

176
apps/files/tests/js/breadcrumbSpec.js
View file

@ -43,80 +43,93 @@ describe('OCA.Files.BreadCrumb tests', function() {
var $crumbs;
bc.render();
$crumbs = bc.$el.find('.crumb');
expect($crumbs.length).toEqual(1);
expect($crumbs.eq(0).find('a').attr('href')).toEqual('/#0');
expect($crumbs.eq(0).find('img').length).toEqual(1);
expect($crumbs.eq(0).attr('data-dir')).toEqual('/');
// menu and home
expect($crumbs.length).toEqual(2);
expect($crumbs.eq(0).find('a').hasClass('icon-more')).toEqual(true);
expect($crumbs.eq(0).find('div.popovermenu').length).toEqual(1);
expect($crumbs.eq(0).data('dir')).not.toBeDefined();
expect($crumbs.eq(1).find('a').attr('href')).toEqual('/#1');
expect($crumbs.eq(1).find('a').hasClass('icon-home')).toEqual(true);
expect($crumbs.eq(1).data('dir')).toEqual('/');
});
it('Renders root when switching to root', function() {
var $crumbs;
bc.setDirectory('/somedir');
bc.setDirectory('/');
$crumbs = bc.$el.find('.crumb');
expect($crumbs.length).toEqual(1);
expect($crumbs.eq(0).attr('data-dir')).toEqual('/');
});
it('Renders last crumb with "last" class', function() {
bc.setDirectory('/abc/def');
expect(bc.$el.find('.crumb:last').hasClass('last')).toEqual(true);
expect($crumbs.length).toEqual(2);
expect($crumbs.eq(1).data('dir')).toEqual('/');
});
it('Renders single path section', function() {
var $crumbs;
bc.setDirectory('/somedir');
$crumbs = bc.$el.find('.crumb');
expect($crumbs.length).toEqual(2);
expect($crumbs.eq(0).find('a').attr('href')).toEqual('/#0');
expect($crumbs.eq(0).find('img').length).toEqual(1);
expect($crumbs.eq(0).attr('data-dir')).toEqual('/');
expect($crumbs.eq(1).find('a').attr('href')).toEqual('/somedir#1');
expect($crumbs.eq(1).find('img').length).toEqual(0);
expect($crumbs.eq(1).attr('data-dir')).toEqual('/somedir');
expect($crumbs.length).toEqual(3);
expect($crumbs.eq(0).find('a').hasClass('icon-more')).toEqual(true);
expect($crumbs.eq(0).find('div.popovermenu').length).toEqual(1);
expect($crumbs.eq(0).data('dir')).not.toBeDefined();
expect($crumbs.eq(1).find('a').attr('href')).toEqual('/#1');
expect($crumbs.eq(1).find('a').hasClass('icon-home')).toEqual(true);
expect($crumbs.eq(1).data('dir')).toEqual('/');
expect($crumbs.eq(2).find('a').attr('href')).toEqual('/somedir#2');
expect($crumbs.eq(2).find('img').length).toEqual(0);
expect($crumbs.eq(2).data('dir')).toEqual('/somedir');
});
it('Renders multiple path sections and special chars', function() {
var $crumbs;
bc.setDirectory('/somedir/with space/abc');
$crumbs = bc.$el.find('.crumb');
expect($crumbs.length).toEqual(4);
expect($crumbs.eq(0).find('a').attr('href')).toEqual('/#0');
expect($crumbs.eq(0).find('img').length).toEqual(1);
expect($crumbs.eq(0).attr('data-dir')).toEqual('/');
expect($crumbs.length).toEqual(5);
expect($crumbs.eq(0).find('a').hasClass('icon-more')).toEqual(true);
expect($crumbs.eq(0).find('div.popovermenu').length).toEqual(1);
expect($crumbs.eq(0).data('dir')).not.toBeDefined();
expect($crumbs.eq(1).find('a').attr('href')).toEqual('/somedir#1');
expect($crumbs.eq(1).find('img').length).toEqual(0);
expect($crumbs.eq(1).attr('data-dir')).toEqual('/somedir');
expect($crumbs.eq(1).find('a').attr('href')).toEqual('/#1');
expect($crumbs.eq(1).find('a').hasClass('icon-home')).toEqual(true);
expect($crumbs.eq(1).data('dir')).toEqual('/');
expect($crumbs.eq(2).find('a').attr('href')).toEqual('/somedir/with space#2');
expect($crumbs.eq(2).find('a').attr('href')).toEqual('/somedir#2');
expect($crumbs.eq(2).find('img').length).toEqual(0);
expect($crumbs.eq(2).attr('data-dir')).toEqual('/somedir/with space');
expect($crumbs.eq(2).data('dir')).toEqual('/somedir');
expect($crumbs.eq(3).find('a').attr('href')).toEqual('/somedir/with space/abc#3');
expect($crumbs.eq(3).find('a').attr('href')).toEqual('/somedir/with space#3');
expect($crumbs.eq(3).find('img').length).toEqual(0);
expect($crumbs.eq(3).attr('data-dir')).toEqual('/somedir/with space/abc');
expect($crumbs.eq(3).data('dir')).toEqual('/somedir/with space');
expect($crumbs.eq(4).find('a').attr('href')).toEqual('/somedir/with space/abc#4');
expect($crumbs.eq(4).find('img').length).toEqual(0);
expect($crumbs.eq(4).data('dir')).toEqual('/somedir/with space/abc');
});
it('Renders backslashes as regular directory separator', function() {
var $crumbs;
bc.setDirectory('/somedir\\with/mixed\\separators');
$crumbs = bc.$el.find('.crumb');
expect($crumbs.length).toEqual(5);
expect($crumbs.eq(0).find('a').attr('href')).toEqual('/#0');
expect($crumbs.eq(0).find('img').length).toEqual(1);
expect($crumbs.eq(0).attr('data-dir')).toEqual('/');
expect($crumbs.length).toEqual(6);
expect($crumbs.eq(0).find('a').hasClass('icon-more')).toEqual(true);
expect($crumbs.eq(0).find('div.popovermenu').length).toEqual(1);
expect($crumbs.eq(0).data('dir')).not.toBeDefined();
expect($crumbs.eq(1).find('a').attr('href')).toEqual('/somedir#1');
expect($crumbs.eq(1).find('img').length).toEqual(0);
expect($crumbs.eq(1).attr('data-dir')).toEqual('/somedir');
expect($crumbs.eq(1).find('a').attr('href')).toEqual('/#1');
expect($crumbs.eq(1).find('a').hasClass('icon-home')).toEqual(true);
expect($crumbs.eq(1).data('dir')).toEqual('/');
expect($crumbs.eq(2).find('a').attr('href')).toEqual('/somedir/with#2');
expect($crumbs.eq(2).find('a').attr('href')).toEqual('/somedir#2');
expect($crumbs.eq(2).find('img').length).toEqual(0);
expect($crumbs.eq(2).attr('data-dir')).toEqual('/somedir/with');
expect($crumbs.eq(2).data('dir')).toEqual('/somedir');
expect($crumbs.eq(3).find('a').attr('href')).toEqual('/somedir/with/mixed#3');
expect($crumbs.eq(3).find('a').attr('href')).toEqual('/somedir/with#3');
expect($crumbs.eq(3).find('img').length).toEqual(0);
expect($crumbs.eq(3).attr('data-dir')).toEqual('/somedir/with/mixed');
expect($crumbs.eq(3).data('dir')).toEqual('/somedir/with');
expect($crumbs.eq(4).find('a').attr('href')).toEqual('/somedir/with/mixed/separators#4');
expect($crumbs.eq(4).find('a').attr('href')).toEqual('/somedir/with/mixed#4');
expect($crumbs.eq(4).find('img').length).toEqual(0);
expect($crumbs.eq(4).attr('data-dir')).toEqual('/somedir/with/mixed/separators');
expect($crumbs.eq(4).data('dir')).toEqual('/somedir/with/mixed');
expect($crumbs.eq(5).find('a').attr('href')).toEqual('/somedir/with/mixed/separators#5');
expect($crumbs.eq(5).find('img').length).toEqual(0);
expect($crumbs.eq(5).data('dir')).toEqual('/somedir/with/mixed/separators');
});
});
describe('Events', function() {
@ -126,14 +139,15 @@ describe('OCA.Files.BreadCrumb tests', function() {
onClick: handler
});
bc.setDirectory('/one/two/three/four');
bc.$el.find('.crumb:eq(3)').click();
expect(handler.calledOnce).toEqual(true);
expect(handler.getCall(0).thisValue).toEqual(bc.$el.find('.crumb').get(3));
// Click on crumb does not work, only link
bc.$el.find('.crumb:eq(4)').click();
expect(handler.calledOnce).toEqual(false);
handler.reset();
bc.$el.find('.crumb:eq(0) a').click();
// Click on crumb link works
bc.$el.find('.crumb:eq(1) a').click();
expect(handler.calledOnce).toEqual(true);
expect(handler.getCall(0).thisValue).toEqual(bc.$el.find('.crumb').get(0));
expect(handler.getCall(0).thisValue).toEqual(bc.$el.find('.crumb > a').get(1));
});
it('Calls onDrop handler when dropping on a crumb', function() {
var droppableStub = sinon.stub($.fn, 'droppable');
@ -163,17 +177,12 @@ describe('OCA.Files.BreadCrumb tests', function() {
// using hard-coded widths (pre-measured) to avoid getting different
// results on different browsers due to font engine differences
widths = [41, 106, 112, 160, 257, 251, 91];
// 51px is default size for menu and home
widths = [51, 51, 106, 112, 160, 257, 251, 91];
oldUpdateTotalWidth = BreadCrumb.prototype._updateTotalWidth;
BreadCrumb.prototype._updateTotalWidth = function() {
// pre-set a width to simulate consistent measurement
$('div.crumb').each(function(index){
$(this).css('width', widths[index]);
});
return oldUpdateTotalWidth.apply(this, arguments);
};
$('div.crumb').each(function(index){
$(this).css('width', widths[index]);
});
bc = new BreadCrumb();
// append dummy navigation and controls
@ -184,30 +193,26 @@ describe('OCA.Files.BreadCrumb tests', function() {
$('#controls').append(bc.$el);
});
afterEach(function() {
BreadCrumb.prototype._updateTotalWidth = oldUpdateTotalWidth;
bc = null;
});
it('Hides breadcrumbs to fit max allowed width', function() {
var $crumbs;
bc.setMaxWidth(500);
// triggers resize implicitly
bc.setDirectory(dummyDir);
$crumbs = bc.$el.find('.crumb');
// first one is always visible
// Menu and home are always visible
expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
// second one has ellipsis
expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(1).find('.ellipsis').length).toEqual(1);
// there is only one ellipsis in total
expect($crumbs.find('.ellipsis').length).toEqual(1);
// subsequent elements are hidden
expect($crumbs.eq(2).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(3).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(6).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
});
it('Updates the breadcrumbs when reducing max allowed width', function() {
@ -215,56 +220,27 @@ describe('OCA.Files.BreadCrumb tests', function() {
// enough space
bc.setMaxWidth(1800);
$crumbs = bc.$el.find('.crumb');
expect(bc.$el.find('.ellipsis').length).toEqual(0);
// Menu is hidden
expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
// triggers resize implicitly
bc.setDirectory(dummyDir);
// simulate increase
// simulate decrease
bc.setMaxWidth(950);
$crumbs = bc.$el.find('.crumb');
// first one is always visible
expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
// second one has ellipsis
expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(1).find('.ellipsis').length).toEqual(1);
// there is only one ellipsis in total
expect($crumbs.find('.ellipsis').length).toEqual(1);
// subsequent elements are hidden
expect($crumbs.eq(2).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(3).hasClass('hidden')).toEqual(true);
// the rest is visible
expect($crumbs.eq(4).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(5).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
});
it('Removes the ellipsis when there is enough space', function() {
var $crumbs;
bc.setMaxWidth(500);
// triggers resize implicitly
bc.setDirectory(dummyDir);
$crumbs = bc.$el.find('.crumb');
// ellipsis
expect(bc.$el.find('.ellipsis').length).toEqual(1);
// simulate increase
bc.setMaxWidth(1800);
// no ellipsis
expect(bc.$el.find('.ellipsis').length).toEqual(0);
// all are visible
// Menu and home are always visible
expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(4).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(5).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
});
});
});

1
core/css/styles.scss
View file

@ -1433,6 +1433,7 @@ div.crumb {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
flex: 0 0 auto;
&.icon-home {
// Hide home text
text-indent: -9999px;