mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Take padding and margin of the creatable actions div into account 

There are some differences in width handling between the browsers used
to run the tests, most likely due to their support (or lack of) of
certain CSS features: PhantomJS requires "width" to be set (probably
because it does not handle flex displays and treats it like a block, so
"min-width" does not matter in this case), while Firefox requires
"min-width" to be set (otherwise the children of "#controls" could be
compressed due to its use of flex display and the elements would end
with a different width than the one needed for the tests). Due to all
that the width of the breadcrumb siblings must be specified in the tests
using both "width" and "min-width".

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
This commit is contained in:
Daniel Calviño Sánchez 2018-02-19 23:47:19 +01:00
parent 3850221ae1
commit e37c4fd7f3
2 changed files with 83 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/files/js/breadcrumb.js
View File

@ -316,7 +316,7 @@
return;
}
var availableWidth = this.$el.parent().width() - this.$el.parent().find('.actions.creatable').width();
var availableWidth = this.$el.parent().width() - this.$el.parent().find('.actions.creatable').outerWidth(true);
// If container is smaller than content
// AND if there are crumbs left to hide

82
apps/files/tests/js/breadcrumbSpec.js
View File

@ -303,6 +303,88 @@ describe('OCA.Files.BreadCrumb tests', function() {
expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
});
it('Hides breadcrumbs to fit available width left by siblings', function() {
var $crumbs;
$('#controls').width(700);
bc._resize();
$crumbs = bc.$el.find('.crumb');
// Third and fourth crumb are hidden and everything else is 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(true);
expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
var $creatableActions = $('<div class="actions creatable"></div>');
// Set both the width and the min-width to even differences in width
// handling in the browsers used to run the tests.
$creatableActions.css('width', '200px');
$creatableActions.css('min-width', '200px');
$('#controls').append($creatableActions);
bc._resize();
// Second, third, fourth and fifth crumb are hidden and everything
// else is 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(true);
expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(6).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
});
it('Hides breadcrumbs to fit available width left by siblings with paddings and margins', function() {
var $crumbs;
$('#controls').width(700);
bc._resize();
$crumbs = bc.$el.find('.crumb');
// Third and fourth crumb are hidden and everything else is 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(true);
expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
var $creatableActions = $('<div class="actions creatable"></div>');
// Set both the width and the min-width to even differences in width
// handling in the browsers used to run the tests.
$creatableActions.css('width', '20px');
$creatableActions.css('min-width', '20px');
$creatableActions.css('margin-left', '90px');
$creatableActions.css('padding-right', '90px');
$('#controls').append($creatableActions);
bc._resize();
// Second, third, fourth and fifth crumb are hidden and everything
// else is 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(true);
expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(6).hasClass('hidden')).toEqual(true);
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
});
it('Updates the breadcrumbs when reducing available width', function() {
var $crumbs;