dongcx / eslint-plugin-test-id

This is rule of eslint plugin for vue templates which checks element with model has `data-test-id`

eslint-plugin-test-id

Fork from prashantswami/eslint-plugin-test-id

This checks is data-test-id prop is present, on some tags which are useful for e2e testing

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install @dongcx0319/eslint-plugin-testid:

$ npm install @dongcx0319/eslint-plugin-testid --save-dev

Usage

Add test-id to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "test-id"
    ]
}

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

{
    "rules": {
        "test-id/data-test-id": 'error'
    }
}

You can also enable all the recommended rules at once:

{
  "extends": [
    "plugin:test-id/recommended"
  ]
}

Rule Details

This rule aims to...

Examples of incorrect code for this rule:

<input v-model="someModel">

Examples of correct code for this rule:

<input data-test-id="someUniqueString" v-model="someModel">

How Fix will work

Scenario 1

<template><custom v-model="test" /></template>

will fix to

<template><input data-test-id="test" v-model="test"></template>

Scenario 2

<template><input v-model="test.again.src"></template>

will fix to

<template><custom data-test-id="test.again.src" v-model="test.again.src" /></template>

Scenario 3

<template><custom v-model="test.again" /></template>

will fix to

<template><custom data-test-id="test.again" v-model="test.again" /></template>

Scenario 4

<template><custom v-model="test['again']" /></template>

will fix to

<template><custom data-test-id="test.again" v-model="test['again']" /></template>

Scenario 5

<template><custom v-model="test[5]" /></template>

will fix to

<template><custom data-test-id="test.5" v-model="test[5]" /></template>

Scenario 5

<template><custom v-model="test[5]['val']" /></template>

will fix to

<template><custom data-test-id="test.5.val" v-model="test[5]['val']" /></template>