@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

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

<div class="hello-world"></div>

after

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