data-test-id plugin integration (#188)

* data-test-id plugin integration

* cleanup: no need of this now

* refactor: added plugin as extension

* updated test cases

* updated packge to latest

* update: test cases

* refactor: integrated as plugin

Author: rwpswami

index.js

@@ -1,13 +1,14 @@
 const a11y = require.resolve('./rules/a11y');
 const vue = require.resolve('./rules/vue');
 const vuex = require.resolve('./rules/vuex');
+const testId = require.resolve('./rules/test-id');
 
 module.exports = {
-  extends: ['plugin:vue/recommended', a11y, vue, vuex],
+  extends: ['plugin:vue/recommended', a11y, vue, vuex, testId],
   parserOptions: {
     parser: 'babel-eslint',
   },
-  plugins: ['vue', 'vuejs-accessibility'],
+  plugins: ['vue', 'vuejs-accessibility', 'test-id'],
   env: {
     es6: true,
   },

package-lock.json

@@ -43,6 +43,7 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.1.3",
     "eslint-plugin-prettier": "^3.3.0",
+    "eslint-plugin-test-id": "^1.1.0",
     "eslint-plugin-unicorn": "^23.0.0",
     "eslint-plugin-vue": "^7.2.0",
     "eslint-plugin-vuejs-accessibility": "^0.6.0",
@@ -54,6 +55,7 @@
   },
   "peerDependencies": {
     "eslint": "^7.0.0",
+    "eslint-plugin-test-id": "^1.1.0",
     "eslint-plugin-vue": "^7.0.0",
     "eslint-plugin-vuejs-accessibility": "^0.6.0"
   },

package.json

@@ -0,0 +1,5 @@
+module.exports = {
+  rules: {
+    'test-id/data-test-id': 'error',
+  },
+};

rules/test-id.js

@@ -0,0 +1,73 @@
+const eslint = require('eslint');
+
+describe('test eslint-plugin-test-id', () => {
+  test('`v-model` without `data-test-id`', () => {
+    const code = `
+      <template>
+        <div>
+          <test v-model="somedata"> some slot data </test>
+        </div>
+      </template>
+
+      <script>
+        export default {
+          components: {
+            data() {
+              return{
+                somedata: 'test'
+              }
+            }
+          }
+        }
+      </script>
+    `;
+    const expectedErrorLineNum = 4;
+    const expectedErrorColumnNum = 11;
+    const linter = new eslint.CLIEngine({
+      useEslintrc: false,
+      configFile: '.eslintrc.json',
+    });
+    const errors = linter.executeOnText(code).results[0].messages;
+    const error = errors[0];
+
+    expect(error.ruleId).toStrictEqual('test-id/data-test-id');
+    expect(error.line).toStrictEqual(expectedErrorLineNum);
+    expect(error.column).toStrictEqual(expectedErrorColumnNum);
+    expect(error.message).toStrictEqual(`Expected 'data-test-id' with v-model.`);
+  });
+
+  test('`v-model` with `data-test-id`', () => {
+    const code = `
+      <template>
+        <div>
+          <test v-model="somedata" data-test-id="somedata"> some slot data </test>
+        </div>
+      </template>
+
+      <script>
+        export default {
+          components: {
+            data() {
+              return{
+                somedata: 'test'
+              }
+            }
+          }
+        }
+      </script>
+    `;
+    const expectedErrorLineNum = 6;
+    const expectedErrorColumnNum = 18;
+    const linter = new eslint.CLIEngine({
+      useEslintrc: false,
+      configFile: '.eslintrc.json',
+    });
+    const errors = linter.executeOnText(code).results[0].messages;
+    const error = errors[0];
+
+    expect(error.ruleId).toStrictEqual('vue/comment-directive');
+    expect(error.line).toStrictEqual(expectedErrorLineNum);
+    expect(error.column).toStrictEqual(expectedErrorColumnNum);
+    expect(error.message).toStrictEqual('clear');
+  });
+});