checklist test

src/editable-form/editable-form-utils.js

@@ -38,7 +38,7 @@
             * for details see http://stackoverflow.com/questions/7410348/how-to-set-json-format-to-html5-data-attributes-in-the-jquery
             */
             tryParseJson: function(s, safe) {
-                if (typeof s === 'string' && s.length && s.match(/^\{.*\}$/)) {
+                if (typeof s === 'string' && s.length && s.match(/^[\{\[].*[\}\]]$/)) {
                     if (safe) {
                         try {
                             /*jslint evil: true*/

src/inputs/checklist.js

@@ -55,7 +55,7 @@ $(function(){
         str2value: function(str) {
            var reg, value = null;
            if(typeof str === 'string' && str.length) {
-               reg = new RegExp('\s*'+$.trim(this.options.separator)+'\s*');
+               reg = new RegExp('\\s*'+$.trim(this.options.separator)+'\\s*');
                value = str.split(reg);
            } else if($.isArray(str)) {
                value = str; 
@@ -86,9 +86,9 @@ $(function(){
           
        //collect text of checked boxes
         value2htmlFinal: function(value, element) {
-           var selected = [], html = '';
+           var selected = [], item, i, html = '';
-           if($.isArray(value) && value.length <= this.options.limit) {
+           if($.isArray(value) && value.length <= this.options.limit) {    
-               for(var i=0; i<value.length; i++){
+               for(i=0; i<value.length; i++){
                    item = this.itemByVal(value[i]);
                    if(item) {
                        selected.push($('<div>').text(item.text).html());
@@ -140,9 +140,9 @@ $(function(){
 
         @property limitText 
         @type string
-        @default 'Checked {checked} options of {count}'
+        @default 'Selected {checked} of {count}'
         **/         
-        limitText: 'Checked {checked} options of {count}'        
+        limitText: 'Selected {checked} of {count}'        
     });
 
     $.fn.editableform.types.checklist = Checklist;      

src/inputs/list.js

@@ -209,7 +209,7 @@ List - abstract class for inputs that have source option loaded from js array or
         //search for item by particular value
         itemByVal: function(val) {
             if($.isArray(this.sourceData)) {
-                for(i=0; i<this.sourceData.length; i++){
+                for(var i=0; i<this.sourceData.length; i++){
                     /*jshint eqeqeq: false*/
                     if(this.sourceData[i].value == val) {
                     /*jshint eqeqeq: true*/                            

test/index.html

@@ -43,6 +43,7 @@
   <script src="unit/select.js"></script>  
   <script src="unit/textarea.js"></script>  
   <script src="unit/api.js"></script>
+  <script src="unit/checklist.js"></script>
   <script>  
     if(fc.f === 'bootstrap') {
         loadJs('unit/date.js'); 

test/mocks.js

@@ -1,7 +1,7 @@
 var timeout = 200;
 $(function () {
     
- $.mockjaxSettings.responseTime = 50;
+    $.mockjaxSettings.responseTime = 50;
     
     $.mockjax({
         url: 'post.php',
@@ -23,6 +23,38 @@ $(function () {
             this.responseText = settings;  
         }
     }); 
+    
+    
+    window.groups =  {
+            0: 'Guest',
+            1: 'Service',
+            2: 'Customer',
+            3: 'Operator',
+            4: 'Support',
+            5: 'Admin',
+            6: '',
+            '': 'Nothing'
+      };
+      
+    //groups as array  
+    window.groupsArr = [];
+    for(var i in groups) {
+        groupsArr.push({value: i, text: groups[i]}); 
+    }
+      
+    window.size = groupsArr.length;
+    
+    $.mockjax({
+        url: 'groups.php',
+        responseText: groups
+    });
+
+    $.mockjax({
+        url: 'groups-error.php',
+        status: 500,
+        responseText: 'Internal Server Error'
+    });       
+    
 });
 
 // usefull functions

test/unit/checklist.js

@@ -0,0 +1,96 @@
+$(function () {
+   
+    module("checklist", {
+        setup: function(){
+            sfx = $('#qunit-fixture'),
+            fx = $('#async-fixture');               
+            $.fn.editable.defaults.name = 'name2';
+            //clear cache
+            $(document).removeData('groups.php-'+$.fn.editable.defaults.name);
+            $.support.transition = false;
+        }
+    });  
+   
+    asyncTest("should load options, set correct value and save new value", function () {
+         var sep = '-',
+             newValue,
+             e = $('<a href="#" data-type="checklist" data-url="post.php"></a>').appendTo(fx).editable({
+             pk: 1,
+             source: groupsArr,
+             value: [2, 3],
+             viewseparator: sep
+        });
+           
+        equal(e.text(), groups[2]+sep+groups[3], 'autotext ok');
+        
+        e.click();
+        var p = tip(e);
+        equal(p.find('input[type="checkbox"]').length, groupsArr.length, 'checkboxes rendered');
+        equal(p.find('input[type="checkbox"]:checked').length, 2, 'checked count ok');
+        equal(p.find('input[type="checkbox"]:checked').eq(0).val(), 2, '1st checked');
+        equal(p.find('input[type="checkbox"]:checked').eq(1).val(), 3, '2nd checked');
+
+        //set new value
+        p.find('input[type="checkbox"]:checked').eq(0).click(); 
+        p.find('input[type="checkbox"]').first().click();
+        newValue = p.find('input[type="checkbox"]').first().val();
+        
+        //submit
+        p.find('form').submit(); 
+         
+         setTimeout(function() {
+               ok(!p.is(':visible'), 'popup closed');
+               
+               equal(e.data('editable').value.join(''), [newValue, 3].join(''), 'new value ok')
+               equal(e.text(), groups[newValue]+sep+groups[3], 'new text ok');
+              
+               // open container again to see what checked
+               e.click()
+               p = tip(e);
+               
+               equal(p.find('input[type="checkbox"]').length, groupsArr.length, 'checkboxes rendered');
+               equal(p.find('input[type="checkbox"]:checked').length, 2, 'checked count ok');
+               equal(p.find('input[type="checkbox"]:checked').eq(0).val(), newValue, '1st checked');
+               equal(p.find('input[type="checkbox"]:checked').eq(1).val(), 3, '2nd checked');               
+               
+               e.remove();    
+               start();  
+         }, timeout);                              
+    });                  
+   
+     asyncTest("test limit", function () {
+         var e = $('<a href="#" data-type="checklist" data-value="2,3" data-url="post.php"></a>').appendTo(fx).editable({
+             pk: 1,
+             source: groupsArr,
+             limit: 1,
+             limitText: '{checked} of {count}'
+        });
+           
+        equal(e.text(), '2 of '+groupsArr.length, 'autotext ok');
+        
+        e.click();
+        var p = tip(e);
+
+        equal(p.find('input[type="checkbox"]:checked').length, 2, 'checked count ok');
+        equal(p.find('input[type="checkbox"]:checked').eq(0).val(), 2, '1st checked');
+        equal(p.find('input[type="checkbox"]:checked').eq(1).val(), 3, '2nd checked');
+
+        //set new value
+        p.find('input[type="checkbox"]').first().click();
+        newValue = p.find('input[type="checkbox"]').first().val();
+        
+        //submit
+        p.find('form').submit(); 
+         
+         setTimeout(function() {
+               ok(!p.is(':visible'), 'popup closed');
+               
+               equal(e.text(), '3 of '+groupsArr.length, 'autotext ok');
+               
+               e.remove();    
+               start();  
+         }, timeout);                              
+    });   
+   
+     
+});

test/unit/select.js

@@ -1,34 +1,4 @@
 $(function () {
-    
-    window.groups =  {
-            0: 'Guest',
-            1: 'Service',
-            2: 'Customer',
-            3: 'Operator',
-            4: 'Support',
-            5: 'Admin',
-            6: '',
-            '': 'Nothing'
-      };
-      
-    //groups as array  
-    window.groupsArr = [];
-    for(var i in groups) {
-        groupsArr.push({value: i, text: groups[i]}); 
-    }
-      
-    window.size = groupsArr.length;
-    
-    $.mockjax({
-        url: 'groups.php',
-        responseText: groups
-    });
-
-    $.mockjax({
-        url: 'groups-error.php',
-        status: 500,
-        responseText: 'Internal Server Error'
-    });   
    
     module("select", {
         setup: function(){