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