Merge pull request #148 from vue-a11y/ts

TypeScript

Author: kddnewton

.gitignore

@@ -1,3 +1,4 @@
 /.eslintcache
 /.husky/
+/dist/
 /node_modules/

.prettierignore

@@ -4,3 +4,4 @@
 .prettierignore
 LICENSE
 yarn.lock
+dist

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
 ### Changed
 
 - Ensure directives that have identifiers for values are counted as present in the element.
+- Convert over to using TypeScript for development.
 
 ## [0.6.2] - 2021-05-26
 

bin/lint

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 
-const { CLIEngine } = require("eslint");
-const a11yPlugin = require("../src");
+const { ESLint } = require("eslint");
+const a11yPlugin = require("../dist");
 
 (async function () {
-  const cli = new CLIEngine({ baseConfig: a11yPlugin.configs.recommended });
+  const cli = new ESLint({ baseConfig: a11yPlugin.configs.recommended });
   cli.addPlugin("eslint-plugin-vuejs-accessibility", a11yPlugin);
 
   const report = cli.executeOnFiles(process.argv.slice(2));

jest.setup.js

@@ -0,0 +1,17 @@
+import { RuleTester } from "eslint";
+
+interface JestRuleTester extends RuleTester {
+  describe: (text: string, callback: () => void) => void;
+  it: { title?: string } & ((text: string, callback: () => void) => void);
+}
+
+const ruleTester = RuleTester as unknown as JestRuleTester;
+
+ruleTester.describe = (text: string, callback: () => void) => {
+  ruleTester.it.title = text;
+  return callback.call(this);
+};
+
+ruleTester.it = (text: string, callback: () => void) => {
+  test(`${ruleTester.it.title}: ${text}`, callback);
+};

jest.setup.ts

@@ -2,9 +2,10 @@
   "name": "eslint-plugin-vuejs-accessibility",
   "version": "0.6.2",
   "description": "An eslint plugin for checking Vue.js files for accessibility",
-  "main": "src/index.js",
+  "main": "dist/src/index.js",
   "scripts": {
     "lint": "eslint --cache .",
+    "prepublishOnly": "tsc -p tsconfig.build.json",
     "test": "jest"
   },
   "author": "Kevin Newton",
@@ -31,12 +32,20 @@
     "vue-eslint-parser": "^7.0.0"
   },
   "devDependencies": {
+    "@types/aria-query": "^4.2.1",
+    "@types/eslint-scope": "^3.7.0",
+    "@types/eslint-visitor-keys": "^1.0.0",
+    "@types/jest": "^26.0.23",
+    "@typescript-eslint/eslint-plugin": "^4.26.0",
+    "@typescript-eslint/parser": "^4.26.0",
     "eslint": "^7.3.1",
     "eslint-plugin-eslint-plugin": "^3.0.0",
     "husky": "^6.0.0",
     "jest": "^27.0.1",
     "prettier": "^2.1.1",
-    "pretty-quick": "^3.0.0"
+    "pretty-quick": "^3.0.0",
+    "ts-jest": "^27.0.1",
+    "typescript": "^4.2.4"
   },
   "eslintConfig": {
     "env": {
@@ -46,25 +55,33 @@
     },
     "extends": [
       "eslint:recommended",
-      "plugin:eslint-plugin/recommended"
+      "plugin:eslint-plugin/recommended",
+      "plugin:@typescript-eslint/recommended"
     ],
-    "parserOptions": {
-      "ecmaVersion": 2015
-    },
+    "parser": "@typescript-eslint/parser",
     "plugins": [
-      "eslint-plugin"
-    ]
+      "eslint-plugin",
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/no-explicit-any": "off"
+    }
   },
+  "eslintIgnore": [
+    "dist"
+  ],
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged"
     }
   },
   "jest": {
+    "preset": "ts-jest",
     "setupFilesAfterEnv": [
-      "./jest.setup.js"
+      "./jest.setup.ts"
     ],
-    "testRegex": ".test.js$"
+    "testRegex": ".test.ts$"
   },
   "prettier": {
     "trailingComma": "none"

package.json

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   rules: {
     "accessible-emoji": require("./rules/accessible-emoji"),
     "alt-text": require("./rules/alt-text"),

src/index.js renamed to src/index.ts

@@ -1,5 +1,5 @@
-const rule = require("../accessible-emoji");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../accessible-emoji";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("accessible-emoji", rule, {
   valid: [

src/rules/__tests__/accessible-emoji.test.js renamed to src/rules/__tests__/accessible-emoji.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../alt-text");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../alt-text";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("alt-text", rule, {
   valid: [

src/rules/__tests__/alt-text.test.js renamed to src/rules/__tests__/alt-text.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../anchor-has-content");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../anchor-has-content";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("anchor-has-content", rule, {
   valid: [

src/rules/__tests__/anchor-has-content.test.js renamed to src/rules/__tests__/anchor-has-content.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../aria-props");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../aria-props";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("aria-props", rule, {
   valid: ["<input aria-labelledby='address' />"],

src/rules/__tests__/aria-props.test.js renamed to src/rules/__tests__/aria-props.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../aria-role");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../aria-role";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("aria-role", rule, {
   valid: [

src/rules/__tests__/aria-role.test.js renamed to src/rules/__tests__/aria-role.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../aria-unsupported-elements");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../aria-unsupported-elements";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("aria-unsupported-elements", rule, {
   valid: ["<html />"],

src/rules/__tests__/aria-unsupported-elements.test.js renamed to src/rules/__tests__/aria-unsupported-elements.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../click-events-have-key-events");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../click-events-have-key-events";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("click-events-have-key-events", rule, {
   valid: [

src/rules/__tests__/click-events-have-key-events.test.js renamed to src/rules/__tests__/click-events-have-key-events.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../form-control-has-label");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../form-control-has-label";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("form-control-has-label", rule, {
   valid: [

src/rules/__tests__/form-control-has-label.test.js renamed to src/rules/__tests__/form-control-has-label.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../heading-has-content");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../heading-has-content";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("heading-has-content", rule, {
   valid: [

src/rules/__tests__/heading-has-content.test.js renamed to src/rules/__tests__/heading-has-content.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../iframe-has-title");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../iframe-has-title";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("iframe-has-title", rule, {
   valid: ["<iframe title='test' />", "<iframe :title='test' />"],

src/rules/__tests__/iframe-has-title.test.js renamed to src/rules/__tests__/iframe-has-title.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../interactive-supports-focus");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../interactive-supports-focus";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("interactive-supports-focus", rule, {
   valid: [

src/rules/__tests__/interactive-supports-focus.test.js renamed to src/rules/__tests__/interactive-supports-focus.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../label-has-for");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../label-has-for";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("label-has-for", rule, {
   valid: [

src/rules/__tests__/label-has-for.test.js renamed to src/rules/__tests__/label-has-for.test.ts

@@ -0,0 +1,46 @@
+import type { Rule } from "eslint";
+import { RuleTester } from "eslint";
+
+type ValidCase = string | { code: string; options?: any[] };
+type InvalidCase = string | { code: string; options?: any[]; errors: any[] };
+type Config = { valid: ValidCase[]; invalid: InvalidCase[] };
+
+const filename = "test.vue";
+const makeTemplate = (code: string) => `<template>${code}</template>`;
+
+function makeValidExample(example: ValidCase) {
+  if (typeof example === "string") {
+    return { filename, code: makeTemplate(example) };
+  }
+
+  return { ...example, filename, code: makeTemplate(example.code) };
+}
+
+function makeInvalidExample(example: InvalidCase) {
+  if (typeof example === "string") {
+    return {
+      filename,
+      code: makeTemplate(example),
+      errors: [{ messageId: "default" }]
+    };
+  }
+
+  return { ...example, filename, code: makeTemplate(example.code) };
+}
+
+function makeRuleTester(name: string, rule: Rule.RuleModule, config: Config) {
+  const ruleTester = new RuleTester({
+    parser: require.resolve("vue-eslint-parser"),
+    parserOptions: {
+      ecmaVersion: 2015,
+      sourceType: "module"
+    }
+  });
+
+  ruleTester.run(name, rule, {
+    valid: config.valid.map(makeValidExample),
+    invalid: config.invalid.map(makeInvalidExample)
+  });
+}
+
+export default makeRuleTester;

src/rules/__tests__/makeRuleTester.js

@@ -1,5 +1,5 @@
-const rule = require("../media-has-caption");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../media-has-caption";
+import makeRuleTester from "./makeRuleTester";
 
 const options = [
   {

src/rules/__tests__/makeRuleTester.ts

@@ -1,5 +1,5 @@
-const rule = require("../mouse-events-have-key-events");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../mouse-events-have-key-events";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("mouse-events-have-key-events", rule, {
   valid: [

src/rules/__tests__/media-has-caption.test.js renamed to src/rules/__tests__/media-has-caption.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../no-access-key");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../no-access-key";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("no-access-key", rule, {
   valid: ["<div />", "<div accesskey />"],

src/rules/__tests__/mouse-events-have-key-events.test.js renamed to src/rules/__tests__/mouse-events-have-key-events.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../no-autofocus");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../no-autofocus";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("no-autofocus", rule, {
   valid: [

src/rules/__tests__/no-access-key.test.js renamed to src/rules/__tests__/no-access-key.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../no-distracting-elements");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../no-distracting-elements";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("no-distracting-elements", rule, {
   valid: ["<div />"],

src/rules/__tests__/no-autofocus.test.js renamed to src/rules/__tests__/no-autofocus.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../no-onchange");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../no-onchange";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("no-onchange", rule, {
   valid: ["<select><option @blur='void 0' @change='void 0' /></select>"],

src/rules/__tests__/no-distracting-elements.test.js renamed to src/rules/__tests__/no-distracting-elements.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../no-redundant-roles");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../no-redundant-roles";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("no-redundant-roles", rule, {
   valid: ["<a role='link' />", "<div role='link' />"],

src/rules/__tests__/no-onchange.test.js renamed to src/rules/__tests__/no-onchange.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../role-has-required-aria-props");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../role-has-required-aria-props";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("role-has-required-aria-props", rule, {
   valid: [

src/rules/__tests__/no-redundant-roles.test.js renamed to src/rules/__tests__/no-redundant-roles.test.ts

@@ -1,5 +1,5 @@
-const rule = require("../tabindex-no-positive");
-const makeRuleTester = require("./makeRuleTester");
+import rule from "../tabindex-no-positive";
+import makeRuleTester from "./makeRuleTester";
 
 makeRuleTester("tabindex-no-positive", rule, {
   valid: [