{"id":13846965,"url":"https://github.com/davidcalhoun/eslint-plugin-test-selectors","last_synced_at":"2025-04-13T04:37:23.628Z","repository":{"id":34727319,"uuid":"146951766","full_name":"davidcalhoun/eslint-plugin-test-selectors","owner":"davidcalhoun","description":"Enforces that data-test-id attributes are added to interactive DOM elements (JSX) to help with UI testing.  JSX only.","archived":false,"fork":false,"pushed_at":"2023-10-18T13:26:29.000Z","size":466,"stargazers_count":28,"open_issues_count":6,"forks_count":14,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-09T10:41:10.914Z","etag":null,"topics":["eslint","eslint-plugin","eslintplugin","jsx","lint","plugin","testing","ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidcalhoun.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-08-31T23:39:18.000Z","updated_at":"2023-12-07T16:02:46.000Z","dependencies_parsed_at":"2024-01-15T20:47:34.280Z","dependency_job_id":"b86b1fd6-2bab-4dc6-9d49-346f0953af10","html_url":"https://github.com/davidcalhoun/eslint-plugin-test-selectors","commit_stats":{"total_commits":83,"total_committers":5,"mean_commits":16.6,"dds":0.07228915662650603,"last_synced_commit":"9ff3d4a7eb661fe22a09c81f5ebbabcd82d3e501"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidcalhoun%2Feslint-plugin-test-selectors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidcalhoun%2Feslint-plugin-test-selectors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidcalhoun%2Feslint-plugin-test-selectors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidcalhoun%2Feslint-plugin-test-selectors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidcalhoun","download_url":"https://codeload.github.com/davidcalhoun/eslint-plugin-test-selectors/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248665760,"owners_count":21142121,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["eslint","eslint-plugin","eslintplugin","jsx","lint","plugin","testing","ui"],"created_at":"2024-08-04T18:00:51.337Z","updated_at":"2025-04-13T04:37:23.608Z","avatar_url":"https://github.com/davidcalhoun.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# eslint-plugin-test-selectors\n\n[![Downloads][downloads-image]][npm-url]\n\nEnforces that a `data-test-id` attribute is present on interactive DOM elements to help with UI testing.\n\n-   ❌ `\u003cbutton\u003eDownload\u003c/button\u003e`\n-   ✅ `\u003cbutton data-test-id=\"download-button\"\u003eDownload\u003c/button\u003e`\n\n### Example of eslint-plugin-test-selectors running in Visual Studio Code:\n\n![Example of eslint-plugin-test-selectors running in Visual Studio Code](vscode-test-selectors-example.png)\n\n## Selected changelog\n\n[See full changelog](https://github.com/davidcalhoun/eslint-plugin-test-selectors/blob/main/changelog.md)\n\n-   `2.1.0` - custom `testAttribute` property now accepts arrays. Also fixes vulnerability in word-wrap.\n-   `2.0.0` - new `onSubmit` rule (thank you @@jzatt), upgrade to ESLint 8 and Mocha 9, fix moderate security advisory for `chalk/ansi-regex`\n-   `1.3.0` - Add auto-fix capability to `onClick` (thank you @bkonuwa and @pixelbandito). ([#8](https://github.com/davidcalhoun/eslint-plugin-test-selectors/pull/8))\n\n## Installation\n\nYou'll first need to install [ESLint](http://eslint.org), which requires [Node.js](https://nodejs.org) (note that `eslint-plugin-test-selectors` requires Node.js 10+):\n\n```\n$ npm i eslint --save-dev\n```\n\nNext, install `eslint-plugin-test-selectors`:\n\n```\n$ npm install eslint-plugin-test-selectors --save-dev\n```\n\n**Note:** If you installed ESLint globally (using the `-g` flag) then you must also install `eslint-plugin-test-selectors` globally.\n\n## Usage\n\nAdd `test-selectors` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:\n\n```json\n{\n    \"plugins\": [\"test-selectors\"]\n}\n```\n\nIf you want to use all the recommended default rules, you can simply add this line to the `extends` section of your `.eslintrc` configuration:\n\n```json\n{\n    \"extends\": [\"plugin:test-selectors/recommended\"]\n}\n```\n\nBy default, this will run all [Supported Rules](#supported-rules) and emit eslint warnings. If you want to be more strict, you can emit eslint errors by instead using `plugin:test-selectors/recommendedWithErrors`.\n\nAnother option: you can also selectively enable and disable individual rules in the `rules` section of your `.eslintrc` configuration. For instance, if you only want to enable the `test-selectors/button` rule, skip the `extends` addition above and simply add the following to the `rules` section of your `.eslintrc` configuration:\n\n```json\n{\n    \"rules\": {\n        \"test-selectors/button\": [\"warn\", \"always\"]\n    }\n}\n```\n\nIf you like most of the recommended rules by adding the `extends` option above, but find one in particular to be bothersome, you can simply disable it:\n\n```json\n{\n    \"rules\": {\n        \"test-selectors/anchor\": \"off\"\n    }\n}\n```\n\nNote: see [Supported Rules](#supported-rules) below for a full list.\n\n## Custom rule options\n\nAll tests can be customized individually by passing an object with one or more of the following properties.\n\n### testAttribute\n\nThe default test attribute expected is `data-test-id`, but you can override it with whatever you like. Here is how you would use `data-some-custom-attribute` instead:\n\n```json\n{\n    \"rules\": {\n        \"test-selectors/onChange\": [\"warn\", \"always\", { \"testAttribute\": \"data-some-custom-attribute\" }]\n    }\n}\n```\n\nNote: You can also pass multiple attributes\n\n```json\n{\n    \"rules\": {\n        \"test-selectors/onChange\": [\"warn\", \"always\", { \"testAttribute\": [\"data-testid\", \"testId\"] }]\n    }\n}\n```\n\n### ignoreDisabled\n\nBy default all elements with the `disabled` attribute are ignored, e.g. `\u003cinput disabled /\u003e`. If you don't want to ignore this attribute, set `ignoreDisabled` to `false`:\n\n```json\n{\n    \"rules\": {\n        \"test-selectors/onChange\": [\"warn\", \"always\", { \"ignoreDisabled\": false }]\n    }\n}\n```\n\n### ignoreReadonly\n\nBy default all elements with the `readonly` attribute are ignored, e.g. `\u003cinput readonly /\u003e`. If you don't want to ignore this attribute, set `ignoreReadonly` to `false`:\n\n```json\n{\n    \"rules\": {\n        \"test-selectors/onChange\": [\"warn\", \"always\", { \"ignoreReadonly\": false }]\n    }\n}\n```\n\n### htmlOnly\n\nOnly supported on `button` rule, this option will exempt React components called Button from the rule.\n\n```json\n{\n    \"rules\": {\n        \"test-selectors/button\": [\"warn\", \"always\", { \"htmlOnly\": true }]\n    }\n}\n```\n\n## Supported Rules\n\n-   `test-selectors/anchor`\n-   `test-selectors/button`\n-   `test-selectors/input`\n-   `test-selectors/onChange`\n-   `test-selectors/onClick`\n-   `test-selectors/onKeyDown`\n-   `test-selectors/onKeyUp`\n-   `test-selectors/onSubmit`\n\n## Further Reading\n\nIf you don't want these test attributes added in production, you can use something like [babel-plugin-jsx-remove-data-test-id](https://github.com/coderas/babel-plugin-jsx-remove-data-test-id)\n\nWhy `data` attributes and not `id` or `class`? Check out some of the following:\n\n-   [Decoupling CSS Selectors From Your Tests](https://mixandgo.com/learn/decoupling-css-selectors-from-your-tests)\n-   [Test your DOM with Data Attributes](https://medium.com/@colecodes/test-your-dom-with-data-attributes-44fccc43ed4b)\n-   [Something Better than IDs for Identifying Elements in Selenium Tests](https://techblog.constantcontact.com/software-development/a-better-way-to-id-elements-in-selenium-tests/)\n\n[downloads-image]: https://img.shields.io/npm/dm/eslint-plugin-test-selectors.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/package/eslint-plugin-test-selectors\n[npm-image]: https://img.shields.io/npm/dm/eslint-plugin-test-selectors.svg?style=flat\n[i1]: https://github.com/davidcalhoun/eslint-plugin-test-selectors/issues/1\n[i2]: https://github.com/davidcalhoun/eslint-plugin-test-selectors/issues/2\n[i3]: https://github.com/davidcalhoun/eslint-plugin-test-selectors/issues/3\n[i4]: https://github.com/davidcalhoun/eslint-plugin-test-selectors/issues/4\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidcalhoun%2Feslint-plugin-test-selectors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidcalhoun%2Feslint-plugin-test-selectors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidcalhoun%2Feslint-plugin-test-selectors/lists"}