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( {
  86                         'type': 'text'
  87                 }),
  88         sample: simpleSample,
  89         hasLimit: false,
  90         expected: simpleSample
  91 });
  92
  93 byteLimitTest({
  94         description: 'Limit using the maxlength attribute',
  95         $input: $( '<input>' )
  96                 .attr( 'type', 'text' )
  97                 .prop( 'maxLength', '10' )
  98                 .byteLimit(),
  99         sample: simpleSample,
 100         hasLimit: true,
 101         limit: 10,
 102         expected: '1234567890'
 103 });
 104
 105 byteLimitTest({
 106         description: 'Limit using a custom value',
 107         $input: $( '<input>' )
 108                 .attr( {
 109                         'type': 'text'
 110                 })
 111                 .byteLimit( 10 ),
 112         sample: simpleSample,
 113         hasLimit: true,
 114         limit: 10,
 115         expected: '1234567890'
 116 });
 117
 118 byteLimitTest({
 119         description: 'Limit using a custom value, overriding maxlength attribute',
 120         $input: $( '<input>' )
 121                 .attr( 'type', 'text' )
 122                 .prop( 'maxLength', '10' )
 123                 .byteLimit( 15 ),
 124         sample: simpleSample,
 125         hasLimit: true,
 126         limit: 15,
 127         expected: '123456789012345'
 128 });
 129
 130 byteLimitTest({
 131         description: 'Limit using a custom value (multibyte)',
 132         $input: $( '<input>' )
 133                 .attr( {
 134                         'type': 'text'
 135                 })
 136                 .byteLimit( 14 ),
 137         sample: mbSample,
 138         hasLimit: true,
 139         limit: 14,
 140         expected: '1234567890' + U_20AC + '1'
 141 });
 142
 143 byteLimitTest({
 144         description: 'Limit using a custom value (multibyte) overlapping a byte',
 145         $input: $( '<input>' )
 146                 .attr( {
 147                         'type': 'text'
 148                 })
 149                 .byteLimit( 12 ),
 150         sample: mbSample,
 151         hasLimit: true,
 152         limit: 12,
 153         expected: '1234567890' + '12'
 154 });
 155
 156 byteLimitTest({
 157         description: 'Pass the limit and a callback as input filter',
 158         $input: $( '<input>' )
 159                 .attr( {
 160                         'type': 'text'
 161                 })
 162                 .byteLimit( 6, function( val ) {
 163                         _titleConfig();
 164
 165                         // Invalid title
 166                         if ( val == '' ) {
 167                                 return '';
 168                         }
 169
 170                         // Return without namespace prefix
 171                         return new mw.Title( '' + val ).getMain();
 172                 } ),
 173         sample: 'User:Sample',
 174         hasLimit: true,
 175         limit: 6, // 'Sample' length
 176         expected: 'User:Sample'
 177 });
 178
 179 byteLimitTest({
 180         description: 'Limit using the maxlength attribute and pass a callback as input filter',
 181         $input: $( '<input>' )
 182                 .attr( 'type', 'text' )
 183                 .prop( 'maxLength', '6' )
 184                 .byteLimit( function( val ) {
 185                         _titleConfig();
 186
 187                         // Invalid title
 188                         if ( val === '' ) {
 189                                 return '';
 190                         }
 191
 192                         // Return without namespace prefix
 193                         return new mw.Title( '' + val ).getMain();
 194                 } ),
 195         sample: 'User:Sample',
 196         hasLimit: true,
 197         limit: 6, // 'Sample' length
 198         expected: 'User:Sample'
 199 });