tableDynamicSpec.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. describe('ng-table-dynamic', function() {
  2. var data = [
  3. { id: 1, name: "Moroni", age: 50, money: -10 },
  4. { id: 2, name: "Tiancum", age: 43, money: 120 },
  5. { id: 3, name: "Jacob", age: 27, money: 5.5 },
  6. { id: 4, name: "Nephi", age: 29, money: -54 },
  7. { id: 5, name: "Enos", age: 34, money: 110 },
  8. { id: 6, name: "Tiancum", age: 43, money: 1000 },
  9. { id: 7, name: "Jacob", age: 27, money: -201 },
  10. { id: 8, name: "Nephi", age: 29, money: 100 },
  11. { id: 9, name: "Enos", age: 34, money: -52.5 },
  12. { id: 10, name: "Tiancum", age: 43, money: 52.1 },
  13. { id: 11, name: "Jacob", age: 27, money: 110 },
  14. { id: 12, name: "Nephi", age: 29, money: -55 },
  15. { id: 13, name: "Enos", age: 34, money: 551 },
  16. { id: 14, name: "Tiancum", age: 43, money: -1410 },
  17. { id: 15, name: "Jacob", age: 27, money: 410 },
  18. { id: 16, name: "Nephi", age: 29, money: 100 },
  19. { id: 17, name: "Enos", age: 34, money: -100 }
  20. ];
  21. beforeEach(module('ngTable'));
  22. var scope;
  23. beforeEach(inject(function($rootScope) {
  24. scope = $rootScope.$new(true);
  25. }));
  26. describe('basics', function(){
  27. var elm;
  28. beforeEach(inject(function($compile, $q, NgTableParams) {
  29. elm = angular.element(
  30. '<div>' +
  31. '<table ng-table-dynamic="tableParams with cols" show-filter="true">' +
  32. '<tr ng-repeat="user in $data">' +
  33. '<td ng-repeat="col in $columns">{{user[col.field]}}</td>' +
  34. '</tr>' +
  35. '</table>' +
  36. '</div>');
  37. function getCustomClass(parmasScope){
  38. if (parmasScope.$column.title().indexOf('Money') !== -1){
  39. return 'moneyHeaderClass';
  40. } else{
  41. return 'customClass';
  42. }
  43. }
  44. function money(/*$column*/) {
  45. var def = $q.defer();
  46. def.resolve([{
  47. 'id': 10,
  48. 'title': '10'
  49. }]);
  50. return def;
  51. }
  52. scope.tableParams = new NgTableParams({}, {});
  53. scope.cols = [
  54. {
  55. 'class': getCustomClass,
  56. field: 'name',
  57. filter: { name: 'text' },
  58. headerTitle: 'Sort by Name',
  59. sortable: 'name',
  60. show: true,
  61. title: 'Name of person'
  62. },
  63. {
  64. 'class': getCustomClass,
  65. field: 'age',
  66. headerTitle: 'Sort by Age',
  67. sortable: 'age',
  68. show: true,
  69. title: 'Age'
  70. },
  71. {
  72. 'class': getCustomClass,
  73. field: 'money',
  74. filter: { action: 'select' },
  75. headerTitle: 'Sort by Money',
  76. filterData: money,
  77. show: true,
  78. title: 'Money'
  79. }
  80. ];
  81. $compile(elm)(scope);
  82. scope.$digest();
  83. }));
  84. it('should create table header', function() {
  85. var thead = elm.find('thead');
  86. expect(thead.length).toBe(1);
  87. var rows = thead.find('tr');
  88. expect(rows.length).toBe(2);
  89. var titles = angular.element(rows[0]).find('th');
  90. expect(titles.length).toBe(3);
  91. expect(angular.element(titles[0]).text().trim()).toBe('Name of person');
  92. expect(angular.element(titles[1]).text().trim()).toBe('Age');
  93. expect(angular.element(titles[2]).text().trim()).toBe('Money');
  94. expect(angular.element(rows[1]).hasClass('ng-table-filters')).toBeTruthy();
  95. var filters = angular.element(rows[1]).find('th');
  96. expect(filters.length).toBe(3);
  97. expect(angular.element(filters[0]).hasClass('filter')).toBeTruthy();
  98. expect(angular.element(filters[1]).hasClass('filter')).toBeTruthy();
  99. expect(angular.element(filters[2]).hasClass('filter')).toBeTruthy();
  100. });
  101. it('should create table header classes', inject(function($compile, $rootScope) {
  102. var thead = elm.find('thead');
  103. var rows = thead.find('tr');
  104. var titles = angular.element(rows[0]).find('th');
  105. expect(angular.element(titles[0]).hasClass('header')).toBeTruthy();
  106. expect(angular.element(titles[1]).hasClass('header')).toBeTruthy();
  107. expect(angular.element(titles[2]).hasClass('header')).toBeTruthy();
  108. expect(angular.element(titles[0]).hasClass('sortable')).toBeTruthy();
  109. expect(angular.element(titles[1]).hasClass('sortable')).toBeTruthy();
  110. expect(angular.element(titles[2]).hasClass('sortable')).toBeFalsy();
  111. expect(angular.element(titles[0]).hasClass('customClass')).toBeTruthy();
  112. expect(angular.element(titles[1]).hasClass('customClass')).toBeTruthy();
  113. expect(angular.element(titles[2]).hasClass('moneyHeaderClass')).toBeTruthy();
  114. }));
  115. it('should create table header titles', function() {
  116. var thead = elm.find('thead');
  117. var rows = thead.find('tr');
  118. var titles = angular.element(rows[0]).find('th');
  119. expect(angular.element(titles[0]).attr('title').trim()).toBe('Sort by Name');
  120. expect(angular.element(titles[1]).attr('title').trim()).toBe('Sort by Age');
  121. expect(angular.element(titles[2]).attr('title').trim()).toBe('Sort by Money');
  122. });
  123. it('should show data-title-text', inject(function(NgTableParams) {
  124. var tbody = elm.find('tbody');
  125. scope.tableParams = new NgTableParams({
  126. page: 1, // show first page
  127. count: 10 // count per page
  128. }, {
  129. total: data.length,
  130. data: data
  131. });
  132. scope.$digest();
  133. var filterRow = angular.element(elm.find('thead').find('tr')[1]);
  134. var filterCells = filterRow.find('th');
  135. expect(angular.element(filterCells[0]).attr('data-title-text').trim()).toBe('Name of person');
  136. expect(angular.element(filterCells[1]).attr('data-title-text').trim()).toBe('Age');
  137. expect(angular.element(filterCells[2]).attr('data-title-text').trim()).toBe('Money');
  138. var dataRows = elm.find('tbody').find('tr');
  139. var dataCells = angular.element(dataRows[0]).find('td');
  140. expect(angular.element(dataCells[0]).attr('data-title-text').trim()).toBe('Name of person');
  141. expect(angular.element(dataCells[1]).attr('data-title-text').trim()).toBe('Age');
  142. expect(angular.element(dataCells[2]).attr('data-title-text').trim()).toBe('Money');
  143. }));
  144. });
  145. describe('title-alt', function() {
  146. var elm;
  147. beforeEach(inject(function($compile, NgTableParams) {
  148. elm = angular.element(
  149. '<table ng-table-dynamic="tableParams with cols">' +
  150. '<tr ng-repeat="user in $data">' +
  151. '<td ng-repeat="col in $columns">{{user[col.field]}}</td>' +
  152. '</tr>' +
  153. '</table>');
  154. scope.cols = [
  155. { field: 'name', title: 'Name of person', titleAlt: 'Name' },
  156. { field: 'age', title: 'Age', titleAlt: 'Age' },
  157. { field: 'money', title: 'Money', titleAlt: '£' }
  158. ];
  159. scope.tableParams = new NgTableParams({
  160. page: 1, // show first page
  161. count: 10 // count per page
  162. }, {
  163. total: data.length,
  164. data: data
  165. });
  166. $compile(elm)(scope);
  167. scope.$digest();
  168. }));
  169. it('should show as data-title-text', inject(function($compile) {
  170. var filterRow = angular.element(elm.find('thead').find('tr')[1]);
  171. var filterCells = filterRow.find('th');
  172. expect(angular.element(filterCells[0]).attr('data-title-text').trim()).toBe('Name');
  173. expect(angular.element(filterCells[1]).attr('data-title-text').trim()).toBe('Age');
  174. expect(angular.element(filterCells[2]).attr('data-title-text').trim()).toBe('£');
  175. var dataRows = elm.find('tbody').find('tr');
  176. var dataCells = angular.element(dataRows[0]).find('td');
  177. expect(angular.element(dataCells[0]).attr('data-title-text').trim()).toBe('Name');
  178. expect(angular.element(dataCells[1]).attr('data-title-text').trim()).toBe('Age');
  179. expect(angular.element(dataCells[2]).attr('data-title-text').trim()).toBe('£');
  180. }));
  181. });
  182. describe('filters', function(){
  183. var elm;
  184. beforeEach(inject(function($compile, NgTableParams) {
  185. elm = angular.element(
  186. '<table ng-table-dynamic="tableParams with cols" show-filter="true">' +
  187. '<tr ng-repeat="user in $data">' +
  188. '<td ng-repeat="col in $columns">{{user[col.field]}}</td>' +
  189. '</tr>' +
  190. '</table>');
  191. }));
  192. describe('filter specified as alias', function(){
  193. beforeEach(inject(function($compile, NgTableParams) {
  194. scope.cols = [
  195. { field: 'name', filter: {username: 'text'} }
  196. ];
  197. scope.tableParams = new NgTableParams({}, {});
  198. $compile(elm)(scope);
  199. scope.$digest();
  200. }));
  201. it('should render named filter template', function() {
  202. var inputs = elm.find('thead').find('tr').eq(1).find('th').find('input');
  203. expect(inputs.length).toBe(1);
  204. expect(inputs.eq(0).attr('type')).toBe('text');
  205. expect(inputs.eq(0).attr('ng-model')).not.toBeUndefined();
  206. expect(inputs.eq(0).attr('name')).toBe('username');
  207. });
  208. it('should databind ngTableParams.filter to filter input', function () {
  209. scope.tableParams.filter()['username'] = 'my name is...';
  210. scope.$digest();
  211. var input = elm.find('thead').find('tr').eq(1).find('th').find('input');
  212. expect(input.val()).toBe('my name is...');
  213. });
  214. });
  215. describe('multiple filter inputs', function(){
  216. beforeEach(inject(function($compile, NgTableParams) {
  217. scope.cols = [
  218. { field: 'name', filter: {name: 'text', age: 'text'} }
  219. ];
  220. scope.tableParams = new NgTableParams({}, {});
  221. $compile(elm)(scope);
  222. scope.$digest();
  223. }));
  224. it('should render filter template for each key/value pair ordered by key', function() {
  225. var inputs = elm.find('thead').find('tr').eq(1).find('th').find('input');
  226. expect(inputs.length).toBe(2);
  227. expect(inputs.eq(0).attr('type')).toBe('text');
  228. expect(inputs.eq(0).attr('ng-model')).not.toBeUndefined();
  229. expect(inputs.eq(1).attr('type')).toBe('text');
  230. expect(inputs.eq(1).attr('ng-model')).not.toBeUndefined();
  231. });
  232. it('should databind ngTableParams.filter to filter inputs', function () {
  233. scope.tableParams.filter()['name'] = 'my name is...';
  234. scope.tableParams.filter()['age'] = '10';
  235. scope.$digest();
  236. var inputs = elm.find('thead').find('tr').eq(1).find('th').find('input');
  237. expect(inputs.eq(1).val()).toBe('my name is...');
  238. expect(inputs.eq(0).val()).toBe('10');
  239. });
  240. });
  241. describe('dynamic filter', function(){
  242. var ageFilter;
  243. beforeEach(inject(function($compile, NgTableParams) {
  244. ageFilter = { age: 'text'};
  245. function getFilter(paramsScope){
  246. if (paramsScope.$column.title() === 'Name of user') {
  247. return {username: 'text'};
  248. } else if (paramsScope.$column.title() === 'Age') {
  249. return ageFilter;
  250. }
  251. }
  252. scope.cols = [
  253. { field: 'name', title: 'Name of user', filter: getFilter },
  254. { field: 'age', title: 'Age', filter: getFilter }
  255. ];
  256. scope.tableParams = new NgTableParams({}, {});
  257. $compile(elm)(scope);
  258. scope.$digest();
  259. }));
  260. it('should render named filter template', function() {
  261. var usernameInput = elm.find('thead').find('tr').eq(1).find('th').eq(0).find('input');
  262. expect(usernameInput.attr('type')).toBe('text');
  263. expect(usernameInput.attr('name')).toBe('username');
  264. var ageInput = elm.find('thead').find('tr').eq(1).find('th').eq(1).find('input');
  265. expect(ageInput.attr('type')).toBe('text');
  266. expect(ageInput.attr('name')).toBe('age');
  267. });
  268. it('should databind ngTableParams.filter to filter input', function () {
  269. scope.tableParams.filter()['username'] = 'my name is...';
  270. scope.tableParams.filter()['age'] = '10';
  271. scope.$digest();
  272. var usernameInput = elm.find('thead').find('tr').eq(1).find('th').eq(0).find('input');
  273. expect(usernameInput.val()).toBe('my name is...');
  274. var ageInput = elm.find('thead').find('tr').eq(1).find('th').eq(1).find('input');
  275. expect(ageInput.val()).toBe('10');
  276. });
  277. it('should render new template as filter changes', inject(function($compile) {
  278. var scriptTemplate = angular.element(
  279. '<script type="text/ng-template" id="ng-table/filters/number.html"><input type="number" name="{{name}}"/></script>');
  280. $compile(scriptTemplate)(scope);
  281. ageFilter.age = 'number';
  282. scope.$digest();
  283. var ageInput = elm.find('thead').find('tr').eq(1).find('th').eq(1).find('input');
  284. expect(ageInput.attr('type')).toBe('number');
  285. expect(ageInput.attr('name')).toBe('age');
  286. }));
  287. });
  288. });
  289. });