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