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 eslint-plugin-test-id:

$ npm install eslint-plugin-test-id --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"
  }
}

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>

This site is open source. Improve this page.