BUG: undefined check in editable formhandler fails, fixes #156

src/formhandler.template.html

@@ -185,7 +185,7 @@ Each template receives these variables:
     >
     <option value="" disabled selected>-- select --</option>
     <% _.each(isEditable.options, function(item) { %>
-      <option <%- val && val === item ? 'selected': null %> value="<%- item %>">
+      <option <%- val !== undefined && val === item ? 'selected': null %> value="<%- item %>">
         <%- item %>
       </option>
     <% }) %>
@@ -195,7 +195,7 @@ Each template receives these variables:
 <% } else if (isEditable.input == 'radio') { %>
 
   <% _.each(isEditable.options, function(item) { %>
-    <input type="radio" <%- val && val === item ? 'checked': null %> value="<%- item %>"
+    <input type="radio" <%- val !== undefined && val === item ? 'checked': null %> value="<%- item %>"
       <% for (key in isEditable.attrs) { %>
         <%= key + '="' + isEditable.attrs[key] + '"' %>
       <% } %>

test/test-formhandler-editable.html

@@ -6,7 +6,8 @@
   <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">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
+  <link rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
   <style>
     .position-relative {
       position: relative;
@@ -50,7 +51,7 @@
       $('.edit-fh').formhandler({
         src: '/formhandler-data',
         columns: [
-        {
+          {
             name: 'ID',
             editable: false
           },
@@ -113,96 +114,109 @@
               }
             }
           },
+          {
+            name: 'Bool Col',
+            editable: {
+              input: 'select',
+              options: [
+                true,
+                false
+              ]
+            }
+          },
           {
             name: 'Actions',
-            template: function(row) {
+            template: function (row) {
               return "<td><button data-action='edit'><i class='fa fa-trash'></i></button></td>"
             },
           }
         ],
         edit: {
-          done: function() {
+          done: function () {
             // test.ok(true, 'must call twice')
           }
         },
         add: true
       })
-      .on('editmode', function () {
-        test.equals($('.select-example-basic').length, 100)
-        test.equals($('.datepicker-example').length, 100)
-        $('.select-example-basic').select2()
-        $('.datepicker-example').datepicker({
-          format: 'dd-mm-yyyy',
-          todayHighlight: true,
-          autoclose: true
+        .on('editmode', function () {
+          test.equals($('.select-example-basic').length, 100)
+          test.equals($('.datepicker-example').length, 100)
+          $('.select-example-basic').select2()
+          $('.datepicker-example').datepicker({
+            format: 'dd-mm-yyyy',
+            todayHighlight: true,
+            autoclose: true
+          })
         })
-      })
-      .on('load', function () {
+        .on('load', function () {
 
-        // editing rows with no click must also update values
-        var init_cell_value = $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > a.urlfilter").text().trim()
-        var stripe_cell_value = $('.edit-fh table tbody tr:nth-child(1) td:nth-child(4) a').text().trim()
-        var c1_cell_value = $('.edit-fh table tbody tr:nth-child(1) td:nth-child(3) a').text().trim()
-        $('.edit button').click()
-        // make sure the initial value is Europe
-        test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val().trim(), init_cell_value)
+          // editing rows with no click must also update values
+          var init_cell_value = $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > a.urlfilter").text().trim()
+          var stripe_cell_value = $('.edit-fh table tbody tr:nth-child(1) td:nth-child(4) a').text().trim()
+          var c1_cell_value = $('.edit-fh table tbody tr:nth-child(1) td:nth-child(3) a').text().trim()
+          $('.edit button').click()
+          // make sure the initial value is Europe
+          test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val().trim(), init_cell_value)
 
-        $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(3) > input").val('300000').trigger('change')
+          $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(3) > input").val('300000').trigger('change')
 
-        $(".edit-fh table > tbody > tr:nth-child(3) > td:nth-child(3) > input").val('-90').trigger('change')
-        // save row
-        $('.edit button').click()
+          $(".edit-fh table > tbody > tr:nth-child(3) > td:nth-child(3) > input").val('-90').trigger('change')
+          // save row
+          $('.edit button').click()
+          test.equals($('div.formhandler tbody > tr:nth-child(2) > td:nth-child(7) > select').val(), "false")
+          test.equals($('div.formhandler tbody > tr:nth-child(7) > td:nth-child(7) > select').val(), "true")
 
-        test.equals($('.is-invalid').val(), '300000')
-        $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(3) > input").val('35').trigger('change')
+          test.equals($('.is-invalid').val(), '300000')
+          $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(3) > input").val('35').trigger('change')
 
-        // modify cell value inside <input>
-        $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val('Edited').trigger('change')
-        test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val().trim(), 'Edited')
+          // modify cell value inside <input>
+          $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val('Edited').trigger('change')
+          test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val().trim(), 'Edited')
 
-        // // save row
-        $('.edit button').click()
+          // // save row
+          $('.edit button').click()
 
 
-        test.equals($('.is-invalid').val(), '-90')
-        $(".edit-fh table > tbody > tr:nth-child(3) > td:nth-child(3) > input").val('28').trigger('change')
+          test.equals($('.is-invalid').val(), '-90')
+          $(".edit-fh table > tbody > tr:nth-child(3) > td:nth-child(3) > input").val('28').trigger('change')
 
-        $('.edit button').click()
-        setTimeout(function() {
-          // COMMENTING NEXT TEST CASE: Gramex required
-          // test.notOk($('.add button').prop('disabled'))
-          // test.equals($('.edit-btn').text(), 'Edit')
+          $('.edit button').click()
 
+          setTimeout(function () {
+            // COMMENTING NEXT TEST CASE: Gramex required
+            // test.notOk($('.add button').prop('disabled'))
+            // test.equals($('.edit-btn').text(), 'Edit')
 
-          $('.add button').click()
-          test.ok($('.edit button').prop('disabled'))
 
-          test.equals($('div.edit-fh tr.new-row td:nth-child(4) select').length, 1)
-          // all other columns must be input textbox and editable, overriding isEditable: false option also
-          test.equals($('div.edit-fh tr.new-row td:nth-child(1) input').length, 1)
+            $('.add button').click()
+            test.ok($('.edit button').prop('disabled'))
 
-          test.ok($('.edit button').prop('disabled'))
+            test.equals($('div.edit-fh tr.new-row td:nth-child(4) select').length, 1)
+            // all other columns must be input textbox and editable, overriding isEditable: false option also
+            test.equals($('div.edit-fh tr.new-row td:nth-child(1) input').length, 1)
 
-          test.end()
+            test.ok($('.edit button').prop('disabled'))
 
-        }, 500)
+            test.end()
 
-        /*
+          }, 500)
 
-        test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > a.urlfilter").text().trim(), 'Edited')
+          /*
 
-        // reset values
-        $('.edit button').click()
-        $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val(init_cell_value)
-        $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").trigger('change')
-        $('.edit button').click()
-        test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > a.urlfilter").text().trim(), init_cell_value)
+          test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > a.urlfilter").text().trim(), 'Edited')
 
-        // make sure all other field values are restored
-        test.equals($('.edit-fh table tbody tr:nth-child(1) td:nth-child(4) a').text().trim(), stripe_cell_value)
-        test.equals($('.edit-fh table tbody tr:nth-child(1) td:nth-child(3) a').text().trim(), c1_cell_value)
-        */
-      })
+          // reset values
+          $('.edit button').click()
+          $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val(init_cell_value)
+          $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").trigger('change')
+          $('.edit button').click()
+          test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > a.urlfilter").text().trim(), init_cell_value)
+
+          // make sure all other field values are restored
+          test.equals($('.edit-fh table tbody tr:nth-child(1) td:nth-child(4) a').text().trim(), stripe_cell_value)
+          test.equals($('.edit-fh table tbody tr:nth-child(1) td:nth-child(3) a').text().trim(), c1_cell_value)
+          */
+        })
     })
 
   </script>

test/test-formhandler.html

@@ -271,7 +271,7 @@
         })
         .on('load', function () {
           // no. of columns in meta data must be same as rendered columns
-          t.equal($('.fh6 thead tr th').length, 18)
+          t.equal($('.fh6 thead tr th').length, 19)
           // 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'
@@ -295,14 +295,14 @@
         .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)
+          t.equal($('.test_star_overrride thead tr th').length, 19 * 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)
+          t.equal($('.test_star_overrride thead tr').text().split('SameName').length - 1, 18 * 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))
         })
@@ -1075,7 +1075,7 @@
       })
       .on('load', function () {
         init_class_count += 1
-        t.ok($('.test-star-without-title table thead th a.dropdown-toggle').length == 18 * init_class_count)
+        t.ok($('.test-star-without-title table thead th a.dropdown-toggle').length == 19 * init_class_count)
       })
     })