tests/qunit/suites/resources/jquery/jquery.byteLimit.test.js

   1 module( 'jquery.byteLimit' );
   2
   3 test( '-- Initial check', function() {
   4         expect(1);
   5         ok( $.fn.byteLimit, 'jQuery.fn.byteLimit defined' );
   6 } );
   7
   8 // Basic sendkey-implementation
   9 $.addChars = function( $input, charstr ) {
  10         var len = charstr.length;
  11         for ( var i = 0; i < len; i++ ) {
  12                 // Keep track of the previous value
  13                 var prevVal = $input.val();
  14
  15                 // Get the key code
  16                 var code = charstr.charCodeAt(i);
  17
  18                 // Trigger event and undo if prevented
  19                 var event = new jQuery.Event( 'keypress', { keyCode: code, which: code, charCode: code } );
  20                 $input.trigger( event );
  21                 if ( !event.isDefaultPrevented() ) {
  22                         $input.val( prevVal + charstr.charAt(i) );
  23                 }
  24         }
  25 };
  26
  27 /**
  28  * Test factory for $.fn.byteLimit
  29  *
  30  * @param $input {jQuery} jQuery object in an input element
  31  * @param hasLimit {Boolean} Wether a limit should apply at all
  32  * @param limit {Number} Limit (if used) otherwise undefined
  33  * The limit should be less than 20 (the sample data's length)
  34  */
  35 var byteLimitTest = function( options ) {
  36         var opt = $.extend({
  37                 description: '',
  38                 $input: null,
  39                 sample: '',
  40                 hasLimit: false,
  41                 expected: '',
  42                 limit: null
  43         }, options);
  44
  45         test( opt.description, function() {
  46
  47                 opt.$input.appendTo( 'body' );
  48
  49                 // Simulate pressing keys for each of the sample characters
  50                 $.addChars( opt.$input, opt.sample );
  51                 var     rawVal = opt.$input.val(),
  52                         fn = opt.$input.data( 'byteLimit-callback' ),
  53                         newVal = $.isFunction( fn ) ? fn( rawVal ) : rawVal;
  54
  55                 if ( opt.hasLimit ) {
  56                         expect(3);
  57
  58                         ltOrEq( $.byteLength( newVal ), opt.limit, 'Prevent keypresses after byteLimit was reached, length never exceeded the limit' );
  59                         equal( $.byteLength( rawVal ), $.byteLength( opt.expected ), 'Not preventing keypresses too early, length has reached the expected length' );
  60                         equal( rawVal, opt.expected, 'New value matches the expected string' );
  61
  62                 } else {
  63                         expect(2);
  64                         equal( newVal, opt.expected, 'New value matches the expected string' );
  65                         equal( $.byteLength( newVal ), $.byteLength( opt.expected ), 'Unlimited scenarios are not affected, expected length reached' );
  66                 }
  67
  68                 opt.$input.remove();
  69         } );
  70 };
  71
  72 var
  73         // Simple sample (20 chars, 20 bytes)
  74         simpleSample = '12345678901234567890',
  75
  76         // 3 bytes (euro-symbol)
  77         U_20AC = '\u20AC',
  78
  79         // Multi-byte sample (22 chars, 26 bytes)
  80         mbSample = '1234567890' + U_20AC + '1234567890' + U_20AC;
  81
  82 byteLimitTest({
  83         description: 'Plain text input',
  84         $input: $( '<input>' )
  85                 .attr( 'type', 'text' ),
  86         sample: simpleSample,
  87         hasLimit: false,
  88         expected: simpleSample
  89 });
  90
  91 byteLimitTest({
  92         description: 'Limit using the maxlength attribute',
  93         $input: $( '<input>' )
  94                 .attr( 'type', 'text' )
  95                 .prop( 'maxLength', '10' )
  96                 .byteLimit(),
  97         sample: simpleSample,
  98         hasLimit: true,
  99         limit: 10,
 100         expected: '1234567890'
 101 });
 102
 103 byteLimitTest({
 104         description: 'Limit using a custom value',
 105         $input: $( '<input>' )
 106                 .attr( 'type', 'text' )
 107                 .byteLimit( 10 ),
 108         sample: simpleSample,
 109         hasLimit: true,
 110         limit: 10,
 111         expected: '1234567890'
 112 });
 113
 114 byteLimitTest({
 115         description: 'Limit using a custom value, overriding maxlength attribute',
 116         $input: $( '<input>' )
 117                 .attr( 'type', 'text' )
 118                 .prop( 'maxLength', '10' )
 119                 .byteLimit( 15 ),
 120         sample: simpleSample,
 121         hasLimit: true,
 122         limit: 15,
 123         expected: '123456789012345'
 124 });
 125
 126 byteLimitTest({
 127         description: 'Limit using a custom value (multibyte)',
 128         $input: $( '<input>' )
 129                 .attr( 'type', 'text' )
 130                 .byteLimit( 14 ),
 131         sample: mbSample,
 132         hasLimit: true,
 133         limit: 14,
 134         expected: '1234567890' + U_20AC + '1'
 135 });
 136
 137 byteLimitTest({
 138         description: 'Limit using a custom value (multibyte) overlapping a byte',
 139         $input: $( '<input>' )
 140                 .attr( 'type', 'text' )
 141                 .byteLimit( 12 ),
 142         sample: mbSample,
 143         hasLimit: true,
 144         limit: 12,
 145         expected: '1234567890' + '12'
 146 });
 147
 148 byteLimitTest({
 149         description: 'Pass the limit and a callback as input filter',
 150         $input: $( '<input>' )
 151                 .attr( 'type', 'text' )
 152                 .byteLimit( 6, function( val ) {
 153                         _titleConfig();
 154
 155                         // Invalid title
 156                         if ( val == '' ) {
 157                                 return '';
 158                         }
 159
 160                         // Return without namespace prefix
 161                         return new mw.Title( '' + val ).getMain();
 162                 } ),
 163         sample: 'User:Sample',
 164         hasLimit: true,
 165         limit: 6, // 'Sample' length
 166         expected: 'User:Sample'
 167 });
 168
 169 byteLimitTest({
 170         description: 'Limit using the maxlength attribute and pass a callback as input filter',
 171         $input: $( '<input>' )
 172                 .attr( 'type', 'text' )
 173                 .prop( 'maxLength', '6' )
 174                 .byteLimit( function( val ) {
 175                         _titleConfig();
 176
 177                         // Invalid title
 178                         if ( val === '' ) {
 179                                 return '';
 180                         }
 181
 182                         // Return without namespace prefix
 183                         return new mw.Title( '' + val ).getMain();
 184                 } ),
 185         sample: 'User:Sample',
 186         hasLimit: true,
 187         limit: 6, // 'Sample' length
 188         expected: 'User:Sample'
 189 });