Lint nested containers

Closes #45 by implementing it. Closes #46 by merging a modified version of it.
twbs · Aug 1, 2014 · 0262198 · 0262198
1 parent 1c16a63
commit 0262198
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 2 deletions.
diff --git a/dist/browser/bootlint.js b/dist/browser/bootlint.js
@@ -1,4 +1,4 @@
-/*! bootlint - v0.0.1 - 2014-07-20 */
+/*! bootlint - v0.1.1 - 2014-07-31 */
 
 (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 /*!
@@ -9288,6 +9288,12 @@ var cheerio = require('cheerio');
             return "Found one or more `.row`s that were not children of a `.container` or `.container-fluid`";
         }
     };
+    exports.lintNestedContainers = function ($) {
+        var nestedContainers = $('.container, .container-fluid').children('.container, .container-fluid');
+        if (nestedContainers.length) {
+            return "Containers (`.container` and `.container-fluid`) are not nestable";
+        }
+    };
     exports.lintRowAndColOnSameElem = function ($) {
         var selector = COL_CLASSES.map(function (col) { return ".row" + col; }).join(',');
         var rowCols = $(selector);
@@ -9466,6 +9472,7 @@ var cheerio = require('cheerio');
         errs.push(this.lintXUaCompatible($));
         errs.push(this.lintBootstrapv2($));
         errs.push(this.lintContainers($));
+        errs.push(this.lintNestedContainers($));
         errs.push(this.lintViewport($));
         errs.push(this.lintRowAndColOnSameElem($));
         errs.push(this.lintRowChildrenAreCols($));
@@ -9490,6 +9497,11 @@ var cheerio = require('cheerio');
     };
     if (IN_NODE_JS) {
         // cheerio; Node.js
+        /**
+         * Lints the given HTML.
+         * @param {string} html The HTML to lint
+         * @returns {string[]} List of lint warnings
+         */
         exports.lintHtml = function (html) {
             var $ = cheerio.load(html);
             return this._lint($);
@@ -9499,9 +9511,19 @@ var cheerio = require('cheerio');
         // jQuery; in-browser
         (function () {
             var $ = cheerio;
+            /**
+             * Lints the HTML of the current document.
+             * @returns {string[]} List of lint warnings
+             */
             exports.lintCurrentDocument = function () {
                 return this._lint($);
             };
+            /**
+             * Lints the HTML of the current document.
+             * If there are any lint warnings, one general notification message will be window.alert()-ed to the user.
+             * Each warning will be output individually using console.warn().
+             * @returns {undefined} Nothing
+             */
             exports.showLintReportForCurrentDocument = function () {
                 var errs = this.lintCurrentDocument();
                 if (errs.length) {

diff --git a/src/bootlint.js b/src/bootlint.js
@@ -93,6 +93,12 @@ var cheerio = require('cheerio');
             return "Found one or more `.row`s that were not children of a `.container` or `.container-fluid`";
         }
     };
+    exports.lintNestedContainers = function ($) {
+        var nestedContainers = $('.container, .container-fluid').children('.container, .container-fluid');
+        if (nestedContainers.length) {
+            return "Containers (`.container` and `.container-fluid`) are not nestable";
+        }
+    };
     exports.lintRowAndColOnSameElem = function ($) {
         var selector = COL_CLASSES.map(function (col) { return ".row" + col; }).join(',');
         var rowCols = $(selector);
@@ -271,6 +277,7 @@ var cheerio = require('cheerio');
         errs.push(this.lintXUaCompatible($));
         errs.push(this.lintBootstrapv2($));
         errs.push(this.lintContainers($));
+        errs.push(this.lintNestedContainers($));
         errs.push(this.lintViewport($));
         errs.push(this.lintRowAndColOnSameElem($));
         errs.push(this.lintRowChildrenAreCols($));

diff --git a/test/bootlint_test.js b/test/bootlint_test.js
@@ -83,7 +83,7 @@ exports['bootlint'] = {
             'should complain when Bootstrap v2 grid classes are present.');
         test.done();
     },
-    'containers': function (test) {
+    'rows outside containers': function (test) {
         test.expect(3);
         test.deepEqual(bootlint.lintHtml(utf8Fixture('containers/fixed.html')),
             [],
@@ -96,6 +96,22 @@ exports['bootlint'] = {
             'should complain when a row is not within a container.');
         test.done();
     },
+    'nested containers': function (test) {
+        test.expect(4);
+        test.deepEqual(bootlint.lintHtml(utf8Fixture('containers/nested-fixed-fixed.html')),
+            ["Containers (`.container` and `.container-fluid`) are not nestable"],
+            'should complain when a container is within a container.');
+        test.deepEqual(bootlint.lintHtml(utf8Fixture('containers/nested-fixed-fluid.html')),
+            ["Containers (`.container` and `.container-fluid`) are not nestable"],
+            'should complain when a container is within a container.');
+        test.deepEqual(bootlint.lintHtml(utf8Fixture('containers/nested-fluid-fluid.html')),
+            ["Containers (`.container` and `.container-fluid`) are not nestable"],
+            'should complain when a container is within a container.');
+        test.deepEqual(bootlint.lintHtml(utf8Fixture('containers/nested-fluid-fixed.html')),
+            ["Containers (`.container` and `.container-fluid`) are not nestable"],
+            'should complain when a container is within a container.');
+        test.done();
+    },
     'viewport meta tag': function (test) {
         test.expect(2);
         test.deepEqual(bootlint.lintHtml(utf8Fixture('viewport/present.html')),

diff --git a/test/fixtures/containers/nested-fixed-fixed.html b/test/fixtures/containers/nested-fixed-fixed.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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+
+        <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.14.0.css">
+        <script src="https://code.jquery.com/qunit/qunit-1.14.0.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+        <div class="container">
+            <div class="container"></div>
+        </div>
+
+        <div id="qunit"></div>
+        <ol id="bootlint">
+            <li data-lint="Containers (`.container` and `.container-fluid`) are not nestable"></li>
+        </ol>
+    </body>
+</html>
diff --git a/test/fixtures/containers/nested-fixed-fluid.html b/test/fixtures/containers/nested-fixed-fluid.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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+
+        <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.14.0.css">
+        <script src="https://code.jquery.com/qunit/qunit-1.14.0.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+        <div class="container">
+            <div class="container-fluid"></div>
+        </div>
+
+        <div id="qunit"></div>
+        <ol id="bootlint">
+            <li data-lint="Containers (`.container` and `.container-fluid`) are not nestable"></li>
+        </ol>
+    </body>
+</html>
diff --git a/test/fixtures/containers/nested-fluid-fixed.html b/test/fixtures/containers/nested-fluid-fixed.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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+
+        <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.14.0.css">
+        <script src="https://code.jquery.com/qunit/qunit-1.14.0.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+        <div class="container">
+            <div class="container-fluid"></div>
+        </div>
+
+        <div id="qunit"></div>
+        <ol id="bootlint">
+            <li data-lint="Containers (`.container` and `.container-fluid`) are not nestable"></li>
+        </ol>
+    </body>
+</html>
diff --git a/test/fixtures/containers/nested-fluid-fluid.html b/test/fixtures/containers/nested-fluid-fluid.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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+
+        <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.14.0.css">
+        <script src="https://code.jquery.com/qunit/qunit-1.14.0.js"></script>
+        <script src="../../../dist/browser/bootlint.js"></script>
+        <script src="../generic-qunit.js"></script>
+    </head>
+    <body>
+        <div class="container-fluid">
+            <div class="container-fluid"></div>
+        </div>
+
+        <div id="qunit"></div>
+        <ol id="bootlint">
+            <li data-lint="Containers (`.container` and `.container-fluid`) are not nestable"></li>
+        </ol>
+    </body>
+</html>