Lint nested containers

Closes twbs#45
zacechola · Jul 28, 2014 · a466537 · a466537
1 parent 1c16a63
commit a466537
Show file tree

Hide file tree

Showing 7 changed files with 159 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-28 */
 
 (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 "Due to `padding` and more, containers 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 "Due to `padding` and more, containers 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
@@ -84,7 +84,7 @@ exports['bootlint'] = {
         test.done();
     },
     'containers': function (test) {
-        test.expect(3);
+        test.expect(7);
         test.deepEqual(bootlint.lintHtml(utf8Fixture('containers/fixed.html')),
             [],
             'should not complain when rows are within fixed containers.');
@@ -94,6 +94,18 @@ exports['bootlint'] = {
         test.deepEqual(bootlint.lintHtml(utf8Fixture('containers/missing.html')),
             ["Found one or more `.row`s that were not children of a `.container` or `.container-fluid`"],
             'should complain when a row is not within a container.');
+        test.deepEqual(bootlint.lintHtml(utf8Fixture('containers/nested-container-container.html')),
+            ["Due to `padding` and more, containers are not nestable"],
+            'should complain when a container is within a container.');
+        test.deepEqual(bootlint.lintHtml(utf8Fixture('containers/nested-container-container-fluid.html')),
+            ["Due to `padding` and more, containers are not nestable"],
+            'should complain when a container is within a container.');
+        test.deepEqual(bootlint.lintHtml(utf8Fixture('containers/nested-container-fluid-container-fluid.html')),
+            ["Due to `padding` and more, containers are not nestable"],
+            'should complain when a container is within a container.');
+        test.deepEqual(bootlint.lintHtml(utf8Fixture('containers/nested-container-fluid-container.html')),
+            ["Due to `padding` and more, containers are not nestable"],
+            'should complain when a container is within a container.');
         test.done();
     },
     'viewport meta tag': function (test) {

diff --git a/test/fixtures/containers/nested-container-container-fluid.html b/test/fixtures/containers/nested-container-container-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="Due to `padding` and more, containers are not nestable"></li>
+        </ol>
+    </body>
+</html>
diff --git a/test/fixtures/containers/nested-container-container.html b/test/fixtures/containers/nested-container-container.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="Due to `padding` and more, containers are not nestable"></li>
+        </ol>
+    </body>
+</html>
diff --git a/test/fixtures/containers/nested-container-fluid-container-fluid.html b/test/fixtures/containers/nested-container-fluid-container-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="Due to `padding` and more, containers are not nestable"></li>
+        </ol>
+    </body>
+</html>
diff --git a/test/fixtures/containers/nested-container-fluid-container.html b/test/fixtures/containers/nested-container-fluid-container.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="Due to `padding` and more, containers are not nestable"></li>
+        </ol>
+    </body>
+</html>