eslint-plugin-angular-test-ids v1.0.6

angular-template-test-ids

Requires certain elements to have a test id attribute in template.

Through author of this plugin is not a fan of test ids and thinks user visible labels should be preferred, test ids may be required by your QA team.

Valid code:

<button data-test="my-test-id"></button>
<button [data-test]="myTestId"></button>

Usage

Requires eslint and eslint-plugin-angular to be installed.

npm install --save-dev eslint-plugin-angular-test-ids

In your .eslintrc file add plugin and rule.

Assuming you've previously set up @angular-eslint/template:

{
  "files": ["*.html"],
  "extends": ["plugin:@angular-eslint/template/recommended"],
  "plugins": ["angular-test-ids"],
  "rules": {
    "angular-test-ids/require-test-id": ["error"],
    
    ... other template rules ...
  }
}

If you don't use @angular-eslint/template:

{
  "files": ["*.html"],
  "parser": "@angular-eslint/template-parser",
  "plugins": ["angular-test-ids"],
  "rules": {
    "angular-test-ids/require-test-id": ["error"],
  }
}

Options