diff options
| author | Zac Echola <zac.echola@so.mnscu.edu> | 2015-07-02 19:25:45 +0300 |
|---|---|---|
| committer | Chris Rebert <code@chrisrebert.com> | 2015-11-16 13:30:14 +0300 |
| commit | 1325279860aedb7ec3ba0e6092096d353e3b151b (patch) | |
| tree | 1afce0a10a89719d75cd8e1b9885ec29eebc6d36 /test | |
| parent | 1cd5786ee314fd989048251d3a4632d2db8e57fd (diff) | |
Warn about .btn.disabled on <button>s and <input>s
Fixes #293
Closes #294
Diffstat (limited to 'test')
| -rw-r--r-- | test/bootlint_test.js | 22 | ||||
| -rw-r--r-- | test/fixtures/buttons/button-disabled-class.html | 29 | ||||
| -rw-r--r-- | test/fixtures/buttons/disabled-attribute.html | 28 | ||||
| -rw-r--r-- | test/fixtures/buttons/input-btn-disabled-class.html | 29 | ||||
| -rw-r--r-- | test/fixtures/tooltips/on-disabled-elems.html | 1 |
5 files changed, 106 insertions, 3 deletions
diff --git a/test/bootlint_test.js b/test/bootlint_test.js index 7692d9b..13fdf94 100644 --- a/test/bootlint_test.js +++ b/test/bootlint_test.js @@ -229,9 +229,12 @@ exports.bootlint = { 'tooltips and popovers on disabled elements': function (test) { test.expect(1); test.deepEqual(lintHtml(utf8Fixture('tooltips/on-disabled-elems.html')), - ["Tooltips and popovers on disabled elements cannot be triggered by user interaction unless the element becomes enabled." + - " To have tooltips and popovers be triggerable by the user even when their associated element is disabled," + - " put the disabled element inside a wrapper `<div>` and apply the tooltip or popover to the wrapper `<div>` instead."], + [ + "Tooltips and popovers on disabled elements cannot be triggered by user interaction unless the element becomes enabled." + + " To have tooltips and popovers be triggerable by the user even when their associated element is disabled," + + " put the disabled element inside a wrapper `<div>` and apply the tooltip or popover to the wrapper `<div>` instead.", + 'Using the `.disabled` class on a `<button>` or `<input>` only changes the appearance of the element. It doesn\'t prevent the user from interacting with the element (for example, clicking on it or focusing it). If you want to truly disable the element, use the `disabled` attribute instead.' + ], 'should complain about tooltips and popovers on disabled elements.'); test.done(); }, @@ -329,6 +332,19 @@ exports.bootlint = { 'should not complain when type is set on buttons'); test.done(); }, + 'use disabled attribute on button.btn and input.btn instead of .disabled': function (test) { + test.expect(3); + test.deepEqual(lintHtml(utf8Fixture('buttons/button-disabled-class.html')), + ["Using the `.disabled` class on a `<button>` or `<input>` only changes the appearance of the element. It doesn't prevent the user from interacting with the element (for example, clicking on it or focusing it). If you want to truly disable the element, use the `disabled` attribute instead."], + 'should complain when Bootstrap v2 grid classes are present.'); + test.deepEqual(lintHtml(utf8Fixture('buttons/input-btn-disabled-class.html')), + ["Using the `.disabled` class on a `<button>` or `<input>` only changes the appearance of the element. It doesn't prevent the user from interacting with the element (for example, clicking on it or focusing it). If you want to truly disable the element, use the `disabled` attribute instead."], + 'should complain when Bootstrap v2 grid classes are present.'); + test.deepEqual(lintHtml(utf8Fixture('buttons/disabled-attribute.html')), + [], + 'should not complain when disabled attribute is set on buttons'); + test.done(); + }, 'incorrect markup for .checkbox, .radio, .checkbox-inline, and .radio-inline classes': function (test) { test.expect(7); diff --git a/test/fixtures/buttons/button-disabled-class.html b/test/fixtures/buttons/button-disabled-class.html new file mode 100644 index 0000000..5d785d9 --- /dev/null +++ b/test/fixtures/buttons/button-disabled-class.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <title>Test</title> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> + <![endif]--> + <script src="../../lib/jquery.min.js"></script> + + <link rel="stylesheet" href="../../lib/qunit.css"> + <script src="../../lib/qunit.js"></script> + <script src="../../../dist/browser/bootlint.js"></script> + <script src="../generic-qunit.js"></script> + </head> + <body> + + <button type="button" class="btn btn-default disabled">Mash</button> + + <div id="qunit"></div> + <ol id="bootlint"> + <li data-lint="Using the `.disabled` class on a `<button>` or `<input>` only changes the appearance of the element. It doesn't prevent the user from interacting with the element (for example, clicking on it or focusing it). If you want to truly disable the element, use the `disabled` attribute instead."></li> + </ol> + </body> +</html> + diff --git a/test/fixtures/buttons/disabled-attribute.html b/test/fixtures/buttons/disabled-attribute.html new file mode 100644 index 0000000..a10922a --- /dev/null +++ b/test/fixtures/buttons/disabled-attribute.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <title>Test</title> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> + <![endif]--> + <script src="../../lib/jquery.min.js"></script> + + <link rel="stylesheet" href="../../lib/qunit.css"> + <script src="../../lib/qunit.js"></script> + <script src="../../../dist/browser/bootlint.js"></script> + <script src="../generic-qunit.js"></script> + </head> + <body> + + <button type="button" disabled>Mash</button> + <input type="button" disabled value="Mash" /> + + <div id="qunit"></div> + <ol id="bootlint"></ol> + </body> +</html> + diff --git a/test/fixtures/buttons/input-btn-disabled-class.html b/test/fixtures/buttons/input-btn-disabled-class.html new file mode 100644 index 0000000..12b1ff8 --- /dev/null +++ b/test/fixtures/buttons/input-btn-disabled-class.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <title>Test</title> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> + <![endif]--> + <script src="../../lib/jquery.min.js"></script> + + <link rel="stylesheet" href="../../lib/qunit.css"> + <script src="../../lib/qunit.js"></script> + <script src="../../../dist/browser/bootlint.js"></script> + <script src="../generic-qunit.js"></script> + </head> + <body> + + <input type="button" class="btn btn-default disabled" value="Mash" /> + + <div id="qunit"></div> + <ol id="bootlint"> + <li data-lint="Using the `.disabled` class on a `<button>` or `<input>` only changes the appearance of the element. It doesn't prevent the user from interacting with the element (for example, clicking on it or focusing it). If you want to truly disable the element, use the `disabled` attribute instead."></li> + </ol> + </body> +</html> + diff --git a/test/fixtures/tooltips/on-disabled-elems.html b/test/fixtures/tooltips/on-disabled-elems.html index a1cd1e9..7dd595d 100644 --- a/test/fixtures/tooltips/on-disabled-elems.html +++ b/test/fixtures/tooltips/on-disabled-elems.html @@ -25,6 +25,7 @@ <div id="qunit"></div> <ol id="bootlint"> <li data-lint="Tooltips and popovers on disabled elements cannot be triggered by user interaction unless the element becomes enabled. To have tooltips and popovers be triggerable by the user even when their associated element is disabled, put the disabled element inside a wrapper `<div>` and apply the tooltip or popover to the wrapper `<div>` instead."></li> + <li data-lint="Using the `.disabled` class on a `<button>` or `<input>` only changes the appearance of the element. It doesn't prevent the user from interacting with the element (for example, clicking on it or focusing it). If you want to truly disable the element, use the `disabled` attribute instead."></li> </ol> </body> </html> |