eslint-plugin-testids

Main function of this rules is to check for data-testid for specific tags in lit

Installation

You'll first need to install ESLint:

1npm i eslint --save-dev

Next, install eslint-plugin-testids:

1npm install eslint-plugin-testids --save-dev

or local install

npm install --save ./plugins/eslint-custom-plugin

Usage

In your configuration file, import the plugin eslint-plugin-testids and add testids to the plugins key:

1import testids from 'eslint-plugin-testids';
2
3export default [
4  {
5    plugins: {
6      testids,
7    },
8  },
9];

Then configure the rules you want to use under the rules key.

1import testids from 'eslint-plugin-testids';
2
3export default [
4  {
5    plugins: {
6      testids,
7    },
8    rules: {
9      'testids/rule-name': 'warn',
10    },
11  },
12];

Configurations

You can add what tags should it check just add settings to eslint config (If not provided it will use default config):

1"settings": {
2  "tagsToCheck": {
3    "button": "button",
4    "select": "input",
5    "input": "input",
6    "customitem": "test"
7  }
8}

You can customize pattern used for recognizing data-testid valid format: You can add what tags should it check just add settings to eslint config (If not provided it will use default config):

1"settings": {
2  "testIdPattern": {
3    testIdPattern: /^([a-z0-9-]+)--([a-z0-9-]+)(--\${([a-z0-9-]+)})?$/,
4    // Default is xx--xx--xx/${xx}
5    // cd--button--test
6  }
7}

Rules

1"plugins": [
2  ...
3  "eslint-plugin-testids"
4],
5"rules": {
6  ...
7  "testids/require-data-testid": "error", //this will check if data-testid is added
8  "testids/validate-data-testid-format": "error", //this will check formatting (ad--button--test)
9}