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