test-formhandler.html

<!DOCTYPE html>
<html>

<head>
  <title>formhandler tests</title>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
  <style>
    .position-relative {
      position: relative;
    }

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

    .d-none {
      display: none !important;
    }
  </style>
  <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>
  <script src="../node_modules/moment/min/moment.min.js"></script>
  <script src="../node_modules/numeral/min/numeral.min.js"></script>
  <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>
  <script src="tape.js"></script>
  <script src="tape-stream.js"></script>
</head>

<body>
  <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>

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

  <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>


  <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>
  <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>

  <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>


  <div class="fh13" data-src="/formhandler-data"></div>

  <div class="fh1" data-src="formhandler_csv.json"></div>
  <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>
  <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>
  <div class="fh10"></div>
  <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>
  <script>
    tape('$().formhandler() basic example works', function (t) {
      $('.formhandler').formhandler({
        pageSize: 20
      }).on('load', function (e) {
        t.equals(e.options.pageSize, 10)
        // TODO: Review: if _limit is given in url, e.args._limit is [10] not 10
        // t.equals(e.args._limit, 10)
        t.ok(e.formdata.length > 0)
        t.equals($('.formhandler table tbody tr').length, e.formdata.length)
        t.end()
      })
    })
    tape('$().formhandler() renders data from data-src, overriding options.src', function (t) {
      $('.fh1')
        .formhandler({ src: 'formhandler-small.json' })
        .on('load', function (args) {
          // formhandler-small.json contains only two rows
          t.notEqual($('.fh1 tbody tr').length, 2)
          t.end()
        })
    })
    tape('$().formhandler() hide options doesnot display the column', function(t) {
      var class_count = 2
      t.plan(1 * class_count)
      $('.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) {
      var class_count = 2
      var current_class_count = 0
      t.plan(2 * class_count)
      $('.hide_col2')
        .formhandler({
          columns: [
            {
              name: 'Continent',
              hide: true
            },
            {
              name: 'c1'
            }
          ],
          pageSize: 3
        })
        .on('load', function () {
          current_class_count += 1
          t.equals($("body > div.hide_col2 > div.position-relative > div.formhandler > div.table > table > thead > tr").length, current_class_count)
          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) {
      var class_count = 1
      var current_class_count = 0
      t.plan(2* class_count)
      $('.hide_col3')
        .formhandler({
          columns: [
            {
              name: '*'
            },
            {
              name: 'Continent',
              hide: true
            },
            {
              name: 'c1'
            }
          ],
          pageSize: 3
        })
        .on('load', function () {
          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)
          }
        })
    })
    tape('$().formhandler() uses option.src if no data-src exists', function (t) {
      $('.fh2')
        .formhandler({ src: 'formhandler-small.json' })
        .on('load', function () {
          t.equal($('.fh2 tbody tr').length, 2)
          t.end()
        })
    })
    tape('$().formhandler() shows default controls if meta is present', function (t) {
      $('.fh3')
        .formhandler({
          src: 'formhandler-small.json',
          transform: function (obj) {
            obj.meta.count = obj.meta.limit = obj.data.length
          }
        })
        .on('load', function () {
          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()
        })
    })

    tape('$().formhandler() disables controls via data-attributes', function (t) {
      $('.fh4')
        .formhandler({
          src: 'formhandler-small.json',
          transform: function (obj) {
            obj.meta.count = obj.meta.limit = obj.data.length
          }
        })
        .on('load', function () {
          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
          t.equal($('.fh6 thead tr th').length, 18)
          // 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()
        })
    })
    tape('$().formhandler() allows updating column info only for specific columns override test', function (t) {
      var class_count = 2
      var current_class_count = 0
      t.plan(6 * class_count)
      $('.test_star_overrride')
        .formhandler({
          columns: [
            { name: 'Continent', title: 'CustomTitle', sort: true },
            { name: '*', title: 'SameName' }
          ]
        })
        .on('load', function () {
          current_class_count += 1
          // no. of columns in meta data must be same as rendered columns
          t.equal($('.test_star_overrride thead tr th').length, 18 * current_class_count)
          // 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/))
          t.equal($('.test_star_overrride thead tr').text().match(/CustomTitle/).length, 1)
          // Rest of 16 columns must have title as 'SameName'
          t.equal($('.test_star_overrride thead tr').text().split('SameName').length - 1, 17 * current_class_count)
          // column is hideable by default
          t.equal($('.test_star_overrride [data-col="Continent"] div:nth-child(1) div a:last-of-type').text().trim(), "Hide".repeat(current_class_count))
        })
    })
    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: [
            { name: 'Continent', format: function (arg) { return arg.row['Continent'].toUpperCase() } }
          ]
        })
        .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()
        })
    })
    tape('$().formhandler() applies format option (date type) option mentioned in options.columns', function (t) {
      $('.fh10')
        .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

          // 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')


          t.end()
        })
    })
    tape('$().formhandler() link attr will let user goto that link instead of applying filter', function (t) {
      $('.fh11')
        .formhandler({
          columns: [
            {
              name: 'Continent',
              link: 'https://en.wikipedia.org/wiki/<%= row["Continent"].split(" ").join(" ") %>'
            }
          ]
        })
        .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(" ").trim())
          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',
              link: function (arg) { return 'https://en.wikipedia.org/wiki/' + arg.row['Continent'].split(" ").join(" ") }
            }
          ]
        })
        .on('load', function () {
          // no. of columns in meta data must be same as rendered columns
          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())
          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')
        .formhandler({
          name: 'fhname13',
          columns: [
            {
              name: 'Continent'
            }
          ]
        })
        .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(' '),
            'Europe')
          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({}, '', '#')
          t.end()
        })
    })
    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
          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")
          // check if Edit Button changes to Save Button when clicked
          $('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")
          // 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
          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")
          // check if Edit Button changes to Save Button when clicked
          $('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")
          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")
          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()
    //     })
    // })
    // 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 () {
          t.equals($('.fhgrid1 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 100)
          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 () {
          t.equals($('.fhgrid2 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 100)
          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)
        t.equals($('.fhgrid3 .formhandler-grid .formhandler-grid .thumbnail').length, 100)
          t.end()
        })
    })

    tape('$().formhandler() renders grid from data-src and overriding default options.icon with the jsoptions.icon', function (t) {
      $('.fhgrid4')
        .formhandler({ src: 'formhandler-small.json', icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSck4Qkjt376rXmEUqCj1MVPsgF4ftoSg4ok2EXdansLiF9VddD' })
        .on('load', function () {
          t.equals($('.fhgrid4 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 100)
          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')
        .formhandler({ src: 'formhandler-small.json', classes: 'formhandler-grid' })
        .on('load', function () {
          t.equals($('.fhgrid5 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 0)
          t.equals($('.fhgrid5 .formhandler-grid .formhandler-grid .thumbnail').length, 100)
          t.end()
        })
    })

    tape('$().formhandler() renders template with formatted cell contents', function (t) {
      var class_count = 2
      var current_class_count = 0
      t.plan(3 * class_count)
      $('.cell_template1').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 %>', // Tejesh: Link is not working if template is applied
            template: function (arg) {
              return "<td>ID " + arg.format + "</td>"
            }
          },
          { name: 'Name' },
          { name: 'Contitent' }
        ],
        pageSize: 3
      }).on('load', function (e) {
        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))
      })
    })

    tape('$().formhandler() renders template option with unusual html tags', function (t) {
      var class_count = 2
      var current_class_count = 0
      t.plan(3 * class_count)
      // span, div, p, i,
      $('.cell_template2').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 "<span>ID " + arg.format + "</span>"
            }
          },
          { name: 'Name' },
          { name: 'Contitent' }
        ],
        pageSize: 3
      }).on('load', function () {
        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))
      })
    })

    tape('$().formhandler() renders template with svg elements', function (t) {
      $('.cell_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><button type="text" data-action="testaction">'+arg.format+'</button></td>' }
          },
          {
            name: 'c1',
            template: function (arg) {
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
              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>'
            }
          },
          {
            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' },
          { name: 'testaction', template: function(arg) { return '<td><button type="text" data-action="testaction">Test action</button></td>'}}
        ],
        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
              }))
            })
          }
        }
      }).on('load', function () {
        t.equal($('.cell_template3 tr:first-of-type td:nth-of-type(1)').text().trim(), 'and')
        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')
        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=')
        t.equal($('.cell_template3 tr:first-of-type td:nth-of-type(3) svg circle').length, 1)

        t.equal($('.cell_template3 tr:nth-of-type(2) td:nth-of-type(1)').text().trim(), 'are')
        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')
        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=')
        t.equal($('.cell_template3 tr:nth-of-type(2) td:nth-of-type(3) svg circle').length, 1)

        t.equal($('.cell_template3 tr:nth-of-type(3) td:nth-of-type(1)').text().trim(), 'afg')
        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')
        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=')
        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',
            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: "<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',
            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>"
            }
          },
          { 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',
            format: function (arg) { return arg.row['ID'].toLowerCase() }, // TODO: REVIEW whether to pass row number as second argument?
            link: 'https://en.wikipedia.org/wiki/<%= ID %>',
            template: function (arg) {
              return "<td>ID " + arg.format + "</td>"
            }
          },
          {
            name: 'c1',
            template: function (arg) {
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
              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>'
            }
          },
          {
            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(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['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>'
        },
        pageSize: 3
      }).on('load', function () {
        $.getJSON($(this).data('src'), function(result){
            var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
            for(var index = 0; index < 3; index++) {
              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'])
            }
            t.end()
        });
      })
    })

    tape('$().formhandler() renders rowTemplate as string', function (t) {
      $('.row_template2').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 (arg) {
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
              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>'
            }
          },
          {
            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' }
        ],
        // 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>`,
        pageSize: 3
      }).on('load', function () {
        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++) {
            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'])
          }
          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++) {
          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)
        }
        t.end()
      })
    })

    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++) {
            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')
          }
          t.end()
        });
      })
    })

    tape('$().formhandler() renders grid with rowTemplate as function', function (t) {
      $('.row_template7').formhandler({
        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 %>',
            template: function (arg) {
              return "<td>ID " + arg.format + "</td>"
            }
          },
          {
            name: 'c1',
            template: function (arg) {
              var f = d3.scaleLinear()
                .domain([0, 100])
                .range(['white', 'green'])
              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>'
            }
          },
          {
            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) {
          return `<div class="col-sm-3 formhandler-grid-cell d-inline-block p-3 box-shadow">
              <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>
                    <strong>ID</strong>:`+arg.row['ID']+`
                  </div>
                  <div>
                    <strong>c1</strong>:`+arg.row['c1']+`
                  </div>
                  <div>
                    <strong>Continent</strong>:`+arg.row['Continent']+`
                  </div>
                </div>
              </div>
            </div>`
        },
        pageSize: 3
      }).on('load', function () {
        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) {
      var class_count = 2
      var init_class_count = 0
      t.plan(1 * class_count)
      $('.test-star-without-title').formhandler({
        columns: [
          {
            name: '*'
          },
          {
            name: 'ID'
          },
          {
            name: 'c1'
          }
        ],
        pageSize: 3
      })
      .on('load', function () {
        init_class_count += 1
        t.ok($('.test-star-without-title table thead th a.dropdown-toggle').length == 18 * init_class_count)
      })
    })

  </script>
</body>

</html>