1
0

detailsviewSpec.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. /**
  2. * @copyright 2015 Vincent Petry <pvince81@owncloud.com>
  3. *
  4. * @author Daniel Calviño Sánchez <danxuliu@gmail.com>
  5. * @author Vincent Petry <vincent@nextcloud.com>
  6. *
  7. * @license AGPL-3.0-or-later
  8. *
  9. * This program is free software: you can redistribute it and/or modify
  10. * it under the terms of the GNU Affero General Public License as
  11. * published by the Free Software Foundation, either version 3 of the
  12. * License, or (at your option) any later version.
  13. *
  14. * This program is distributed in the hope that it will be useful,
  15. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  16. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  17. * GNU Affero General Public License for more details.
  18. *
  19. * You should have received a copy of the GNU Affero General Public License
  20. * along with this program. If not, see <http://www.gnu.org/licenses/>.
  21. *
  22. */
  23. describe('OCA.Files.DetailsView tests', function() {
  24. var detailsView;
  25. beforeEach(function() {
  26. detailsView = new OCA.Files.DetailsView();
  27. });
  28. afterEach(function() {
  29. detailsView.remove();
  30. detailsView = undefined;
  31. });
  32. it('renders itself empty when nothing registered', function() {
  33. detailsView.render();
  34. expect(detailsView.$el.find('.detailFileInfoContainer').length).toEqual(1);
  35. expect(detailsView.$el.find('.tabsContainer').length).toEqual(1);
  36. });
  37. describe('file info detail view', function() {
  38. it('returns registered view', function() {
  39. var testView = new OCA.Files.DetailFileInfoView();
  40. var testView2 = new OCA.Files.DetailFileInfoView();
  41. detailsView.addDetailView(testView);
  42. detailsView.addDetailView(testView2);
  43. detailViews = detailsView.getDetailViews();
  44. expect(detailViews).toContain(testView);
  45. expect(detailViews).toContain(testView2);
  46. // Modify array and check that registered detail views are not
  47. // modified
  48. detailViews.pop();
  49. detailViews.pop();
  50. detailViews = detailsView.getDetailViews();
  51. expect(detailViews).toContain(testView);
  52. expect(detailViews).toContain(testView2);
  53. });
  54. it('renders registered view', function() {
  55. var testView = new OCA.Files.DetailFileInfoView();
  56. var testView2 = new OCA.Files.DetailFileInfoView();
  57. detailsView.addDetailView(testView);
  58. detailsView.addDetailView(testView2);
  59. detailsView.render();
  60. expect(detailsView.$el.find('.detailFileInfoContainer .detailFileInfoView').length).toEqual(2);
  61. });
  62. it('updates registered tabs when fileinfo is updated', function() {
  63. var viewRenderStub = sinon.stub(OCA.Files.DetailFileInfoView.prototype, 'render');
  64. var testView = new OCA.Files.DetailFileInfoView();
  65. var testView2 = new OCA.Files.DetailFileInfoView();
  66. detailsView.addDetailView(testView);
  67. detailsView.addDetailView(testView2);
  68. detailsView.render();
  69. var fileInfo = {id: 5, name: 'test.txt'};
  70. viewRenderStub.reset();
  71. detailsView.setFileInfo(fileInfo);
  72. expect(testView.getFileInfo()).toEqual(fileInfo);
  73. expect(testView2.getFileInfo()).toEqual(fileInfo);
  74. expect(viewRenderStub.callCount).toEqual(2);
  75. viewRenderStub.restore();
  76. });
  77. });
  78. describe('tabs', function() {
  79. var testView, testView2;
  80. beforeEach(function() {
  81. testView = new OCA.Files.DetailTabView({id: 'test1'});
  82. testView2 = new OCA.Files.DetailTabView({id: 'test2'});
  83. detailsView.addTabView(testView);
  84. detailsView.addTabView(testView2);
  85. detailsView.render();
  86. });
  87. it('initially renders only the selected tab', function() {
  88. expect(detailsView.$el.find('.tab').length).toEqual(1);
  89. expect(detailsView.$el.find('.tab').attr('id')).toEqual('test1');
  90. });
  91. it('updates tab model and rerenders on-demand as soon as it gets selected', function() {
  92. var tab1RenderStub = sinon.stub(testView, 'render');
  93. var tab2RenderStub = sinon.stub(testView2, 'render');
  94. var fileInfo1 = new OCA.Files.FileInfoModel({id: 5, name: 'test.txt'});
  95. var fileInfo2 = new OCA.Files.FileInfoModel({id: 8, name: 'test2.txt'});
  96. detailsView.setFileInfo(fileInfo1);
  97. // first tab renders, not the second one
  98. expect(tab1RenderStub.calledOnce).toEqual(true);
  99. expect(tab2RenderStub.notCalled).toEqual(true);
  100. // info got set only to the first visible tab
  101. expect(testView.getFileInfo()).toEqual(fileInfo1);
  102. expect(testView2.getFileInfo()).toBeUndefined();
  103. // select second tab for first render
  104. detailsView.$el.find('.tabHeader').eq(1).click();
  105. // second tab got rendered
  106. expect(tab2RenderStub.calledOnce).toEqual(true);
  107. expect(testView2.getFileInfo()).toEqual(fileInfo1);
  108. // select the first tab again
  109. detailsView.$el.find('.tabHeader').eq(0).click();
  110. // no re-render
  111. expect(tab1RenderStub.calledOnce).toEqual(true);
  112. expect(tab2RenderStub.calledOnce).toEqual(true);
  113. tab1RenderStub.reset();
  114. tab2RenderStub.reset();
  115. // switch to another file
  116. detailsView.setFileInfo(fileInfo2);
  117. // only the visible tab was updated and rerendered
  118. expect(tab1RenderStub.calledOnce).toEqual(true);
  119. expect(testView.getFileInfo()).toEqual(fileInfo2);
  120. // second/invisible tab still has old info, not rerendered
  121. expect(tab2RenderStub.notCalled).toEqual(true);
  122. expect(testView2.getFileInfo()).toEqual(fileInfo1);
  123. // reselect the second one
  124. detailsView.$el.find('.tabHeader').eq(1).click();
  125. // second tab becomes visible, updated and rendered
  126. expect(testView2.getFileInfo()).toEqual(fileInfo2);
  127. expect(tab2RenderStub.calledOnce).toEqual(true);
  128. tab1RenderStub.restore();
  129. tab2RenderStub.restore();
  130. });
  131. it('selects the first tab by default', function() {
  132. expect(detailsView.$el.find('.tabHeader').eq(0).hasClass('selected')).toEqual(true);
  133. expect(detailsView.$el.find('.tabHeader').eq(1).hasClass('selected')).toEqual(false);
  134. expect(detailsView.$el.find('.tab').eq(0).hasClass('hidden')).toEqual(false);
  135. expect(detailsView.$el.find('.tab').eq(1).length).toEqual(0);
  136. });
  137. it('switches the current tab when clicking on tab header', function() {
  138. detailsView.$el.find('.tabHeader').eq(1).click();
  139. expect(detailsView.$el.find('.tabHeader').eq(0).hasClass('selected')).toEqual(false);
  140. expect(detailsView.$el.find('.tabHeader').eq(1).hasClass('selected')).toEqual(true);
  141. expect(detailsView.$el.find('.tab').eq(0).hasClass('hidden')).toEqual(true);
  142. expect(detailsView.$el.find('.tab').eq(1).hasClass('hidden')).toEqual(false);
  143. });
  144. describe('tab visibility', function() {
  145. beforeEach(function() {
  146. detailsView.remove();
  147. detailsView = new OCA.Files.DetailsView();
  148. });
  149. it('does not display tab headers when only one tab exists', function() {
  150. testView = new OCA.Files.DetailTabView({id: 'test1'});
  151. detailsView.addTabView(testView);
  152. detailsView.render();
  153. expect(detailsView.$el.find('.tabHeaders').hasClass('hidden')).toEqual(true);
  154. expect(detailsView.$el.find('.tabHeader').length).toEqual(1);
  155. });
  156. it('does not display tab that do not pass visibility check', function() {
  157. testView = new OCA.Files.DetailTabView({id: 'test1'});
  158. testView.canDisplay = sinon.stub().returns(false);
  159. testView2 = new OCA.Files.DetailTabView({id: 'test2'});
  160. var testView3 = new OCA.Files.DetailTabView({id: 'test3'});
  161. detailsView.addTabView(testView);
  162. detailsView.addTabView(testView2);
  163. detailsView.addTabView(testView3);
  164. var fileInfo = {id: 5, name: 'test.txt'};
  165. detailsView.setFileInfo(fileInfo);
  166. expect(testView.canDisplay.calledOnce).toEqual(true);
  167. expect(testView.canDisplay.calledWith(fileInfo)).toEqual(true);
  168. expect(detailsView.$el.find('.tabHeaders').hasClass('hidden')).toEqual(false);
  169. expect(detailsView.$el.find('.tabHeader[data-tabid=test1]').hasClass('hidden')).toEqual(true);
  170. expect(detailsView.$el.find('.tabHeader[data-tabid=test2]').hasClass('hidden')).toEqual(false);
  171. expect(detailsView.$el.find('.tabHeader[data-tabid=test3]').hasClass('hidden')).toEqual(false);
  172. });
  173. it('does not show tab headers if only one header is visible due to visibility check', function() {
  174. testView = new OCA.Files.DetailTabView({id: 'test1'});
  175. testView.canDisplay = sinon.stub().returns(false);
  176. testView2 = new OCA.Files.DetailTabView({id: 'test2'});
  177. detailsView.addTabView(testView);
  178. detailsView.addTabView(testView2);
  179. var fileInfo = {id: 5, name: 'test.txt'};
  180. detailsView.setFileInfo(fileInfo);
  181. expect(testView.canDisplay.calledOnce).toEqual(true);
  182. expect(testView.canDisplay.calledWith(fileInfo)).toEqual(true);
  183. expect(detailsView.$el.find('.tabHeaders').hasClass('hidden')).toEqual(true);
  184. expect(detailsView.$el.find('.tabHeader[data-tabid=test1]').hasClass('hidden')).toEqual(true);
  185. expect(detailsView.$el.find('.tabHeader[data-tabid=test2]').hasClass('hidden')).toEqual(false);
  186. });
  187. it('deselects the current tab if a model update does not pass the visibility check', function() {
  188. testView = new OCA.Files.DetailTabView({id: 'test1'});
  189. testView.canDisplay = function(fileInfo) {
  190. return fileInfo.mimetype !== 'httpd/unix-directory';
  191. };
  192. testView2 = new OCA.Files.DetailTabView({id: 'test2'});
  193. detailsView.addTabView(testView);
  194. detailsView.addTabView(testView2);
  195. var fileInfo = {id: 5, name: 'test.txt', mimetype: 'text/plain'};
  196. detailsView.setFileInfo(fileInfo);
  197. expect(detailsView.$el.find('.tabHeader[data-tabid=test1]').hasClass('selected')).toEqual(true);
  198. expect(detailsView.$el.find('.tabHeader[data-tabid=test2]').hasClass('selected')).toEqual(false);
  199. detailsView.setFileInfo({id: 10, name: 'folder', mimetype: 'httpd/unix-directory'});
  200. expect(detailsView.$el.find('.tabHeader[data-tabid=test1]').hasClass('selected')).toEqual(false);
  201. expect(detailsView.$el.find('.tabHeader[data-tabid=test2]').hasClass('selected')).toEqual(true);
  202. });
  203. });
  204. it('sorts by order and then label', function() {
  205. detailsView.remove();
  206. detailsView = new OCA.Files.DetailsView();
  207. detailsView.addTabView(new OCA.Files.DetailTabView({id: 'abc', order: 20}));
  208. detailsView.addTabView(new OCA.Files.DetailTabView({id: 'def', order: 10}));
  209. detailsView.addTabView(new OCA.Files.DetailTabView({id: 'jkl'}));
  210. detailsView.addTabView(new OCA.Files.DetailTabView({id: 'ghi'}));
  211. detailsView.render();
  212. var tabs = detailsView.$el.find('.tabHeader').map(function() {
  213. return $(this).attr('data-tabid');
  214. }).toArray();
  215. expect(tabs).toEqual(['ghi', 'jkl', 'def', 'abc']);
  216. });
  217. });
  218. });