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

   1 ( function ( $ ) {
   2
   3         QUnit.module( 'jquery.autoEllipsis', QUnit.newMwEnvironment() );
   4
   5         function createWrappedDiv( text, width ) {
   6                 var $wrapper = $( '<div>' ).css( 'width', width ),
   7                         $div = $( '<div>' ).text( text );
   8                 $wrapper.append( $div );
   9                 return $wrapper;
  10         }
  11
  12         function findDivergenceIndex( a, b ) {
  13                 var i = 0;
  14                 while ( i < a.length && i < b.length && a[i] === b[i] ) {
  15                         i++;
  16                 }
  17                 return i;
  18         }
  19
  20         QUnit.test( 'Position right', 4, function ( assert ) {
  21                 // We need this thing to be visible, so append it to the DOM
  22                 var $span, spanText, d, spanTextNew,
  23                         origText = 'This is a really long random string and there is no way it fits in 100 pixels.',
  24                         $wrapper = createWrappedDiv( origText, '100px' );
  25
  26                 $( '#qunit-fixture' ).append( $wrapper );
  27                 $wrapper.autoEllipsis( { position: 'right' } );
  28
  29                 // Verify that, and only one, span element was created
  30                 $span = $wrapper.find( '> span' );
  31                 assert.strictEqual( $span.length, 1, 'autoEllipsis wrapped the contents in a span element' );
  32
  33                 // Check that the text fits by turning on word wrapping
  34                 $span.css( 'whiteSpace', 'nowrap' );
  35                 assert.ltOrEq(
  36                         $span.width(),
  37                         $span.parent().width(),
  38                         'Text fits (making the span "white-space: nowrap" does not make it wider than its parent)'
  39                 );
  40
  41                 // Add two characters using scary black magic
  42                 spanText = $span.text();
  43                 d = findDivergenceIndex( origText, spanText );
  44                 spanTextNew = spanText.substr( 0, d ) + origText[d] + origText[d] + '...';
  45
  46                 assert.gt( spanTextNew.length, spanText.length, 'Verify that the new span-length is indeed greater' );
  47
  48                 // Put this text in the span and verify it doesn't fit
  49                 $span.text( spanTextNew );
  50                 // In IE6 width works like min-width, allow IE6's width to be "equal to"
  51                 if ( $.browser.msie && Number( $.browser.version ) === 6 ) {
  52                         assert.gtOrEq( $span.width(), $span.parent().width(), 'Fit is maximal (adding two characters makes it not fit any more) - IE6: Maybe equal to as well due to width behaving like min-width in IE6' );
  53                 } else {
  54                         assert.gt( $span.width(), $span.parent().width(), 'Fit is maximal (adding two characters makes it not fit any more)' );
  55                 }
  56         } );
  57
  58 }( jQuery ) );