feat: require-data-selector uses consistent rules with assignments

[MgmClientGuy0]

#272 improved the checks for the require-data-selectors rule to include variable assignments. This works great, thanks for that, but it does not have the exact same semantic as if the selector was defined inline. The following is valid if defined inline:

cy.get(`[data-cy=${ELEMENT_ID}]`)

and not valid if defined in a variable:

const selector = `[data-cy=${ELEMENT_ID}]`
cy.get(selector)

This PR now reuses the exact same checks for variable declarations as the inline version. As a bonus, this now supports variable reassignments:

const selector = "[data-cy=assessment-submit]"
const anotherOne = selector;
cy.get(anotherOne)

[cypress-app-bot]

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.

[MikeMcC399]

@duranbe

You might like to take a look at this PR, since you were the last contributor to make changes to the cypress/require-data-selectors.

[duranbe]

Ah great catch, yes indeed in that case where the definition was not inline the rule was not working properly. Great addition for the re-assignment, does it works at more than one level ?

Also I agree with @MikeMcC399 - documentation should be updated to reflect this, and existing tests "should not" be updated

[MgmClientGuy0]

Thanks for the review. I did not delete any tests, I just removed the unnecessary escaping in one of them, as pointed out by eslint. You are allowed to have backticks in strings. The tested JS is exactly the same.

'\`[data-cy=${1}]\`' === '`[data-cy=${1}]`' // true

I will add more examples to the documentation and change my commit message to mark it as a feature.

@duranbe You can chain as many assignments as you want.

[MikeMcC399]

@MgmClientGuy0

I did not delete any tests, I just removed the unnecessary escaping in one of them, as pointed out by eslint. You are allowed to have backticks in strings. The tested JS is exactly the same.

'\`[data-cy=${1}]\`' === '`[data-cy=${1}]`' // true

The "useless escapes" have been in there for 6 years, and I assumed without checking that they had some purpose. That was the reason that I requested to preserve that line in the test.

eslint-plugin-cypress/tests/lib/rules/require-data-selectors.js

Line 17 in f91d3a9

{ code: 'cy.get(\`[data-cy=${1}]\`)' }, // eslint-disable-line no-useless-escape

After running the master branch tests in vitest in VS Code I saw that the useless escapes are not passed to vitest, and so they are in fact useless and can be removed, as you have done.

[MgmClientGuy0]

Applied the suggestions (one selector was supposed to be a class selector). Nice catch with the two code blocks, that was visible in the rendered documentation.

[MikeMcC399]

Thanks for the corrections! That looks good to me now.

[mschile]

bugbot run

[cursor]

Bugbot couldn't run

Bugbot is not enabled for your user on this team.

Ask your team administrator to increase your team's hard limit for Bugbot seats or add you to the allowlist in the Cursor dashboard.

[mschile]

Thanks for the contribution @MgmClientGuy0!

[cypress-app-bot]

🎉 This PR is included in version 6.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀