From df0874d09d3ec18593169a5ab0d2571e518084de Mon Sep 17 00:00:00 2001
From: "Daniel D. Beck" <daniel@ddbeck.com>
Date: Wed, 22 Jul 2020 22:37:09 +0100
Subject: [PATCH] Only flag mismatched name attributes

---
 ...=> html-h2-avoid-name-attribute-mismatch.js} | 17 ++++++++++++++---
 ...ml-h2-avoid-name-attribute-mismatch.test.js} | 15 ++++++++++++---
 2 files changed, 26 insertions(+), 6 deletions(-)
 rename scripts/scraper-ng/rules/{html-h2-avoid-name-attribute.js => html-h2-avoid-name-attribute-mismatch.js} (51%)
 rename scripts/scraper-ng/test/{html-h2-avoid-name-attribute.test.js => html-h2-avoid-name-attribute-mismatch.test.js} (61%)

diff --git a/scripts/scraper-ng/rules/html-h2-avoid-name-attribute.js b/scripts/scraper-ng/rules/html-h2-avoid-name-attribute-mismatch.js
similarity index 51%
rename from scripts/scraper-ng/rules/html-h2-avoid-name-attribute.js
rename to scripts/scraper-ng/rules/html-h2-avoid-name-attribute-mismatch.js
index 6d4960ee..34c3b5f3 100644
--- a/scripts/scraper-ng/rules/html-h2-avoid-name-attribute.js
+++ b/scripts/scraper-ng/rules/html-h2-avoid-name-attribute-mismatch.js
@@ -1,9 +1,10 @@
 const { selectAll } = require("hast-util-select");
+const toText = require("hast-util-to-text");
 
 const source = "html-h2-avoid-name-attribute";
-const id = "h2-name-attr";
+const id = "h2-name-attr-mismatch";
 const reason = (node) =>
-  `H2 has name attribute (h2[name="${node.properties.name}"])`;
+  `H2 has name attribute mismatch (h2[name="${node.properties.name}"])`;
 
 /**
  * Warn about H2s with name attributes, since this can lead to surprises.
@@ -11,9 +12,19 @@ const reason = (node) =>
 function htmlH2AvoidNameAttributePlugin() {
   return function warnOnH2NameAttr(tree, file) {
     for (const node of selectAll("h2[name]", tree)) {
-      file.message(reason(node), node, `${source}:${id}`);
+      if (isMismatch(node)) {
+        file.message(reason(node), node, `${source}:${id}`);
+      }
     }
   };
 }
 
+function isMismatch(node) {
+  return toAttr(toText(node)) !== node.properties.name;
+}
+
+function toAttr(str) {
+  return str.replace(/ /g, "_");
+}
+
 module.exports = htmlH2AvoidNameAttributePlugin;
diff --git a/scripts/scraper-ng/test/html-h2-avoid-name-attribute.test.js b/scripts/scraper-ng/test/html-h2-avoid-name-attribute-mismatch.test.js
similarity index 61%
rename from scripts/scraper-ng/test/html-h2-avoid-name-attribute.test.js
rename to scripts/scraper-ng/test/html-h2-avoid-name-attribute-mismatch.test.js
index 0c02ed5c..0cb1618d 100644
--- a/scripts/scraper-ng/test/html-h2-avoid-name-attribute.test.js
+++ b/scripts/scraper-ng/test/html-h2-avoid-name-attribute-mismatch.test.js
@@ -1,18 +1,27 @@
 const { process } = require("./framework/utils");
 
-describe("html-h2-avoid-name-attribute", () => {
+describe("html-h2-name-attribute-mismatch", () => {
   const recipe = { body: ["data.browser_compatibility"] };
-  const messageId = /h2-name-attr/;
+  const messageId = /h2-name-attr-mismatch/;
 
   test("warning-on-h2-name-attr", () => {
     const file = process(
-      `<h2 id="Browser_compatability" name="Browser_compatability">Browser compatability</h2>`,
+      `<h2 id="Browser_compatability" name="Browser_Compatability">Browser compatability</h2>`,
       recipe
     );
 
     expect(file).hasMessageWithId(messageId);
   });
 
+  test("no-warning-without-h2-attr-mismatch", () => {
+    const file = process(
+      `<h2 id="Browser_compatability" name="Browser_compatability">Browser compatability</h2>`,
+      recipe
+    );
+
+    expect(file).not.hasMessageWithId(messageId);
+  });
+
   test("no-warning-without-h2-attr", () => {
     const file = process(
       `<h2 id="Browser_compatability">Browser compatability</h2>`,