breadcrumbSpec.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667
  1. /**
  2. * @copyright 2014 Vincent Petry <pvince81@owncloud.com>
  3. *
  4. * @author Daniel Calviño Sánchez <danxuliu@gmail.com>
  5. * @author John Molakvoæ <skjnldsv@protonmail.com>
  6. * @author Lukas Reschke <lukas@statuscode.ch>
  7. * @author Vincent Petry <vincent@nextcloud.com>
  8. *
  9. * @license AGPL-3.0-or-later
  10. *
  11. * This program is free software: you can redistribute it and/or modify
  12. * it under the terms of the GNU Affero General Public License as
  13. * published by the Free Software Foundation, either version 3 of the
  14. * License, or (at your option) any later version.
  15. *
  16. * This program is distributed in the hope that it will be useful,
  17. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  18. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  19. * GNU Affero General Public License for more details.
  20. *
  21. * You should have received a copy of the GNU Affero General Public License
  22. * along with this program. If not, see <http://www.gnu.org/licenses/>.
  23. *
  24. */
  25. describe('OCA.Files.BreadCrumb tests', function() {
  26. var BreadCrumb = OCA.Files.BreadCrumb;
  27. describe('Rendering', function() {
  28. var bc;
  29. beforeEach(function() {
  30. bc = new BreadCrumb({
  31. getCrumbUrl: function(part, index) {
  32. // for testing purposes
  33. return part.dir + '#' + index;
  34. }
  35. });
  36. });
  37. afterEach(function() {
  38. bc = null;
  39. });
  40. it('Renders its own container', function() {
  41. bc.render();
  42. expect(bc.$el.find("ul").hasClass('breadcrumb')).toEqual(true);
  43. });
  44. it('Renders root by default', function() {
  45. var $crumbs;
  46. bc.render();
  47. $crumbs = bc.$el.find('.crumb');
  48. // menu and home
  49. expect($crumbs.length).toEqual(2);
  50. expect($crumbs.eq(0).find('a').hasClass('icon-more')).toEqual(true);
  51. expect($crumbs.eq(0).find('div.popovermenu').length).toEqual(1);
  52. expect($crumbs.eq(0).data('dir')).not.toBeDefined();
  53. expect($crumbs.eq(1).find('a').attr('href')).toEqual('/#1');
  54. expect($crumbs.eq(1).find('a').hasClass('icon-home')).toEqual(true);
  55. expect($crumbs.eq(1).data('dir')).toEqual('/');
  56. });
  57. it('Renders root when switching to root', function() {
  58. var $crumbs;
  59. bc.setDirectory('/somedir');
  60. bc.setDirectory('/');
  61. $crumbs = bc.$el.find('.crumb');
  62. expect($crumbs.length).toEqual(2);
  63. expect($crumbs.eq(1).data('dir')).toEqual('/');
  64. });
  65. it('Renders single path section', function() {
  66. var $crumbs;
  67. bc.setDirectory('/somedir');
  68. $crumbs = bc.$el.find('.crumb');
  69. expect($crumbs.length).toEqual(3);
  70. expect($crumbs.eq(0).find('a').hasClass('icon-more')).toEqual(true);
  71. expect($crumbs.eq(0).find('div.popovermenu').length).toEqual(1);
  72. expect($crumbs.eq(0).data('dir')).not.toBeDefined();
  73. expect($crumbs.eq(1).find('a').attr('href')).toEqual('/#1');
  74. expect($crumbs.eq(1).find('a').hasClass('icon-home')).toEqual(true);
  75. expect($crumbs.eq(1).data('dir')).toEqual('/');
  76. expect($crumbs.eq(2).find('a').attr('href')).toEqual('/somedir#2');
  77. expect($crumbs.eq(2).find('img').length).toEqual(0);
  78. expect($crumbs.eq(2).data('dir')).toEqual('/somedir');
  79. });
  80. it('Renders multiple path sections and special chars', function() {
  81. var $crumbs;
  82. bc.setDirectory('/somedir/with space/abc');
  83. $crumbs = bc.$el.find('.crumb');
  84. expect($crumbs.length).toEqual(5);
  85. expect($crumbs.eq(0).find('a').hasClass('icon-more')).toEqual(true);
  86. expect($crumbs.eq(0).find('div.popovermenu').length).toEqual(1);
  87. expect($crumbs.eq(0).data('dir')).not.toBeDefined();
  88. expect($crumbs.eq(1).find('a').attr('href')).toEqual('/#1');
  89. expect($crumbs.eq(1).find('a').hasClass('icon-home')).toEqual(true);
  90. expect($crumbs.eq(1).data('dir')).toEqual('/');
  91. expect($crumbs.eq(2).find('a').attr('href')).toEqual('/somedir#2');
  92. expect($crumbs.eq(2).find('img').length).toEqual(0);
  93. expect($crumbs.eq(2).data('dir')).toEqual('/somedir');
  94. expect($crumbs.eq(3).find('a').attr('href')).toEqual('/somedir/with space#3');
  95. expect($crumbs.eq(3).find('img').length).toEqual(0);
  96. expect($crumbs.eq(3).data('dir')).toEqual('/somedir/with space');
  97. expect($crumbs.eq(4).find('a').attr('href')).toEqual('/somedir/with space/abc#4');
  98. expect($crumbs.eq(4).find('img').length).toEqual(0);
  99. expect($crumbs.eq(4).data('dir')).toEqual('/somedir/with space/abc');
  100. });
  101. it('Renders backslashes as regular directory separator', function() {
  102. var $crumbs;
  103. bc.setDirectory('/somedir\\with/mixed\\separators');
  104. $crumbs = bc.$el.find('.crumb');
  105. expect($crumbs.length).toEqual(6);
  106. expect($crumbs.eq(0).find('a').hasClass('icon-more')).toEqual(true);
  107. expect($crumbs.eq(0).find('div.popovermenu').length).toEqual(1);
  108. expect($crumbs.eq(0).data('dir')).not.toBeDefined();
  109. expect($crumbs.eq(1).find('a').attr('href')).toEqual('/#1');
  110. expect($crumbs.eq(1).find('a').hasClass('icon-home')).toEqual(true);
  111. expect($crumbs.eq(1).data('dir')).toEqual('/');
  112. expect($crumbs.eq(2).find('a').attr('href')).toEqual('/somedir#2');
  113. expect($crumbs.eq(2).find('img').length).toEqual(0);
  114. expect($crumbs.eq(2).data('dir')).toEqual('/somedir');
  115. expect($crumbs.eq(3).find('a').attr('href')).toEqual('/somedir/with#3');
  116. expect($crumbs.eq(3).find('img').length).toEqual(0);
  117. expect($crumbs.eq(3).data('dir')).toEqual('/somedir/with');
  118. expect($crumbs.eq(4).find('a').attr('href')).toEqual('/somedir/with/mixed#4');
  119. expect($crumbs.eq(4).find('img').length).toEqual(0);
  120. expect($crumbs.eq(4).data('dir')).toEqual('/somedir/with/mixed');
  121. expect($crumbs.eq(5).find('a').attr('href')).toEqual('/somedir/with/mixed/separators#5');
  122. expect($crumbs.eq(5).find('img').length).toEqual(0);
  123. expect($crumbs.eq(5).data('dir')).toEqual('/somedir/with/mixed/separators');
  124. });
  125. });
  126. describe('Events', function() {
  127. it('Calls onClick handler when clicking on a crumb', function() {
  128. var handler = sinon.stub();
  129. var bc = new BreadCrumb({
  130. onClick: handler
  131. });
  132. bc.setDirectory('/one/two/three/four');
  133. // Click on crumb does not work, only link
  134. bc.$el.find('.crumb:eq(4)').click();
  135. expect(handler.calledOnce).toEqual(false);
  136. handler.reset();
  137. // Click on crumb link works
  138. bc.$el.find('.crumb:eq(1) a').click();
  139. expect(handler.calledOnce).toEqual(true);
  140. expect(handler.getCall(0).thisValue).toEqual(bc.$el.find('.crumb > a').get(1));
  141. });
  142. it('Calls onDrop handler when dropping on a crumb', function() {
  143. var droppableStub = sinon.stub($.fn, 'droppable');
  144. var handler = sinon.stub();
  145. var bc = new BreadCrumb({
  146. onDrop: handler
  147. });
  148. bc.setDirectory('/one/two/three/four');
  149. expect(droppableStub.calledOnce).toEqual(true);
  150. expect(droppableStub.getCall(0).args[0].drop).toBeDefined();
  151. // simulate drop
  152. droppableStub.getCall(0).args[0].drop({dummy: true});
  153. expect(handler.calledOnce).toEqual(true);
  154. expect(handler.getCall(0).args[0]).toEqual({dummy: true});
  155. droppableStub.restore();
  156. });
  157. });
  158. describe('Menu tests', function() {
  159. var bc, dummyDir, $crumbmenuLink, $popovermenu;
  160. beforeEach(function() {
  161. dummyDir = '/one/two/three/four/five'
  162. bc = new BreadCrumb();
  163. // append dummy navigation and controls
  164. // as they are currently used for measurements
  165. $('#testArea').append(
  166. '<div class="files-controls"></div>'
  167. );
  168. $('.files-controls').append(bc.$el);
  169. bc.setDirectory(dummyDir);
  170. $('li.crumb').each(function(index){
  171. $(this).css('width', 50);
  172. $(this).css('padding', 0);
  173. $(this).css('margin', 0);
  174. });
  175. $('div.crumbhome').css('width', 51);
  176. $('div.crumbmenu').css('width', 51);
  177. $('.files-controls').width(1000);
  178. bc._resize();
  179. // Shrink to show popovermenu
  180. $('.files-controls').width(300);
  181. bc._resize();
  182. $crumbmenuLink = bc.$el.find('.crumbmenu > a');
  183. $popovermenu = $crumbmenuLink.next('.popovermenu');
  184. });
  185. afterEach(function() {
  186. bc = null;
  187. });
  188. it('Shows only items not in the breadcrumb', function() {
  189. var hiddenCrumbs = bc.$el.find('.crumb:not(.crumbmenu).hidden');
  190. expect($popovermenu.find('li:not(.in-breadcrumb)').length).toEqual(hiddenCrumbs.length);
  191. });
  192. });
  193. describe('Resizing', function() {
  194. var bc, dummyDir, widths, paddings, margins;
  195. // cit() will skip tests if running on PhantomJS because it does not
  196. // have proper support for flexboxes.
  197. var cit = window.isPhantom?xit:it;
  198. beforeEach(function() {
  199. dummyDir = '/short name/longer name/looooooooooooonger/' +
  200. 'even longer long long long longer long/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/last one';
  201. bc = new BreadCrumb();
  202. // append dummy navigation and controls
  203. // as they are currently used for measurements
  204. $('#testArea').append(
  205. '<div class="files-controls"></div>'
  206. );
  207. $('.files-controls').append(bc.$el);
  208. // triggers resize implicitly
  209. bc.setDirectory(dummyDir);
  210. // using hard-coded widths (pre-measured) to avoid getting different
  211. // results on different browsers due to font engine differences
  212. // 51px is default size for menu and home
  213. widths = [51, 51, 106, 112, 160, 257, 251, 91];
  214. // using hard-coded paddings and margins to avoid depending on the
  215. // current CSS values used in the server
  216. paddings = [0, 0, 0, 0, 0, 0, 0, 0];
  217. margins = [0, 0, 0, 0, 0, 0, 0, 0];
  218. $('li.crumb').each(function(index){
  219. $(this).css('width', widths[index]);
  220. $(this).css('padding', paddings[index]);
  221. $(this).css('margin', margins[index]);
  222. });
  223. });
  224. afterEach(function() {
  225. bc = null;
  226. });
  227. it('Hides breadcrumbs to fit available width', function() {
  228. var $crumbs;
  229. $('.files-controls').width(500);
  230. bc._resize();
  231. $crumbs = bc.$el.find('.crumb');
  232. // Second, third, fourth and fifth crumb are hidden and everything
  233. // else is visible
  234. expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
  235. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  236. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  237. expect($crumbs.eq(3).hasClass('hidden')).toEqual(true);
  238. expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
  239. expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
  240. expect($crumbs.eq(6).hasClass('hidden')).toEqual(true);
  241. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  242. });
  243. it('Hides breadcrumbs to fit available width', function() {
  244. var $crumbs;
  245. $('.files-controls').width(700);
  246. bc._resize();
  247. $crumbs = bc.$el.find('.crumb');
  248. // Third and fourth crumb are hidden and everything else is visible
  249. expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
  250. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  251. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  252. expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
  253. expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
  254. expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
  255. expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
  256. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  257. });
  258. it('Hides breadcrumbs to fit available width taking paddings into account', function() {
  259. var $crumbs;
  260. // Each element is 20px wider
  261. paddings = [10, 10, 10, 10, 10, 10, 10, 10];
  262. $('li.crumb').each(function(index){
  263. $(this).css('padding', paddings[index]);
  264. });
  265. $('.files-controls').width(700);
  266. bc._resize();
  267. $crumbs = bc.$el.find('.crumb');
  268. // Second, third and fourth crumb are hidden and everything else is
  269. // visible
  270. expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
  271. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  272. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  273. expect($crumbs.eq(3).hasClass('hidden')).toEqual(true);
  274. expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
  275. expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
  276. expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
  277. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  278. });
  279. it('Hides breadcrumbs to fit available width taking margins into account', function() {
  280. var $crumbs;
  281. // Each element is 20px wider
  282. margins = [10, 10, 10, 10, 10, 10, 10, 10];
  283. $('li.crumb').each(function(index){
  284. $(this).css('margin', margins[index]);
  285. });
  286. $('.files-controls').width(700);
  287. bc._resize();
  288. $crumbs = bc.$el.find('.crumb');
  289. // Second, third and fourth crumb are hidden and everything else is
  290. // visible
  291. expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
  292. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  293. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  294. expect($crumbs.eq(3).hasClass('hidden')).toEqual(true);
  295. expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
  296. expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
  297. expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
  298. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  299. });
  300. it('Hides breadcrumbs to fit available width left by siblings', function() {
  301. var $crumbs;
  302. $('.files-controls').width(700);
  303. bc._resize();
  304. $crumbs = bc.$el.find('.crumb');
  305. // Third and fourth crumb are hidden and everything else is visible
  306. expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
  307. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  308. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  309. expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
  310. expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
  311. expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
  312. expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
  313. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  314. // Visible sibling widths add up to 200px
  315. var $previousSibling = $('<div class="otherSibling"></div>');
  316. // Set both the width and the min-width to even differences in width
  317. // handling in the browsers used to run the tests.
  318. $previousSibling.css('width', '50px');
  319. $previousSibling.css('min-width', '50px');
  320. $('.files-controls').prepend($previousSibling);
  321. var $creatableActions = $('<div class="actions creatable"></div>');
  322. // Set both the width and the min-width to even differences in width
  323. // handling in the browsers used to run the tests.
  324. $creatableActions.css('width', '100px');
  325. $creatableActions.css('min-width', '100px');
  326. $('.files-controls').append($creatableActions);
  327. var $nextHiddenSibling = $('<div class="otherSibling hidden"></div>');
  328. // Set both the width and the min-width to even differences in width
  329. // handling in the browsers used to run the tests.
  330. $nextHiddenSibling.css('width', '200px');
  331. $nextHiddenSibling.css('min-width', '200px');
  332. $('.files-controls').append($nextHiddenSibling);
  333. var $nextSibling = $('<div class="otherSibling"></div>');
  334. // Set both the width and the min-width to even differences in width
  335. // handling in the browsers used to run the tests.
  336. $nextSibling.css('width', '50px');
  337. $nextSibling.css('min-width', '50px');
  338. $('.files-controls').append($nextSibling);
  339. bc._resize();
  340. // Second, third, fourth and fifth crumb are hidden and everything
  341. // else is visible
  342. expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
  343. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  344. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  345. expect($crumbs.eq(3).hasClass('hidden')).toEqual(true);
  346. expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
  347. expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
  348. expect($crumbs.eq(6).hasClass('hidden')).toEqual(true);
  349. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  350. });
  351. it('Hides breadcrumbs to fit available width left by siblings with paddings and margins', function() {
  352. var $crumbs;
  353. $('.files-controls').width(700);
  354. bc._resize();
  355. $crumbs = bc.$el.find('.crumb');
  356. // Third and fourth crumb are hidden and everything else is visible
  357. expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
  358. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  359. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  360. expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
  361. expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
  362. expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
  363. expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
  364. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  365. // Visible sibling widths add up to 200px
  366. var $previousSibling = $('<div class="otherSibling"></div>');
  367. // Set both the width and the min-width to even differences in width
  368. // handling in the browsers used to run the tests.
  369. $previousSibling.css('width', '10px');
  370. $previousSibling.css('min-width', '10px');
  371. $previousSibling.css('margin', '20px');
  372. $('.files-controls').prepend($previousSibling);
  373. var $creatableActions = $('<div class="actions creatable"></div>');
  374. // Set both the width and the min-width to even differences in width
  375. // handling in the browsers used to run the tests.
  376. $creatableActions.css('width', '20px');
  377. $creatableActions.css('min-width', '20px');
  378. $creatableActions.css('margin-left', '40px');
  379. $creatableActions.css('padding-right', '40px');
  380. $('.files-controls').append($creatableActions);
  381. var $nextHiddenSibling = $('<div class="otherSibling hidden"></div>');
  382. // Set both the width and the min-width to even differences in width
  383. // handling in the browsers used to run the tests.
  384. $nextHiddenSibling.css('width', '200px');
  385. $nextHiddenSibling.css('min-width', '200px');
  386. $('.files-controls').append($nextHiddenSibling);
  387. var $nextSibling = $('<div class="otherSibling"></div>');
  388. // Set both the width and the min-width to even differences in width
  389. // handling in the browsers used to run the tests.
  390. $nextSibling.css('width', '10px');
  391. $nextSibling.css('min-width', '10px');
  392. $nextSibling.css('padding', '20px');
  393. $('.files-controls').append($nextSibling);
  394. bc._resize();
  395. // Second, third, fourth and fifth crumb are hidden and everything
  396. // else is visible
  397. expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
  398. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  399. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  400. expect($crumbs.eq(3).hasClass('hidden')).toEqual(true);
  401. expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
  402. expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
  403. expect($crumbs.eq(6).hasClass('hidden')).toEqual(true);
  404. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  405. });
  406. it('Updates the breadcrumbs when reducing available width', function() {
  407. var $crumbs;
  408. // enough space
  409. $('.files-controls').width(1800);
  410. bc._resize();
  411. $crumbs = bc.$el.find('.crumb');
  412. // Menu is hidden
  413. expect($crumbs.eq(0).hasClass('hidden')).toEqual(true);
  414. // simulate decrease
  415. $('.files-controls').width(950);
  416. bc._resize();
  417. // Third crumb is hidden and everything else is visible
  418. expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
  419. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  420. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  421. expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
  422. expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
  423. expect($crumbs.eq(5).hasClass('hidden')).toEqual(false);
  424. expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
  425. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  426. });
  427. it('Updates the breadcrumbs when reducing available width taking into account the menu width', function() {
  428. var $crumbs;
  429. // enough space
  430. $('.files-controls').width(1800);
  431. bc._resize();
  432. $crumbs = bc.$el.find('.crumb');
  433. // Menu is hidden
  434. expect($crumbs.eq(0).hasClass('hidden')).toEqual(true);
  435. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  436. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  437. expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
  438. expect($crumbs.eq(4).hasClass('hidden')).toEqual(false);
  439. expect($crumbs.eq(5).hasClass('hidden')).toEqual(false);
  440. expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
  441. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  442. // simulate decrease
  443. // 650 is enough for all the crumbs except the third and fourth
  444. // ones, but not enough for the menu and all the crumbs except the
  445. // third and fourth ones; the second one has to be hidden too.
  446. $('.files-controls').width(650);
  447. bc._resize();
  448. // Second, third and fourth crumb are hidden and everything else is
  449. // visible
  450. expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
  451. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  452. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  453. expect($crumbs.eq(3).hasClass('hidden')).toEqual(true);
  454. expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
  455. expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
  456. expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
  457. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  458. });
  459. it('Updates the breadcrumbs when increasing available width', function() {
  460. var $crumbs;
  461. // limited space
  462. $('.files-controls').width(850);
  463. bc._resize();
  464. $crumbs = bc.$el.find('.crumb');
  465. // Third and fourth crumb are hidden and everything else is visible
  466. expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
  467. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  468. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  469. expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
  470. expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
  471. expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
  472. expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
  473. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  474. // simulate increase
  475. $('.files-controls').width(1000);
  476. bc._resize();
  477. // Third crumb is hidden and everything else is visible
  478. expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
  479. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  480. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  481. expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
  482. expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
  483. expect($crumbs.eq(5).hasClass('hidden')).toEqual(false);
  484. expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
  485. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  486. });
  487. it('Updates the breadcrumbs when increasing available width taking into account the menu width', function() {
  488. var $crumbs;
  489. // limited space
  490. $('.files-controls').width(850);
  491. bc._resize();
  492. $crumbs = bc.$el.find('.crumb');
  493. // Third and fourth crumb are hidden and everything else is visible
  494. expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
  495. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  496. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  497. expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
  498. expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
  499. expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
  500. expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
  501. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  502. // simulate increase
  503. // 1030 is enough for all the crumbs if the menu is hidden.
  504. $('.files-controls').width(1030);
  505. bc._resize();
  506. // Menu is hidden and everything else is visible
  507. expect($crumbs.eq(0).hasClass('hidden')).toEqual(true);
  508. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  509. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  510. expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
  511. expect($crumbs.eq(4).hasClass('hidden')).toEqual(false);
  512. expect($crumbs.eq(5).hasClass('hidden')).toEqual(false);
  513. expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
  514. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  515. });
  516. cit('Updates the breadcrumbs when increasing available width with an expanding sibling', function() {
  517. var $crumbs;
  518. // The sibling expands to fill all the width left by the breadcrumbs
  519. var $nextSibling = $('<div class="sibling"></div>');
  520. // Set both the width and the min-width to even differences in width
  521. // handling in the browsers used to run the tests.
  522. $nextSibling.css('width', '10px');
  523. $nextSibling.css('min-width', '10px');
  524. $nextSibling.css('display', 'flex');
  525. $nextSibling.css('flex', '1 1');
  526. var $nextSiblingChild = $('<div class="siblingChild"></div>');
  527. $nextSiblingChild.css('margin-left', 'auto');
  528. $nextSibling.append($nextSiblingChild);
  529. $('.files-controls').append($nextSibling);
  530. // limited space
  531. $('.files-controls').width(850);
  532. bc._resize();
  533. $crumbs = bc.$el.find('.crumb');
  534. // Third and fourth crumb are hidden and everything else is visible
  535. expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
  536. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  537. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  538. expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
  539. expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
  540. expect($crumbs.eq(5).hasClass('hidden')).toEqual(true);
  541. expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
  542. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  543. // simulate increase
  544. $('.files-controls').width(1000);
  545. bc._resize();
  546. // Third crumb is hidden and everything else is visible
  547. expect($crumbs.eq(0).hasClass('hidden')).toEqual(false);
  548. expect($crumbs.eq(1).hasClass('hidden')).toEqual(false);
  549. expect($crumbs.eq(2).hasClass('hidden')).toEqual(false);
  550. expect($crumbs.eq(3).hasClass('hidden')).toEqual(false);
  551. expect($crumbs.eq(4).hasClass('hidden')).toEqual(true);
  552. expect($crumbs.eq(5).hasClass('hidden')).toEqual(false);
  553. expect($crumbs.eq(6).hasClass('hidden')).toEqual(false);
  554. expect($crumbs.eq(7).hasClass('hidden')).toEqual(false);
  555. });
  556. });
  557. });