@yasanchezz/eslint-plugin-vue-data-testid/README.md

An `eslint` plugin for checking accessibility rules from within `.vue` files. Add `data-testid` to use better behavior testing

# @yasanchezz/eslint-plugin-vue-data-testid

An `eslint` plugin for checking accessibility rules from within `.vue` files. Add `data-testid` to use better behavior testing

## 💻 Installation

Plugin requires `eslint@9`.

### install dependency

`pnpm add -D @yasanchezz/eslint-plugin-vue-data-testid`

### describe dependency inside eslint config

```typescript
import vueDataTestid, { type DataTestidOptions } from '@yasanchezz/eslint-plugin-vue-data-testid'

// generate data-testid attribute name by node info, e.g, name, className
function attributeName (options: DataTestidOptions) {
  return options.nodeName === 'HelloWorld'
    ? 'data-test-id-hello-world'
    : 'data-testid'
}

// e.g. convert filename and BEM class into data-testid
function buildDataTestid(options: DataTestidOptions) {
  const filename = options.filename.replace('.vue', '')
  const [first, second] = [options.className?.at(0), options.className?.slice(1)]

  // convert BEM class name to data-testid
  const classId = first && second
    ? first.toUpperCase() + second
      .replace(/-[a-z]/g, (input) => input.at(1)?.toUpperCase() ?? '')
      .replace(/(?<=__)[a-z]/g, (input) => input.toUpperCase())
    : undefined

  return classId
    ? `${filename}__${classId}`
    : filename
}

// e.g. check node to ignore it
function ignoreNode(options: DataTestidOptions) {
  return /([A-Z]).*([A-Z])/.test(options.nodeName) || options.nodeName.includes('-')
}

// use inside eslint flat configs
export default defineConfigWithVueTs(  
  ...vueDataTestid({
    attributeName, // default a string `data-testid` (optional props). Maybe a function.
    buildDataTestid, // convert AST attributes to data-testid
    ignoreNode, // check ignored nodes
  }).configs.recommended
)
```

### Rules
- `vue-data-testid/add` - if data-testid is missing, it should be added
- `vue-data-testid/unique` - attribute should be unique
- `vue-data-testid/log` - create file `dti.log.md` which declares a list of file names with its data-testid attributes

### Example converted node
before
```vue
<div class="hello-world"></div>
```

after
```vue
<div
  data-testid="App__HelloWorld"
  class="hello-world"
></div>
```