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

   1 ( function ( $, mw ) {
   2         var simpleSample, U_20AC, mbSample;
   3
   4         QUnit.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 c, len;
  18                 function x( $input, i ) {
  19                         // Add character to the value
  20                         return $input.val() + charstr.charAt( i );
  21                 }
  22                 for ( c = 0, len = charstr.length; c < len; c += 1 ) {
  23                         $input
  24                                 .val( x( $input, c ) )
  25                                 .trigger( 'change' );
  26                 }
  27         }
  28
  29         /**
  30          * Test factory for $.fn.byteLimit
  31          *
  32          * @param $input {jQuery} jQuery object in an input element
  33          * @param hasLimit {Boolean} Wether a limit should apply at all
  34          * @param limit {Number} Limit (if used) otherwise undefined
  35          * The limit should be less than 20 (the sample data's length)
  36          */
  37         function byteLimitTest( options ) {
  38                 var opt = $.extend({
  39                         description: '',
  40                         $input: null,
  41                         sample: '',
  42                         hasLimit: false,
  43                         expected: '',
  44                         limit: null
  45                 }, options);
  46
  47                 QUnit.asyncTest( opt.description, opt.hasLimit ? 3 : 2, function ( assert ) {
  48                 setTimeout( function () {
  49                         var rawVal, fn, effectiveVal;
  50
  51                         opt.$input.appendTo( '#qunit-fixture' );
  52
  53                         // Simulate pressing keys for each of the sample characters
  54                         addChars( opt.$input, opt.sample );
  55
  56                         rawVal = opt.$input.val();
  57                         fn = opt.$input.data( 'byteLimit.callback' );
  58                         effectiveVal = fn ? fn( rawVal ) : rawVal;
  59
  60                         if ( opt.hasLimit ) {
  61                                 assert.ltOrEq(
  62                                         $.byteLength( effectiveVal ),
  63                                         opt.limit,
  64                                         'Prevent keypresses after byteLimit was reached, length never exceeded the limit'
  65                                 );
  66                                 assert.equal(
  67                                         $.byteLength( rawVal ),
  68                                         $.byteLength( opt.expected ),
  69                                         'Not preventing keypresses too early, length has reached the expected length'
  70                                 );
  71                                 assert.equal( rawVal, opt.expected, 'New value matches the expected string' );
  72
  73                         } else {
  74                                 assert.equal(
  75                                         $.byteLength( effectiveVal ),
  76                                         $.byteLength( opt.expected ),
  77                                         'Unlimited scenarios are not affected, expected length reached'
  78                                 );
  79                                 assert.equal( rawVal, opt.expected, 'New value matches the expected string' );
  80                         }
  81                         QUnit.start();
  82                 }, 10 );
  83                 } );
  84         }
  85
  86         byteLimitTest({
  87                 description: 'Plain text input',
  88                 $input: $( '<input type="text"/>' ),
  89                 sample: simpleSample,
  90                 hasLimit: false,
  91                 expected: simpleSample
  92         });
  93
  94         byteLimitTest({
  95                 description: 'Plain text input. Calling byteLimit with no parameters and no maxlength attribute (bug 36310)',
  96                 $input: $( '<input type="text"/>' )
  97                         .byteLimit(),
  98                 sample: simpleSample,
  99                 hasLimit: false,
 100                 expected: simpleSample
 101         });
 102
 103         byteLimitTest({
 104                 description: 'Limit using the maxlength attribute',
 105                 $input: $( '<input type="text"/>' )
 106                         .attr( 'maxlength', '10' )
 107                         .byteLimit(),
 108                 sample: simpleSample,
 109                 hasLimit: true,
 110                 limit: 10,
 111                 expected: '1234567890'
 112         });
 113
 114         byteLimitTest({
 115                 description: 'Limit using a custom value',
 116                 $input: $( '<input type="text"/>' )
 117                         .byteLimit( 10 ),
 118                 sample: simpleSample,
 119                 hasLimit: true,
 120                 limit: 10,
 121                 expected: '1234567890'
 122         });
 123
 124         byteLimitTest({
 125                 description: 'Limit using a custom value, overriding maxlength attribute',
 126                 $input: $( '<input type="text"/>' )
 127                         .attr( 'maxlength', '10' )
 128                         .byteLimit( 15 ),
 129                 sample: simpleSample,
 130                 hasLimit: true,
 131                 limit: 15,
 132                 expected: '123456789012345'
 133         });
 134
 135         byteLimitTest({
 136                 description: 'Limit using a custom value (multibyte)',
 137                 $input: $( '<input type="text"/>' )
 138                         .byteLimit( 14 ),
 139                 sample: mbSample,
 140                 hasLimit: true,
 141                 limit: 14,
 142                 expected: '1234567890' + U_20AC + '1'
 143         });
 144
 145         byteLimitTest({
 146                 description: 'Limit using a custom value (multibyte) overlapping a byte',
 147                 $input: $( '<input type="text"/>' )
 148                         .byteLimit( 12 ),
 149                 sample: mbSample,
 150                 hasLimit: true,
 151                 limit: 12,
 152                 expected: '1234567890' + '12'
 153         });
 154
 155         byteLimitTest({
 156                 description: 'Pass the limit and a callback as input filter',
 157                 $input: $( '<input type="text"/>' )
 158                         .byteLimit( 6, function ( val ) {
 159                                 // Invalid title
 160                                 if ( val === '' ) {
 161                                         return '';
 162                                 }
 163
 164                                 // Return without namespace prefix
 165                                 return new mw.Title( String( val ) ).getMain();
 166                         } ),
 167                 sample: 'User:Sample',
 168                 hasLimit: true,
 169                 limit: 6, // 'Sample' length
 170                 expected: 'User:Sample'
 171         });
 172
 173         byteLimitTest({
 174                 description: 'Limit using the maxlength attribute and pass a callback as input filter',
 175                 $input: $( '<input type="text"/>' )
 176                         .attr( 'maxlength', '6' )
 177                         .byteLimit( function ( val ) {
 178                                 // Invalid title
 179                                 if ( val === '' ) {
 180                                         return '';
 181                                 }
 182
 183                                 // Return without namespace prefix
 184                                 return new mw.Title( String( val ) ).getMain();
 185                         } ),
 186                 sample: 'User:Sample',
 187                 hasLimit: true,
 188                 limit: 6, // 'Sample' length
 189                 expected: 'User:Sample'
 190         });
 191
 192         QUnit.test( 'Confirm properties and attributes set', 4, function ( assert ) {
 193                 var $el, $elA, $elB;
 194
 195                 $el = $( '<input type="text"/>' )
 196                         .attr( 'maxlength', '7' )
 197                         .appendTo( '#qunit-fixture' )
 198                         .byteLimit();
 199
 200                 assert.strictEqual( $el.attr( 'maxlength' ), '7', 'maxlength attribute unchanged for simple limit' );
 201
 202                 $el = $( '<input type="text"/>' )
 203                         .attr( 'maxlength', '7' )
 204                         .appendTo( '#qunit-fixture' )
 205                         .byteLimit( 12 );
 206
 207                 assert.strictEqual( $el.attr( 'maxlength' ), '12', 'maxlength attribute updated for custom limit' );
 208
 209                 $el = $( '<input type="text"/>' )
 210                         .attr( 'maxlength', '7' )
 211                         .appendTo( '#qunit-fixture' )
 212                         .byteLimit( 12, function ( val ) {
 213                                 return val;
 214                         } );
 215
 216                 assert.strictEqual( $el.attr( 'maxlength' ), undefined, 'maxlength attribute removed for limit with callback' );
 217
 218                 $elA = $( '<input type="text"/>' )
 219                         .addClass( 'mw-test-byteLimit-foo' )
 220                         .attr( 'maxlength', '7' )
 221                         .appendTo( '#qunit-fixture' );
 222
 223                 $elB = $( '<input type="text"/>' )
 224                         .addClass( 'mw-test-byteLimit-foo' )
 225                         .attr( 'maxlength', '12' )
 226                         .appendTo( '#qunit-fixture' );
 227
 228                 $el = $( '.mw-test-byteLimit-foo' );
 229
 230                 assert.strictEqual( $el.length, 2, 'Verify that there are no other elements clashing with this test suite' );
 231
 232                 $el.byteLimit();
 233         });
 234
 235         QUnit.test( 'Trim from insertion when limit exceeded', 2, function ( assert ) {
 236                 var $el;
 237
 238                 // Use a new <input /> because the bug only occurs on the first time
 239                 // the limit it reached (bug 40850)
 240                 $el = $( '<input type="text"/>' )
 241                         .appendTo( '#qunit-fixture' )
 242                         .byteLimit( 3 )
 243                         .val( 'abc' ).trigger( 'change' )
 244                         .val( 'zabc' ).trigger( 'change' );
 245
 246                 assert.strictEqual( $el.val(), 'abc', 'Trim from the insertion point (at 0), not the end' );
 247
 248                 $el = $( '<input type="text"/>' )
 249                         .appendTo( '#qunit-fixture' )
 250                         .byteLimit( 3 )
 251                         .val( 'abc' ).trigger( 'change' )
 252                         .val( 'azbc' ).trigger( 'change' );
 253
 254                 assert.strictEqual( $el.val(), 'abc', 'Trim from the insertion point (at 1), not the end' );
 255         });
 256
 257 }( jQuery, mediaWiki ) );