Create a rule avoid duplicate data-lgid and data-testid attributes

Author: kraenhansen

tools/eslint-plugin/src/rules/index.ts

@@ -1,11 +1,14 @@
 /**
  * DO NOT MODIFY THIS FILE
  * ANY CHANGES WILL BE REMOVED ON THE NEXT BUILD
+ * USE THE "create-rule" SCRIPT TO ADD NEW RULES INSTEAD
  */
+import { noDuplicateIdsRule } from './no-duplicate-ids';
 import { noIndirectImportsRule } from './no-indirect-imports';
 import { noRenderHookFromRtlRule } from './no-render-hook-from-rtl';
 
 export const rules = {
+  'no-duplicate-ids': noDuplicateIdsRule,
   'no-indirect-imports': noIndirectImportsRule,
   'no-render-hook-from-rtl': noRenderHookFromRtlRule,
 };

tools/eslint-plugin/src/rules/no-duplicate-ids.ts

@@ -0,0 +1,74 @@
+import { TSESTree } from '@typescript-eslint/types';
+
+import { createRule } from '../utils/createRule';
+
+export const noDuplicateIdsRule = createRule({
+  name: 'no-duplicate-ids',
+  meta: {
+    type: 'suggestion',
+    messages: {
+      'issue:noDuplicateIds':
+        'Do not reference the same lgid or testid in multiple places within a component',
+    },
+    schema: [],
+    docs: {
+      description:
+        'Prevents duplicate lgid or testid usage within a component file',
+    },
+  },
+  defaultOptions: [],
+  create: context => {
+    const seen: Record<
+      'data-lgid' | 'data-testid',
+      Record<string, TSESTree.JSXAttribute | undefined>
+    > = {
+      'data-lgid': {},
+      'data-testid': {},
+    };
+
+    return {
+      JSXAttribute(node) {
+        if (node.name.type !== 'JSXIdentifier') {
+          return;
+        }
+
+        const { name: attributeName } = node.name;
+
+        if (attributeName !== 'data-lgid' && attributeName !== 'data-testid') {
+          return;
+        }
+
+        if (
+          node.value?.type !== 'JSXExpressionContainer' ||
+          node.value.expression.type !== 'MemberExpression' ||
+          node.value.expression.object.type !== 'Identifier' ||
+          node.value.expression.object.name !== 'lgIds'
+        ) {
+          return;
+        }
+
+        const { property } = node.value.expression;
+
+        const name =
+          property.type === 'Identifier'
+            ? property.name
+            : property.type === 'Literal'
+            ? property.value
+            : undefined;
+
+        if (typeof name === 'string') {
+          const other = seen[attributeName][name];
+
+          if (other) {
+            context.report({
+              node,
+              messageId: 'issue:noDuplicateIds',
+            });
+          } else {
+            seen[attributeName][name] = node;
+          }
+        }
+      },
+    };
+  },
+});

tools/eslint-plugin/src/tests/no-duplicate-lgids.spec.ts

@@ -0,0 +1,35 @@
+import { noDuplicateIdsRule } from '../rules/no-duplicate-ids';
+
+import { ruleTester } from './utils/ruleTester.testutils';
+
+ruleTester.run('no-duplicate-ids', noDuplicateIdsRule, {
+  valid: [
+    {
+      code: `<div data-lgid={lgIds.root}><div data-lgid={lgIds.nested} /></div>`,
+      languageOptions: {
+        parserOptions: {
+          ecmaFeatures: {
+            jsx: true,
+          },
+        },
+      },
+    },
+  ],
+  invalid: [
+    {
+      code: `<div data-lgid={lgIds.root}><div data-lgid={lgIds.root} /></div>`,
+      languageOptions: {
+        parserOptions: {
+          ecmaFeatures: {
+            jsx: true,
+          },
+        },
+      },
+      errors: [
+        {
+          messageId: 'issue:noDuplicateIds',
+        },
+      ],
+    },
+  ],
+});