# eslint-plugin-clean-testing

> ESLint plugin for Angular templates to enforce best practices for assisting testing

Latest version **1.0.2** (published 2021-09-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install eslint-plugin-clean-testing
pnpm add eslint-plugin-clean-testing
yarn add eslint-plugin-clean-testing
bun add eslint-plugin-clean-testing
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-09-20 |
| First published | 2021-09-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 25 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Joshua Little |
| Maintainers | mjtlittle |
| Keywords | eslint, angular, testing, ids |

## Links

- npm: https://www.npmjs.com/package/eslint-plugin-clean-testing
- Repository: https://github.com/Mjtlittle/eslint-plugin-clean-testing
- Homepage: https://github.com/Mjtlittle/eslint-plugin-clean-testing#readme
- Issues: https://github.com/Mjtlittle/eslint-plugin-clean-testing/issues
- npm.io page: https://npm.io/package/eslint-plugin-clean-testing

## Dependencies (2)

- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^12.2.5
- [@angular-eslint/template-parser](https://npm.io/package/@angular-eslint/template-parser.md) ^12.4.1

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2021-09-20
- 1.0.1 — 2021-09-16
- 1.0.0 — 2021-09-16

## README

# eslint-plugin-clean-testing

ESLint plugin that is designed to enforce certain practices within an Angular project to allow smoother testing. Currently this plugin only requires the inclusion of an id on certain elements. The default checked elements are: `select`, `input`, `textarea`, `button`, and `a` (anchor links).


## Requirements

1. Angular project
2. *(recommended)* ESLint configured with [`@angular-eslint/schematics`](https://github.com/angular-eslint/angular-eslint) (installed via: `ng add @angular-eslint/schematics`)


## Install

To install the plugin run the following command to add the package to the project:

```
npm install eslint-plugin-clean-testing
```

and then add the following line to bottom of the `.eslintrc.json` file within the Angular project. Assuming you just setup the project using `@angular-eslint/schematics`. This adds the recommended rule configuration.

```diff
{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    ...
    {
      "files": ["*.html"],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
+       "plugin:clean-testing/recommended"
      ]
    }
  ]
}
```

To customize the list of elements that the plugin checks, manually add the rule (`clean-testing/elements-require-id`) to the config, and provide a second argument with the list of elements.

```diff
{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    ...
    {
      "files": ["*.html"],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        "plugin:clean-testing/recommended"
      ],
      "rules": {
+       "clean-testing/elements-require-id": ["error", ["iframe", "canvas" ...]]
      }
    }
  ]
}
```


## Usage

Just run the linter as usual:

```
npm run lint
```

## Example

```html
<!-- src/app/app.component.html -->

<h1>Here are</h1>
<h2>some headers</h2>

<div>Hello</div>

<button>Button</button>

<img src="" />

<select>
  <option *ngFor="let item of list" [value]="item.name">{{ item.name }}</option>
</select>

<a href="">Link</a>

<input />

<textarea></textarea>
```

```text
$ ng lint

Linting "angular-test-project"...

./src/app/app.component.html
   6:1  error  Element button must have an id    clean-testing/elements-require-id
  10:1  error  Element select must have an id    clean-testing/elements-require-id
  14:1  error  Element a must have an id         clean-testing/elements-require-id
  16:1  error  Element input must have an id     clean-testing/elements-require-id
  18:1  error  Element textarea must have an id  clean-testing/elements-require-id

✖ 5 problems (5 errors, 0 warnings)

Lint errors found in the listed files.

error Command failed with exit code 1.
```


## Contributing

Follow the following commands to setup the package for development within an existing Angular project:

```
  1. npm link (inside the dist/ folder of the plugin)
  2. npm link eslint-plugin-clean-testing (inside root folder of the Angular project)
  3. npm run dev (within the plugin project)
```

---
_Source: https://npm.io/package/eslint-plugin-clean-testing · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._