add table tests

packages/eslint-plugin/index.js

@@ -16,6 +16,7 @@ module.exports = {
     'use-workspace-imports': require('./lib/rules/use-workspace-imports'),
     'remove-expanding-group': require('./lib/rules/remove-expanding-group'),
     'prefer-button-component': require('./lib/rules/prefer-button-component'),
+    'prefer-table-component': require('./lib/rules/prefer-table-component'),
   },
   configs: {
     recommended: require('./lib/config/recommended'),

packages/eslint-plugin/lib/config/recommended.js

@@ -188,5 +188,6 @@ module.exports = {
     '@department-of-veterans-affairs/use-workspace-imports': 1,
     '@department-of-veterans-affairs/remove-expanding-group': 1,
     '@department-of-veterans-affairs/prefer-button-component': 1,
+    '@department-of-veterans-affairs/prefer-table-component': 1,
   },
 };

packages/eslint-plugin/lib/rules/prefer-table-component.js

@@ -0,0 +1,30 @@
+const jsxAstUtils = require('jsx-ast-utils');
+
+const { elementType } = jsxAstUtils;
+
+const MESSAGE =
+  'The <va-table> Web Component should be used to instead of the table HTML element.';
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    fixable: 'code',
+  },
+
+  create(context) {
+    return {
+      JSXElement(node) {
+        const anchorNode = node.openingElement;
+
+        // Only display if we are on a table element
+        if (elementType(anchorNode) === 'table'){
+
+          context.report({
+            node,
+            message:  MESSAGE,
+          })
+        }
+      },
+    };
+  },
+};

packages/eslint-plugin/tests/lib/rules/prefer-table-component.js

@@ -0,0 +1,73 @@
+'use strict';
+
+const rule = require('../../../lib/rules/prefer-table-component');
+const RuleTester = require('eslint').RuleTester;
+
+const parserOptions = {
+  ecmaVersion: 2018,
+  // sourceType: 'module',
+  ecmaFeatures: {
+    jsx: true,
+  },
+};
+
+const ruleTester = new RuleTester({ parserOptions });
+
+ruleTester.run('prefer-table-component', rule, {
+  valid: [
+    {
+      code: `
+        const table = () => (<va-table
+          id="cancel"
+          onClick={handlers.onCancel}
+          text="Cancel"
+        />)
+      `,
+    }
+  ],
+  invalid: [
+    {
+      code: `
+        const table = () => (
+          <table>
+            <thead>
+              <tr>
+                <th>Date</th>
+                <th>Name</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Nov 9</td>
+                <td>Kelly</td>
+              </tr>
+              <tr>
+                <td>Dec 19</td>
+                <td>Franklin</td>
+              </tr>
+            </tbody>
+          </table>
+        )
+      `,
+      errors: [
+        {
+          message:
+            'The <va-table> Web Component should be used to instead of the table HTML element.'
+        },
+      ],
+    },
+    {
+      code: `
+        const table = () => (
+          <table></table>
+        )
+      `,
+      errors: [
+        {
+          message:
+            'The <va-table> Web Component should be used to instead of the table HTML element.'
+        },
+      ],
+    }
+  ],
+});