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

   1 ( function ( $ ) {
   2         var simpleSample, U_20AC, mbSample;
   3
   4         module( 'jquery.byteLimit', QUnit.newMwEnvironment() );
   5
   6         // Simple sample (20 chars, 20 bytes)
   7         simpleSample = '12345678901234567890';
   8
   9         // 3 bytes (euro-symbol)
  10         U_20AC = '\u20AC';
  11
  12         // Multi-byte sample (22 chars, 26 bytes)
  13         mbSample = '1234567890' + U_20AC + '1234567890' + U_20AC;
  14
  15         // Basic sendkey-implementation
  16         function addChars( $input, charstr ) {
  17                 var len, i, prevVal, code, event;
  18                 len = charstr.length;
  19                 for ( i = 0; i < len; i += 1 ) {
  20                         // Keep track of the previous value
  21                         prevVal = $input.val();
  22
  23                         // Get the key code
  24                         code = charstr.charCodeAt( i );
  25
  26                         // Trigger event and undo if prevented
  27                         event = new jQuery.Event( 'keypress', {
  28                                 which: code,
  29                                 keyCode: code,
  30                                 charCode: code
  31                         } );
  32                         $input.trigger( event );
  33                         if ( !event.isDefaultPrevented() ) {
  34                                 $input.val( prevVal + charstr.charAt( i ) );
  35                         }
  36                 }
  37         }
  38
  39         /**
  40          * Test factory for $.fn.byteLimit
  41          *
  42          * @param $input {jQuery} jQuery object in an input element
  43          * @param hasLimit {Boolean} Wether a limit should apply at all
  44          * @param limit {Number} Limit (if used) otherwise undefined
  45          * The limit should be less than 20 (the sample data's length)
  46          */
  47         function byteLimitTest( options ) {
  48                 var opt = $.extend({
  49                         description: '',
  50                         $input: null,
  51                         sample: '',
  52                         hasLimit: false,
  53                         expected: '',
  54                         limit: null
  55                 }, options);
  56
  57                 test( opt.description, function () {
  58                         var rawVal, fn, newVal;
  59
  60                         opt.$input.appendTo( '#qunit-fixture' );
  61
  62                         // Simulate pressing keys for each of the sample characters
  63                         addChars( opt.$input, opt.sample );
  64                         rawVal = opt.$input.val();
  65                         fn = opt.$input.data( 'byteLimit-callback' );
  66                         newVal = $.isFunction( fn ) ? fn( rawVal ) : rawVal;
  67
  68                         if ( opt.hasLimit ) {
  69                                 expect(3);
  70
  71                                 QUnit.ltOrEq(
  72                                         $.byteLength( newVal ),
  73                                         opt.limit,
  74                                         'Prevent keypresses after byteLimit was reached, length never exceeded the limit'
  75                                 );
  76                                 equal(
  77                                         $.byteLength( rawVal ),
  78                                         $.byteLength( opt.expected ),
  79                                         'Not preventing keypresses too early, length has reached the expected length'
  80                                 );
  81                                 equal( rawVal, opt.expected, 'New value matches the expected string' );
  82
  83                         } else {
  84                                 expect(2);
  85                                 equal( newVal, opt.expected, 'New value matches the expected string' );
  86                                 equal(
  87                                         $.byteLength( newVal ),
  88                                         $.byteLength( opt.expected ),
  89                                         'Unlimited scenarios are not affected, expected length reached'
  90                                 );
  91                         }
  92                 } );
  93         }
  94
  95         test( '-- Initial check', function () {
  96                 expect(1);
  97                 ok( $.fn.byteLimit, 'jQuery.fn.byteLimit defined' );
  98         } );
  99
 100         byteLimitTest({
 101                 description: 'Plain text input',
 102                 $input: $( '<input>' )
 103                         .attr( 'type', 'text' ),
 104                 sample: simpleSample,
 105                 hasLimit: false,
 106                 expected: simpleSample
 107         });
 108
 109         byteLimitTest({
 110                 description: 'Limit using the maxlength attribute',
 111                 $input: $( '<input>' )
 112                         .attr( 'type', 'text' )
 113                         .prop( 'maxLength', '10' )
 114                         .byteLimit(),
 115                 sample: simpleSample,
 116                 hasLimit: true,
 117                 limit: 10,
 118                 expected: '1234567890'
 119         });
 120
 121         byteLimitTest({
 122                 description: 'Limit using a custom value',
 123                 $input: $( '<input>' )
 124                         .attr( 'type', 'text' )
 125                         .byteLimit( 10 ),
 126                 sample: simpleSample,
 127                 hasLimit: true,
 128                 limit: 10,
 129                 expected: '1234567890'
 130         });
 131
 132         byteLimitTest({
 133                 description: 'Limit using a custom value, overriding maxlength attribute',
 134                 $input: $( '<input>' )
 135                         .attr( 'type', 'text' )
 136                         .prop( 'maxLength', '10' )
 137                         .byteLimit( 15 ),
 138                 sample: simpleSample,
 139                 hasLimit: true,
 140                 limit: 15,
 141                 expected: '123456789012345'
 142         });
 143
 144         byteLimitTest({
 145                 description: 'Limit using a custom value (multibyte)',
 146                 $input: $( '<input>' )
 147                         .attr( 'type', 'text' )
 148                         .byteLimit( 14 ),
 149                 sample: mbSample,
 150                 hasLimit: true,
 151                 limit: 14,
 152                 expected: '1234567890' + U_20AC + '1'
 153         });
 154
 155         byteLimitTest({
 156                 description: 'Limit using a custom value (multibyte) overlapping a byte',
 157                 $input: $( '<input>' )
 158                         .attr( 'type', 'text' )
 159                         .byteLimit( 12 ),
 160                 sample: mbSample,
 161                 hasLimit: true,
 162                 limit: 12,
 163                 expected: '1234567890' + '12'
 164         });
 165
 166         byteLimitTest({
 167                 description: 'Pass the limit and a callback as input filter',
 168                 $input: $( '<input>' )
 169                         .attr( 'type', 'text' )
 170                         .byteLimit( 6, function ( val ) {
 171                                 // Invalid title
 172                                 if ( val === '' ) {
 173                                         return '';
 174                                 }
 175
 176                                 // Return without namespace prefix
 177                                 return new mw.Title( String( val ) ).getMain();
 178                         } ),
 179                 sample: 'User:Sample',
 180                 hasLimit: true,
 181                 limit: 6, // 'Sample' length
 182                 expected: 'User:Sample'
 183         });
 184
 185         byteLimitTest({
 186                 description: 'Limit using the maxlength attribute and pass a callback as input filter',
 187                 $input: $( '<input>' )
 188                         .attr( 'type', 'text' )
 189                         .prop( 'maxLength', '6' )
 190                         .byteLimit( function ( val ) {
 191                                 // Invalid title
 192                                 if ( val === '' ) {
 193                                         return '';
 194                                 }
 195
 196                                 // Return without namespace prefix
 197                                 return new mw.Title( String( val ) ).getMain();
 198                         } ),
 199                 sample: 'User:Sample',
 200                 hasLimit: true,
 201                 limit: 6, // 'Sample' length
 202                 expected: 'User:Sample'
 203         });
 204
 205         test( 'Confirm properties and attributes set', function () {
 206                 var $el, $elA, $elB;
 207
 208                 expect(5);
 209
 210                 $el = $( '<input>' )
 211                         .attr( 'type', 'text' )
 212                         .prop( 'maxLength', '7' )
 213                         .appendTo( '#qunit-fixture' )
 214                         .byteLimit();
 215
 216                 strictEqual( $el.prop( 'maxLength' ), 7, 'Pre-set maxLength property unchanged' );
 217
 218                 $el = $( '<input>' )
 219                         .attr( 'type', 'text' )
 220                         .prop( 'maxLength', '7' )
 221                         .appendTo( '#qunit-fixture' )
 222                         .byteLimit( 12 );
 223
 224                 strictEqual( $el.prop( 'maxLength' ), 12, 'maxLength property updated if value was passed to $.fn.byteLimit' );
 225
 226                 $elA = $( '<input>' )
 227                         .addClass( 'mw-test-byteLimit-foo' )
 228                         .attr( 'type', 'text' )
 229                         .prop( 'maxLength', '7' )
 230                         .appendTo( '#qunit-fixture' );
 231
 232                 $elB = $( '<input>' )
 233                         .addClass( 'mw-test-byteLimit-foo' )
 234                         .attr( 'type', 'text' )
 235                         .prop( 'maxLength', '12' )
 236                         .appendTo( '#qunit-fixture' );
 237
 238                 $el = $( '.mw-test-byteLimit-foo' );
 239
 240                 strictEqual( $el.length, 2, 'Verify that there are no other elements clashing with this test suite' );
 241
 242                 $el.byteLimit();
 243
 244                 // Before bug 35294 was fixed, both $elA and $elB had maxLength set to 7,
 245                 // because $.fn.byteLimit sets:
 246                 // `limit = limitArg || this.prop( 'maxLength' ); this.prop( 'maxLength', limit )`
 247                 // and did so outside the each() loop.
 248                 strictEqual( $elA.prop( 'maxLength' ), 7, 'maxLength was not incorrectly set on #1 when calling byteLimit on multiple elements (bug 35294)' );
 249                 strictEqual( $elB.prop( 'maxLength' ), 12, 'maxLength was not incorrectly set on #2 when calling byteLimit on multiple elements (bug 35294)' );
 250         });
 251
 252 }( jQuery ) );