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));