TST: add tests for unique values filtering

src/formhandler.js

@@ -225,8 +225,12 @@ function modalHandler($this) {
     })
     .on('shown.bs.modal', '.formhandler-unique-table-modal', function (e) {
       var $el = $(e.relatedTarget)
-      var template_data = $this.data('formhandler')
       var col = $el.closest('[data-col]').data('col')
+
+      // if content already rendered for current col, and same col modal is opened
+      if (currentKey == col && $.trim($('.fh-unique', $this).html())) return
+
+      var template_data = $this.data('formhandler')
       currentKey = col
       // render checkboxes for unique items of column
       var unique_values = _.find(template_data.options.columns, function(item){return item.name == col}).unique
@@ -252,7 +256,7 @@ function modalHandler($this) {
       $('.fh-unique', $('.formhandler-unique-table-modal', $this)).html('').append(modal_content)
 
       checkbox_state_toggle_selectall('.fh-select-all', true)()
-      $('.fh-unique-values', $this).trigger('refresh').on('click', checkbox_state_toggle_selectall('.fh-select-all', true))
+      $('.fh-unique-values', $this).on('change', checkbox_state_toggle_selectall('.fh-select-all', true))
       $('.fh-select-all', $this).on('change', checkbox_state_toggle_selectall('.fh-label-unique-values:not(.d-none) input.fh-unique-values', false))
 
       function checkbox_state_toggle_selectall(selector, checked) {
@@ -270,6 +274,7 @@ function modalHandler($this) {
       if (jQuery.fn.search) {
         $('.formhandler-unique-table-modal').search()
         $('input[type="search"]', $this).trigger('search')
+        $('input[type="search"]', $this).on('shown.g.search', checkbox_state_toggle_selectall('.fh-select-all', true))
       }
       else {
         $('input[type="search"]', $this).remove()

test/test-formhandler-unique.html

@@ -30,7 +30,14 @@
   </script>
   <div class="unique-filters"></div>
   <script>
+          var $this = $('.unique-filters')
+
     tape('g1.formhandler() test filter by unique values and clearing same key filters', function (test) {
+      var stripes_unique_values = [
+            'Verticalfffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+            'Horizontal',
+            'Diagonal'
+          ]
       $('.unique-filters').formhandler({
         src: '/formhandler-data',
         columns: [{
@@ -38,11 +45,7 @@
         },
         {
           name: 'Stripes',
-          unique: [
-            'Verticalfffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-            'Horizontal',
-            'Diagonal'
-          ],
+          unique: stripes_unique_values,
           editable: {
             input: 'select',
             options: [
@@ -59,7 +62,66 @@
         ]
       })
         .on('load', function () {
-          // test for search & checkbox ALL state management
+          var $this = $('.unique-filters')
+          // when modal "Filter by Values..." is clicked, 
+          // template inside should be rendered with checkbox & labels
+          $('[data-target="#fh-unique-modal-0"]', $this).first().click()
+          test.equals($('.fh-unique label').length, stripes_unique_values.length + 1)
+
+          // when clicked "cancel" and again clicked "Filter by Values...", template again should be rendered with checkbox & labels
+          $('data-dismiss="modal"', $('.unique-filters formhandler-unique-table-modal')).click()
+          $('[data-target="#fh-unique-modal-0"]', $this).first().click()
+          test.equals($('.fh-unique label').length, stripes_unique_values.length + 1)
+
+          // when clicked a label/checkbox, and clicked cancel,
+          $('.fh-label-unique-values input').first().click()
+          $('data-dismiss="modal"', $('.unique-filters formhandler-unique-table-modal')).click()
+
+          // and reclicked "Filter by Values", template must be rendered with checkobx selected
+          $('[data-target="#fh-unique-modal-0"]', $this).first().click()
+          test.ok($('.fh-label-unique-values input').first().prop('checked'), true)
+
+          // on click cancel, and clicked other column modal, contents must be for that column and not prev column
+          $('[data-target="#fh-unique-modal-0"]', $this).last().click()
+          test.ok($('.fh-label-unique-values input').length, 0)
+
+          // on changing search input, d-none class must be added to non-matched items
+          $('input[type="search"]', $this).val('Diag').change().trigger('search')
+          test.equals($('.fh-unique .fh-label-unique-values:not(.d-none)', $this).length, 1)
+
+          // on clearing search, no item should have d-none class
+          $('input[type="search"]', $this).val('').change().trigger('search')
+          test.equals($('.fh-unique .fh-label-unique-values:not(.d-none)', $this).length, stripes_unique_values.length)
+
+          // on click of "All", all checkboxes must be checked
+          $('.fh-select-all', $this).click()
+          test.equals($('.fh-unique-values:checked', $this).length, stripes_unique_values.length)
+
+          // on click of a checkbox, All must be deselected and except that checkbox, other values must remain selected
+          $('.fh-label-unique-values input').first().click()
+          test.notOk($('.fh-select-all', $this).prop('checked'))
+          test.equals($('.fh-unique-values:checked', $this).length, stripes_unique_values.length - 1)
+
+          // on click of "All", all checkboxes must be checked
+          $('.fh-select-all', $this).click()
+          test.equals($('.fh-unique-values:checked', $this).length, stripes_unique_values.length)
+
+          // on click of "ALl" again, all checkboxes must be deselected
+          $('.fh-select-all', $this).click()
+          test.equals($('.fh-unique-values:checked', $this).length, 0)
+
+          // on changing search input, and clicking on All and clearing search input, only few checkboxes get checked and All is deselected
+          $('input[type="search"]', $this).val('Diag').change().trigger('search')
+          $('.fh-select-all', $this).click()
+          $('input[type="search"]', $this).val('').change().trigger('search')
+          test.equals($('.fh-unique-values:checked', $this).length, 1)
+          test.equals($('.fh-unique .fh-label-unique-values:not(.d-none)', $this).length, 3)
+          test.notOk($('.fh-select-all', $this).prop('checked'))
+
+          // on click of "All", all checkboxes must be selected
+          $('.fh-select-all', $this).click()
+          test.equals($('.fh-unique-values:checked', $this).length, stripes_unique_values.length)
+          test.ok($('.fh-select-all', $this).prop('checked'))
 
           test.end()
         })