Skip to content

docs: harmonize markdown docs with prettier linting #266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 25 additions & 24 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,46 +4,47 @@ Thanks for taking the time to contribute! :smile:

## Preparation

* Fork and clone this repository
* Branch from the default `master` branch using a descriptive new branch name
* Install dependencies with `npm ci`
- Fork and clone this repository
- Branch from the default `master` branch using a descriptive new branch name
- Install dependencies with `npm ci`

## Rule references

* Refer to the [ESLint documentation](https://eslint.org/docs/latest/) and the [Custom Rules](https://eslint.org/docs/latest/extend/custom-rules) page
- Refer to the [ESLint documentation](https://eslint.org/docs/latest/) and the [Custom Rules](https://eslint.org/docs/latest/extend/custom-rules) page

## New rule

To add a new rule:

* Follow the instructions in the ESLint [generator-eslint](https://www.npmjs.com/package/generator-eslint) documentation to install [Yeoman](https://www.npmjs.com/package/yo) and the generator
* Run the new rule generator `yo eslint:rule` and answer the questions
- Follow the instructions in the ESLint [generator-eslint](https://www.npmjs.com/package/generator-eslint) documentation to install [Yeoman](https://www.npmjs.com/package/yo) and the generator
- Run the new rule generator `yo eslint:rule` and answer the questions
- select "ESLint Plugin"
- for "Type a short description of this rule" provide text which starts with one of "enforce", "require" or "disallow" (all lower case)
* Yeoman creates three boilerplate files:
- Yeoman creates three boilerplate files:
- `docs/rules/<rule-id>.md`
- `lib/rules/<rule-id>.js`
- `test/rules/<rule-id>.js`
* Run `npm run lint-fix`
* Address the linting errors by editing `lib/rules/<rule-id>.js`
- Run `npm run lint-fix`
- Address the linting errors by editing `lib/rules/<rule-id>.js`
- Add a `meta.messages` property (see [MessageIds](https://eslint.org/docs/latest/extend/custom-rules#messageids))
- Select the appropriate `meta.type` property using `problem`, `suggestion`, or `layout`
* Complete the new rule by adding content to the three files previously created
* Run `eslint-doc-generator` to generate automated documentation sections (see [Document generation](#document-generation) below)
* Review documentation changes
* Run `npm run lint`
* Run `npm run format`
* Run `npm test` to run [Vitest](https://vitest.dev/)
* Make sure all tests are passing
* Add the rule to [flat.js](https://github.com/cypress-io/eslint-plugin-cypress/blob/master/lib/flat.js)
* Create a git commit with a commit message similar to: `feat: add rule <description>` (see [commit message conventions](https://github.com/semantic-release/semantic-release#commit-message-format))
* Create a PR from your branch
- Complete the new rule by adding content to the three files previously created
- Run `eslint-doc-generator` to generate automated documentation sections (see [Document generation](#document-generation) below)
- Review documentation changes
- Run `npm run lint`
- Run `npm run format`
- Run `npm test` to run [Vitest](https://vitest.dev/)
- Make sure all tests are passing
- Add the rule to [flat.js](https://github.com/cypress-io/eslint-plugin-cypress/blob/master/lib/flat.js)
- Create a git commit with a commit message similar to: `feat: add rule <description>` (see [commit message conventions](https://github.com/semantic-release/semantic-release#commit-message-format))
- Create a PR from your branch

## Document generation

This plugin uses the ESLint [eslint-doc-generator](https://www.npmjs.com/package/eslint-doc-generator) to generate consistent documentation.
* Install with `npm install eslint-doc-generator -g`
* Run `eslint-doc-generator` in the root directory of the plugin

- Install with `npm install eslint-doc-generator -g`
- Run `eslint-doc-generator` in the root directory of the plugin

## Merging pull requests

Expand All @@ -66,7 +67,7 @@ This information is for Cypress.io Members or Collaborators who merge pull reque
```

1. New versions of this module will be released automatically by the CI pipeline when any PR with a triggering commit message is merged to the `master` branch: see the `release` job of [circle.yml](circle.yml).
This will create a new [GitHub release](https://github.com/cypress-io/eslint-plugin-cypress/releases) and publish it to [eslint-plugin-cypress](https://www.npmjs.com/package/eslint-plugin-cypress) on the [npm registry](https://docs.npmjs.com/about-the-public-npm-registry).
This will create a new [GitHub release](https://github.com/cypress-io/eslint-plugin-cypress/releases) and publish it to [eslint-plugin-cypress](https://www.npmjs.com/package/eslint-plugin-cypress) on the [npm registry](https://docs.npmjs.com/about-the-public-npm-registry).
1. The module's CI is configured to use the [default Angular release rules](https://github.com/semantic-release/commit-analyzer/blob/master/lib/default-release-rules.js).
This means that only `feat:`, `fix:` and `perf:` trigger a new release.
Other Angular commit types listed in the [Angular commit message guidelines](https://github.com/angular/angular/blob/main/contributing-docs/commit-message-guidelines.md) can be used for documentation purposes, however they are ignored by the currently configured release process.
This means that only `feat:`, `fix:` and `perf:` trigger a new release.
Other Angular commit types listed in the [Angular commit message guidelines](https://github.com/angular/angular/blob/main/contributing-docs/commit-message-guidelines.md) can be used for documentation purposes, however they are ignored by the currently configured release process.
2 changes: 1 addition & 1 deletion FLAT-CONFIG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# Cypress ESLint Plugin - Flat Config

Please refer to the [README](./README.md) document which describes how to use `eslint-plugin-cypress` with an ESLint `v9` (default) [flat configuration](https://eslint.org/docs/latest/use/configure/configuration-files).
Please refer to the [README](./README.md) document which describes how to use `eslint-plugin-cypress` with an ESLint `v9` (default) [flat configuration](https://eslint.org/docs/latest/use/configure/configuration-files).
39 changes: 22 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ Prerequisites: [ESLint](https://www.npmjs.com/package/eslint) `v9`. Lower versio
```sh
npm install eslint eslint-plugin-cypress --save-dev
```

or

```sh
yarn add eslint eslint-plugin-cypress --dev
```
Expand All @@ -36,15 +38,16 @@ import pluginCypress from 'eslint-plugin-cypress/flat' # deprecated

There are two specific configurations available:

| Configuration | Content |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Configuration | Content |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `configs.globals` | defines globals `cy`, `Cypress`, `expect`, `assert` and `chai` used in Cypress test specs as well as `globals.browser` and `globals.mocha` from [globals](https://www.npmjs.com/package/globals). There are no default rules enabled in this configuration. |
| `configs.recommended` | enables [recommended Rules](#rules). It includes also `configs.global` (see above). |
| `configs.recommended` | enables [recommended Rules](#rules). It includes also `configs.global` (see above). |

## Rules

These rules enforce some of the [best practices recommended for using Cypress](https://on.cypress.io/best-practices).

<!-- prettier-ignore-start -->
<!-- begin auto-generated rules list -->

💼 Configurations enabled in.\
Expand All @@ -66,6 +69,7 @@ These rules enforce some of the [best practices recommended for using Cypress](h
| [unsafe-to-chain-command](docs/rules/unsafe-to-chain-command.md) | disallow actions within chains | ✅ |

<!-- end auto-generated rules list -->
<!-- prettier-ignore-end -->

## Usage examples

Expand All @@ -74,25 +78,27 @@ In the following sections, different examples of possible configuration file con
### Cypress

All rules are available by importing from `eslint-plugin-cypress` and can be individually activated.

- [cypress/unsafe-to-chain-command](https://github.com/cypress-io/eslint-plugin-cypress/blob/master/docs/rules/unsafe-to-chain-command.md) is activated and set to `error`

```js
import pluginCypress from 'eslint-plugin-cypress'
export default [
{
plugins: {
cypress: pluginCypress
cypress: pluginCypress,
},
rules: {
'cypress/unsafe-to-chain-command': 'error'
}
}
'cypress/unsafe-to-chain-command': 'error',
},
},
]
```

### Cypress recommended

The `eslint-plugin-cypress` [recommended rules](#rules) `configs.recommended` are activated, except for

- [cypress/no-unnecessary-waiting](https://github.com/cypress-io/eslint-plugin-cypress/blob/master/docs/rules/no-unnecessary-waiting.md) which is set to `off`

```js
Expand All @@ -101,9 +107,9 @@ export default [
pluginCypress.configs.recommended,
{
rules: {
'cypress/no-unnecessary-waiting': 'off'
}
}
'cypress/no-unnecessary-waiting': 'off',
},
},
]
```

Expand All @@ -113,9 +119,7 @@ The `configs.globals` are activated.

```js
import pluginCypress from 'eslint-plugin-cypress'
export default [
pluginCypress.configs.globals
]
export default [pluginCypress.configs.globals]
```

## Disable rules
Expand Down Expand Up @@ -174,6 +178,7 @@ During test spec development, [Mocha exclusive tests](https://mochajs.org/#exclu
[eslint-plugin-mocha@^11](https://www.npmjs.com/package/eslint-plugin-mocha) is added to the example [Cypress recommended](#cypress-recommended). This version of the plugin supports only flat file configurations with the option `configs.recommended`.

The settings for individual `mocha` rules from the `configs.recommended` option are changed.

- [mocha/no-exclusive-tests](https://github.com/lo1tuma/eslint-plugin-mocha/blob/main/docs/rules/no-exclusive-tests.md) and [mocha/no-pending-tests](https://github.com/lo1tuma/eslint-plugin-mocha/blob/main/docs/rules/no-pending-tests.md) are set to `error` instead of `warn`
- [mocha/no-mocha-arrows](https://github.com/lo1tuma/eslint-plugin-mocha/blob/main/docs/rules/no-mocha-arrows.md) is set to `off` instead of `error`

Expand All @@ -192,9 +197,9 @@ export default [
'mocha/no-exclusive-tests': 'error',
'mocha/no-pending-tests': 'error',
'mocha/no-mocha-arrows': 'off',
'cypress/no-unnecessary-waiting': 'off'
}
}
'cypress/no-unnecessary-waiting': 'off',
},
},
]
```

Expand All @@ -220,7 +225,7 @@ export default [
rules: {
'cypress/no-unnecessary-waiting': 'off',
},
}
},
]
```

Expand Down
11 changes: 6 additions & 5 deletions docs/rules/assertion-before-screenshot.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Require screenshots to be preceded by an assertion (`cypress/assertion-before-screenshot`)

<!-- end auto-generated rule header -->

If you take screenshots without assertions then you may get different screenshots depending on timing.

For example, if clicking a button makes some network calls and upon success, renders something, then the screenshot may sometimes have the new render and sometimes not.
Expand All @@ -12,14 +13,14 @@ This rule checks there is an assertion making sure your application state is cor
Examples of **incorrect** code for this rule:

```js
cy.visit('myUrl');
cy.screenshot();
cy.visit('myUrl')
cy.screenshot()
```

Examples of **correct** code for this rule:

```js
cy.visit('myUrl');
cy.get('[data-test-id="my-element"]').should('be.visible');
cy.screenshot();
cy.visit('myUrl')
cy.get('[data-test-id="my-element"]').should('be.visible')
cy.screenshot()
```
1 change: 1 addition & 0 deletions docs/rules/no-assigning-return-values.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
💼 This rule is enabled in the ✅ `recommended` config.

<!-- end auto-generated rule header -->

## Further Reading

See [the Cypress Best Practices guide](https://on.cypress.io/best-practices#Assigning-Return-Values).
11 changes: 5 additions & 6 deletions docs/rules/no-async-before.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Disallow using `async`/`await` in Cypress `before` methods (`cypress/no-async-before`)

<!-- end auto-generated rule header -->

Cypress commands that return a promise may cause side effects in `before`/`beforeEach` hooks, possibly causing unexpected behavior.

## Rule Details
Expand All @@ -11,7 +12,7 @@ Examples of **incorrect** code for this rule:

```js
describe('my feature', () => {
before('my test case', async () => {
before('my test case', async () => {
await cy.get('.myClass')
// other operations
})
Expand All @@ -20,10 +21,8 @@ describe('my feature', () => {

```js
describe('my feature', () => {
before('my test case', async () => {
cy
.get('.myClass')
.click()
before('my test case', async () => {
cy.get('.myClass').click()

await someAsyncFunction()
})
Expand All @@ -34,7 +33,7 @@ Examples of **correct** code for this rule:

```js
describe('my feature', () => {
before('my test case', () => {
before('my test case', () => {
cy.get('.myClass')
// other operations
})
Expand Down
11 changes: 5 additions & 6 deletions docs/rules/no-async-tests.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
💼 This rule is enabled in the ✅ `recommended` config.

<!-- end auto-generated rule header -->

Cypress tests [that return a promise will error](https://docs.cypress.io/guides/references/error-messages.html#Cypress-detected-that-you-returned-a-promise-from-a-command-while-also-invoking-one-or-more-cy-commands-in-that-promise) and cannot run successfully.
An `async` function returns a promise under the hood, so a test using an `async` function will also error.

Expand All @@ -14,7 +15,7 @@ Examples of **incorrect** code for this rule:

```js
describe('my feature', () => {
it('my test case', async () => {
it('my test case', async () => {
await cy.get('.myClass')
// other operations
})
Expand All @@ -23,10 +24,8 @@ describe('my feature', () => {

```js
describe('my feature', () => {
it('my test case', async () => {
cy
.get('.myClass')
.click()
it('my test case', async () => {
cy.get('.myClass').click()

await someAsyncFunction()
})
Expand All @@ -37,7 +36,7 @@ Examples of **correct** code for this rule:

```js
describe('my feature', () => {
it('my test case', () => {
it('my test case', () => {
cy.get('.myClass')
// other operations
})
Expand Down
4 changes: 2 additions & 2 deletions docs/rules/no-chained-get.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Disallow chain of `cy.get()` calls (`cypress/no-chained-get`)

<!-- end auto-generated rule header -->

This rule disallows the usage of chained `.get()` calls as `cy.get()` always starts its search from the cy.root element.

## Rule Details
Expand All @@ -14,6 +15,5 @@ cy.get('parent').get('child')
Examples of **correct** code for this rule:

```js
cy.get('parent')
.find('child')
cy.get('parent').find('child')
```
5 changes: 3 additions & 2 deletions docs/rules/no-debug.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
# Disallow using `cy.debug()` calls (`cypress/no-debug`)

<!-- end auto-generated rule header -->

It is recommended to remove any [cy.debug](https://on.cypress.io/debug) commands before committing specs to avoid other developers getting unexpected results.

## Rule Details

Examples of **incorrect** code for this rule:

```js
cy.debug();
cy.get('selector').debug();
cy.debug()
cy.get('selector').debug()
```

Examples of **correct** code for this rule:
Expand Down
Loading