davidcalhoun / eslint-plugin-test-selectors

Enforces that data-test-id attributes are added to interactive DOM elements (JSX) to help with UI testing. JSX only.
28 stars 14 forks source link

Allow multiple selectors #16

Closed anichols-ht closed 1 year ago

anichols-ht commented 1 year ago

How open would you be to the testAttribute config property being an array (string or array I guess)? Normally you want to enforce consistency, but here's my reasoning. You can't destructure 'data-test-id' in props because it's not a valid variable name, so I'd love to be able to do this:

// in consumer
<SomeComponentWithAButton dataTest="something" />

// in component
const SomeComponentWithAButton = ({ dataTest }) => {
  <button data-test={`btn-${ dataTest }`}>blah</button>
};

Currently that doesn't work. I'd have to use data-test everywhere, and then in the actual component do something like

({ other, props, ...rest }) => {
  const dataTest = rest['data-test']
}

Either that or an option to turn the rule off for all components and only enforce it on html elements. But I prefer the former cause I do want to enforce dataTest being there.

davidcalhoun commented 1 year ago

Thanks for the input, that use case makes sense to me. I could see how it would be useful to have testAttribute either as a string (as it's implemented now, e.g. 'data-test') or optionally as an array (as you're suggesting, ['data-test', 'dataTest']). If you'd like to submit a PR I'll take a look.

KhaledMohamedP commented 1 year ago

@davidcalhoun @anichols-ht Created this PR https://github.com/davidcalhoun/eslint-plugin-test-selectors/pull/19 , let me know how we can get it to the finish line :)

KhaledMohamedP commented 1 year ago

@davidcalhoun can you publish a new version of the package and close this ticket?

davidcalhoun commented 1 year ago

Sorry for the delay, I wanted to make sure there was good test coverage. I've now added it and published a new release - multiple test selectors are now supported as of v2.1.0! Thanks folks!