test-formhandler.html 49.1 KB
Newer Older
S Anand's avatar
S Anand committed
1
2
<!DOCTYPE html>
<html>
3

S Anand's avatar
S Anand committed
4
5
6
<head>
  <title>formhandler tests</title>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
7
8
  <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
  <style>
9
10
11
12
13
14
15
16
17
18
19
20
21
    .position-relative {
      position: relative;
    }

    .pos-cc {
      position: absolute;
      top: 45%;
      left: 45%;
    }

    .d-none {
      display: none !important;
    }
22
  </style>
S Anand's avatar
S Anand committed
23
24
25
26
  <script src="../node_modules/jquery/dist/jquery.min.js"></script>
  <script src="../node_modules/popper.js/dist/umd/popper.min.js"></script>
  <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="../node_modules/lodash/lodash.min.js"></script>
27
28
  <script src="../node_modules/moment/min/moment.min.js"></script>
  <script src="../node_modules/numeral/min/numeral.min.js"></script>
S Anand's avatar
S Anand committed
29
30
31
  <script src="../node_modules/d3/build/d3.js"></script>
  <script src="../node_modules/d3-scale-chromatic/dist/d3-scale-chromatic.js"></script>
  <script src="../dist/g1.min.js"></script>
S Anand's avatar
S Anand committed
32
  <script src="tape.js"></script>
33
  <script src="tape-stream.js"></script>
S Anand's avatar
S Anand committed
34
</head>
35

S Anand's avatar
S Anand committed
36
<body>
37
38
39
  <div class="hide_col3" data-src="/test/formhandler_csv.json"></div>
  <div class="hide_col2" data-src="/test/formhandler_csv.json"></div>
  <div class="hide_col" data-src="/test/formhandler_csv.json"></div>
40

41
42
  <div class="cell_template1" data-src="/test/formhandler_csv.json"></div>
  <div class="cell_template2" data-src="/test/formhandler_csv.json"></div>
43

44
45
46
  <div class="test_star_overrride" data-src="/test/formhandler_csv.json"></div>
  <div class="test-star-without-title" data-src="/test/formhandler_csv.json"></div>
  <div class="test-star-with-title" data-src="/test/formhandler_csv.json"></div>
47
48


49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
  <div class="test_star_overrride" data-src="/formhandler-data"></div>
  <div class="test-star-without-title" data-src="/formhandler-data"></div>
  <div class="test-star-with-title" data-src="/formhandler-data"></div>
  <div class="add_row1" data-src="/formhandler-data"></div>

  <div class="row_template7" data-table="grid" data-src="/formhandler-data"></div>
  <div class="row_template6" data-src="/formhandler-data"></div>
  <div class="row_template5" data-src="/formhandler-data"></div>
  <div class="row_template4" data-src="/formhandler-data"></div>
  <div class="row_template3" data-src="/formhandler-data"></div>
  <div class="row_template2" data-src="/formhandler-data"></div>
  <div class="row_template1" data-src="/formhandler-data"></div>

  <div class="custom_buttons1" data-src="/formhandler-data"></div>
  <div class="custom_buttons2" data-src="/formhandler-data"></div>
  <div class="custom_buttons3" data-src="/formhandler-data"></div>
  <div class="custom_buttons4" data-src="/formhandler-data"></div>
  <div class="custom_buttons5" data-src="/formhandler-data"></div>

  <div class="fh17" data-src="/formhandler-data"></div>
  <div class="fh15" data-src="/formhandler-data"></div>
  <div class="fh16" data-src="/formhandler-data"></div>
  <div class="fh14" data-src="/formhandler-data"></div>
72
73
74
75
  <div class="hide_col3" data-src="/formhandler-data"></div>
  <div class="hide_col2" data-src="/formhandler-data"></div>
  <div class="hide_col" data-src="/formhandler-data"></div>

S Anand's avatar
S Anand committed
76
77
78
79
80
81
82
  <div class="cell_template1" data-src="/formhandler-data"></div>
  <div class="cell_template2" data-src="/formhandler-data"></div>
  <div class="cell_template3" data-src="/formhandler-data"></div>
  <div class="cell_template4" data-src="/formhandler-data"></div>
  <div class="cell_template5" data-src="/formhandler-data"></div>


S Anand's avatar
S Anand committed
83
  <div class="fh13" data-src="/formhandler-data"></div>
S Anand's avatar
S Anand committed
84

85
  <div class="fh1" data-src="formhandler_csv.json"></div>
86
87
88
  <div class="fh2"></div>
  <div class="fh3"></div>
  <div class="fh4" data-table="false" data-count="false" data-page="false" data-size="false" data-export="false" data-filters="false"></div>
89
90
91
92
93
  <div class="fh5" data-src="formhandler_csv.json"></div>
  <div class="fh6" data-src="formhandler_csv.json"></div>
  <div class="fh7" data-src="formhandler_csv.json"></div>
  <div class="fh8" data-src="formhandler_csv.json"></div>
  <div class="fh9" data-src="formhandler_csv.json"></div>
94
  <div class="fh10"></div>
95
96
97
98
99
100
101
102
  <div class="fh11" data-src="formhandler_csv.json"></div>
  <div class="fh12" data-src="formhandler_csv.json"></div>
  <div class="formhandler" data-src="formhandler_csv.json" data-page-size="10"></div>
  <div class="fhgrid1" data-table="grid" data-src="formhandler_csv.json"></div>
  <div class="fhgrid2" data-table="grid" data-src="formhandler_csv.json" data-icon="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZ1bqTcxkaGSSIl5meU4JYO1dvUVbqP71z0hH8M6f6Yh9JpZg8"></div>
  <div class="fhgrid3" data-table="grid" data-src="formhandler_csv.json" data-classes="formhandler-grid"></div>
  <div class="fhgrid4" data-table="grid" data-src="formhandler_csv.json"></div>
  <div class="fhgrid5" data-table="grid" data-src="formhandler_csv.json"></div>
S Anand's avatar
S Anand committed
103
  <script>
104
    tape('$().formhandler() basic example works', function (t) {
S Anand's avatar
S Anand committed
105
      $('.formhandler').formhandler({
106
        pageSize: 20
107
      }).on('load', function (e) {
108
109
        t.equals(e.options.pageSize, 10)
        // TODO: Review: if _limit is given in url, e.args._limit is [10] not 10
S Anand's avatar
S Anand committed
110
        // t.equals(e.args._limit, 10)
111
112
113
114
115
        t.ok(e.formdata.length > 0)
        t.equals($('.formhandler table tbody tr').length, e.formdata.length)
        t.end()
      })
    })
116
    tape('$().formhandler() renders data from data-src, overriding options.src', function (t) {
117
118
      $('.fh1')
        .formhandler({ src: 'formhandler-small.json' })
119
120
121
        .on('load', function (args) {
          // formhandler-small.json contains only two rows
          t.notEqual($('.fh1 tbody tr').length, 2)
122
123
124
          t.end()
        })
    })
125
    tape('$().formhandler() hide options doesnot display the column', function(t) {
126
127
      var class_count = 2
      t.plan(1 * class_count)
128
129
130
131
132
133
134
135
136
137
138
139
140
141
      $('.hide_col')
        .formhandler({
          columns: [
            {
              name: 'Continent',
              hide: true
            }
          ]
        })
        .on('load', function () {
          t.equals($('body > div.hide_col > div.position-relative > div.formhandler > div.table > table > thead').text().trim(), "")
        })
    })
    tape('$().formhandler() hide options doesnot display the column (using multiple columns)', function(t) {
142
143
144
      var class_count = 2
      var current_class_count = 0
      t.plan(2 * class_count)
145
146
147
148
149
150
151
152
153
154
155
156
157
158
      $('.hide_col2')
        .formhandler({
          columns: [
            {
              name: 'Continent',
              hide: true
            },
            {
              name: 'c1'
            }
          ],
          pageSize: 3
        })
        .on('load', function () {
159
160
          current_class_count += 1
          t.equals($("body > div.hide_col2 > div.position-relative > div.formhandler > div.table > table > thead > tr").length, current_class_count)
161
162
163
164
          t.ok($("body > div.hide_col2 > div.position-relative > div.formhandler > div.table > table > thead > tr").text().startsWith(" c1"))
        })
    })
    tape('$().formhandler() hide options doesnot display the column (using * all columns)', function(t) {
165
166
167
      var class_count = 1
      var current_class_count = 0
      t.plan(2* class_count)
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
      $('.hide_col3')
        .formhandler({
          columns: [
            {
              name: '*'
            },
            {
              name: 'Continent',
              hide: true
            },
            {
              name: 'c1'
            }
          ],
          pageSize: 3
        })
        .on('load', function () {
185
186
187
188
189
          current_class_count += 1
          if(current_class_count == 2) {
            t.equals($('[data-col="Continent"]', $("body > div.hide_col3 > div.position-relative > div.formhandler > div.table > table > thead > tr")).length, 0)
            t.ok($('[data-col]', $("body > div.hide_col3 > div.position-relative > div.formhandler > div.table > table > thead > tr")).length > 0)
          }
190
191
        })
    })
192
    tape('$().formhandler() uses option.src if no data-src exists', function (t) {
193
194
195
196
197
198
199
      $('.fh2')
        .formhandler({ src: 'formhandler-small.json' })
        .on('load', function () {
          t.equal($('.fh2 tbody tr').length, 2)
          t.end()
        })
    })
200
    tape('$().formhandler() shows default controls if meta is present', function (t) {
201
202
203
      $('.fh3')
        .formhandler({
          src: 'formhandler-small.json',
204
          transform: function (obj) {
205
206
207
            obj.meta.count = obj.meta.limit = obj.data.length
          }
        })
208
        .on('load', function () {
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
          t.equal($('.fh3 tbody tr').length, 2)
          t.equal($('.fh3 .count').length, 1)
          t.ok($('.fh3 .count').text().match(/2 rows/))

          t.equal($('.fh3 .page').length, 1)
          t.ok($('.fh3 .page').text().match(/Previous.*Next/))

          t.equal($('.fh3 .size').length, 1)
          t.ok($('.fh3 .size').text().match(/2 rows/))

          t.equal($('.fh3 .filters').length, 1)

          t.equal($('.fh3 .export').length, 1)
          t.ok($('.fh3 .export').text().match(/Export as/))

          t.end()
        })
    })

228
    tape('$().formhandler() disables controls via data-attributes', function (t) {
229
230
231
      $('.fh4')
        .formhandler({
          src: 'formhandler-small.json',
232
          transform: function (obj) {
233
234
235
            obj.meta.count = obj.meta.limit = obj.data.length
          }
        })
236
        .on('load', function () {
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
          t.equal($('.fh4 .table').html(), '')
          t.equal($('.fh4 .count').html(), '')
          t.equal($('.fh4 .page').html(), '')
          t.equal($('.fh4 .size').html(), '')
          t.equal($('.fh4 .filters').html(), '')
          t.equal($('.fh4 .export').html(), '')
          t.end()
        })
    })
    tape('$().formhandler() applies {sort: true, hideable: false} option mentioned in options.columns', function (t) {
      $('.fh5')
        .formhandler({
          columns: [
            { name: 'Continent', sort: true, hideable: false }
          ]
        })
        .on('load', function () {
          // display only Continent column
          t.equal($('.fh5 thead tr th').length, 1)
          t.equal($('.fh5 [data-col="Continent"] div:nth-child(1) div a:nth-child(1)').text().trim(), "Sort ascending")
          t.equal($('.fh5 [data-col="Continent"] div:nth-child(1) div a:nth-child(2)').text().trim(), "Sort descending")
          t.notEqual($('.fh5 [data-col="Continent"] div:nth-child(1) div a:last-of-type').text().trim(), "Hide")

          t.end()
        })
    })
    tape('$().formhandler() allows updating column info only for specific columns', function (t) {
      $('.fh6')
        .formhandler({
          columns: [
            { name: 'Continent', title: 'CustomTitle', sort: true },
            { name: '*' }
          ]
        })
        .on('load', function () {
          // no. of columns in meta data must be same as rendered columns
273
          t.equal($('.fh6 thead tr th').length, 18)
274
275
276
277
278
279
280
281
282
          // there should not be a column with name 'Continent'
          t.notOk($('.fh6 thead tr').text().match(/Continent/))
          // there shoudl be a column with name 'CustomTitle'
          t.ok($('.fh6 thead tr').text().match(/CustomTitle/))
          // column is hideable by default
          t.equal($('.fh6 [data-col="Continent"] div:nth-child(1) div a:last-of-type').text().trim(), "Hide")
          t.end()
        })
    })
283
    tape('$().formhandler() allows updating column info only for specific columns override test', function (t) {
284
285
286
      var class_count = 2
      var current_class_count = 0
      t.plan(6 * class_count)
287
288
289
290
291
292
293
294
      $('.test_star_overrride')
        .formhandler({
          columns: [
            { name: 'Continent', title: 'CustomTitle', sort: true },
            { name: '*', title: 'SameName' }
          ]
        })
        .on('load', function () {
295
          current_class_count += 1
296
          // no. of columns in meta data must be same as rendered columns
297
          t.equal($('.test_star_overrride thead tr th').length, 18 * current_class_count)
298
299
300
301
          // there should not be a column with name 'Continent'
          t.notOk($('.test_star_overrride thead tr').text().match(/Continent/))
          // there shoudl be a column with name 'CustomTitle'
          t.ok($('.test_star_overrride thead tr').text().match(/CustomTitle/))
302
          t.equal($('.test_star_overrride thead tr').text().match(/CustomTitle/).length, 1)
303
          // Rest of 16 columns must have title as 'SameName'
304
          t.equal($('.test_star_overrride thead tr').text().split('SameName').length - 1, 17 * current_class_count)
305
          // column is hideable by default
306
          t.equal($('.test_star_overrride [data-col="Continent"] div:nth-child(1) div a:last-of-type').text().trim(), "Hide".repeat(current_class_count))
307
308
        })
    })
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
    tape('$().formhandler() applies {sort: false} option mentioned in options.columns', function (t) {
      $('.fh7')
        .formhandler({
          columns: [
            { name: 'Continent', sort: false }
          ]
        })
        .on('load', function () {
          // no. of columns in meta data must be same as rendered columns
          t.equal($('.fh7 thead tr th').length, 1)
          t.notEqual($('.fh7 [data-col="Continent"] div:nth-child(1) div a:nth-child(1)').text().trim(), "Sort ascending")
          t.notEqual($('.fh7 [data-col="Continent"] div:nth-child(1) div a:nth-child(2)').text().trim(), "Sort descending")
          t.end()
        })
    })
    tape('$().formhandler() ---- applies custom sorting names option mentioned in options.columns', function (t) {
      $('.fh8')
        .formhandler({
          columns: [
            { name: 'Continent', sort: { '': 'Sort by Alphabet', '-': 'Sort reverse alphabet' } },
          ]
        })
        .on('load', function () {
          // check if custom sort names are displayed
          t.equal($('.fh8 [data-col="Continent"] div:nth-child(1) div a:nth-child(1)').text().trim(), "Sort by Alphabet")
          t.equal($('.fh8 [data-col="Continent"] div:nth-child(1) div a:nth-child(2)').text().trim(), "Sort reverse alphabet")
          t.end()
        })
    })
    tape('$().formhandler() applies format option (function, text, number) option mentioned in options.columns', function (t) {
      $('.fh9')
        .formhandler({
          columns: [
342
            { name: 'Continent', format: function (arg) { return arg.row['Continent'].toUpperCase() } }
343
344
345
346
347
348
349
350
          ]
        })
        .on('load', function () {
          // check if by default text type is applied
          // check if function is applied as format
          t.equal($('.fh9 tbody tr:first-of-type td:first-of-type a').text().trim(), "EUROPE")
          t.end()
        })
351
    })
352
353
    tape('$().formhandler() applies format option (date type) option mentioned in options.columns', function (t) {
      $('.fh10')
354
355
356
357
358
359
360
361
362
363
        .formhandler({
          src: 'formhandler-types.json',
          columns: [
            { name: 'Amount', type: 'number', format: '$0,0.00' },
            { name: 'Date', type: 'date', format: 'DD-MM-YYYY' }
          ]
        })
        .on('load', function () {
          // check if number is given, applied filters display name must be Greater than, Lesser than
          // check if date is give, applied filters display name must be Before, After
364

365
366
367
368
          // check if format is applied to number type using numeraljs
          t.equal($('.fh10 tbody tr:first-of-type td:nth-of-type(1) a').text().trim(), '$3,500.00')
          // check if format is applied to date type using momentjs
          t.equal($('.fh10 tbody tr:first-of-type td:nth-of-type(2) a').text().trim(), '08-02-2013')
369
370


371
372
373
374
375
376
377
378
379
          t.end()
        })
    })
    tape('$().formhandler() link attr will let user goto that link instead of applying filter', function (t) {
      $('.fh11')
        .formhandler({
          columns: [
            {
              name: 'Continent',
380
              link: 'https://en.wikipedia.org/wiki/<%= row["Continent"].split(" ").join(" ") %>'
381
382
383
384
385
            }
          ]
        })
        .on('load', function () {
          // no. of columns in meta data must be same as rendered columns
386
          t.equal($('.fh11 tbody tr:first-of-type td:nth-of-type(1) a').attr('href'), 'https://en.wikipedia.org/wiki/' + $('.fh11 tbody tr:first-of-type td:nth-of-type(1) a').text().split(" ").join(" ").trim())
387
388
389
390
391
392
393
394
395
          t.end()
        })
    })
    tape('$().formhandler() link attr will let user goto that link instead of applying filter using function', function (t) {
      $('.fh12')
        .formhandler({
          columns: [
            {
              name: 'Continent',
396
              link: function (arg) { return 'https://en.wikipedia.org/wiki/' + arg.row['Continent'].split(" ").join(" ") }
397
398
399
400
401
            }
          ]
        })
        .on('load', function () {
          // no. of columns in meta data must be same as rendered columns
402
          t.equal($('.fh12 tbody tr:first-of-type td:nth-of-type(1) a').attr('href'), 'https://en.wikipedia.org/wiki/' + $('.fh11 tbody tr:first-of-type td:nth-of-type(1) a').text().split(" ").join(" ").trim())
S Anand's avatar
S Anand committed
403
404
405
406
407
408
409
410
          t.end()
        })
    })
    tape('$().formhandler() if namespace is given for urlfilter, apply that ', function (t) {
      window.history.pushState({}, '', '#')
      window.history.pushState({}, '', g1.url.parse(location.href).toString() + '#' + g1.url.parse(location.hash).update({ 'fhname13:Continent': 'Europe', _limit: 5 }).toString())

      $('.fh13')
411
412
413
414
415
416
        .formhandler({
          name: 'fhname13',
          columns: [
            {
              name: 'Continent'
            }
S Anand's avatar
S Anand committed
417
418
419
420
421
          ]
        })
        .on('load', function () {
          // no. of columns in meta data must be same as rendered columns
          t.equal($('body > div.fh13 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child(1) > td > a').text().trim(' '),
422
            'Europe')
S Anand's avatar
S Anand committed
423
424
425
426
427
428
429
430
431
          t.equal($('body > div.fh13 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child(2) > td > a').text().trim(' '),
            'Europe')
          t.equal($('body > div.fh13 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child(3) > td > a').text().trim(' '),
            'Europe')
          t.equal($('body > div.fh13 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child(4) > td > a').text().trim(' '),
            'Europe')
          t.equal($('body > div.fh13 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child(5) > td > a').text().trim(' '),
            'Europe')
          window.history.pushState({}, '', '#')
432
433
          t.end()
        })
S Anand's avatar
S Anand committed
434
    })
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
    tape('$().formhandler() test edit option functionality for single link column', function (t) {
      $('.fh14')
        .formhandler({
          columns: [
            {
              name: 'ID',
              link: function (arg) { return 'https://en.wikipedia.org/wiki/' + arg.row.ID.split(" ").join(" ") },
              editable: false
            },
            {
              name: 'c1',
              editable: true
            }
          ],
          pageSize: 5,
          edit: true
        })
        .on('load', function () {
          // check if Edit button is rendered when edit:true option is given
454
          t.deepEquals($('body > div.fh14 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit > button').text(), "Edit")
455
          // check if Edit Button changes to Save Button when clicked
456
457
          $('body > div.fh14 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit > button').click()
          t.deepEquals($('body > div.fh14 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit > button').text(), "Save")
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
          // check if when Save Button is visiblle, all the rows in table are rerendered which can be editable
          t.deepEquals()
          // check if when Save Button is clicked, the Edit Button changes to Edit Button
          // check if when Save Button is clicked, all the rows are filterable cells - deepEquals(initialTemplate)

          // check if when save button is clicked,
          // check if each row has edit and save buttons

          // test if when save is clicked, only the current formhandler table rows got updated and not other formhandler rows in the page

          // test if a bootstrap success message is visible if rows got updated successfully
          t.end()
        })
    })
    tape('$().formhandler() test edit option functionality for single column', function (t) {
      $('.fh15')
        .formhandler({
          columns: [
            {
              name: 'Continent',
              editable: true
            },
            {
              name: 'ID',
              editable: false
            }
          ],
          pageSize: 5,
          edit: true
        })
        .on('load', function () {
          // check if each row has edit and save buttons
          t.end()
        })
    })
    // tape('$().formhandler() test edit option exists for (all) columns when * is mentioned, edit is true', function (t) {
    //   $('.fh16')
    //     .formhandler({
    //       columns: [
    //         {
    //           name: '*',
    //           editable: true
    //         }
    //       ],
    //       pageSize: 5,
    //       edit: true
    //     })
    //     .on('load', function () {
    //       // check if each row has edit and save buttons
    //       t.end()
    //     })
    // })
    tape('$().formhandler() test edit option exists for (all) columns when name * and override of other cols work', function (t) {
      $('.fh17')
        .formhandler({
          columns: [
            {
              name: '*'
            },
            {
              name: 'ID',
              link: function (arg) { return 'https://en.wikipedia.org/wiki/' + arg.row.ID.split(" ").join(" ") },
            },
            {
              name: 'Continent',
            }
          ],
          pageSize: 5,
          edit: true
        })
        .on('load', function () {
          // check if each row has edit and save buttons
          // check if Edit button is rendered when edit:true option is given
531
          t.deepEquals($('body > div.fh17 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit > button').text(), "Edit")
532
          // check if Edit Button changes to Save Button when clicked
533
534
          $('body > div.fh17 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit > button').click()
          t.deepEquals($('body > div.fh17 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit > button').text(), "Save")
S Anand's avatar
S Anand committed
535
536
          var td_elms = $("body > div.fh17 > div.position-relative > div.formhandler > div.table > table > tbody > tr > td ")
          var input_elms = $("body > div.fh17 > div.position-relative > div.formhandler > div.table > table > tbody > tr > td > input")
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
          t.equals(td_elms.length, input_elms.length)
          t.end()
        })
    })
    // tape('$().formhandler() add new rows', function (t) {
    //   $('.fh_add1')
    //     .formhandler({
    //       columns: [
    //         {
    //           name: 'Continent',
    //           link: 'https://en.wikipedia.org/wiki/<%= row.Continent.split(" ").join(" ") %>'
    //         }
    //       ],
    //       add: true
    //     })
    //     .on('load', function () {
    //       // no. of columns in meta data must be same as rendered columns
    //       // t.equal($('.fh11 tbody tr:first-of-type td:nth-of-type(1) a').attr('href'), 'https://en.wikipedia.org/wiki/' + $('.fh11 tbody tr:first-of-type td:nth-of-type(1) a').text().split(" ").join(" "))
    //       t.end()
    //     })
    // })
S Anand's avatar
S Anand committed
558
559
560
561
562
    // TODO: formatted_content if not encoded url args work
    tape('$().formhandler() renders grid from data-src', function (t) {
      $('.fhgrid1')
        .formhandler({ src: 'formhandler-small.json' })
        .on('load', function () {
563
          t.equals($('.fhgrid1 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 100)
S Anand's avatar
S Anand committed
564
565
566
567
568
569
570
571
          t.end()
        })
    })

    tape('$().formhandler() renders grid from data-src and overriding default options.icon', function (t) {
      $('.fhgrid2')
        .formhandler({ src: 'formhandler-small.json' })
        .on('load', function () {
572
          t.equals($('.fhgrid2 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 100)
S Anand's avatar
S Anand committed
573
574
575
576
577
578
579
580
581
582
          t.equals($('.fhgrid2 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow:first-child .thumbnail img').attr('src'), 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZ1bqTcxkaGSSIl5meU4JYO1dvUVbqP71z0hH8M6f6Yh9JpZg8')
          t.end()
        })
    })

    tape('$().formhandler() renders grid from data-src and overriding default options.classes', function (t) {
      $('.fhgrid3')
        .formhandler({ src: 'formhandler-small.json' })
        .on('load', function () {
          t.equals($('.fhgrid3 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 0)
583
        t.equals($('.fhgrid3 .formhandler-grid .formhandler-grid .thumbnail').length, 100)
S Anand's avatar
S Anand committed
584
585
586
587
588
589
          t.end()
        })
    })

    tape('$().formhandler() renders grid from data-src and overriding default options.icon with the jsoptions.icon', function (t) {
      $('.fhgrid4')
590
        .formhandler({ src: 'formhandler-small.json', icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSck4Qkjt376rXmEUqCj1MVPsgF4ftoSg4ok2EXdansLiF9VddD' })
S Anand's avatar
S Anand committed
591
        .on('load', function () {
592
          t.equals($('.fhgrid4 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 100)
S Anand's avatar
S Anand committed
593
594
595
596
597
598
599
          t.equals($('.fhgrid4 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow:first-child .thumbnail img').attr('src'), 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSck4Qkjt376rXmEUqCj1MVPsgF4ftoSg4ok2EXdansLiF9VddD')
          t.end()
        })
    })

    tape('$().formhandler() renders grid from data-src and overriding default options.classes with jsoptions.classes', function (t) {
      $('.fhgrid5')
600
        .formhandler({ src: 'formhandler-small.json', classes: 'formhandler-grid' })
S Anand's avatar
S Anand committed
601
602
        .on('load', function () {
          t.equals($('.fhgrid5 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 0)
603
          t.equals($('.fhgrid5 .formhandler-grid .formhandler-grid .thumbnail').length, 100)
S Anand's avatar
S Anand committed
604
605
606
607
          t.end()
        })
    })

608
    tape('$().formhandler() renders template with formatted cell contents', function (t) {
609
610
611
      var class_count = 2
      var current_class_count = 0
      t.plan(3 * class_count)
S Anand's avatar
S Anand committed
612
613
614
615
      $('.cell_template1').formhandler({
        columns: [
          {
            name: 'ID',
616
617
618
619
            format: function (arg) { return arg.row['ID'].toLowerCase() }, // TODO: REVIEW whether to pass row number as second argument?
            link: 'https://en.wikipedia.org/wiki/<%= row.ID %>', // Tejesh: Link is not working if template is applied
            template: function (arg) {
              return "<td>ID " + arg.format + "</td>"
S Anand's avatar
S Anand committed
620
621
622
623
624
625
626
            }
          },
          { name: 'Name' },
          { name: 'Contitent' }
        ],
        pageSize: 3
      }).on('load', function (e) {
627
628
629
630
        current_class_count += 1
        t.equal($('.cell_template1 tr:first-of-type td:nth-of-type(1)').text().trim(), 'ID and'.repeat(current_class_count))
        t.equal($('.cell_template1 tr:nth-of-type(2) td:nth-of-type(1)').text().trim(), 'ID are'.repeat(current_class_count))
        t.equal($('.cell_template1 tr:nth-of-type(3) td:nth-of-type(1)').text().trim(), 'ID afg'.repeat(current_class_count))
S Anand's avatar
S Anand committed
631
632
633
634
      })
    })

    tape('$().formhandler() renders template option with unusual html tags', function (t) {
635
636
637
      var class_count = 2
      var current_class_count = 0
      t.plan(3 * class_count)
S Anand's avatar
S Anand committed
638
639
640
641
642
      // span, div, p, i,
      $('.cell_template2').formhandler({
        columns: [
          {
            name: 'ID',
643
644
645
646
            format: function (arg) { return arg.row['ID'].toLowerCase() }, // TODO: REVIEW whether to pass row number as second argument?
            link: 'https://en.wikipedia.org/wiki/<%= row.ID %>',
            template: function (arg) {
              return "<span>ID " + arg.format + "</span>"
S Anand's avatar
S Anand committed
647
648
649
650
651
652
653
            }
          },
          { name: 'Name' },
          { name: 'Contitent' }
        ],
        pageSize: 3
      }).on('load', function () {
654
655
656
657
        current_class_count += 1
        t.equal($('.cell_template2 span:nth-of-type(1):not(".sr-only, .btn")').text().trim(), 'ID and'.repeat(current_class_count))
        t.equal($('.cell_template2 span:nth-of-type(2):not(".sr-only, .btn")').text().trim(), 'ID are'.repeat(current_class_count))
        t.equal($('.cell_template2 span:nth-of-type(3):not(".sr-only, .btn")').text().trim(), 'ID afg'.repeat(current_class_count))
S Anand's avatar
S Anand committed
658
659
660
661
662
663
664
665
      })
    })

    tape('$().formhandler() renders template with svg elements', function (t) {
      $('.cell_template3').formhandler({
        columns: [
          {
            name: 'ID',
666
667
668
            format: function (arg) { return arg.row['ID'].toLowerCase() }, // TODO: REVIEW whether to pass row number as second argument?
            link: 'https://en.wikipedia.org/wiki/<%= row.ID %>',
            template: function (arg) { return '<td><button type="text" data-action="testaction">'+arg.format+'</button></td>' }
S Anand's avatar
S Anand committed
669
670
671
          },
          {
            name: 'c1',
672
            template: function (arg) {
S Anand's avatar
S Anand committed
673
674
675
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
676
              return '<td>' + arg.value + '<svg height="20" width="20"><circle r="10" cx="10" cy="10" stroke="black" stroke-width="3" fill="' + f(arg.value) + '"></circle></svg></td>'
S Anand's avatar
S Anand committed
677
678
679
680
            }
          },
          {
            name: 'c2',
681
            format: function (arg) {
S Anand's avatar
S Anand committed
682
683
684
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
685
              return arg.row['c2'] + '<svg height="20" width="20"><circle r="10" cx="10" cy="10" stroke="black" stroke-width="3" fill="' + f(arg.row['c2']) + '"></circle></svg>'
S Anand's avatar
S Anand committed
686
687
            }
          },
688
689
          { name: 'Continent' },
          { name: 'testaction', template: function(arg) { return '<td><button type="text" data-action="testaction">Test action</button></td>'}}
S Anand's avatar
S Anand committed
690
        ],
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
        pageSize: 3,
        actions: {
          'testaction': function(arg) { // arg {row: row, data: data, value: value}
            $.ajax(options.src, {
              method: 'DELETE',
              dataType: 'json',
              data: data
            }).done(function (data, status, xhr) {
              // TODO: show a bootstrap 4 success/failure message
              $('.loader', $this).addClass('d-none')
            }).fail(function (xhr, status, message) {
              $this.html(template['error']({
                message: message
              }))
            })
          }
        }
S Anand's avatar
S Anand committed
708
      }).on('load', function () {
709
        t.equal($('.cell_template3 tr:first-of-type td:nth-of-type(1)').text().trim(), 'and')
S Anand's avatar
S Anand committed
710
711
712
        t.equal($('.cell_template3 tr:first-of-type td:nth-of-type(2)').text().trim(), '35')
        t.equal($('.cell_template3 tr:first-of-type td:nth-of-type(2) svg circle').length, 1)
        t.equal($('.cell_template3 tr:first-of-type td:nth-of-type(3) a').text().trim(), '1')
713
        t.equal($('.cell_template3 tr:first-of-type td:nth-of-type(3) a').attr('href').trim(), '?c2=' + $('.cell_template3 tr:first-of-type td:nth-of-type(3) a').text().trim() + '&_offset=')
S Anand's avatar
S Anand committed
714
715
        t.equal($('.cell_template3 tr:first-of-type td:nth-of-type(3) svg circle').length, 1)

716
        t.equal($('.cell_template3 tr:nth-of-type(2) td:nth-of-type(1)').text().trim(), 'are')
S Anand's avatar
S Anand committed
717
718
719
        t.equal($('.cell_template3 tr:nth-of-type(2) td:nth-of-type(2)').text().trim(), '24')
        t.equal($('.cell_template3 tr:nth-of-type(2) td:nth-of-type(2) svg circle').length, 1)
        t.equal($('.cell_template3 tr:nth-of-type(2) td:nth-of-type(3) a').text().trim(), '0')
720
        t.equal($('.cell_template3 tr:nth-of-type(2) td:nth-of-type(3) a').attr('href').trim(), '?c2=' + $('.cell_template3 tr:nth-of-type(2) td:nth-of-type(3) a').text().trim() + '&_offset=')
S Anand's avatar
S Anand committed
721
722
        t.equal($('.cell_template3 tr:nth-of-type(2) td:nth-of-type(3) svg circle').length, 1)

723
        t.equal($('.cell_template3 tr:nth-of-type(3) td:nth-of-type(1)').text().trim(), 'afg')
S Anand's avatar
S Anand committed
724
725
726
        t.equal($('.cell_template3 tr:nth-of-type(3) td:nth-of-type(2)').text().trim(), '28')
        t.equal($('.cell_template3 tr:nth-of-type(3) td:nth-of-type(2) svg circle').length, 1)
        t.equal($('.cell_template3 tr:nth-of-type(3) td:nth-of-type(3) a').text().trim(), '1')
727
        t.equal($('.cell_template3 tr:nth-of-type(3) td:nth-of-type(3) a').attr('href').trim(), '?c2=' + $('.cell_template3 tr:nth-of-type(3) td:nth-of-type(3) a').text().trim() + '&_offset=')
S Anand's avatar
S Anand committed
728
729
730
731
732
733
734
735
736
737
        t.equal($('.cell_template3 tr:nth-of-type(3) td:nth-of-type(3) svg circle').length, 1)
        t.end()
      })
    })

    tape('$().formhandler() renders template when it is a string', function (t) {
      $('.cell_template4').formhandler({
        columns: [
          {
            name: 'ID',
738
739
            format: function (arg) { return arg.row['ID'].toLowerCase() }, // TODO: REVIEW whether to pass row number as second argument?
            link: 'https://en.wikipedia.org/wiki/<%= row.ID %>', // Tejesh: Link is not working if template is applied
S Anand's avatar
S Anand committed
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
            template: "<td>ID</td>"
          },
          { name: 'Name' },
          { name: 'Contitent' }
        ],
        pageSize: 3
      }).on('load', function (e) {
        t.equal($('.cell_template4 tr:first-of-type td:nth-of-type(1)').text().trim(), 'ID')
        t.equal($('.cell_template4 tr:nth-of-type(2) td:nth-of-type(1)').text().trim(), 'ID')
        t.equal($('.cell_template4 tr:nth-of-type(3) td:nth-of-type(1)').text().trim(), 'ID')
        t.end()
      })
    })

    tape('$().formhandler() renders template when it is a function', function (t) {
      $('.cell_template5').formhandler({
        columns: [
          {
            name: 'ID',
759
760
761
762
            format: function (arg) { return arg.row['ID'].toLowerCase() }, // TODO: REVIEW whether to pass row number as second argument?
            link: 'https://en.wikipedia.org/wiki/<%= row.ID %>', // Tejesh: Link is not working if template is applied
            template: function (arg) {
              return "<td>ID " + arg.format + "</td>"
S Anand's avatar
S Anand committed
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
            }
          },
          { name: 'Name' },
          { name: 'Contitent' }
        ],
        pageSize: 3
      }).on('load', function (e) {
        t.equal($('.cell_template5 tr:first-of-type td:nth-of-type(1)').text().trim(), 'ID and')
        t.equal($('.cell_template5 tr:nth-of-type(2) td:nth-of-type(1)').text().trim(), 'ID are')
        t.equal($('.cell_template5 tr:nth-of-type(3) td:nth-of-type(1)').text().trim(), 'ID afg')
        t.end()
      })
    })

    tape('$().formhandler() renders rowTemplate as function', function (t) {
      $('.row_template1').formhandler({
        columns: [
          {
            name: 'ID',
782
            format: function (arg) { return arg.row['ID'].toLowerCase() }, // TODO: REVIEW whether to pass row number as second argument?
S Anand's avatar
S Anand committed
783
            link: 'https://en.wikipedia.org/wiki/<%= ID %>',
784
785
            template: function (arg) {
              return "<td>ID " + arg.format + "</td>"
S Anand's avatar
S Anand committed
786
787
788
789
            }
          },
          {
            name: 'c1',
790
            template: function (arg) {
S Anand's avatar
S Anand committed
791
792
793
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
794
              return '<td>' + arg.value + '<svg height="20" width="20"><circle r="10" cx="10" cy="10" stroke="black" stroke-width="3" fill="' + f(value) + '"></circle></svg></td>'
S Anand's avatar
S Anand committed
795
796
797
798
            }
          },
          {
            name: 'c2',
799
            format: function (arg) {
S Anand's avatar
S Anand committed
800
801
802
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
803
              return arg.row['c2'] + '<svg height="20" width="20"><circle r="10" cx="10" cy="10" stroke="black" stroke-width="3" fill="' + f(row['c2']) + '"></circle></svg>'
S Anand's avatar
S Anand committed
804
805
806
807
            }
          },
          { name: 'Continent' }
        ],
808
809
810
811
812
        rowTemplate: function (arg) {
          var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
          return '<tr><td>'+ arg.row['ID'] +'</td><td>' + arg.row['c2'] + '<svg height="20" width="20"><circle r="10" cx="10" cy="10" stroke="black" stroke-width="3" fill="' + f(arg.row['c1']) + '"></circle></svg></td><td>'+ arg.row['c2'] +'</td><td>'+ arg.row['Continent'] +'</td></tr>'
S Anand's avatar
S Anand committed
813
814
815
        },
        pageSize: 3
      }).on('load', function () {
816
817
818
819
820
        $.getJSON($(this).data('src'), function(result){
            var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
            for(var index = 0; index < 3; index++) {
S Anand's avatar
S Anand committed
821
822
823
824
825
              t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1)').text(), result[index]['ID'])
              t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2)').text(), ''+result[index]['c2'])
              t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2) > svg > circle').attr('fill'), f(result[index]['c1']))
              t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(3)').text(), ''+result[index]['c2'])
              t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(4)').text(), ''+result[index]['Continent'])
826
827
828
            }
            t.end()
        });
S Anand's avatar
S Anand committed
829
830
831
832
833
834
835
836
      })
    })

    tape('$().formhandler() renders rowTemplate as string', function (t) {
      $('.row_template2').formhandler({
        columns: [
          {
            name: 'ID',
837
838
839
840
            format: function (arg) { return arg.row['ID'].toLowerCase() }, // TODO: REVIEW whether to pass row number as second argument?
            link: 'https://en.wikipedia.org/wiki/<%= row.ID %>',
            template: function (arg) {
              return "<td>ID " + arg.format + "</td>"
S Anand's avatar
S Anand committed
841
842
843
844
            }
          },
          {
            name: 'c1',
845
            template: function (arg) {
S Anand's avatar
S Anand committed
846
847
848
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
849
              return '<td>' + arg.value + '<svg height="20" width="20"><circle r="10" cx="10" cy="10" stroke="black" stroke-width="3" fill="' + f(arg.value) + '"></circle></svg></td>'
S Anand's avatar
S Anand committed
850
851
852
853
            }
          },
          {
            name: 'c2',
854
            format: function (arg) {
S Anand's avatar
S Anand committed
855
856
857
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
858
              return arg.row['c2'] + '<svg height="20" width="20"><circle r="10" cx="10" cy="10" stroke="black" stroke-width="3" fill="' + f(arg.row['c2']) + '"></circle></svg>'
S Anand's avatar
S Anand committed
859
860
861
862
            }
          },
          { name: 'Continent' }
        ],
863
864
865
866
867
868
869
        // TODO: Abinesh to use lodash template for `rowTemplate` instead of hardcoded string
        rowTemplate: `<tr>
                      <td><%- row.ID%></td>
                      <td><%- row.c1%></td>
                      <td><%- row.c2%></td>
                      <td><%- row.Continent%></td>
                    </tr>`,
S Anand's avatar
S Anand committed
870
871
        pageSize: 3
      }).on('load', function () {
872
873
874
875
876
877
878
879
        var f = d3.scaleLinear()
            .domain([0, 100])
            .range(['white', 'green'])
        $.getJSON($(this).data('src'), function(result){
          var f = d3.scaleLinear()
              .domain([0, 100])
              .range(['white', 'green'])
          for(var index = 0; index < 3; index++) {
S Anand's avatar
S Anand committed
880
881
882
883
            t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1)').text(), result[index]['ID'])
            t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2)').text(), ''+result[index]['c1'])
            t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(3)').text(), ''+result[index]['c2'])
            t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(4)').text(), ''+result[index]['Continent'])
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
          }
          t.end()
        });
      })
    })

    tape('$().formhandler() renders rowTemplate and overides the cellTempalte and format options', function (t) {
      $('.row_template3').formhandler({
        columns: [
          {
            name: 'ID',
            format: function (arg) { return arg.row['ID'].toLowerCase() }, // TODO: REVIEW whether to pass row number as second argument?
            link: 'https://en.wikipedia.org/wiki/<%= row["ID"] %>',
            template: function (arg) {
              return "<td>ID " + arg.format + "</td>"
            }
          },
          {
            name: 'c1',
            template: function (row) {
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
              return '<td>' + row.value + '<svg height="20" width="20"><circle r="10" cx="10" cy="10" stroke="black" stroke-width="3" fill="' + f(row.value) + '"></circle></svg></td>'
            }
          },
          {
            name: 'c2',
            format: function (arg) {
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
              return arg.row.c2 + '<svg height="20" width="20"><circle r="10" cx="10" cy="10" stroke="black" stroke-width="3" fill="' + f(arg.row.c2) + '"></circle></svg>'
            }
          },
          { name: 'Continent' }
        ],
        rowTemplate: function (arg) {
          var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
          return '<tr><td>'+ arg.row['ID'] +'</td><td>' + arg.row['c1'] + '</td><td>'+ arg.row['c2'] +'</td><td>'+ arg.row['Continent'] +'</td></tr>'
        },
        pageSize: 3
      }).on('load', function () {
        for(var index = 0; index < 3; index++) {
S Anand's avatar
S Anand committed
930
931
          t.equals($('body > div.row_template3 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2) > svg > circle').length, 0)
          t.equals($('body > div.row_template3 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(3) > svg > circle').length, 0)
932
        }
S Anand's avatar
S Anand committed
933
934
935
936
        t.end()
      })
    })

937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
    tape('$().formhandler() renders cellTemplate with the format value and with original value', function (t) {
      $('.row_template4').formhandler({
        columns: [
          {
            name: 'ID',
            format: function (arg) { return arg.row['ID'].toLowerCase() }, // TODO: REVIEW whether to pass row number as second argument?
            link: 'https://en.wikipedia.org/wiki/<%= row["ID"] %>',
            template: function (arg) {
              return "<td>ID " + arg.format + "</td>"
            }
          },
          { name: 'c1' },
          {
            name: 'Continent',
            format: function (arg) { return (arg.row['Continent']) ? arg.row['Continent'].toLowerCase() : '' }, // TODO: REVIEW whether to pass row number as second argument?
            template: function (arg) {
              var value = (arg.value) ? arg.value : ""
              return "<td>" + value + "</td>"
            }
          },
        ],
        pageSize: 3
      }).on('load', function () {
        $.getJSON($(this).data('src'), function(result){
          for(var index = 0; index < 3; index++) {
S Anand's avatar
S Anand committed
962
963
            t.equals($('body > div.row_template4 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1)').text(), 'ID '+result[index]['ID'].toLowerCase(), 'Column `ID` is rendered with the formated value')
            t.equals($('body > div.row_template4 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(3)').text(), result[index]['Continent'], 'Column `Continent` is rendered with the original value')
964
965
966
967
968
969
          }
          t.end()
        });
      })
    })

S Anand's avatar
S Anand committed
970
    tape('$().formhandler() renders grid with rowTemplate as function', function (t) {
971
      $('.row_template7').formhandler({
S Anand's avatar
S Anand committed
972
973
974
975
976
        columns: [
          {
            name: 'ID',
            format: function(row) {return row['ID'].toLowerCase() }, // TODO: REVIEW whether to pass row number as second argument?
            link: 'https://en.wikipedia.org/wiki/<%= ID %>',
977
978
            template: function (arg) {
              return "<td>ID " + arg.format + "</td>"
S Anand's avatar
S Anand committed
979
980
981
982
            }
          },
          {
            name: 'c1',
983
            template: function (arg) {
S Anand's avatar
S Anand committed
984
985
986
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
987
              return '<td>' + arg.value + '<svg height="20" width="20"><circle r="10" cx="10" cy="10" stroke="black" stroke-width="3" fill="'+  f(arg.value) +'"></circle></svg></td>'
S Anand's avatar
S Anand committed
988
989
990
991
            }
          },
          {
            name: 'c2',
992
            format: function (arg) {
S Anand's avatar
S Anand committed
993
994
995
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
996
              return  arg.row['c2'] + '<svg height="20" width="20"><circle r="10" cx="10" cy="10" stroke="black" stroke-width="3" fill="' + f(arg.row['c2']) + '"></circle></svg>'
S Anand's avatar
S Anand committed
997
998
999
1000
            }
          },
          { name: 'Continent' }
        ],
1001
1002
        rowTemplate: function(arg) {
          return `<div class="col-sm-3 formhandler-grid-cell d-inline-block p-3 box-shadow">
S Anand's avatar
S Anand committed
1003
1004
1005
1006
              <div class="thumbnail">
                <img class="img img-responsive" src="http://icons.iconarchive.com/icons/mazenl77/NX11/256/Folder-Default-icon.png"/>
                <div class="caption">
                  <div>
1007
                    <strong>ID</strong>:`+arg.row['ID']+`
S Anand's avatar
S Anand committed
1008
1009
                  </div>
                  <div>
1010
                    <strong>c1</strong>:`+arg.row['c1']+`
S Anand's avatar
S Anand committed
1011
1012
                  </div>
                  <div>
1013
                    <strong>Continent</strong>:`+arg.row['Continent']+`
S Anand's avatar
S Anand committed
1014
1015
1016
1017
1018
1019
1020
                  </div>
                </div>
              </div>
            </div>`
        },
        pageSize: 3
      }).on('load', function () {
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
        t.equals($('.row_template7 .formhandler-grid-cell').length, 3)

        t.equals($('.row_template7 .formhandler-grid-cell:first-child img').attr('src'), 'http://icons.iconarchive.com/icons/mazenl77/NX11/256/Folder-Default-icon.png')
        t.equals($('.row_template7 .formhandler-grid-cell:nth-child(2) img').attr('src'), 'http://icons.iconarchive.com/icons/mazenl77/NX11/256/Folder-Default-icon.png')
        t.equals($('.row_template7 .formhandler-grid-cell:nth-child(3) img').attr('src'), 'http://icons.iconarchive.com/icons/mazenl77/NX11/256/Folder-Default-icon.png')

        t.equals($('.row_template7 .formhandler-grid-cell:first-child .caption div:first-child').text().trim(), 'ID:AND')
        t.equals($('.row_template7 .formhandler-grid-cell:first-child .caption div:nth-child(2)').text().trim(), 'c1:35')
        t.equals($('.row_template7 .formhandler-grid-cell:first-child .caption div:nth-child(3)').text().trim(), 'Continent:Europe')

        t.equals($('.row_template7 .formhandler-grid-cell:nth-child(2) .caption div:first-child').text().trim(), 'ID:ARE')
        t.equals($('.row_template7 .formhandler-grid-cell:nth-child(2) .caption div:nth-child(2)').text().trim(), 'c1:24')
        t.equals($('.row_template7 .formhandler-grid-cell:nth-child(2) .caption div:nth-child(3)').text().trim(), 'Continent:Asia')

        t.equals($('.row_template7 .formhandler-grid-cell:nth-child(3) .caption div:first-child').text().trim(), 'ID:AFG')
        t.equals($('.row_template7 .formhandler-grid-cell:nth-child(3) .caption div:nth-child(2)').text().trim(), 'c1:28')
        t.equals($('.row_template7 .formhandler-grid-cell:nth-child(3) .caption div:nth-child(3)').text().trim(), 'Continent:Asia')
        t.end()
      })
    })


    tape('$().formhandler() test the star column with out title option', function (t) {
1044
1045
1046
      var class_count = 2
      var init_class_count = 0
      t.plan(1 * class_count)
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
      $('.test-star-without-title').formhandler({
        columns: [
          {
            name: '*'
          },
          {
            name: 'ID'
          },
          {
            name: 'c1'
          }
        ],
        pageSize: 3
      })
      .on('load', function () {
1062
        init_class_count += 1
1063
        t.ok($('.test-star-without-title table thead th a.dropdown-toggle').length == 18 * init_class_count)
1064
1065
1066
      })
    })

S Anand's avatar
S Anand committed
1067
1068
  </script>
</body>
1069

S Anand's avatar
S Anand committed
1070
</html>