Skip to content

Commit

Permalink
2.1.0 (#22)
Browse files Browse the repository at this point in the history
* readme: remove old TravisCI build status

* changelog for 2.1.0
  • Loading branch information
davidcalhoun committed Aug 20, 2023
1 parent 662e773 commit 1508ed8
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 66 deletions.
17 changes: 9 additions & 8 deletions changelog.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
# Changelog

- `2.0.0` - new `onSubmit` rule (thank you @@jzatt), upgrade to ESLint 8 and Mocha 9, fix moderate security advisory for `chalk/ansi-regex`
- `1.3.0` - Add auto-fix capability to `onClick` (thank you @bkonuwa and @pixelbandito). ([#8](https://github.com/davidcalhoun/eslint-plugin-test-selectors/pull/8))
- `1.1.0`
- elements with `disabled` and `readonly` attributes are now ignored by default. See [Custom Rules Options](#custom-rule-options) to customize this behavior. (fixes [#3][i3])
- `plugin:test-selectors/recommended` now emits warnings by default instead of errors. For the old stricter behavior which emits errors, folks can use `plugin:test-selectors/recommendedWithErrors` (fixes [#4][i4])
- Refactoring and cleanup. Readme improvements.
- `1.0.1` - fix bug with inline functions (fixes [#1][i1])
- `1.0.0` - initial release
- `2.1.0` - custom `testAttribute` property now accepts arrays. Also fixes vulnerability in word-wrap.
- `2.0.0` - new `onSubmit` rule (thank you @@jzatt), upgrade to ESLint 8 and Mocha 9, fix moderate security advisory for `chalk/ansi-regex`
- `1.3.0` - Add auto-fix capability to `onClick` (thank you @bkonuwa and @pixelbandito). ([#8](https://github.com/davidcalhoun/eslint-plugin-test-selectors/pull/8))
- `1.1.0`
- elements with `disabled` and `readonly` attributes are now ignored by default. See [Custom Rules Options](#custom-rule-options) to customize this behavior. (fixes [#3][i3])
- `plugin:test-selectors/recommended` now emits warnings by default instead of errors. For the old stricter behavior which emits errors, folks can use `plugin:test-selectors/recommendedWithErrors` (fixes [#4][i4])
- Refactoring and cleanup. Readme improvements.
- `1.0.1` - fix bug with inline functions (fixes [#1][i1])
- `1.0.0` - initial release
101 changes: 43 additions & 58 deletions readme.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,23 @@
# eslint-plugin-test-selectors

[![Build Status](https://travis-ci.org/davidcalhoun/eslint-plugin-test-selectors.svg?branch=master)](https://travis-ci.org/davidcalhoun/eslint-plugin-test-selectors)
[![Downloads][downloads-image]][npm-url]

Enforces that a `data-test-id` attribute is present on interactive DOM elements to help with UI testing.

-`<button>Download</button>`
-`<button data-test-id="download-button">Download</button>`
- `<button>Download</button>`
- `<button data-test-id="download-button">Download</button>`

### Example of eslint-plugin-test-selectors running in Visual Studio Code:

![Example of eslint-plugin-test-selectors running in Visual Studio Code](https://github.com/davidcalhoun/eslint-plugin-test-selectors/blob/master/vscode-test-selectors-example.png)

## Changelog
## Selected changelog

- `2.0.0` - new `onSubmit` rule (thank you @@jzatt), upgrade to ESLint 8 and Mocha 9, fix moderate security advisory for `chalk/ansi-regex`
- `1.3.0` - Add auto-fix capability to `onClick` (thank you @bkonuwa and @pixelbandito). ([#8](https://github.com/davidcalhoun/eslint-plugin-test-selectors/pull/8))
- `1.1.0`
- elements with `disabled` and `readonly` attributes are now ignored by default. See [Custom Rules Options](#custom-rule-options) to customize this behavior. (fixes [#3][i3])
- `plugin:test-selectors/recommended` now emits warnings by default instead of errors. For the old stricter behavior which emits errors, folks can use `plugin:test-selectors/recommendedWithErrors` (fixes [#4][i4])
- Refactoring and cleanup. Readme improvements.
- `1.0.1` - fix bug with inline functions (fixes [#1][i1])
- `1.0.0` - initial release
[See full changelog](https://github.com/davidcalhoun/eslint-plugin-test-selectors/blob/main/changelog.md)

- `2.1.0` - custom `testAttribute` property now accepts arrays. Also fixes vulnerability in word-wrap.
- `2.0.0` - new `onSubmit` rule (thank you @@jzatt), upgrade to ESLint 8 and Mocha 9, fix moderate security advisory for `chalk/ansi-regex`
- `1.3.0` - Add auto-fix capability to `onClick` (thank you @bkonuwa and @pixelbandito). ([#8](https://github.com/davidcalhoun/eslint-plugin-test-selectors/pull/8))

## Installation

Expand All @@ -45,15 +41,15 @@ Add `test-selectors` to the plugins section of your `.eslintrc` configuration fi

```json
{
"plugins": ["test-selectors"]
"plugins": ["test-selectors"]
}
```

If you want to use all the recommended default rules, you can simply add this line to the `extends` section of your `.eslintrc` configuration:

```json
{
"extends": ["plugin:test-selectors/recommended"]
"extends": ["plugin:test-selectors/recommended"]
}
```

Expand All @@ -63,19 +59,19 @@ Another option: you can also selectively enable and disable individual rules in

```json
{
"rules": {
"test-selectors/button": ["warn", "always"]
}
"rules": {
"test-selectors/button": ["warn", "always"]
}
}
```

If you like most of the recommended rules by adding the `extends` option above, but find one in particular to be bothersome, you can simply disable it:

```json
{
"rules": {
"test-selectors/anchor": "off"
}
"rules": {
"test-selectors/anchor": "off"
}
}
```

Expand All @@ -91,40 +87,31 @@ The default test attribute expected is `data-test-id`, but you can override it w

```json
{
"rules": {
"test-selectors/onChange": [
"warn",
"always",
{ "testAttribute": "data-some-custom-attribute" }
]
}
"rules": {
"test-selectors/onChange": ["warn", "always", { "testAttribute": "data-some-custom-attribute" }]
}
}
```

Note: You can also pass multiple attributes
Note: You can also pass multiple attributes

```json
{
"rules": {
"test-selectors/onChange": [
"warn",
"always",
{ "testAttribute": ["data-testid", "testId"] }
]
}
"rules": {
"test-selectors/onChange": ["warn", "always", { "testAttribute": ["data-testid", "testId"] }]
}
}
```


### ignoreDisabled

By default all elements with the `disabled` attribute are ignored, e.g. `<input disabled />`. If you don't want to ignore this attribute, set `ignoreDisabled` to `false`:

```json
{
"rules": {
"test-selectors/onChange": ["warn", "always", { "ignoreDisabled": false }]
}
"rules": {
"test-selectors/onChange": ["warn", "always", { "ignoreDisabled": false }]
}
}
```

Expand All @@ -134,9 +121,9 @@ By default all elements with the `readonly` attribute are ignored, e.g. `<input

```json
{
"rules": {
"test-selectors/onChange": ["warn", "always", { "ignoreReadonly": false }]
}
"rules": {
"test-selectors/onChange": ["warn", "always", { "ignoreReadonly": false }]
}
}
```

Expand All @@ -146,34 +133,32 @@ Only supported on `button` rule, this option will exempt React components called

```json
{
"rules": {
"test-selectors/button": ["warn", "always", { "htmlOnly": true }]
}
"rules": {
"test-selectors/button": ["warn", "always", { "htmlOnly": true }]
}
}
```

## Supported Rules

- `test-selectors/anchor`
- `test-selectors/button`
- `test-selectors/input`
- `test-selectors/onChange`
- `test-selectors/onClick`
- `test-selectors/onKeyDown`
- `test-selectors/onKeyUp`
- `test-selectors/onSubmit`


- `test-selectors/anchor`
- `test-selectors/button`
- `test-selectors/input`
- `test-selectors/onChange`
- `test-selectors/onClick`
- `test-selectors/onKeyDown`
- `test-selectors/onKeyUp`
- `test-selectors/onSubmit`

## Further Reading

If you don't want these test attributes added in production, you can use something like [babel-plugin-jsx-remove-data-test-id](https://github.com/coderas/babel-plugin-jsx-remove-data-test-id)

Why `data` attributes and not `id` or `class`? Check out some of the following:

- [Decoupling CSS Selectors From Your Tests](https://mixandgo.com/learn/decoupling-css-selectors-from-your-tests)
- [Test your DOM with Data Attributes](https://medium.com/@colecodes/test-your-dom-with-data-attributes-44fccc43ed4b)
- [Something Better than IDs for Identifying Elements in Selenium Tests](https://techblog.constantcontact.com/software-development/a-better-way-to-id-elements-in-selenium-tests/)
- [Decoupling CSS Selectors From Your Tests](https://mixandgo.com/learn/decoupling-css-selectors-from-your-tests)
- [Test your DOM with Data Attributes](https://medium.com/@colecodes/test-your-dom-with-data-attributes-44fccc43ed4b)
- [Something Better than IDs for Identifying Elements in Selenium Tests](https://techblog.constantcontact.com/software-development/a-better-way-to-id-elements-in-selenium-tests/)

[downloads-image]: https://img.shields.io/npm/dm/eslint-plugin-test-selectors.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/eslint-plugin-test-selectors
Expand Down

0 comments on commit 1508ed8

Please sign in to comment.