test-formhandler.html 50.4 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
  <script src="../node_modules/jquery/dist/jquery.min.js"></script>
24
  <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
S Anand's avatar
S Anand committed
25
  <script src="../node_modules/lodash/lodash.min.js"></script>
26 27
  <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
28 29 30
  <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
31
  <script src="tape.js"></script>
32
  <script src="tape-stream.js"></script>
S Anand's avatar
S Anand committed
33
</head>
34

S Anand's avatar
S Anand committed
35
<body>
36 37 38
  <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>
39

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

43 44 45
  <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>
46 47


48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
  <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>

67
  <div class="fh18" data-src="/formhandler-data"></div>
68 69 70 71
  <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>
103
  <div class="fhhashchangeoff" data-src="/formhandler-data" data-onhashchange="false"></div>
S Anand's avatar
S Anand committed
104
  <script>
105
    tape('$().formhandler() basic example works', function (t) {
S Anand's avatar
S Anand committed
106
      $('.formhandler').formhandler({
107
        pageSize: 20
108
      }).on('load', function (e) {
109 110
        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
111
        // t.equals(e.args._limit, 10)
112 113 114 115 116
        t.ok(e.formdata.length > 0)
        t.equals($('.formhandler table tbody tr').length, e.formdata.length)
        t.end()
      })
    })
117
    tape('$().formhandler() renders data from data-src, overriding options.src', function (t) {
118 119
      $('.fh1')
        .formhandler({ src: 'formhandler-small.json' })
120 121 122
        .on('load', function (args) {
          // formhandler-small.json contains only two rows
          t.notEqual($('.fh1 tbody tr').length, 2)
123 124 125
          t.end()
        })
    })
126
    tape('$().formhandler() hide options doesnot display the column', function(t) {
127 128
      var class_count = 2
      t.plan(1 * class_count)
129 130 131 132 133 134 135 136 137 138 139 140 141 142
      $('.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) {
143 144 145
      var class_count = 2
      var current_class_count = 0
      t.plan(2 * class_count)
146 147 148 149 150 151 152 153 154 155 156 157 158 159
      $('.hide_col2')
        .formhandler({
          columns: [
            {
              name: 'Continent',
              hide: true
            },
            {
              name: 'c1'
            }
          ],
          pageSize: 3
        })
        .on('load', function () {
160 161
          current_class_count += 1
          t.equals($("body > div.hide_col2 > div.position-relative > div.formhandler > div.table > table > thead > tr").length, current_class_count)
162 163 164 165
          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) {
166 167 168
      var class_count = 1
      var current_class_count = 0
      t.plan(2* class_count)
169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185
      $('.hide_col3')
        .formhandler({
          columns: [
            {
              name: '*'
            },
            {
              name: 'Continent',
              hide: true
            },
            {
              name: 'c1'
            }
          ],
          pageSize: 3
        })
        .on('load', function () {
186 187 188 189 190
          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)
          }
191 192
        })
    })
193
    tape('$().formhandler() uses option.src if no data-src exists', function (t) {
194 195 196 197 198 199 200
      $('.fh2')
        .formhandler({ src: 'formhandler-small.json' })
        .on('load', function () {
          t.equal($('.fh2 tbody tr').length, 2)
          t.end()
        })
    })
201
    tape('$().formhandler() shows default controls if meta is present', function (t) {
202 203 204
      $('.fh3')
        .formhandler({
          src: 'formhandler-small.json',
205
          transform: function (obj) {
206 207 208
            obj.meta.count = obj.meta.limit = obj.data.length
          }
        })
209
        .on('load', function () {
210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228
          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()
        })
    })

229
    tape('$().formhandler() disables controls via data-attributes', function (t) {
230 231 232
      $('.fh4')
        .formhandler({
          src: 'formhandler-small.json',
233
          transform: function (obj) {
234 235 236
            obj.meta.count = obj.meta.limit = obj.data.length
          }
        })
237
        .on('load', function () {
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 273
          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
274
          t.equal($('.fh6 thead tr th').length, 19)
275 276 277 278 279 280 281 282 283
          // 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()
        })
    })
284
    tape('$().formhandler() allows updating column info only for specific columns override test', function (t) {
285 286 287
      var class_count = 2
      var current_class_count = 0
      t.plan(6 * class_count)
288 289 290 291 292 293 294 295
      $('.test_star_overrride')
        .formhandler({
          columns: [
            { name: 'Continent', title: 'CustomTitle', sort: true },
            { name: '*', title: 'SameName' }
          ]
        })
        .on('load', function () {
296
          current_class_count += 1
297
          // no. of columns in meta data must be same as rendered columns
298
          t.equal($('.test_star_overrride thead tr th').length, 19 * current_class_count)
299 300 301 302
          // 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/))
303
          t.equal($('.test_star_overrride thead tr').text().match(/CustomTitle/).length, 1)
304
          // Rest of 16 columns must have title as 'SameName'
305
          t.equal($('.test_star_overrride thead tr').text().split('SameName').length - 1, 18 * current_class_count)
306
          // column is hideable by default
307
          t.equal($('.test_star_overrride [data-col="Continent"] div:nth-child(1) div a:last-of-type').text().trim(), "Hide".repeat(current_class_count))
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 342
    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: [
343
            { name: 'Continent', format: function (arg) { return arg.row['Continent'].toUpperCase() } }
344 345 346 347 348 349 350 351
          ]
        })
        .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()
        })
352
    })
353 354
    tape('$().formhandler() applies format option (date type) option mentioned in options.columns', function (t) {
      $('.fh10')
355 356 357 358 359 360 361 362 363 364
        .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
365

366 367 368 369
          // 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')
370 371


372 373 374 375 376 377 378 379 380
          t.end()
        })
    })
    tape('$().formhandler() link attr will let user goto that link instead of applying filter', function (t) {
      $('.fh11')
        .formhandler({
          columns: [
            {
              name: 'Continent',
381
              link: 'https://en.wikipedia.org/wiki/<%= row["Continent"].split(" ").join(" ") %>'
382 383 384 385 386
            }
          ]
        })
        .on('load', function () {
          // no. of columns in meta data must be same as rendered columns
387
          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())
388 389 390 391 392 393 394 395 396
          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',
397
              link: function (arg) { return 'https://en.wikipedia.org/wiki/' + arg.row['Continent'].split(" ").join(" ") }
398 399 400 401 402
            }
          ]
        })
        .on('load', function () {
          // no. of columns in meta data must be same as rendered columns
403
          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
404 405 406 407 408 409 410 411
          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')
412 413 414 415 416 417
        .formhandler({
          name: 'fhname13',
          columns: [
            {
              name: 'Continent'
            }
S Anand's avatar
S Anand committed
418 419 420 421 422
          ]
        })
        .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(' '),
423
            'Europe')
S Anand's avatar
S Anand committed
424 425 426 427 428 429 430 431 432
          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({}, '', '#')
433 434
          t.end()
        })
S Anand's avatar
S Anand committed
435
    })
436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454
    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
455
          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")
456
          // check if Edit Button changes to Save Button when clicked
457 458
          $('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")
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 531
          // 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
532
          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")
533
          // check if Edit Button changes to Save Button when clicked
534 535
          $('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
536 537
          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")
538 539 540 541
          t.equals(td_elms.length, input_elms.length)
          t.end()
        })
    })
542 543 544 545 546 547 548 549 550 551 552 553 554 555 556
    tape('$().formhandler() test clear all for multiple filters', function (t) {
      window.history.pushState({}, '', '#')
      window.history.pushState({}, '', '#' + g1.url.parse().update({ 'Continent': ['Asia', 'Europe'], _limit: 5 }).toString())
      $('.fh18').formhandler()
        .on('load', function () {
          var filter_badges = $('.fh18 .filters a')
          // First two links are the filters ?Continent=Asia and ?Continent=Europe
          t.equal(filter_badges[0].text.trim(), 'Continent = Asia')
          t.equal(filter_badges[1].text.trim(), 'Continent = Europe')
          // 3rd link is the Clear All
          t.equal(filter_badges[2].getAttribute('href'), '?Continent=Asia&Continent=Europe')
          window.history.pushState({}, '', '#')
          t.end()
        })
    })
557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573
    // 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
574 575 576 577 578
    // 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 () {
579
          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
580 581 582 583 584 585 586 587
          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 () {
588
          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
589 590 591 592 593 594 595 596 597 598
          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)
599
        t.equals($('.fhgrid3 .formhandler-grid .formhandler-grid .thumbnail').length, 100)
S Anand's avatar
S Anand committed
600 601 602 603 604 605
          t.end()
        })
    })

    tape('$().formhandler() renders grid from data-src and overriding default options.icon with the jsoptions.icon', function (t) {
      $('.fhgrid4')
606
        .formhandler({ src: 'formhandler-small.json', icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSck4Qkjt376rXmEUqCj1MVPsgF4ftoSg4ok2EXdansLiF9VddD' })
S Anand's avatar
S Anand committed
607
        .on('load', function () {
608
          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
609 610 611 612 613 614 615
          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')
616
        .formhandler({ src: 'formhandler-small.json', classes: 'formhandler-grid' })
S Anand's avatar
S Anand committed
617 618
        .on('load', function () {
          t.equals($('.fhgrid5 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 0)
619
          t.equals($('.fhgrid5 .formhandler-grid .formhandler-grid .thumbnail').length, 100)
S Anand's avatar
S Anand committed
620 621 622 623
          t.end()
        })
    })

624
    tape('$().formhandler() renders template with formatted cell contents', function (t) {
625 626 627
      var class_count = 2
      var current_class_count = 0
      t.plan(3 * class_count)
S Anand's avatar
S Anand committed
628 629 630 631
      $('.cell_template1').formhandler({
        columns: [
          {
            name: 'ID',
632 633 634 635
            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
636 637 638 639 640 641 642
            }
          },
          { name: 'Name' },
          { name: 'Contitent' }
        ],
        pageSize: 3
      }).on('load', function (e) {
643 644 645 646
        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
647 648 649 650
      })
    })

    tape('$().formhandler() renders template option with unusual html tags', function (t) {
651 652 653
      var class_count = 2
      var current_class_count = 0
      t.plan(3 * class_count)
S Anand's avatar
S Anand committed
654 655 656 657 658
      // span, div, p, i,
      $('.cell_template2').formhandler({
        columns: [
          {
            name: 'ID',
659 660 661 662
            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
663 664 665 666 667 668 669
            }
          },
          { name: 'Name' },
          { name: 'Contitent' }
        ],
        pageSize: 3
      }).on('load', function () {
670 671 672 673
        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
674 675 676 677 678 679 680 681
      })
    })

    tape('$().formhandler() renders template with svg elements', function (t) {
      $('.cell_template3').formhandler({
        columns: [
          {
            name: 'ID',
682 683 684
            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
685 686 687
          },
          {
            name: 'c1',
688
            template: function (arg) {
S Anand's avatar
S Anand committed
689 690 691
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
692
              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
693 694 695 696
            }
          },
          {
            name: 'c2',
697
            format: function (arg) {
S Anand's avatar
S Anand committed
698 699 700
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
701
              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
702 703
            }
          },
704 705
          { 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
706
        ],
707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723
        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
724
      }).on('load', function () {
725
        t.equal($('.cell_template3 tr:first-of-type td:nth-of-type(1)').text().trim(), 'and')
S Anand's avatar
S Anand committed
726 727 728
        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')
729
        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
730 731
        t.equal($('.cell_template3 tr:first-of-type td:nth-of-type(3) svg circle').length, 1)

732
        t.equal($('.cell_template3 tr:nth-of-type(2) td:nth-of-type(1)').text().trim(), 'are')
S Anand's avatar
S Anand committed
733 734 735
        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')
736
        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
737 738
        t.equal($('.cell_template3 tr:nth-of-type(2) td:nth-of-type(3) svg circle').length, 1)

739
        t.equal($('.cell_template3 tr:nth-of-type(3) td:nth-of-type(1)').text().trim(), 'afg')
S Anand's avatar
S Anand committed
740 741 742
        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')
743
        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
744 745 746 747 748 749 750 751 752 753
        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',
754 755
            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
756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774
            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',
775 776 777 778
            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
779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797
            }
          },
          { 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',
798
            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
799
            link: 'https://en.wikipedia.org/wiki/<%= ID %>',
800 801
            template: function (arg) {
              return "<td>ID " + arg.format + "</td>"
S Anand's avatar
S Anand committed
802 803 804 805
            }
          },
          {
            name: 'c1',
806
            template: function (arg) {
S Anand's avatar
S Anand committed
807 808 809
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
810
              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
811 812 813 814
            }
          },
          {
            name: 'c2',
815
            format: function (arg) {
S Anand's avatar
S Anand committed
816 817 818
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
819
              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
820 821 822 823
            }
          },
          { name: 'Continent' }
        ],
824 825 826 827 828
        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
829 830 831
        },
        pageSize: 3
      }).on('load', function () {
832 833 834 835 836
        $.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
837 838 839 840 841
              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'])
842 843 844
            }
            t.end()
        });
S Anand's avatar
S Anand committed
845 846 847 848 849 850 851 852
      })
    })

    tape('$().formhandler() renders rowTemplate as string', function (t) {
      $('.row_template2').formhandler({
        columns: [
          {
            name: 'ID',
853 854 855 856
            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
857 858 859 860
            }
          },
          {
            name: 'c1',
861
            template: function (arg) {
S Anand's avatar
S Anand committed
862 863 864
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
865
              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
866 867 868 869
            }
          },
          {
            name: 'c2',
870
            format: function (arg) {
S Anand's avatar
S Anand committed
871 872 873
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
874
              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
875 876 877 878
            }
          },
          { name: 'Continent' }
        ],
879 880 881 882 883 884 885
        // 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
886 887
        pageSize: 3
      }).on('load', function () {
888 889 890 891 892 893 894 895
        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
896 897 898 899
            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'])
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 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945
          }
          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
946 947
          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)
948
        }
S Anand's avatar
S Anand committed
949 950 951 952
        t.end()
      })
    })

953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977
    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
978 979
            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')
980 981 982 983 984 985
          }
          t.end()
        });
      })
    })

S Anand's avatar
S Anand committed
986
    tape('$().formhandler() renders grid with rowTemplate as function', function (t) {
987
      $('.row_template7').formhandler({
S Anand's avatar
S Anand committed
988 989 990 991 992
        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 %>',
993 994
            template: function (arg) {
              return "<td>ID " + arg.format + "</td>"
S Anand's avatar
S Anand committed
995 996 997 998
            }
          },
          {
            name: 'c1',
999
            template: function (arg) {
S Anand's avatar
S Anand committed
1000 1001 1002
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
1003
              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
1004 1005 1006 1007
            }
          },
          {
            name: 'c2',
1008
            format: function (arg) {
S Anand's avatar
S Anand committed
1009 1010 1011
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
1012
              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
1013 1014 1015 1016
            }
          },
          { name: 'Continent' }
        ],
1017 1018
        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
1019 1020 1021 1022
              <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>
1023
                    <strong>ID</strong>:`+arg.row['ID']+`
S Anand's avatar
S Anand committed
1024 1025
                  </div>
                  <div>
1026
                    <strong>c1</strong>:`+arg.row['c1']+`
S Anand's avatar
S Anand committed
1027 1028
                  </div>
                  <div>
1029
                    <strong>Continent</strong>:`+arg.row['Continent']+`
S Anand's avatar
S Anand committed
1030 1031 1032 1033 1034 1035 1036
                  </div>
                </div>
              </div>
            </div>`
        },
        pageSize: 3
      }).on('load', function () {
1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058
        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) {
1059 1060 1061
      var class_count = 2
      var init_class_count = 0
      t.plan(1 * class_count)
1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076
      $('.test-star-without-title').formhandler({
        columns: [
          {
            name: '*'
          },
          {
            name: 'ID'
          },
          {
            name: 'c1'
          }
        ],
        pageSize: 3
      })
      .on('load', function () {
1077
        init_class_count += 1
1078
        t.ok($('.test-star-without-title table thead th a.dropdown-toggle').length == 19 * init_class_count)
1079 1080 1081
      })
    })

1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092
    tape('$().formhandler() test disable onhashchange', function (t) {
      // Get number of event handlers for $(window).on('hashchange')
      var hashevents_count = $._data(window, 'events').hashchange.length
      $('.fhhashchangeoff').formhandler()
      .on('load', function () {
        var new_hashevents_count = $._data(window, 'events').hashchange.length
        t.equals(hashevents_count, new_hashevents_count)
        t.end()
      })
    })

S Anand's avatar
S Anand committed
1093 1094
  </script>
</body>
1095

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