Improved handling of tag closing errors

package.json

@@ -42,7 +42,7 @@
     "esprima": "^2.7.2",
     "firebase": "^2.4.1",
     "github-api": "^1.1.0",
-    "htmllint": "^0.3.0",
+    "htmllint": "^0.4.0",
     "i18next-client": "^1.10.2",
     "immutable": "^3.7.5",
     "jshint": "^2.9.1",
@@ -85,6 +85,7 @@
     "browserify-incremental": "^3.0.1",
     "chai": "^3.5.0",
     "chai-as-promised": "^5.3.0",
+    "check-dependencies": "^0.12.0",
     "eslint": "^2.1.0",
     "eslint-plugin-react": "^5.0.1",
     "eslint_d": "^3.1.0",

spec/examples/validations/css.spec.js

@@ -47,9 +47,9 @@ describe('css', () => {
       assertFailsValidationWith(css, stylesheet, 'missing-semicolon')
     );
 
-    it('fails at the line missing the semicolon', () => {
-      assertFailsValidationAtLine(css, stylesheet, 1);
-    });
+    it('fails at the line missing the semicolon', () =>
+      assertFailsValidationAtLine(css, stylesheet, 2)
+    );
   });
 
   context('extra tokens after value', () => {

spec/examples/validations/html.spec.js

@@ -18,31 +18,49 @@ function htmlWithBody(body) {
 `;
 }
 
-function assertPassesHtmlValidation(source) {
-  return assertPassesValidation(html, source);
-}
-
-function assertFailsHtmlValidationWith(source, ...errors) {
-  return assertFailsValidationWith(html, source, ...errors);
-}
-
 describe('html', () => {
   it('allows valid HTML', () =>
-    assertPassesHtmlValidation(htmlWithBody(''))
+    assertPassesValidation(html, htmlWithBody(''))
   );
 
   it('fails with banned attribute', () =>
-    assertFailsHtmlValidationWith(
+    assertFailsValidationWith(
+      html,
       htmlWithBody('<p align="center"></p>'),
       'banned-attributes.align'
     )
   );
 
   it('gives error message for missing structure and unclosed p tag', () =>
-    assertFailsHtmlValidationWith(
+    assertFailsValidationWith(
+      html,
       '<p>T',
       'unclosed-tag',
       'doctype'
     )
   );
+
+  it('generates unclosed-tag error for missing closing tag', () =>
+    assertFailsValidationWith(
+      html,
+      htmlWithBody('<div>'),
+      'unclosed-tag'
+    )
+  );
+
+  it('generates unterminated-close-tag error for unfinished closing tag', () =>
+    assertFailsValidationWith(
+      html,
+      htmlWithBody('<div></div'),
+      'unterminated-close-tag'
+    )
+  );
+
+  it('generates mismatched-close-tag error for mismatched closing tag', () =>
+    assertFailsValidationWith(
+      html,
+      htmlWithBody('<div></div></span>'),
+      'mismatched-close-tag'
+    )
+  );
 });

src/config.js

@@ -5,8 +5,7 @@ const nodeEnv = (process.env.NODE_ENV || 'development');
 export default {
   nodeEnv,
   logReduxActions: () => process.env.LOG_REDUX_ACTIONS === 'true',
-  warnOnDroppedErrors: nodeEnv === 'development',
-  stubSVGs: nodeEnv === 'test',
+  warnOnDroppedErrors: process.env.WARN_ON_DROPPED_ERRORS === 'true',
 
   firebaseApp: process.env.FIREBASE_APP || 'blistering-inferno-9896',
 

src/validations/html/htmllint.js

@@ -55,6 +55,18 @@ const errorMap = {
   E027: () => ({reason: 'missing-title'}),
 
   E028: () => ({reason: 'duplicated-title'}),
+
+  E042: (error, source) => {
+    const lines = source.split('\n');
+    const tagNameExpr = /[^\s>]+/;
+    const tag = tagNameExpr.exec(lines[error.line - 1].slice(error.column))[0];
+
+    return {
+      reason: 'unclosed-tag',
+      payload: {tag},
+      suppresses: ['mismatched-close-tag'],
+    };
+  },
 };
 
 const htmlLintOptions = {
@@ -91,6 +103,7 @@ const htmlLintOptions = {
     'tt',
     'strike',
   ],
+  'tag-close': true,
   'tag-name-match': true,
   'tag-name-lowercase': true,
   'title-max-length': 0,

src/validations/html/slowparse.js

@@ -50,6 +50,7 @@ const errorMap = {
   UNCLOSED_TAG: (error) => ({
     reason: 'unclosed-tag',
     payload: {tag: error.openTag.name},
+    suppresses: ['mismatched-close-tag'],
   }),
 
   UNEXPECTED_CLOSE_TAG: (error) => ({
@@ -71,6 +72,7 @@ const errorMap = {
   UNTERMINATED_CLOSE_TAG: (error) => ({
     reason: 'unterminated-close-tag',
     payload: {tag: error.closeTag.name},
+    suppresses: ['unclosed-tag'],
   }),
 
   UNTERMINATED_COMMENT: () => ({reason: 'unterminated-comment'}),