From e37c4fd7f308be6f4dbece2c6cd2e8ff2d211c09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Mon, 19 Feb 2018 23:47:19 +0100 Subject: [PATCH] Take padding and margin of the creatable actions div into account MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- apps/files/js/breadcrumb.js | 2 +- apps/files/tests/js/breadcrumbSpec.js | 82 +++++++++++++++++++++++++++ 2 files changed, 83 insertions(+), 1 deletion(-) diff --git a/apps/files/js/breadcrumb.js b/apps/files/js/breadcrumb.js index c02ed488da0..16762f386be 100644 --- a/apps/files/js/breadcrumb.js +++ b/apps/files/js/breadcrumb.js @@ -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 diff --git a/apps/files/tests/js/breadcrumbSpec.js b/apps/files/tests/js/breadcrumbSpec.js index 9898c556cfd..dcb9391f6ed 100644 --- a/apps/files/tests/js/breadcrumbSpec.js +++ b/apps/files/tests/js/breadcrumbSpec.js @@ -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 = $('
'); + // 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 = $('
'); + // 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;