From 7a308a276d5f29856be9a2fa196ad33c7639ac28 Mon Sep 17 00:00:00 2001
From: Alex Taker <a.taker@gmail.com>
Date: Wed, 1 Nov 2023 11:23:11 -0400
Subject: [PATCH] add table tests

---
 packages/eslint-plugin/index.js               |  1 +
 .../eslint-plugin/lib/config/recommended.js   |  1 +
 .../lib/rules/prefer-table-component.js       | 30 ++++++++
 .../tests/lib/rules/prefer-table-component.js | 73 +++++++++++++++++++
 4 files changed, 105 insertions(+)
 create mode 100644 packages/eslint-plugin/lib/rules/prefer-table-component.js
 create mode 100644 packages/eslint-plugin/tests/lib/rules/prefer-table-component.js

diff --git a/packages/eslint-plugin/index.js b/packages/eslint-plugin/index.js
index b7a3b27f74..2537018fe1 100644
--- a/packages/eslint-plugin/index.js
+++ b/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'),
diff --git a/packages/eslint-plugin/lib/config/recommended.js b/packages/eslint-plugin/lib/config/recommended.js
index 909b917e82..a604bc5a1e 100644
--- a/packages/eslint-plugin/lib/config/recommended.js
+++ b/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,
   },
 };
diff --git a/packages/eslint-plugin/lib/rules/prefer-table-component.js b/packages/eslint-plugin/lib/rules/prefer-table-component.js
new file mode 100644
index 0000000000..802193957b
--- /dev/null
+++ b/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,
+          })
+        }
+      },
+    };
+  },
+};
diff --git a/packages/eslint-plugin/tests/lib/rules/prefer-table-component.js b/packages/eslint-plugin/tests/lib/rules/prefer-table-component.js
new file mode 100644
index 0000000000..9bbe5b3cb6
--- /dev/null
+++ b/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.'
+        },
+      ],
+    }
+  ],
+});