2013-10-28 23:22:06 +04:00
|
|
|
/**
|
|
|
|
* ownCloud
|
|
|
|
*
|
|
|
|
* @author Vincent Petry
|
|
|
|
* @copyright 2014 Vincent Petry <pvince81@owncloud.com>
|
|
|
|
*
|
|
|
|
* This library is free software; you can redistribute it and/or
|
|
|
|
* modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
|
|
|
|
* License as published by the Free Software Foundation; either
|
|
|
|
* version 3 of the License, or any later version.
|
|
|
|
*
|
|
|
|
* This library is distributed in the hope that it will be useful,
|
|
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
|
|
* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
|
|
|
|
*
|
|
|
|
* You should have received a copy of the GNU Affero General Public
|
|
|
|
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
2014-05-09 00:06:30 +04:00
|
|
|
describe('OCA.Files.BreadCrumb tests', function() {
|
|
|
|
var BreadCrumb = OCA.Files.BreadCrumb;
|
|
|
|
|
2013-10-28 23:22:06 +04:00
|
|
|
describe('Rendering', function() {
|
|
|
|
var bc;
|
|
|
|
beforeEach(function() {
|
|
|
|
bc = new BreadCrumb({
|
|
|
|
getCrumbUrl: function(part, index) {
|
|
|
|
// for testing purposes
|
|
|
|
return part.dir + '#' + index;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
afterEach(function() {
|
|
|
|
bc = null;
|
|
|
|
});
|
|
|
|
it('Renders its own container', function() {
|
|
|
|
bc.render();
|
|
|
|
expect(bc.$el.hasClass('breadcrumb')).toEqual(true);
|
|
|
|
});
|
|
|
|
it('Renders root by default', function() {
|
|
|
|
var $crumbs;
|
|
|
|
bc.render();
|
|
|
|
$crumbs = bc.$el.find('.crumb');
|
2017-11-08 18:00:40 +03:00
|
|
|
// 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('/');
|
2013-10-28 23:22:06 +04:00
|
|
|
});
|
|
|
|
it('Renders root when switching to root', function() {
|
|
|
|
var $crumbs;
|
|
|
|
bc.setDirectory('/somedir');
|
|
|
|
bc.setDirectory('/');
|
|
|
|
$crumbs = bc.$el.find('.crumb');
|
2017-11-08 18:00:40 +03:00
|
|
|
expect($crumbs.length).toEqual(2);
|
|
|
|
expect($crumbs.eq(1).data('dir')).toEqual('/');
|
2013-10-28 23:22:06 +04:00
|
|
|
});
|
|
|
|
it('Renders single path section', function() {
|
|
|
|
var $crumbs;
|
|
|
|
bc.setDirectory('/somedir');
|
|
|
|
$crumbs = bc.$el.find('.crumb');
|
2017-11-08 18:00:40 +03:00
|
|
|
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');
|
2013-10-28 23:22:06 +04:00
|
|
|
});
|
|
|
|
it('Renders multiple path sections and special chars', function() {
|
|
|
|
var $crumbs;
|
|
|
|
bc.setDirectory('/somedir/with space/abc');
|
|
|
|
$crumbs = bc.$el.find('.crumb');
|
2017-11-08 18:00:40 +03:00
|
|
|
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();
|
2013-10-28 23:22:06 +04:00
|
|
|
|
2017-11-08 18:00:40 +03:00
|
|
|
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('/');
|
2013-10-28 23:22:06 +04:00
|
|
|
|
2017-11-08 18:00:40 +03:00
|
|
|
expect($crumbs.eq(2).find('a').attr('href')).toEqual('/somedir#2');
|
2013-10-28 23:22:06 +04:00
|
|
|
expect($crumbs.eq(2).find('img').length).toEqual(0);
|
2017-11-08 18:00:40 +03:00
|
|
|
expect($crumbs.eq(2).data('dir')).toEqual('/somedir');
|
2013-10-28 23:22:06 +04:00
|
|
|
|
2017-11-08 18:00:40 +03:00
|
|
|
expect($crumbs.eq(3).find('a').attr('href')).toEqual('/somedir/with space#3');
|
2013-10-28 23:22:06 +04:00
|
|
|
expect($crumbs.eq(3).find('img').length).toEqual(0);
|
2017-11-08 18:00:40 +03:00
|
|
|
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');
|
2013-10-28 23:22:06 +04:00
|
|
|
});
|
2015-01-24 11:56:00 +03:00
|
|
|
it('Renders backslashes as regular directory separator', function() {
|
|
|
|
var $crumbs;
|
|
|
|
bc.setDirectory('/somedir\\with/mixed\\separators');
|
|
|
|
$crumbs = bc.$el.find('.crumb');
|
2017-11-08 18:00:40 +03:00
|
|
|
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();
|
2015-01-24 11:56:00 +03:00
|
|
|
|
2017-11-08 18:00:40 +03:00
|
|
|
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('/');
|
2015-01-24 11:56:00 +03:00
|
|
|
|
2017-11-08 18:00:40 +03:00
|
|
|
expect($crumbs.eq(2).find('a').attr('href')).toEqual('/somedir#2');
|
2015-01-24 11:56:00 +03:00
|
|
|
expect($crumbs.eq(2).find('img').length).toEqual(0);
|
2017-11-08 18:00:40 +03:00
|
|
|
expect($crumbs.eq(2).data('dir')).toEqual('/somedir');
|
2015-01-24 11:56:00 +03:00
|
|
|
|
2017-11-08 18:00:40 +03:00
|
|
|
expect($crumbs.eq(3).find('a').attr('href')).toEqual('/somedir/with#3');
|
2015-01-24 11:56:00 +03:00
|
|
|
expect($crumbs.eq(3).find('img').length).toEqual(0);
|
2017-11-08 18:00:40 +03:00
|
|
|
expect($crumbs.eq(3).data('dir')).toEqual('/somedir/with');
|
2015-01-24 11:56:00 +03:00
|
|
|
|
2017-11-08 18:00:40 +03:00
|
|
|
expect($crumbs.eq(4).find('a').attr('href')).toEqual('/somedir/with/mixed#4');
|
2015-01-24 11:56:00 +03:00
|
|
|
expect($crumbs.eq(4).find('img').length).toEqual(0);
|
2017-11-08 18:00:40 +03:00
|
|
|
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');
|
2015-01-24 11:56:00 +03:00
|
|
|
});
|
2013-10-28 23:22:06 +04:00
|
|
|
});
|
|
|
|
describe('Events', function() {
|
|
|
|
it('Calls onClick handler when clicking on a crumb', function() {
|
|
|
|
var handler = sinon.stub();
|
|
|
|
var bc = new BreadCrumb({
|
|
|
|
onClick: handler
|
|
|
|
});
|
|
|
|
bc.setDirectory('/one/two/three/four');
|
2017-11-08 18:00:40 +03:00
|
|
|
// Click on crumb does not work, only link
|
|
|
|
bc.$el.find('.crumb:eq(4)').click();
|
|
|
|
expect(handler.calledOnce).toEqual(false);
|
2013-10-28 23:22:06 +04:00
|
|
|
|
|
|
|
handler.reset();
|
2017-11-08 18:00:40 +03:00
|
|
|
// Click on crumb link works
|
|
|
|
bc.$el.find('.crumb:eq(1) a').click();
|
2013-10-28 23:22:06 +04:00
|
|
|
expect(handler.calledOnce).toEqual(true);
|
2017-11-08 18:00:40 +03:00
|
|
|
expect(handler.getCall(0).thisValue).toEqual(bc.$el.find('.crumb > a').get(1));
|
2013-10-28 23:22:06 +04:00
|
|
|
});
|
|
|
|
it('Calls onDrop handler when dropping on a crumb', function() {
|
|
|
|
var droppableStub = sinon.stub($.fn, 'droppable');
|
|
|
|
var handler = sinon.stub();
|
|
|
|
var bc = new BreadCrumb({
|
|
|
|
onDrop: handler
|
|
|
|
});
|
|
|
|
bc.setDirectory('/one/two/three/four');
|
2017-11-08 22:12:38 +03:00
|
|
|
expect(droppableStub.calledOnce).toEqual(true);
|
2013-10-28 23:22:06 +04:00
|
|
|
|
|
|
|
expect(droppableStub.getCall(0).args[0].drop).toBeDefined();
|
|
|
|
// simulate drop
|
|
|
|
droppableStub.getCall(0).args[0].drop({dummy: true});
|
|
|
|
|
|
|
|
expect(handler.calledOnce).toEqual(true);
|
|
|
|
expect(handler.getCall(0).args[0]).toEqual({dummy: true});
|
|
|
|
|
|
|
|
droppableStub.restore();
|
|
|
|
});
|
|
|
|
});
|
2017-11-11 19:27:56 +03:00
|
|
|
|
|
|
|
describe('Menu tests', function() {
|
|
|
|
var bc, dummyDir, $crumbmenuLink, $popovermenu;
|
|
|
|
|
|
|
|
beforeEach(function() {
|
|
|
|
dummyDir = '/one/two/three/four/five'
|
|
|
|
|
|
|
|
bc = new BreadCrumb();
|
|
|
|
// append dummy navigation and controls
|
|
|
|
// as they are currently used for measurements
|
|
|
|
$('#testArea').append(
|
|
|
|
'<div id="controls"></div>'
|
|
|
|
);
|
|
|
|
$('#controls').append(bc.$el);
|
|
|
|
|
Fix setup to test the breadcrumbs menu
The "Shows only items not in the breadcrumb" test was failing when run
on Firefox, but not on PhantomJS. This was caused by the differences in
the starting width between both browsers and an incorrect setup of the
test (the width set for the crumbs was overriden when the breadcrumbs
were rendered again, and the breadcrumb was resized to 300 from an
indeterminate initial width).
Now the crumbs are rendered and then its width, padding and margin are
set to a known value. Then it is resized to 1000px, which ensures that
there will be enough room for all the crumbs and thus the menu will be
hidden, and finally it is resized to 300, which causes the middle crumb
to be hidden and the menu to be shown.
Note, however, that the test now always fails, no matter if it is run on
PhantomJS or on Firefox; if the menu crumb is hidden when "_updateMenu"
is called it will show it, but it will also wrongly try to add the menu
itself to the menu. As the "crumb-id" of the menu crumb is "-1" this
causes the last regular crumb to be added to the menu. This will be
fixed with other related issues in the next commit.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
2018-02-28 15:53:00 +03:00
|
|
|
bc.setDirectory(dummyDir);
|
|
|
|
|
|
|
|
$('div.crumb').each(function(index){
|
|
|
|
$(this).css('width', 50);
|
|
|
|
$(this).css('padding', 0);
|
|
|
|
$(this).css('margin', 0);
|
|
|
|
});
|
|
|
|
$('div.crumbhome').css('width', 51);
|
|
|
|
$('div.crumbmenu').css('width', 51);
|
|
|
|
|
|
|
|
$('#controls').width(1000);
|
|
|
|
bc._resize();
|
|
|
|
|
2017-11-11 19:27:56 +03:00
|
|
|
// Shrink to show popovermenu
|
2018-02-19 22:42:29 +03:00
|
|
|
$('#controls').width(300);
|
Fix setup to test the breadcrumbs menu
The "Shows only items not in the breadcrumb" test was failing when run
on Firefox, but not on PhantomJS. This was caused by the differences in
the starting width between both browsers and an incorrect setup of the
test (the width set for the crumbs was overriden when the breadcrumbs
were rendered again, and the breadcrumb was resized to 300 from an
indeterminate initial width).
Now the crumbs are rendered and then its width, padding and margin are
set to a known value. Then it is resized to 1000px, which ensures that
there will be enough room for all the crumbs and thus the menu will be
hidden, and finally it is resized to 300, which causes the middle crumb
to be hidden and the menu to be shown.
Note, however, that the test now always fails, no matter if it is run on
PhantomJS or on Firefox; if the menu crumb is hidden when "_updateMenu"
is called it will show it, but it will also wrongly try to add the menu
itself to the menu. As the "crumb-id" of the menu crumb is "-1" this
causes the last regular crumb to be added to the menu. This will be
fixed with other related issues in the next commit.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
2018-02-28 15:53:00 +03:00
|
|
|
bc._resize();
|
2017-11-11 19:27:56 +03:00
|
|
|
|
|
|
|
$crumbmenuLink = bc.$el.find('.crumbmenu > a');
|
|
|
|
$popovermenu = $crumbmenuLink.next('.popovermenu');
|
|
|
|
});
|
|
|
|
afterEach(function() {
|
|
|
|
bc = null;
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Opens and closes the menu on click', function() {
|
|
|
|
// Menu exists
|
|
|
|
expect($popovermenu.length).toEqual(1);
|
|
|
|
|
|
|
|
// Disable jQuery delay
|
|
|
|
jQuery.fx.off = true
|
|
|
|
|
|
|
|
// Click on menu
|
|
|
|
$crumbmenuLink.click();
|
|
|
|
expect($popovermenu.is(':visible')).toEqual(true);
|
|
|
|
|
|
|
|
// Click on home
|
|
|
|
$(document).mouseup();
|
|
|
|
expect($popovermenu.is(':visible')).toEqual(false);
|
|
|
|
|
2017-11-12 07:37:01 +03:00
|
|
|
// Change directory and reset elements
|
|
|
|
bc.setDirectory('/one/two/three/four/five/six/seven/eight/nine/ten');
|
|
|
|
$crumbmenuLink = bc.$el.find('.crumbmenu > a');
|
|
|
|
$popovermenu = $crumbmenuLink.next('.popovermenu');
|
|
|
|
|
|
|
|
// Click on menu again
|
|
|
|
$crumbmenuLink.click();
|
|
|
|
expect($popovermenu.is(':visible')).toEqual(true);
|
|
|
|
|
|
|
|
// Click on home again
|
|
|
|
$(document).mouseup();
|
|
|
|
expect($popovermenu.is(':visible')).toEqual(false);
|
|
|
|
|
2017-11-11 19:27:56 +03:00
|
|
|
});
|
|
|
|
it('Shows only items not in the breadcrumb', function() {
|
|
|
|
var hiddenCrumbs = bc.$el.find('.crumb:not(.crumbmenu).hidden');
|
|
|
|
expect($popovermenu.find('li:not(.in-breadcrumb)').length).toEqual(hiddenCrumbs.length);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2013-10-28 23:22:06 +04:00
|
|
|
describe('Resizing', function() {
|
2018-02-27 15:30:07 +03:00
|
|
|
var bc, dummyDir, widths, paddings, margins;
|
2013-10-28 23:22:06 +04:00
|
|
|
|
2018-02-20 19:07:26 +03:00
|
|
|
// cit() will skip tests if running on PhantomJS because it does not
|
|
|
|
// have proper support for flexboxes.
|
|
|
|
var cit = window.isPhantom?xit:it;
|
|
|
|
|
2013-10-28 23:22:06 +04:00
|
|
|
beforeEach(function() {
|
2014-05-23 21:02:50 +04:00
|
|
|
dummyDir = '/short name/longer name/looooooooooooonger/' +
|
|
|
|
'even longer long long long longer long/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/last one';
|
|
|
|
|
2017-12-21 18:22:54 +03:00
|
|
|
bc = new BreadCrumb();
|
|
|
|
// append dummy navigation and controls
|
|
|
|
// as they are currently used for measurements
|
|
|
|
$('#testArea').append(
|
|
|
|
'<div id="controls"></div>'
|
|
|
|
);
|
|
|
|
$('#controls').append(bc.$el);
|
|
|
|
|
|
|
|
// triggers resize implicitly
|
|
|
|
bc.setDirectory(dummyDir);
|
|
|
|
|
2014-05-23 21:02:50 +04:00
|
|
|
// using hard-coded widths (pre-measured) to avoid getting different
|
|
|
|
// results on different browsers due to font engine differences
|
2017-11-08 18:00:40 +03:00
|
|
|
// 51px is default size for menu and home
|
|
|
|
widths = [51, 51, 106, 112, 160, 257, 251, 91];
|
2018-02-27 15:30:07 +03:00
|
|
|
// using hard-coded paddings and margins to avoid depending on the
|
|
|
|
// current CSS values used in the server
|
|
|
|
paddings = [0, 0, 0, 0, 0, 0, 0, 0];
|
|
|
|
margins = [0, 0, 0, 0, 0, 0, 0, 0];
|
2013-10-28 23:22:06 +04:00
|
|
|
|
2017-11-08 18:00:40 +03:00
|
|
|
$('div.crumb').each(function(index){
|
|
|
|
$(this).css('width', widths[index]);
|
2018-02-27 15:30:07 +03:00
|
|
|
$(this).css('padding', paddings[index]);
|
|
|
|
$(this).css('margin', margins[index]);
|
2017-11-08 18:00:40 +03:00
|
|
|
});
|
2013-10-28 23:22:06 +04:00
|
|
|
});
|
|
|
|
afterEach(function() {
|
|
|
|
bc = null;
|
|
|
|
});
|
2018-02-19 22:42:29 +03:00
|
|
|
it('Hides breadcrumbs to fit available width', function() {
|
2013-10-28 23:22:06 +04:00
|
|
|
var $crumbs;
|
|
|
|
|
2018-02-19 22:42:29 +03:00
|
|
|
$('#controls').width(500);
|
|
|
|
bc._resize();
|
2017-11-08 18:00:40 +03:00
|
|
|
|
2013-10-28 23:22:06 +04:00
|
|
|
$crumbs = bc.$el.find('.crumb');
|
|
|
|
|
2017-11-08 18:00:40 +03:00
|
|
|
// Menu and home are always visible
|
2013-10-28 23:22:06 +04:00
|
|
|
expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
|
|
|
|
expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
|
2017-11-08 18:00:40 +03:00
|
|
|
|
2017-11-08 20:11:33 +03:00
|
|
|
expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
|
2013-10-28 23:22:06 +04:00
|
|
|
expect($crumbs.eq(3).hasClass('hidden')).toEqual(true);
|
|
|
|
expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
|
|
|
|
expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
|
2017-11-08 18:00:40 +03:00
|
|
|
expect($crumbs.eq(6).hasClass('hidden')).toEqual(true);
|
2014-05-23 21:02:50 +04:00
|
|
|
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
|
2013-10-28 23:22:06 +04:00
|
|
|
});
|
2018-02-19 22:42:29 +03:00
|
|
|
it('Hides breadcrumbs to fit available width', function() {
|
2017-12-21 18:22:54 +03:00
|
|
|
var $crumbs;
|
|
|
|
|
2018-02-19 22:42:29 +03:00
|
|
|
$('#controls').width(700);
|
|
|
|
bc._resize();
|
2017-12-21 18:22:54 +03:00
|
|
|
|
|
|
|
$crumbs = bc.$el.find('.crumb');
|
|
|
|
|
|
|
|
// 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(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);
|
|
|
|
});
|
2018-02-27 15:59:09 +03:00
|
|
|
it('Hides breadcrumbs to fit available width taking paddings into account', function() {
|
|
|
|
var $crumbs;
|
|
|
|
|
|
|
|
// Each element is 20px wider
|
|
|
|
paddings = [10, 10, 10, 10, 10, 10, 10, 10];
|
|
|
|
|
|
|
|
$('div.crumb').each(function(index){
|
|
|
|
$(this).css('padding', paddings[index]);
|
|
|
|
});
|
|
|
|
|
|
|
|
$('#controls').width(700);
|
|
|
|
bc._resize();
|
|
|
|
|
|
|
|
$crumbs = bc.$el.find('.crumb');
|
|
|
|
|
|
|
|
// Second, 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(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(7).hasClass('hidden')).toEqual(false);
|
|
|
|
});
|
|
|
|
it('Hides breadcrumbs to fit available width taking margins into account', function() {
|
|
|
|
var $crumbs;
|
|
|
|
|
|
|
|
// Each element is 20px wider
|
|
|
|
margins = [10, 10, 10, 10, 10, 10, 10, 10];
|
|
|
|
|
|
|
|
$('div.crumb').each(function(index){
|
|
|
|
$(this).css('margin', margins[index]);
|
|
|
|
});
|
|
|
|
|
|
|
|
$('#controls').width(700);
|
|
|
|
bc._resize();
|
|
|
|
|
|
|
|
$crumbs = bc.$el.find('.crumb');
|
|
|
|
|
|
|
|
// Second, 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(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(7).hasClass('hidden')).toEqual(false);
|
|
|
|
});
|
2018-02-20 01:47:19 +03:00
|
|
|
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);
|
|
|
|
|
2018-02-20 02:11:40 +03:00
|
|
|
// Visible sibling widths add up to 200px
|
|
|
|
var $previousSibling = $('<div class="otherSibling"></div>');
|
|
|
|
// Set both the width and the min-width to even differences in width
|
|
|
|
// handling in the browsers used to run the tests.
|
|
|
|
$previousSibling.css('width', '50px');
|
|
|
|
$previousSibling.css('min-width', '50px');
|
|
|
|
$('#controls').prepend($previousSibling);
|
|
|
|
|
2018-02-20 01:47:19 +03:00
|
|
|
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.
|
2018-02-20 02:11:40 +03:00
|
|
|
$creatableActions.css('width', '100px');
|
|
|
|
$creatableActions.css('min-width', '100px');
|
2018-02-20 01:47:19 +03:00
|
|
|
$('#controls').append($creatableActions);
|
|
|
|
|
2018-02-20 02:11:40 +03:00
|
|
|
var $nextHiddenSibling = $('<div class="otherSibling hidden"></div>');
|
|
|
|
// Set both the width and the min-width to even differences in width
|
|
|
|
// handling in the browsers used to run the tests.
|
|
|
|
$nextHiddenSibling.css('width', '200px');
|
|
|
|
$nextHiddenSibling.css('min-width', '200px');
|
|
|
|
$('#controls').append($nextHiddenSibling);
|
|
|
|
|
|
|
|
var $nextSibling = $('<div class="otherSibling"></div>');
|
|
|
|
// Set both the width and the min-width to even differences in width
|
|
|
|
// handling in the browsers used to run the tests.
|
|
|
|
$nextSibling.css('width', '50px');
|
|
|
|
$nextSibling.css('min-width', '50px');
|
|
|
|
$('#controls').append($nextSibling);
|
|
|
|
|
2018-02-20 01:47:19 +03:00
|
|
|
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);
|
|
|
|
|
2018-02-20 02:11:40 +03:00
|
|
|
// Visible sibling widths add up to 200px
|
|
|
|
var $previousSibling = $('<div class="otherSibling"></div>');
|
|
|
|
// Set both the width and the min-width to even differences in width
|
|
|
|
// handling in the browsers used to run the tests.
|
|
|
|
$previousSibling.css('width', '10px');
|
|
|
|
$previousSibling.css('min-width', '10px');
|
|
|
|
$previousSibling.css('margin', '20px');
|
|
|
|
$('#controls').prepend($previousSibling);
|
|
|
|
|
2018-02-20 01:47:19 +03:00
|
|
|
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');
|
2018-02-20 02:11:40 +03:00
|
|
|
$creatableActions.css('margin-left', '40px');
|
|
|
|
$creatableActions.css('padding-right', '40px');
|
2018-02-20 01:47:19 +03:00
|
|
|
$('#controls').append($creatableActions);
|
|
|
|
|
2018-02-20 02:11:40 +03:00
|
|
|
var $nextHiddenSibling = $('<div class="otherSibling hidden"></div>');
|
|
|
|
// Set both the width and the min-width to even differences in width
|
|
|
|
// handling in the browsers used to run the tests.
|
|
|
|
$nextHiddenSibling.css('width', '200px');
|
|
|
|
$nextHiddenSibling.css('min-width', '200px');
|
|
|
|
$('#controls').append($nextHiddenSibling);
|
|
|
|
|
|
|
|
var $nextSibling = $('<div class="otherSibling"></div>');
|
|
|
|
// Set both the width and the min-width to even differences in width
|
|
|
|
// handling in the browsers used to run the tests.
|
|
|
|
$nextSibling.css('width', '10px');
|
|
|
|
$nextSibling.css('min-width', '10px');
|
|
|
|
$nextSibling.css('padding', '20px');
|
|
|
|
$('#controls').append($nextSibling);
|
|
|
|
|
2018-02-20 01:47:19 +03:00
|
|
|
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);
|
|
|
|
});
|
2018-02-19 22:42:29 +03:00
|
|
|
it('Updates the breadcrumbs when reducing available width', function() {
|
2013-10-28 23:22:06 +04:00
|
|
|
var $crumbs;
|
|
|
|
|
2014-05-23 21:02:50 +04:00
|
|
|
// enough space
|
2018-02-19 22:42:29 +03:00
|
|
|
$('#controls').width(1800);
|
|
|
|
bc._resize();
|
|
|
|
|
2017-11-08 18:00:40 +03:00
|
|
|
$crumbs = bc.$el.find('.crumb');
|
2014-05-23 21:02:50 +04:00
|
|
|
|
2017-11-08 18:00:40 +03:00
|
|
|
// Menu is hidden
|
2017-12-21 18:22:54 +03:00
|
|
|
expect($crumbs.eq(0).hasClass('hidden')).toEqual(true);
|
2014-05-23 21:02:50 +04:00
|
|
|
|
2017-11-08 18:00:40 +03:00
|
|
|
// simulate decrease
|
2018-02-19 22:42:29 +03:00
|
|
|
$('#controls').width(950);
|
|
|
|
bc._resize();
|
2013-10-28 23:22:06 +04:00
|
|
|
|
2017-11-08 18:00:40 +03:00
|
|
|
// Menu and home are always visible
|
2013-10-28 23:22:06 +04:00
|
|
|
expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
|
|
|
|
expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
|
2014-05-23 21:02:50 +04:00
|
|
|
|
2018-02-20 19:07:26 +03:00
|
|
|
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(false);
|
|
|
|
expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
|
|
|
|
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
|
|
|
|
});
|
2018-02-27 19:14:34 +03:00
|
|
|
it('Updates the breadcrumbs when reducing available width taking into account the menu width', function() {
|
|
|
|
var $crumbs;
|
|
|
|
|
|
|
|
// enough space
|
|
|
|
$('#controls').width(1800);
|
|
|
|
bc._resize();
|
|
|
|
|
|
|
|
$crumbs = bc.$el.find('.crumb');
|
|
|
|
|
|
|
|
// Menu is hidden
|
|
|
|
expect($crumbs.eq(0).hasClass('hidden')).toEqual(true);
|
|
|
|
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);
|
|
|
|
|
|
|
|
// simulate decrease
|
|
|
|
// 650 is enough for all the crumbs except the third and fourth
|
|
|
|
// ones, but not enough for the menu and all the crumbs except the
|
|
|
|
// third and fourth ones; the second one has to be hidden too.
|
|
|
|
$('#controls').width(650);
|
|
|
|
bc._resize();
|
|
|
|
|
|
|
|
// Second, 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(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(7).hasClass('hidden')).toEqual(false);
|
|
|
|
});
|
2018-02-20 19:07:26 +03:00
|
|
|
it('Updates the breadcrumbs when increasing available width', function() {
|
|
|
|
var $crumbs;
|
|
|
|
|
|
|
|
// limited space
|
|
|
|
$('#controls').width(850);
|
|
|
|
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);
|
|
|
|
|
|
|
|
// simulate increase
|
|
|
|
$('#controls').width(1000);
|
|
|
|
bc._resize();
|
|
|
|
|
|
|
|
// Third crumb is 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(false);
|
|
|
|
expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
|
|
|
|
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
|
2018-02-27 19:14:34 +03:00
|
|
|
});
|
|
|
|
it('Updates the breadcrumbs when increasing available width taking into account the menu width', function() {
|
|
|
|
var $crumbs;
|
|
|
|
|
|
|
|
// limited space
|
|
|
|
$('#controls').width(850);
|
|
|
|
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);
|
|
|
|
|
|
|
|
// simulate increase
|
|
|
|
// 1030 is enough for all the crumbs if the menu is hidden.
|
|
|
|
$('#controls').width(1030);
|
|
|
|
bc._resize();
|
|
|
|
|
|
|
|
// Menu is hidden and everything else is visible
|
|
|
|
expect($crumbs.eq(0).hasClass('hidden')).toEqual(true);
|
|
|
|
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);
|
2018-02-20 19:07:26 +03:00
|
|
|
});
|
|
|
|
cit('Updates the breadcrumbs when increasing available width with an expanding sibling', function() {
|
|
|
|
var $crumbs;
|
|
|
|
|
|
|
|
// The sibling expands to fill all the width left by the breadcrumbs
|
|
|
|
var $nextSibling = $('<div class="sibling"></div>');
|
|
|
|
// Set both the width and the min-width to even differences in width
|
|
|
|
// handling in the browsers used to run the tests.
|
|
|
|
$nextSibling.css('width', '10px');
|
|
|
|
$nextSibling.css('min-width', '10px');
|
|
|
|
$nextSibling.css('display', 'flex');
|
|
|
|
$nextSibling.css('flex', '1 1');
|
|
|
|
var $nextSiblingChild = $('<div class="siblingChild"></div>');
|
|
|
|
$nextSiblingChild.css('margin-left', 'auto');
|
|
|
|
$nextSibling.append($nextSiblingChild);
|
|
|
|
$('#controls').append($nextSibling);
|
|
|
|
|
|
|
|
// limited space
|
|
|
|
$('#controls').width(850);
|
|
|
|
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);
|
|
|
|
|
|
|
|
// simulate increase
|
|
|
|
$('#controls').width(1000);
|
|
|
|
bc._resize();
|
|
|
|
|
|
|
|
// Third crumb is hidden and everything else is visible
|
|
|
|
expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
|
|
|
|
expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
|
|
|
|
|
2014-05-23 21:02:50 +04:00
|
|
|
expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
|
|
|
|
expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
|
2017-12-21 18:22:54 +03:00
|
|
|
expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
|
2014-05-23 21:02:50 +04:00
|
|
|
expect($crumbs.eq(5).hasClass('hidden')).toEqual(false);
|
2013-10-28 23:22:06 +04:00
|
|
|
expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
|
2017-11-08 18:00:40 +03:00
|
|
|
expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
|
2013-10-28 23:22:06 +04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|