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:
parent
1da92fd5da
commit
bb85084c3d
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Reference in New Issue