Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 1 | /** |
| 2 | * © OpenCORD |
| 3 | * |
| 4 | * Created by teone on 3/24/16. |
| 5 | */ |
| 6 | |
| 7 | (function () { |
| 8 | 'use strict'; |
| 9 | |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 10 | var scope, element, isolatedScope, rootScope, compile; |
| 11 | const compileElement = () => { |
| 12 | |
| 13 | if(!scope){ |
| 14 | scope = rootScope.$new(); |
| 15 | } |
| 16 | |
| 17 | element = angular.element('<xos-table config="config" data="data"></xos-table>'); |
| 18 | compile(element)(scope); |
| 19 | scope.$digest(); |
| 20 | isolatedScope = element.isolateScope().vm; |
| 21 | } |
| 22 | |
| 23 | |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 24 | describe('The xos.helper module', function(){ |
| 25 | describe('The xos-table component', () => { |
| 26 | |
| 27 | beforeEach(module('xos.helpers')); |
| 28 | |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 29 | beforeEach(inject(function ($compile, $rootScope) { |
| 30 | compile = $compile; |
| 31 | rootScope = $rootScope; |
| 32 | })); |
| 33 | |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 34 | it('should throw an error if no config is specified', inject(($compile, $rootScope) => { |
| 35 | function errorFunctionWrapper(){ |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 36 | compileElement(); |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 37 | } |
| 38 | expect(errorFunctionWrapper).toThrow(new Error('[xosTable] Please provide a configuration via the "config" attribute')); |
| 39 | })); |
| 40 | |
| 41 | it('should throw an error if no config columns are specified', inject(($compile, $rootScope) => { |
| 42 | function errorFunctionWrapper(){ |
| 43 | // setup the parent scope |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 44 | scope = $rootScope.$new(); |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 45 | scope.config = 'green'; |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 46 | compileElement(); |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 47 | } |
| 48 | expect(errorFunctionWrapper).toThrow(new Error('[xosTable] Please provide a columns list in the configuration')); |
| 49 | })); |
| 50 | |
Matteo Scandolo | 6a6586e | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 51 | describe('when basicly configured', function() { |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 52 | |
Matteo Scandolo | 6a6586e | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 53 | beforeEach(inject(function ($compile, $rootScope) { |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 54 | |
Matteo Scandolo | 6a6586e | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 55 | scope = $rootScope.$new(); |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 56 | |
Matteo Scandolo | 6a6586e | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 57 | scope.config = { |
| 58 | columns: [ |
| 59 | { |
| 60 | label: 'Label 1', |
| 61 | prop: 'label-1' |
| 62 | }, |
| 63 | { |
| 64 | label: 'Label 2', |
| 65 | prop: 'label-2' |
| 66 | } |
| 67 | ] |
| 68 | }; |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 69 | |
Matteo Scandolo | 6a6586e | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 70 | scope.data = [ |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 71 | { |
Matteo Scandolo | 6a6586e | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 72 | 'label-1': 'Sample 1.1', |
| 73 | 'label-2': 'Sample 1.2' |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 74 | }, |
| 75 | { |
Matteo Scandolo | 6a6586e | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 76 | 'label-1': 'Sample 2.1', |
| 77 | 'label-2': 'Sample 2.2' |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 78 | } |
| 79 | ] |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 80 | |
Matteo Scandolo | 6a6586e | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 81 | element = angular.element('<xos-table config="config" data="data"></xos-table>'); |
| 82 | $compile(element)(scope); |
| 83 | scope.$digest(); |
| 84 | isolatedScope = element.isolateScope().vm; |
| 85 | })); |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 86 | |
Matteo Scandolo | 6a6586e | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 87 | it('should contain 2 columns', function() { |
| 88 | var th = element[0].getElementsByTagName('th'); |
| 89 | expect(th.length).toEqual(2); |
| 90 | expect(isolatedScope.columns.length).toEqual(2); |
| 91 | }); |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 92 | |
Matteo Scandolo | 6a6586e | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 93 | it('should contain 3 rows', function() { |
| 94 | var tr = element[0].getElementsByTagName('tr'); |
| 95 | expect(tr.length).toEqual(3); |
| 96 | }); |
| 97 | |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 98 | it('should render labels', () => { |
| 99 | let label1 = $(element).find('thead tr th')[0] |
| 100 | let label2 = $(element).find('thead tr th')[1] |
| 101 | expect($(label1).text().trim()).toEqual('Label 1'); |
| 102 | expect($(label2).text().trim()).toEqual('Label 2'); |
| 103 | }); |
| 104 | |
Matteo Scandolo | fb5937d | 2016-04-15 14:27:54 -0700 | [diff] [blame] | 105 | describe('when no data are provided', () => { |
| 106 | beforeEach(() => { |
| 107 | isolatedScope.data = []; |
| 108 | scope.$digest(); |
| 109 | }); |
| 110 | it('should render an alert', () => { |
| 111 | let alert = element[0].getElementsByClassName('alert'); |
| 112 | let table = element[0].getElementsByTagName('table'); |
| 113 | expect(alert.length).toEqual(1); |
| 114 | expect(table.length).toEqual(1); |
| 115 | }); |
| 116 | }); |
| 117 | |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 118 | describe('when a field type is provided', () => { |
Matteo Scandolo | 250a29c | 2016-04-27 17:26:21 -0700 | [diff] [blame] | 119 | describe('and is boolean', () => { |
| 120 | beforeEach(() => { |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 121 | scope.config = { |
Matteo Scandolo | 250a29c | 2016-04-27 17:26:21 -0700 | [diff] [blame] | 122 | columns: [ |
| 123 | { |
| 124 | label: 'Label 1', |
| 125 | prop: 'label-1', |
| 126 | type: 'boolean' |
| 127 | } |
| 128 | ] |
| 129 | }; |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 130 | scope.data = [ |
Matteo Scandolo | 250a29c | 2016-04-27 17:26:21 -0700 | [diff] [blame] | 131 | { |
| 132 | 'label-1': true |
| 133 | }, |
| 134 | { |
| 135 | 'label-1': false |
| 136 | } |
| 137 | ]; |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 138 | compileElement(); |
Matteo Scandolo | 250a29c | 2016-04-27 17:26:21 -0700 | [diff] [blame] | 139 | }); |
| 140 | |
| 141 | it('should render an incon', () => { |
| 142 | let td1 = $(element).find('tbody tr:first-child td')[0]; |
| 143 | let td2 = $(element).find('tbody tr:last-child td')[0]; |
Matteo Scandolo | 250a29c | 2016-04-27 17:26:21 -0700 | [diff] [blame] | 144 | expect($(td1).find('i')).toHaveClass('glyphicon-ok'); |
| 145 | expect($(td2).find('i')).toHaveClass('glyphicon-remove'); |
| 146 | }); |
| 147 | }); |
| 148 | |
| 149 | describe('and is date', () => { |
| 150 | beforeEach(() => { |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 151 | scope.config = { |
Matteo Scandolo | 250a29c | 2016-04-27 17:26:21 -0700 | [diff] [blame] | 152 | columns: [ |
| 153 | { |
| 154 | label: 'Label 1', |
| 155 | prop: 'label-1', |
| 156 | type: 'date' |
| 157 | } |
| 158 | ] |
| 159 | }; |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 160 | scope.data = [ |
Matteo Scandolo | 250a29c | 2016-04-27 17:26:21 -0700 | [diff] [blame] | 161 | { |
| 162 | 'label-1': '2015-02-17T22:06:38.059000Z' |
| 163 | } |
| 164 | ]; |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 165 | compileElement(); |
Matteo Scandolo | 250a29c | 2016-04-27 17:26:21 -0700 | [diff] [blame] | 166 | }); |
| 167 | |
| 168 | it('should render an formatted date', () => { |
| 169 | let td1 = $(element).find('tbody tr:first-child td')[0]; |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 170 | expect($(td1).text().trim()).toEqual('14:06 Feb 17, 2015'); |
| 171 | }); |
| 172 | }); |
| 173 | |
| 174 | describe('and is array', () => { |
| 175 | beforeEach(() => { |
| 176 | scope.data = [ |
| 177 | {categories: ['Film', 'Music']} |
| 178 | ]; |
| 179 | scope.config = { |
| 180 | columns: [ |
| 181 | { |
| 182 | label: 'Categories', |
| 183 | prop: 'categories', |
| 184 | type: 'array' |
| 185 | } |
| 186 | ] |
| 187 | } |
| 188 | compileElement(); |
| 189 | }); |
| 190 | it('should render a comma separated list', () => { |
| 191 | let td1 = $(element).find('tbody tr:first-child')[0]; |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 192 | expect($(td1).text().trim()).toEqual('Film, Music'); |
| 193 | }); |
| 194 | }); |
| 195 | |
Matteo Scandolo | e5d7456 | 2016-05-06 10:08:34 -0700 | [diff] [blame] | 196 | describe('and is object', () => { |
| 197 | beforeEach(() => { |
| 198 | scope.data = [ |
| 199 | { |
| 200 | attributes: { |
| 201 | age: 20, |
| 202 | height: 50 |
| 203 | } |
| 204 | } |
| 205 | ]; |
| 206 | scope.config = { |
| 207 | columns: [ |
| 208 | { |
| 209 | label: 'Categories', |
| 210 | prop: 'attributes', |
| 211 | type: 'object' |
| 212 | } |
| 213 | ] |
| 214 | } |
| 215 | compileElement(); |
| 216 | }); |
| 217 | it('should render a list of key-values', () => { |
| 218 | let td = $(element).find('tbody tr:first-child')[0]; |
Matteo Scandolo | 7ebd1bf | 2016-05-06 11:39:56 -0700 | [diff] [blame] | 219 | let ageLabel = $(td).find('dl dt')[0]; |
| 220 | let ageValue = $(td).find('dl dd')[0]; |
| 221 | let heightLabel = $(td).find('dl dt')[1]; |
| 222 | let heightValue = $(td).find('dl dd')[1]; |
Matteo Scandolo | e5d7456 | 2016-05-06 10:08:34 -0700 | [diff] [blame] | 223 | expect($(ageLabel).text().trim()).toEqual('age'); |
| 224 | expect($(ageValue).text().trim()).toEqual('20'); |
| 225 | expect($(heightLabel).text().trim()).toEqual('height'); |
| 226 | expect($(heightValue).text().trim()).toEqual('50'); |
| 227 | }); |
| 228 | }); |
| 229 | |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 230 | describe('and is custom', () => { |
Matteo Scandolo | b4fdd0a | 2016-05-09 15:27:47 -0700 | [diff] [blame^] | 231 | |
| 232 | let formatterFn = jasmine.createSpy('formatter').and.returnValue('Formatted Content'); |
| 233 | |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 234 | beforeEach(() => { |
| 235 | scope.data = [ |
| 236 | {categories: ['Film', 'Music']} |
| 237 | ]; |
| 238 | scope.config = { |
| 239 | columns: [ |
| 240 | { |
| 241 | label: 'Categories', |
| 242 | prop: 'categories', |
| 243 | type: 'custom', |
Matteo Scandolo | b4fdd0a | 2016-05-09 15:27:47 -0700 | [diff] [blame^] | 244 | formatter: formatterFn |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 245 | } |
| 246 | ] |
| 247 | } |
| 248 | compileElement(); |
| 249 | }); |
| 250 | |
| 251 | it('should check for a formatter property', () => { |
| 252 | function errorFunctionWrapper(){ |
| 253 | // setup the parent scope |
| 254 | scope = rootScope.$new(); |
| 255 | scope.config = { |
| 256 | columns: [ |
| 257 | { |
| 258 | label: 'Categories', |
| 259 | prop: 'categories', |
| 260 | type: 'custom' |
| 261 | } |
| 262 | ] |
| 263 | }; |
| 264 | compileElement(); |
| 265 | } |
| 266 | expect(errorFunctionWrapper).toThrow(new Error('[xosTable] You have provided a custom field type, a formatter function should provided too.')); |
| 267 | }); |
| 268 | |
Matteo Scandolo | abb7562 | 2016-05-06 13:09:19 -0700 | [diff] [blame] | 269 | it('should check that the formatter property is a function', () => { |
| 270 | function errorFunctionWrapper(){ |
| 271 | // setup the parent scope |
| 272 | scope = rootScope.$new(); |
| 273 | scope.config = { |
| 274 | columns: [ |
| 275 | { |
| 276 | label: 'Categories', |
| 277 | prop: 'categories', |
| 278 | type: 'custom', |
| 279 | formatter: 'formatter' |
| 280 | } |
| 281 | ] |
| 282 | }; |
| 283 | compileElement(); |
| 284 | } |
| 285 | expect(errorFunctionWrapper).toThrow(new Error('[xosTable] You have provided a custom field type, a formatter function should provided too.')); |
| 286 | }); |
| 287 | |
Matteo Scandolo | 8cd182a | 2016-05-06 09:42:45 -0700 | [diff] [blame] | 288 | it('should format data using the formatter property', () => { |
| 289 | let td1 = $(element).find('tbody tr:first-child')[0]; |
| 290 | expect($(td1).text().trim()).toEqual('Formatted Content'); |
Matteo Scandolo | b4fdd0a | 2016-05-09 15:27:47 -0700 | [diff] [blame^] | 291 | // the custom formatted should receive the entire object, otherwise is not so custom |
| 292 | expect(formatterFn).toHaveBeenCalledWith({categories: ['Film', 'Music']}); |
Matteo Scandolo | 250a29c | 2016-04-27 17:26:21 -0700 | [diff] [blame] | 293 | }); |
| 294 | }); |
| 295 | }); |
| 296 | |
Matteo Scandolo | abb7562 | 2016-05-06 13:09:19 -0700 | [diff] [blame] | 297 | describe('when a link property is provided', () => { |
| 298 | beforeEach(() => { |
| 299 | scope.data = [ |
| 300 | { |
| 301 | id: 1} |
| 302 | ]; |
| 303 | scope.config = { |
| 304 | columns: [ |
| 305 | { |
| 306 | label: 'Id', |
| 307 | prop: 'id', |
| 308 | link: (item) => { |
| 309 | return `/link/${item.id}`; |
| 310 | } |
| 311 | } |
| 312 | ] |
| 313 | } |
| 314 | compileElement(); |
| 315 | }); |
| 316 | |
| 317 | it('should check that the link property is a function', () => { |
| 318 | function errorFunctionWrapper(){ |
| 319 | // setup the parent scope |
| 320 | scope = rootScope.$new(); |
| 321 | scope.config = { |
| 322 | columns: [ |
| 323 | { |
| 324 | label: 'Categories', |
| 325 | prop: 'categories', |
| 326 | link: 'custom' |
| 327 | } |
| 328 | ] |
| 329 | }; |
| 330 | compileElement(); |
| 331 | } |
| 332 | expect(errorFunctionWrapper).toThrow(new Error('[xosTable] The link property should be a function.')); |
| 333 | }); |
| 334 | |
Matteo Scandolo | b4fdd0a | 2016-05-09 15:27:47 -0700 | [diff] [blame^] | 335 | it('should render a link with the correct url', () => { |
Matteo Scandolo | abb7562 | 2016-05-06 13:09:19 -0700 | [diff] [blame] | 336 | let link = $(element).find('tbody tr:first-child td a')[0]; |
| 337 | expect($(link).attr('href')).toEqual('/link/1'); |
| 338 | }); |
| 339 | }); |
| 340 | |
Matteo Scandolo | 6a6586e | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 341 | describe('when actions are passed', () => { |
| 342 | |
| 343 | let cb = jasmine.createSpy('callback') |
| 344 | |
| 345 | beforeEach(() => { |
| 346 | isolatedScope.config.actions = [ |
| 347 | { |
| 348 | label: 'delete', |
| 349 | icon: 'remove', |
| 350 | cb: cb, |
| 351 | color: 'red' |
| 352 | } |
| 353 | ]; |
| 354 | scope.$digest(); |
| 355 | }); |
| 356 | |
| 357 | it('should have 3 columns', () => { |
| 358 | var th = element[0].getElementsByTagName('th'); |
| 359 | expect(th.length).toEqual(3); |
| 360 | expect(isolatedScope.columns.length).toEqual(2); |
| 361 | }); |
| 362 | |
| 363 | it('when clicking on action should invoke callback', () => { |
| 364 | var link = element[0].getElementsByTagName('a')[0]; |
| 365 | link.click(); |
| 366 | expect(cb).toHaveBeenCalledWith(scope.data[0]); |
| 367 | }); |
| 368 | }); |
| 369 | |
| 370 | describe('when filter is fulltext', () => { |
| 371 | beforeEach(() => { |
| 372 | isolatedScope.config.filter = 'fulltext'; |
| 373 | scope.$digest(); |
| 374 | }); |
| 375 | |
| 376 | it('should render a text field', () => { |
| 377 | var textField = element[0].getElementsByTagName('input'); |
| 378 | expect(textField.length).toEqual(1); |
| 379 | }); |
| 380 | |
| 381 | describe('and a value is enterd', () => { |
| 382 | beforeEach(() => { |
| 383 | isolatedScope.query = '2.2'; |
| 384 | scope.$digest(); |
| 385 | }); |
| 386 | |
| 387 | it('should contain 2 rows', function() { |
| 388 | var tr = element[0].getElementsByTagName('tr'); |
| 389 | expect(tr.length).toEqual(2); |
| 390 | }); |
| 391 | }); |
| 392 | }); |
| 393 | |
| 394 | describe('when filter is field', () => { |
| 395 | beforeEach(() => { |
| 396 | isolatedScope.config.filter = 'field'; |
| 397 | scope.$digest(); |
| 398 | }); |
| 399 | |
| 400 | it('should render a text field for each column', () => { |
| 401 | var textField = element[0].getElementsByTagName('input'); |
| 402 | expect(textField.length).toEqual(2); |
| 403 | }); |
| 404 | |
| 405 | describe('and a value is enterd', () => { |
| 406 | beforeEach(() => { |
| 407 | isolatedScope.query = {'label-1': '2.1'}; |
| 408 | scope.$digest(); |
| 409 | }); |
| 410 | |
| 411 | it('should contain 3 rows', function() { |
| 412 | var tr = element[0].getElementsByTagName('tr'); |
| 413 | expect(tr.length).toEqual(3); |
| 414 | }); |
| 415 | }); |
| 416 | }); |
Matteo Scandolo | f32a2e9 | 2016-04-14 17:19:08 -0700 | [diff] [blame] | 417 | |
| 418 | describe('when order is true', () => { |
| 419 | beforeEach(() => { |
| 420 | isolatedScope.config.order = true; |
| 421 | scope.$digest(); |
| 422 | }); |
| 423 | |
| 424 | it('should render a arrows beside', () => { |
| 425 | var arrows = element[0].getElementsByTagName('i'); |
| 426 | expect(arrows.length).toEqual(4); |
| 427 | }); |
| 428 | |
| 429 | describe('and an order is set', () => { |
| 430 | beforeEach(() => { |
| 431 | isolatedScope.orderBy = 'label-1'; |
| 432 | isolatedScope.reverse = true; |
| 433 | scope.$digest(); |
| 434 | }); |
| 435 | |
| 436 | it('should orderBy', function() { |
Matteo Scandolo | abb7562 | 2016-05-06 13:09:19 -0700 | [diff] [blame] | 437 | var tr = $(element).find('tr'); |
| 438 | expect($(tr[1]).text()).toContain('Sample 2.2'); |
| 439 | expect($(tr[2]).text()).toContain('Sample 1.1'); |
Matteo Scandolo | f32a2e9 | 2016-04-14 17:19:08 -0700 | [diff] [blame] | 440 | }); |
| 441 | }); |
| 442 | }); |
Matteo Scandolo | a7e64fd | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 443 | }); |
| 444 | }); |
| 445 | }); |
| 446 | })(); |
| 447 | |