Add first HTML test

package.json

@@ -31,9 +31,11 @@
     "lib"
   ],
   "devDependencies": {
+    "@html-eslint/eslint-plugin": "^0.31.1",
+    "@html-eslint/parser": "^0.31.0",
     "@stylistic/eslint-plugin": "^1.3.3",
     "chai": "^4.3.10",
-    "eslint": "^9.0.0-alpha.0",
+    "eslint": "^9.17.0",
     "globals": "^13.24.0",
     "mocha": "^10.2.0"
   },

tests/eslint.test.config.js

@@ -1,6 +1,9 @@
 const js = require("@eslint/js");
 const stylistic = require("@stylistic/eslint-plugin");
 const globals = require("globals");
+const html = require("@html-eslint/eslint-plugin");
+
+const plugin = require("../lib/index.js");
 
 const customizedStylistic = stylistic.configs.customize({
   "indent": 2,
@@ -12,6 +15,10 @@ const customizedStylistic = stylistic.configs.customize({
 
 module.exports = [
   js.configs.recommended,
+  {
+    processor: plugin.processors["processorJs"],
+    files: ["**/*.js", "**/*.js.erb"],
+  },
   {
     plugins: {
       "@stylistic": stylistic,
@@ -29,5 +36,40 @@ module.exports = [
         ...globals.mocha,
       },
     },
+    ignores: ["**/*.html**"],
+  },
+  {
+    // HTML linting (aside from erb_lint)
+    processor: plugin.processors["processorHtml"],
+    ...html.configs["flat/recommended"],
+    files: ["**/*.html", "**/*.html.erb"],
+    rules: {
+      ...html.configs["flat/recommended"].rules,
+      // 🎈 Best Practices
+      "@html-eslint/no-extra-spacing-text": "error",
+      "@html-eslint/no-script-style-type": "error",
+      "@html-eslint/no-target-blank": "error",
+      // 🎈 Accessibility
+      "@html-eslint/no-abstract-roles": "error",
+      "@html-eslint/no-accesskey-attrs": "error",
+      "@html-eslint/no-aria-hidden-body": "error",
+      "@html-eslint/no-non-scalable-viewport": "error",
+      "@html-eslint/no-positive-tabindex": "error",
+      "@html-eslint/no-skip-heading-levels": "error",
+      // 🎈 Styles
+      "@html-eslint/attrs-newline": ["error", {
+        closeStyle: "newline",
+        ifAttrsMoreThan: 5,
+      }],
+      "@html-eslint/id-naming-convention": ["error", "kebab-case"],
+      "@html-eslint/indent": ["error", 2],
+      "@html-eslint/sort-attrs": "error",
+      "@html-eslint/no-extra-spacing-attrs": ["error", {
+        enforceBeforeSelfClose: true,
+        disallowMissing: true,
+        disallowTabs: true,
+        disallowInAssignment: true,
+      }],
+    },
   },
 ];

tests/fixtures/multiple-attributes.expected.html

@@ -0,0 +1,10 @@
+<button
+  id="lecture-basics-cancel"
+  type="button"
+  class="btn btn-sm btn-secondary ms-2"
+  data-id="<%= lecture.id %>"
+  data-test="<%= course.other_id %>"
+  onclick="abc"
+>
+  <%= t("buttons.discard") %>
+</button>

tests/fixtures/multiple-attributes.html

@@ -0,0 +1,8 @@
+<button type="button"
+              class="btn btn-sm btn-secondary ms-2"
+              id="lecture-basics-cancel"
+              data-test="<%= course.other_id %>"
+              onclick="abc"
+              data-id="<%= lecture.id %>">
+        <%= t("buttons.discard") %>
+</button>

tests/integration.js

@@ -1,15 +1,10 @@
 const fs = require("fs");
 const assert = require("chai").assert;
-const plugin = require("../lib/index.js");
 const { ESLint } = require("eslint");
 
 const eslint = new ESLint({
   fix: true,
   overrideConfigFile: "./tests/eslint.test.config.js",
-  overrideConfig: {
-    processor: plugin.processors.processorJs,
-    files: ["**/*.js"],
-  },
 });
 
 async function runTest(filename, expectedFilename) {
@@ -34,3 +29,14 @@ describe("Integration tests (JS)", () => {
     });
   });
 });
+
+describe("Integration tests (HTML)", () => {
+  const mapFiles = [
+    "multiple-attributes",
+  ];
+  mapFiles.forEach((name) => {
+    it(`performs linting as we expect it on ${name}.html`, async () => {
+      await runTest(`tests/fixtures/${name}.html`, `tests/fixtures/${name}.expected.html`, eslint);
+    });
+  });
+});