Skip to content
This repository was archived by the owner on Feb 1, 2022. It is now read-only.

Add .alert-dismissible lint checks #147

Merged
merged 1 commit into from
Oct 23, 2014
Merged

Add .alert-dismissible lint checks #147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions src/bootlint.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -699,6 +699,22 @@ var semver = require('semver');
reporter(".modal-title must be a child of .modal-header", elements);
}
});
addLinter("E033", function lintAlertMissingDismissible($, reporter) {
var alertsMissingDismissible = $('.alert:not(.alert-dismissible):has([data-dismiss="alert"])');
if (alertsMissingDismissible.length) {
reporter('`.alert` with dismiss button must have class `.alert-dismissible`', alertsMissingDismissible);
}
});
addLinter("E034", function lintAlertDismissStructure($, reporter) {
var nonFirstChildCloses = $('.alert>.close:not(:first-child)');
var closesPrecededByText = $('.alert>.close').filter(function () {
return !!($(this).parent().contents().eq(0).text().trim());
});
var problematicCloses = nonFirstChildCloses.add(closesPrecededByText);
if (problematicCloses.length) {
reporter('`.close` button for `.alert` must be the first element in the `.alert`', problematicCloses);
}
});
addLinter("E035", function lintFormGroupWithFormClass($, reporter) {
var badFormGroups = $('.form-group.form-inline, .form-group.form-horizontal');
if (badFormGroups.length) {
Expand Down
24 changes: 23 additions & 1 deletion test/bootlint_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -507,7 +507,8 @@ exports.bootlint = {
);
test.done();
},
'test form group validity': function (test) {

'form classes used directly on form groups': function (test) {
test.expect(2);
test.deepEqual(lintHtml(utf8Fixture('form/form-inline-group.html')),
["Neither .form-inline nor .form-horizontal should be used directly on a `.form-group`. Instead, nest the .form-group within the .form-inline or .form-horizontal"],
Expand All @@ -518,5 +519,26 @@ exports.bootlint = {
'should complain about form-group having .form-horizontal'
);
test.done();
},

'incorrect alerts with dismiss/close buttons': function (test) {
test.expect(4);
test.deepEqual(lintHtml(utf8Fixture('alert-dismiss-close/valid.html')),
[],
'should not complain when dismissible alert markup structure is correct.'
);
test.deepEqual(lintHtml(utf8Fixture('alert-dismiss-close/missing-alert-dismissible.html')),
['`.alert` with dismiss button must have class `.alert-dismissible`'],
'should complain when alert with dismiss button is missing .alert-dismissible class.'
);
test.deepEqual(lintHtml(utf8Fixture('alert-dismiss-close/close-preceded-by-text.html')),
['`.close` button for `.alert` must be the first element in the `.alert`'],
'should complain when alert close button is not first child in alert.'
);
test.deepEqual(lintHtml(utf8Fixture('alert-dismiss-close/close-preceded-by-elem.html')),
['`.close` button for `.alert` must be the first element in the `.alert`'],
'should complain when alert close button is not first child in alert.'
);
test.done();
}
};
37 changes: 37 additions & 0 deletions test/fixtures/alert-dismiss-close/close-preceded-by-elem.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!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>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="alert alert-danger alert-dismissible">
<ul>
<li>This list should come after the button</li>
</ul>
<button type="button" class="close">Close</button>
</div>
</div>
</div>
</div>
<div id="qunit"></div>
<ol id="bootlint">
<li data-lint="`.close` button for `.alert` must be the first element in the `.alert`"></li>
</ol>
</body>
</html>
35 changes: 35 additions & 0 deletions test/fixtures/alert-dismiss-close/close-preceded-by-text.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!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>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="alert alert-danger alert-dismissible">
This text should be after the button.
<button type="button" class="close">Close</button>
</div>
</div>
</div>
</div>
<div id="qunit"></div>
<ol id="bootlint">
<li data-lint="`.close` button for `.alert` must be the first element in the `.alert`"></li>
</ol>
</body>
</html>
37 changes: 37 additions & 0 deletions test/fixtures/alert-dismiss-close/missing-alert-dismissible.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!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>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
</button>
Your Neutralness, this is a Non-Beige Alert!
</div>
</div>
</div>
</div>
<div id="qunit"></div>
<ol id="bootlint">
<li data-lint="`.alert` with dismiss button must have class `.alert-dismissible`"></li>
</ol>
</body>
</html>
35 changes: 35 additions & 0 deletions test/fixtures/alert-dismiss-close/valid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!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>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
</button>
I'm OK
</div>
</div>
</div>
</div>
<div id="qunit"></div>
<ol id="bootlint"></ol>
</body>
</html>