select2 test ready

src/inputs/select2/select2.js

@@ -108,7 +108,7 @@ $(function(){
        },       
         
        html2value: function(html) {
-           return this.options.select2.tags ? this.str2value(html) : null;
+           return this.options.select2.tags ? this.str2value(html, this.options.viewseparator) : null;
        }, 
        
        value2input: function(value) {
@@ -119,13 +119,13 @@ $(function(){
            return this.$input.select2('val');
        },
 
-       str2value: function(str) {
+       str2value: function(str, separator) {
             if(typeof str !== 'string' || !this.isMultiple) {
                 return str;
             }
             
             var val, i, l,
-                separator = this.options.select2.separator || $.fn.select2.defaults.separator;
+                separator = separator || this.options.select2.separator || $.fn.select2.defaults.separator;
             if (str === null || str.length < 1) {
                 return null;
             }

test/index.html

@@ -21,7 +21,7 @@
   <div> 
     <div id="qunit"></div>
     <div id="qunit-fixture"></div>
-    <div id="async-fixture"></div>
+    <div id="async-fixture" style="padding-left:300px"></div>
   </div>
 </body>
 </html>

test/main.js

@@ -49,7 +49,8 @@ require(["loader", jqurl], function(loader) {
             'test/unit/textarea',
             'test/unit/select',
             'test/unit/checklist',
-            'test/unit/combodate'
+            'test/unit/combodate',
+            'test/unit/select2'
        ];
        tests = tests.concat(custom);
        tests.push('test/unit/api');

test/unit/select2.js

@@ -0,0 +1,146 @@
+$(function () {
+   
+    module("select2", {
+        setup: function(){
+            sfx = $('#qunit-fixture'),
+            fx = $('#async-fixture');               
+            $.support.transition = false;
+        }
+    });  
+    
+     asyncTest("data (single)", function () {
+        var s = 2, text = 'text2',
+            e = $('<a href="#" data-type="select2" data-name="select2" data-value="'+s+'"></a>').appendTo(fx).editable({
+            source: [{id: 1, text: 'text1'}, {id: s, text: text}, {id: 3, text: 'text3'}],
+            select2: {}
+        });
+
+        //autotext
+        equal(e.data('editable').value, s, 'initial value ok');
+        equal(e.text(), text, 'intial text ok'); 
+        
+        e.click();
+        var p = tip(e);
+        
+        ok(p.is(':visible'), 'popover visible');
+        var $input = p.find('input[type="hidden"]');
+        ok($input.length, 'input exists');
+        ok($input.select2, 'select2 applied');
+        equal($input.val(), e.data('editable').value, 'selected value correct');        
+        equal(p.find('.select2-choice span').text(), text, 'selected text correct');        
+        
+        //select new value
+        s = 1; 
+        text = 'text1';
+        $input.select2('val', s);
+
+        equal($input.val(), s, 'new value ok');        
+        equal(p.find('.select2-choice span').text(), text, 'new text ok');
+
+        p.find('form').submit();
+        
+        setTimeout(function() {
+            ok(!p.is(':visible'), 'popover closed');
+            equal(e.data('editable').value, s, 'new value ok');
+            equal(e.text(), text, 'new text ok');             
+            
+            e.remove();
+            start();
+        }, timeout);
+     });  
+     
+     asyncTest("data (multiple)", function () {
+        var s = '2,3', text = 'text2, text3',
+            e = $('<a href="#" data-type="select2" data-name="select2" data-value="'+s+'"></a>').appendTo(fx).editable({
+            source: [{id: 1, text: 'text1'}, {id: 2, text: 'text2'}, {id: 3, text: 'text3'}],
+            viewseparator: ', ',
+            select2: {
+                multiple: true
+            }
+        });
+
+        //autotext
+        equal(e.data('editable').value.join(','), s, 'initial value ok');
+        equal(e.text(), text, 'intial text ok'); 
+        
+        e.click();
+        var p = tip(e);
+        
+        ok(p.is(':visible'), 'popover visible');
+        var $input = p.find('input[type="hidden"]');
+        ok($input.length, 'input exists');
+        ok($input.select2, 'select2 applied');
+        equal($input.val(), s, 'selected value ok');        
+        equal(p.find('.select2-search-choice > div').length, 2, 'selected text ok');        
+        equal(p.find('.select2-search-choice > div').eq(0).text(), 'text2', 'text2 ok');        
+        equal(p.find('.select2-search-choice > div').eq(1).text(), 'text3', 'text3 ok');        
+        
+        //select new value
+        s = '1,2'; 
+        text = 'text1, text2';
+        $input.select2('val', [1, 2]);
+
+        equal($input.val(), s, 'new value ok');        
+        equal(p.find('.select2-search-choice > div').length, 2, 'new text ok');        
+        equal(p.find('.select2-search-choice > div').eq(0).text(), 'text1', 'text1 ok');        
+        equal(p.find('.select2-search-choice > div').eq(1).text(), 'text2', 'text2 ok');  
+
+        p.find('form').submit();
+        
+        setTimeout(function() {
+            ok(!p.is(':visible'), 'popover closed');
+            equal(e.data('editable').value, s, 'new value ok');
+            equal(e.text(), text, 'new text ok');             
+            
+            e.remove();
+            start();
+        }, timeout);
+     });       
+   
+    asyncTest("tags", function () {
+        var s = 'text2,abc', text = 'text2, abc',
+            e = $('<a href="#" data-type="select2" data-name="select2">'+text+'</a>').appendTo(fx).editable({
+            viewseparator: ', ',
+            select2: {
+                tags: ['text1', 'text2']
+            }
+        });
+
+        equal(e.data('editable').value.join(','), s, 'initial value ok');
+        
+        e.click();
+        var p = tip(e);
+        
+        ok(p.is(':visible'), 'popover visible');
+        var $input = p.find('input[type="hidden"]');
+        ok($input.length, 'input exists');
+        ok($input.select2, 'select2 applied');
+        equal($input.val(), s, 'selected value ok');        
+        equal(p.find('.select2-search-choice > div').length, 2, 'selected text ok');        
+        equal(p.find('.select2-search-choice > div').eq(0).text(), 'text2', 'text2 ok');        
+        equal(p.find('.select2-search-choice > div').eq(1).text(), 'abc', 'abc ok');        
+        
+        //select new value
+        s = 'text1,cde'; 
+        text = 'text1, cde';
+        $input.select2('val', ['text1', 'cde']);
+
+        equal($input.val(), s, 'new value ok');        
+        equal(p.find('.select2-search-choice > div').length, 2, 'new text ok');        
+        equal(p.find('.select2-search-choice > div').eq(0).text(), 'text1', 'text1 ok');        
+        equal(p.find('.select2-search-choice > div').eq(1).text(), 'cde', 'cde ok');   
+
+        p.find('form').submit();
+        
+        setTimeout(function() {
+            ok(!p.is(':visible'), 'popover closed');
+            equal(e.data('editable').value, s, 'new value ok');
+            equal(e.text(), text, 'new text ok');             
+            
+            e.remove();
+            start();
+        }, timeout);
+     });          
+     
+    
+});