Matteo Scandolo | 9e6c6fc | 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 | f9700a3 | 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 | 9e6c6fc | 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 | f9700a3 | 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 | 9e6c6fc | 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 | f9700a3 | 2016-05-06 09:42:45 -0700 | [diff] [blame^] | 36 | compileElement(); |
Matteo Scandolo | 9e6c6fc | 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 | f9700a3 | 2016-05-06 09:42:45 -0700 | [diff] [blame^] | 44 | scope = $rootScope.$new(); |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 45 | scope.config = 'green'; |
Matteo Scandolo | f9700a3 | 2016-05-06 09:42:45 -0700 | [diff] [blame^] | 46 | compileElement(); |
Matteo Scandolo | 9e6c6fc | 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 | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 51 | describe('when basicly configured', function() { |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 52 | |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 53 | beforeEach(inject(function ($compile, $rootScope) { |
Matteo Scandolo | f9700a3 | 2016-05-06 09:42:45 -0700 | [diff] [blame^] | 54 | |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 55 | scope = $rootScope.$new(); |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 56 | |
Matteo Scandolo | a6a9e61 | 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 | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 69 | |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 70 | scope.data = [ |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 71 | { |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 72 | 'label-1': 'Sample 1.1', |
| 73 | 'label-2': 'Sample 1.2' |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 74 | }, |
| 75 | { |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 76 | 'label-1': 'Sample 2.1', |
| 77 | 'label-2': 'Sample 2.2' |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 78 | } |
| 79 | ] |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 80 | |
Matteo Scandolo | a6a9e61 | 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 | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 86 | |
Matteo Scandolo | a6a9e61 | 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 | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 92 | |
Matteo Scandolo | a6a9e61 | 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 | f9700a3 | 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 | e15a820 | 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 | f9700a3 | 2016-05-06 09:42:45 -0700 | [diff] [blame^] | 118 | describe('when a field type is provided', () => { |
Matteo Scandolo | eabfb71 | 2016-04-27 17:26:21 -0700 | [diff] [blame] | 119 | describe('and is boolean', () => { |
| 120 | beforeEach(() => { |
Matteo Scandolo | f9700a3 | 2016-05-06 09:42:45 -0700 | [diff] [blame^] | 121 | scope.config = { |
Matteo Scandolo | eabfb71 | 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 | f9700a3 | 2016-05-06 09:42:45 -0700 | [diff] [blame^] | 130 | scope.data = [ |
Matteo Scandolo | eabfb71 | 2016-04-27 17:26:21 -0700 | [diff] [blame] | 131 | { |
| 132 | 'label-1': true |
| 133 | }, |
| 134 | { |
| 135 | 'label-1': false |
| 136 | } |
| 137 | ]; |
Matteo Scandolo | f9700a3 | 2016-05-06 09:42:45 -0700 | [diff] [blame^] | 138 | compileElement(); |
Matteo Scandolo | eabfb71 | 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 | eabfb71 | 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 | f9700a3 | 2016-05-06 09:42:45 -0700 | [diff] [blame^] | 151 | scope.config = { |
Matteo Scandolo | eabfb71 | 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 | f9700a3 | 2016-05-06 09:42:45 -0700 | [diff] [blame^] | 160 | scope.data = [ |
Matteo Scandolo | eabfb71 | 2016-04-27 17:26:21 -0700 | [diff] [blame] | 161 | { |
| 162 | 'label-1': '2015-02-17T22:06:38.059000Z' |
| 163 | } |
| 164 | ]; |
Matteo Scandolo | f9700a3 | 2016-05-06 09:42:45 -0700 | [diff] [blame^] | 165 | compileElement(); |
Matteo Scandolo | eabfb71 | 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 | f9700a3 | 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]; |
| 192 | // console.log(td1); |
| 193 | expect($(td1).text().trim()).toEqual('Film, Music'); |
| 194 | }); |
| 195 | }); |
| 196 | |
| 197 | describe('and is custom', () => { |
| 198 | beforeEach(() => { |
| 199 | scope.data = [ |
| 200 | {categories: ['Film', 'Music']} |
| 201 | ]; |
| 202 | scope.config = { |
| 203 | columns: [ |
| 204 | { |
| 205 | label: 'Categories', |
| 206 | prop: 'categories', |
| 207 | type: 'custom', |
| 208 | formatter: val => 'Formatted Content' |
| 209 | } |
| 210 | ] |
| 211 | } |
| 212 | compileElement(); |
| 213 | }); |
| 214 | |
| 215 | it('should check for a formatter property', () => { |
| 216 | function errorFunctionWrapper(){ |
| 217 | // setup the parent scope |
| 218 | scope = rootScope.$new(); |
| 219 | scope.config = { |
| 220 | columns: [ |
| 221 | { |
| 222 | label: 'Categories', |
| 223 | prop: 'categories', |
| 224 | type: 'custom' |
| 225 | } |
| 226 | ] |
| 227 | }; |
| 228 | compileElement(); |
| 229 | } |
| 230 | expect(errorFunctionWrapper).toThrow(new Error('[xosTable] You have provided a custom field type, a formatter function should provided too.')); |
| 231 | }); |
| 232 | |
| 233 | it('should format data using the formatter property', () => { |
| 234 | let td1 = $(element).find('tbody tr:first-child')[0]; |
| 235 | expect($(td1).text().trim()).toEqual('Formatted Content'); |
Matteo Scandolo | eabfb71 | 2016-04-27 17:26:21 -0700 | [diff] [blame] | 236 | }); |
| 237 | }); |
| 238 | }); |
| 239 | |
Matteo Scandolo | a6a9e61 | 2016-04-14 16:52:13 -0700 | [diff] [blame] | 240 | describe('when actions are passed', () => { |
| 241 | |
| 242 | let cb = jasmine.createSpy('callback') |
| 243 | |
| 244 | beforeEach(() => { |
| 245 | isolatedScope.config.actions = [ |
| 246 | { |
| 247 | label: 'delete', |
| 248 | icon: 'remove', |
| 249 | cb: cb, |
| 250 | color: 'red' |
| 251 | } |
| 252 | ]; |
| 253 | scope.$digest(); |
| 254 | }); |
| 255 | |
| 256 | it('should have 3 columns', () => { |
| 257 | var th = element[0].getElementsByTagName('th'); |
| 258 | expect(th.length).toEqual(3); |
| 259 | expect(isolatedScope.columns.length).toEqual(2); |
| 260 | }); |
| 261 | |
| 262 | it('when clicking on action should invoke callback', () => { |
| 263 | var link = element[0].getElementsByTagName('a')[0]; |
| 264 | link.click(); |
| 265 | expect(cb).toHaveBeenCalledWith(scope.data[0]); |
| 266 | }); |
| 267 | }); |
| 268 | |
| 269 | describe('when filter is fulltext', () => { |
| 270 | beforeEach(() => { |
| 271 | isolatedScope.config.filter = 'fulltext'; |
| 272 | scope.$digest(); |
| 273 | }); |
| 274 | |
| 275 | it('should render a text field', () => { |
| 276 | var textField = element[0].getElementsByTagName('input'); |
| 277 | expect(textField.length).toEqual(1); |
| 278 | }); |
| 279 | |
| 280 | describe('and a value is enterd', () => { |
| 281 | beforeEach(() => { |
| 282 | isolatedScope.query = '2.2'; |
| 283 | scope.$digest(); |
| 284 | }); |
| 285 | |
| 286 | it('should contain 2 rows', function() { |
| 287 | var tr = element[0].getElementsByTagName('tr'); |
| 288 | expect(tr.length).toEqual(2); |
| 289 | }); |
| 290 | }); |
| 291 | }); |
| 292 | |
| 293 | describe('when filter is field', () => { |
| 294 | beforeEach(() => { |
| 295 | isolatedScope.config.filter = 'field'; |
| 296 | scope.$digest(); |
| 297 | }); |
| 298 | |
| 299 | it('should render a text field for each column', () => { |
| 300 | var textField = element[0].getElementsByTagName('input'); |
| 301 | expect(textField.length).toEqual(2); |
| 302 | }); |
| 303 | |
| 304 | describe('and a value is enterd', () => { |
| 305 | beforeEach(() => { |
| 306 | isolatedScope.query = {'label-1': '2.1'}; |
| 307 | scope.$digest(); |
| 308 | }); |
| 309 | |
| 310 | it('should contain 3 rows', function() { |
| 311 | var tr = element[0].getElementsByTagName('tr'); |
| 312 | expect(tr.length).toEqual(3); |
| 313 | }); |
| 314 | }); |
| 315 | }); |
Matteo Scandolo | 03e5960 | 2016-04-14 17:19:08 -0700 | [diff] [blame] | 316 | |
| 317 | describe('when order is true', () => { |
| 318 | beforeEach(() => { |
| 319 | isolatedScope.config.order = true; |
| 320 | scope.$digest(); |
| 321 | }); |
| 322 | |
| 323 | it('should render a arrows beside', () => { |
| 324 | var arrows = element[0].getElementsByTagName('i'); |
| 325 | expect(arrows.length).toEqual(4); |
| 326 | }); |
| 327 | |
| 328 | describe('and an order is set', () => { |
| 329 | beforeEach(() => { |
| 330 | isolatedScope.orderBy = 'label-1'; |
| 331 | isolatedScope.reverse = true; |
| 332 | scope.$digest(); |
| 333 | }); |
| 334 | |
| 335 | it('should orderBy', function() { |
| 336 | var tr = element[0].getElementsByTagName('tr'); |
| 337 | expect(angular.element(tr[1]).text()).toContain('Sample 2.2'); |
| 338 | expect(angular.element(tr[2]).text()).toContain('Sample 1.1'); |
| 339 | }); |
| 340 | }); |
| 341 | }); |
Matteo Scandolo | 9e6c6fc | 2016-04-14 14:59:09 -0700 | [diff] [blame] | 342 | }); |
| 343 | }); |
| 344 | }); |
| 345 | })(); |
| 346 | |