feat: require-data-selector uses consistent rules with assignments (#302)

Author: MgmClientGuy0

docs/rules/require-data-selectors.md

@@ -21,6 +21,13 @@ cy.get('.btn-.large').click()
 
 const CLASS_SELECTOR = ".my-class"; 
 cy.get(CLASS_SELECTOR)
+
+const TYPE = 'submit'
+const SUBMIT_TEMPLATE = `.${TYPE}`
+cy.get(SUBMIT_TEMPLATE)
+
+const MY_SUBMIT_TEMPLATE = SUBMIT_TEMPLATE;
+cy.get(MY_SUBMIT_TEMPLATE)
 ```
 
 Examples of **correct** code for this rule:
@@ -29,11 +36,16 @@ Examples of **correct** code for this rule:
 cy.get('[data-cy=submit]').click()
 cy.get('[data-QA=submit]')
 cy.get(`[data-QA=submit]`)
-```
 
-```js
 const ASSESSMENT_SUBMIT = "[data-cy=assessment-submit]"
 cy.get(ASSESSMENT_SUBMIT).click()
+
+const TYPE = 'submit'
+const SUBMIT_TEMPLATE = `[data-QA=${TYPE}]`
+cy.get(SUBMIT_TEMPLATE)
+
+const MY_SUBMIT_TEMPLATE = SUBMIT_TEMPLATE;
+cy.get(MY_SUBMIT_TEMPLATE)
 ```
 
 ## Further Reading

lib/rules/require-data-selectors.js

@@ -19,18 +19,7 @@ module.exports = {
     return {
       VariableDeclarator(node) {
         if (node.init && node.id && node.id.type === 'Identifier') {
-          let selectorValue = null
-
-          if (node.init.type === 'Literal' && typeof node.init.value === 'string') {
-            selectorValue = node.init.value
-          }
-          else if (node.init.type === 'TemplateLiteral'
-            && node.init.expressions.length === 0
-            && node.init.quasis.length === 1) {
-            selectorValue = node.init.quasis[0].value.cooked
-          }
-
-          if (selectorValue && isAliasOrDataSelector(selectorValue)) {
+          if (isDataNode(node.init, variablesSet)) {
             variablesSet.add(node.id.name)
           }
         }
@@ -57,7 +46,10 @@ function isDataArgument(node, dataVariables) {
   if (node.arguments.length === 0) return false
 
   const firstArg = node.arguments[0]
+  return isDataNode(firstArg, dataVariables)
+}
 
+function isDataNode(firstArg, dataVariables) {
   if (firstArg.type === 'Literal') {
     return isAliasOrDataSelector(String(firstArg.value))
   }

tests/lib/rules/require-data-selectors.js

@@ -14,11 +14,13 @@ ruleTester.run('require-data-selectors', rule, {
     { code: 'cy.clock(5000)' },
     { code: 'cy.scrollTo(0, 10)' },
     { code: 'cy.tick(500)' },
-    { code: 'cy.get(\`[data-cy=${1}]\`)' }, // eslint-disable-line no-useless-escape
+    { code: 'cy.get(`[data-cy=${1}]`)' },
     { code: 'cy.get("@my-alias")' },
     { code: 'cy.get(`@my-alias`)' },
     { code: 'const ASSESSMENT_SUBMIT = "[data-cy=assessment-submit]"; cy.get(ASSESSMENT_SUBMIT)' },
     { code: 'const ALIAS_TEMPLATE = `@my-alias`; cy.get(ALIAS_TEMPLATE)' },
+    { code: 'const TEMPLATE = `[data-cy=${1}]`; cy.get(TEMPLATE)' },
+    { code: 'const ALIAS_TEMPLATE = `@my-alias`; const REASSIGNED = ALIAS_TEMPLATE; cy.get(REASSIGNED)' },
   ],
 
   invalid: [
@@ -27,8 +29,10 @@ ruleTester.run('require-data-selectors', rule, {
     { code: 'cy.get(".btn-large").click()', errors },
     { code: 'cy.get(".btn-.large").click()', errors },
     { code: 'cy.get(".a")', errors },
-    { code: 'cy.get(\`[daedta-cy=${1}]\`)', errors }, // eslint-disable-line no-useless-escape
+    { code: 'cy.get(`[daedta-cy=${1}]`)', errors },
     { code: 'const BAD_SELECTOR = ".my-class"; cy.get(BAD_SELECTOR)', errors },
     { code: 'const GOOD = "[data-cy=good]"; const BAD = ".bad"; cy.get(GOOD); cy.get(BAD)', errors },
+    { code: 'const TEMPLATE = `[daedta-cy=${1}]`; cy.get(TEMPLATE)', errors },
+    { code: 'const BAD = ".bad"; const REASSIGNED = BAD; cy.get(REASSIGNED)', errors },
   ],
 })