diff options
Diffstat (limited to 'tests/qunit/suites/resources/jquery/jquery.placeholder.test.js')
-rw-r--r-- | tests/qunit/suites/resources/jquery/jquery.placeholder.test.js | 145 |
1 files changed, 145 insertions, 0 deletions
diff --git a/tests/qunit/suites/resources/jquery/jquery.placeholder.test.js b/tests/qunit/suites/resources/jquery/jquery.placeholder.test.js new file mode 100644 index 00000000..bbea8297 --- /dev/null +++ b/tests/qunit/suites/resources/jquery/jquery.placeholder.test.js @@ -0,0 +1,145 @@ +(function ($) { + + QUnit.module('jquery.placeholder', QUnit.newMwEnvironment()); + + QUnit.test('caches results of feature tests', 2, function (assert) { + assert.strictEqual(typeof $.fn.placeholder.input, 'boolean', '$.fn.placeholder.input'); + assert.strictEqual(typeof $.fn.placeholder.textarea, 'boolean', '$.fn.placeholder.textarea'); + }); + + if ($.fn.placeholder.input && $.fn.placeholder.textarea) { + return; + } + + var html = '<form>' + + '<input id="input-type-search" type="search" placeholder="Search this site...">' + + '<input id="input-type-text" type="text" placeholder="e.g. John Doe">' + + '<input id="input-type-email" type="email" placeholder="e.g. address@example.ext">' + + '<input id="input-type-url" type="url" placeholder="e.g. http://mathiasbynens.be/">' + + '<input id="input-type-tel" type="tel" placeholder="e.g. +32 472 77 69 88">' + + '<input id="input-type-password" type="password" placeholder="e.g. hunter2">' + + '<textarea id="textarea" name="message" placeholder="Your message goes here"></textarea>' + + '</form>', + testElement = function ($el, assert) { + + var el = $el[0], + placeholder = el.getAttribute('placeholder'); + + assert.strictEqual($el.placeholder(), $el, 'should be chainable'); + + assert.strictEqual(el.value, placeholder, 'should set `placeholder` text as `value`'); + assert.strictEqual($el.prop('value'), '', 'propHooks works properly'); + assert.strictEqual($el.val(), '', 'valHooks works properly'); + assert.ok($el.hasClass('placeholder'), 'should have `placeholder` class'); + + // test on focus + $el.focus(); + assert.strictEqual(el.value, '', '`value` should be the empty string on focus'); + assert.strictEqual($el.prop('value'), '', 'propHooks works properly'); + assert.strictEqual($el.val(), '', 'valHooks works properly'); + assert.ok(!$el.hasClass('placeholder'), 'should not have `placeholder` class on focus'); + + // and unfocus (blur) again + $el.blur(); + + assert.strictEqual(el.value, placeholder, 'should set `placeholder` text as `value`'); + assert.strictEqual($el.prop('value'), '', 'propHooks works properly'); + assert.strictEqual($el.val(), '', 'valHooks works properly'); + assert.ok($el.hasClass('placeholder'), 'should have `placeholder` class'); + + // change the value + $el.val('lorem ipsum'); + assert.strictEqual($el.prop('value'), 'lorem ipsum', '`$el.val(string)` should change the `value` property'); + assert.strictEqual(el.value, 'lorem ipsum', '`$el.val(string)` should change the `value` attribute'); + assert.ok(!$el.hasClass('placeholder'), '`$el.val(string)` should remove `placeholder` class'); + + // and clear it again + $el.val(''); + assert.strictEqual($el.prop('value'), '', '`$el.val("")` should change the `value` property'); + assert.strictEqual(el.value, placeholder, '`$el.val("")` should change the `value` attribute'); + assert.ok($el.hasClass('placeholder'), '`$el.val("")` should re-enable `placeholder` class'); + + // make sure the placeholder property works as expected. + assert.strictEqual($el.prop('placeholder'), placeholder, '$el.prop(`placeholder`) should return the placeholder value'); + $el.placeholder('new placeholder'); + assert.strictEqual(el.getAttribute('placeholder'), 'new placeholder', '$el.placeholder(<string>) should set the placeholder value'); + assert.strictEqual(el.value, 'new placeholder', '$el.placeholder(<string>) should update the displayed placeholder value'); + $el.placeholder(placeholder); + }; + + QUnit.test('emulates placeholder for <input type=text>', 22, function (assert) { + $('<div>').html(html).appendTo($('#qunit-fixture')); + testElement($('#input-type-text'), assert); + }); + + QUnit.test('emulates placeholder for <input type=search>', 22, function (assert) { + $('<div>').html(html).appendTo($('#qunit-fixture')); + testElement($('#input-type-search'), assert); + }); + + QUnit.test('emulates placeholder for <input type=email>', 22, function (assert) { + $('<div>').html(html).appendTo($('#qunit-fixture')); + testElement($('#input-type-email'), assert); + }); + + QUnit.test('emulates placeholder for <input type=url>', 22, function (assert) { + $('<div>').html(html).appendTo($('#qunit-fixture')); + testElement($('#input-type-url'), assert); + }); + + QUnit.test('emulates placeholder for <input type=tel>', 22, function (assert) { + $('<div>').html(html).appendTo($('#qunit-fixture')); + testElement($('#input-type-tel'), assert); + }); + + QUnit.test('emulates placeholder for <input type=password>', 13, function (assert) { + $('<div>').html(html).appendTo($('#qunit-fixture')); + + var selector = '#input-type-password', + $el = $(selector), + el = $el[0], + placeholder = el.getAttribute('placeholder'); + + assert.strictEqual($el.placeholder(), $el, 'should be chainable'); + + // Re-select the element, as it gets replaced by another one in some browsers + $el = $(selector); + el = $el[0]; + + assert.strictEqual(el.value, placeholder, 'should set `placeholder` text as `value`'); + assert.strictEqual($el.prop('value'), '', 'propHooks works properly'); + assert.strictEqual($el.val(), '', 'valHooks works properly'); + assert.ok($el.hasClass('placeholder'), 'should have `placeholder` class'); + + // test on focus + $el.focus(); + + // Re-select the element, as it gets replaced by another one in some browsers + $el = $(selector); + el = $el[0]; + + assert.strictEqual(el.value, '', '`value` should be the empty string on focus'); + assert.strictEqual($el.prop('value'), '', 'propHooks works properly'); + assert.strictEqual($el.val(), '', 'valHooks works properly'); + assert.ok(!$el.hasClass('placeholder'), 'should not have `placeholder` class on focus'); + + // and unfocus (blur) again + $el.blur(); + + // Re-select the element, as it gets replaced by another one in some browsers + $el = $(selector); + el = $el[0]; + + assert.strictEqual(el.value, placeholder, 'should set `placeholder` text as `value`'); + assert.strictEqual($el.prop('value'), '', 'propHooks works properly'); + assert.strictEqual($el.val(), '', 'valHooks works properly'); + assert.ok($el.hasClass('placeholder'), 'should have `placeholder` class'); + + }); + + QUnit.test('emulates placeholder for <textarea></textarea>', 22, function (assert) { + $('<div>').html(html).appendTo($('#qunit-fixture')); + testElement($('#textarea'), assert); + }); + +}(jQuery)); |