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

   1 ( function ( $ ) {
   2
   3         QUnit.module( 'jquery.placeholder', QUnit.newMwEnvironment() );
   4
   5         QUnit.test( 'caches results of feature tests', 2, function ( assert ) {
   6                 assert.strictEqual( typeof $.fn.placeholder.input, 'boolean', '$.fn.placeholder.input' );
   7                 assert.strictEqual( typeof $.fn.placeholder.textarea, 'boolean', '$.fn.placeholder.textarea' );
   8         } );
   9
  10         if ( $.fn.placeholder.input && $.fn.placeholder.textarea ) {
  11                 return;
  12         }
  13
  14         var html = '<form>' +
  15                         '<input id="input-type-search" type="search" placeholder="Search this site...">' +
  16                         '<input id="input-type-text" type="text" placeholder="e.g. John Doe">' +
  17                         '<input id="input-type-email" type="email" placeholder="e.g. address@example.ext">' +
  18                         '<input id="input-type-url" type="url" placeholder="e.g. http://mathiasbynens.be/">' +
  19                         '<input id="input-type-tel" type="tel" placeholder="e.g. +32 472 77 69 88">' +
  20                         '<input id="input-type-password" type="password" placeholder="e.g. hunter2">' +
  21                         '<textarea id="textarea" name="message" placeholder="Your message goes here"></textarea>' +
  22                 '</form>',
  23         testElement = function ( $el, assert ) {
  24
  25                 var el = $el[ 0 ],
  26                         placeholder = el.getAttribute( 'placeholder' );
  27
  28                 assert.strictEqual( $el.placeholder(), $el, 'should be chainable' );
  29
  30                 assert.strictEqual( el.value, placeholder, 'should set `placeholder` text as `value`' );
  31                 assert.strictEqual( $el.prop( 'value' ), '', 'propHooks works properly' );
  32                 assert.strictEqual( $el.val(), '', 'valHooks works properly' );
  33                 assert.ok( $el.hasClass( 'placeholder' ), 'should have `placeholder` class' );
  34
  35                 // test on focus
  36                 $el.focus();
  37                 assert.strictEqual( el.value, '', '`value` should be the empty string on focus' );
  38                 assert.strictEqual( $el.prop( 'value' ), '', 'propHooks works properly' );
  39                 assert.strictEqual( $el.val(), '', 'valHooks works properly' );
  40                 assert.ok( !$el.hasClass( 'placeholder' ), 'should not have `placeholder` class on focus' );
  41
  42                 // and unfocus (blur) again
  43                 $el.blur();
  44
  45                 assert.strictEqual( el.value, placeholder, 'should set `placeholder` text as `value`' );
  46                 assert.strictEqual( $el.prop( 'value' ), '', 'propHooks works properly' );
  47                 assert.strictEqual( $el.val(), '', 'valHooks works properly' );
  48                 assert.ok( $el.hasClass( 'placeholder' ), 'should have `placeholder` class' );
  49
  50                 // change the value
  51                 $el.val( 'lorem ipsum' );
  52                 assert.strictEqual( $el.prop( 'value' ), 'lorem ipsum', '`$el.val(string)` should change the `value` property' );
  53                 assert.strictEqual( el.value, 'lorem ipsum', '`$el.val(string)` should change the `value` attribute' );
  54                 assert.ok( !$el.hasClass( 'placeholder' ), '`$el.val(string)` should remove `placeholder` class' );
  55
  56                 // and clear it again
  57                 $el.val( '' );
  58                 assert.strictEqual( $el.prop( 'value' ), '', '`$el.val("")` should change the `value` property' );
  59                 assert.strictEqual( el.value, placeholder, '`$el.val("")` should change the `value` attribute' );
  60                 assert.ok( $el.hasClass( 'placeholder' ), '`$el.val("")` should re-enable `placeholder` class' );
  61
  62                 // make sure the placeholder property works as expected.
  63                 assert.strictEqual( $el.prop( 'placeholder' ), placeholder, '$el.prop(`placeholder`) should return the placeholder value' );
  64                 $el.placeholder( 'new placeholder' );
  65                 assert.strictEqual( el.getAttribute( 'placeholder' ), 'new placeholder', '$el.placeholder(<string>) should set the placeholder value' );
  66                 assert.strictEqual( el.value, 'new placeholder', '$el.placeholder(<string>) should update the displayed placeholder value' );
  67                 $el.placeholder( placeholder );
  68         };
  69
  70         QUnit.test( 'emulates placeholder for <input type=text>', 22, function ( assert ) {
  71                 $( '<div>' ).html( html ).appendTo( $( '#qunit-fixture' ) );
  72                 testElement( $( '#input-type-text' ), assert );
  73         } );
  74
  75         QUnit.test( 'emulates placeholder for <input type=search>', 22, function ( assert ) {
  76                 $( '<div>' ).html( html ).appendTo( $( '#qunit-fixture' ) );
  77                 testElement( $( '#input-type-search' ), assert );
  78         } );
  79
  80         QUnit.test( 'emulates placeholder for <input type=email>', 22, function ( assert ) {
  81                 $( '<div>' ).html( html ).appendTo( $( '#qunit-fixture' ) );
  82                 testElement( $( '#input-type-email' ), assert );
  83         } );
  84
  85         QUnit.test( 'emulates placeholder for <input type=url>', 22, function ( assert ) {
  86                 $( '<div>' ).html( html ).appendTo( $( '#qunit-fixture' ) );
  87                 testElement( $( '#input-type-url' ), assert );
  88         } );
  89
  90         QUnit.test( 'emulates placeholder for <input type=tel>', 22, function ( assert ) {
  91                 $( '<div>' ).html( html ).appendTo( $( '#qunit-fixture' ) );
  92                 testElement( $( '#input-type-tel' ), assert );
  93         } );
  94
  95         QUnit.test( 'emulates placeholder for <input type=password>', 13, function ( assert ) {
  96                 $( '<div>' ).html( html ).appendTo( $( '#qunit-fixture' ) );
  97
  98                 var selector = '#input-type-password',
  99                         $el = $( selector ),
 100                         el = $el[ 0 ],
 101                         placeholder = el.getAttribute( 'placeholder' );
 102
 103                 assert.strictEqual( $el.placeholder(), $el, 'should be chainable' );
 104
 105                 // Re-select the element, as it gets replaced by another one in some browsers
 106                 $el = $( selector );
 107                 el = $el[ 0 ];
 108
 109                 assert.strictEqual( el.value, placeholder, 'should set `placeholder` text as `value`' );
 110                 assert.strictEqual( $el.prop( 'value' ), '', 'propHooks works properly' );
 111                 assert.strictEqual( $el.val(), '', 'valHooks works properly' );
 112                 assert.ok( $el.hasClass( 'placeholder' ), 'should have `placeholder` class' );
 113
 114                 // test on focus
 115                 $el.focus();
 116
 117                 // Re-select the element, as it gets replaced by another one in some browsers
 118                 $el = $( selector );
 119                 el = $el[ 0 ];
 120
 121                 assert.strictEqual( el.value, '', '`value` should be the empty string on focus' );
 122                 assert.strictEqual( $el.prop( 'value' ), '', 'propHooks works properly' );
 123                 assert.strictEqual( $el.val(), '', 'valHooks works properly' );
 124                 assert.ok( !$el.hasClass( 'placeholder' ), 'should not have `placeholder` class on focus' );
 125
 126                 // and unfocus (blur) again
 127                 $el.blur();
 128
 129                 // Re-select the element, as it gets replaced by another one in some browsers
 130                 $el = $( selector );
 131                 el = $el[ 0 ];
 132
 133                 assert.strictEqual( el.value, placeholder, 'should set `placeholder` text as `value`' );
 134                 assert.strictEqual( $el.prop( 'value' ), '', 'propHooks works properly' );
 135                 assert.strictEqual( $el.val(), '', 'valHooks works properly' );
 136                 assert.ok( $el.hasClass( 'placeholder' ), 'should have `placeholder` class' );
 137
 138         } );
 139
 140         QUnit.test( 'emulates placeholder for <textarea></textarea>', 22, function ( assert ) {
 141                 $( '<div>' ).html( html ).appendTo( $( '#qunit-fixture' ) );
 142                 testElement( $( '#textarea' ), assert );
 143         } );
 144
 145 }( jQuery ) );