Skip to content
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

rename #849

Closed
wants to merge 20 commits into from
Closed
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
8 changes: 4 additions & 4 deletions .github/ISSUE_TEMPLATE/bug_report.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,18 @@ assignees: ''
---

**Logs and screenshots**
Please provide debug logs by running Cypress from the terminal with `DEBUG=code-coverage` environment variable set. See the [Debugging](https://github.com/cypress-io/code-coverage#debugging) section of the README file.
Please provide debug logs by running Cypress from the terminal with `DEBUG=code-coverage` environment variable set. See the [Debugging](https://github.com/rohit-gohri/cypress-code-coverage-v8#debugging) section of the README file.

**Versions**

- What is this plugin's version? If this is NOT the latest [released version](https://github.com/cypress-io/code-coverage/releases), can you try the latest version, please?
- If the plugin worked before in version X but stopped after upgrading to version Y, please try the [released versions](https://github.com/cypress-io/code-coverage/releases) between X and Y to see where the breaking change was.
- What is this plugin's version? If this is NOT the latest [released version](https://github.com/rohit-gohri/cypress-code-coverage-v8/releases), can you try the latest version, please?
- If the plugin worked before in version X but stopped after upgrading to version Y, please try the [released versions](https://github.com/rohit-gohri/cypress-code-coverage-v8/releases) between X and Y to see where the breaking change was.
- What is the Cypress version?
- What is your operating system?
- What is the shell?
- What is the Node version?
- What is the NPM version?
- How do you instrument your application? Cypress [does not instrument web application code](https://github.com/cypress-io/code-coverage#instrument-your-application), so you must do it yourself.
- How do you instrument your application? Cypress [does not instrument web application code](https://github.com/rohit-gohri/cypress-code-coverage-v8#instrument-your-application), so you must do it yourself.
- When running tests, if you open the web application in a regular browser and open DevTools, do you see `window.__coverage__` object? Can you paste a screenshot?
- Is there a `.nyc_output` folder? Is there a `.nyc_output/out.json` file? Is it empty? Can you paste at least part of it so we can see the keys and file paths?
- Do you have any custom NYC settings in `package.json` (`nyc` object) or in other [NYC config files](https://github.com/istanbuljs/nyc#configuration-files)?
Expand Down
8 changes: 7 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,13 @@ coverage/
.nyc_output/
dist/
.cache/
.vscode/
cypress-coverage/
yarn.lock
.parcel-cache

.DS_Store

# dist
./*.js
./middleware
./lib
5 changes: 1 addition & 4 deletions .nycrc.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
{
"exclude": [
"support.js",
"task-utils.js"
]
"exclude": ["src/**/*"]
}
11 changes: 11 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"cSpell.words": ["execa"],
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.formatOnSave": true
},
"[typescript]": {
"editor.formatOnSave": true
}
}
14 changes: 13 additions & 1 deletion LICENSE.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
## MIT License

Copyright (c) 2019 Cypress.io https://www.cypress.io
Copyright (c) 2024 Rohit Gohri

Copyright (c) 2020 Gleb Bahmutov
<https://github.com/bahmutov/cypress-native-chrome-code-coverage-example>

Copyright (c) 2021 Lefty
<https://github.com/leftyio/v8-cypress-coverage-plugin>

Copyright (c) 2019 Cypress.io <https://www.cypress.io>
<https://github.com/cypress-io/code-coverage>

Copyright JS Foundation and other contributors
<https://github.com/webpack-contrib/source-map-loader>

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
Expand Down
184 changes: 11 additions & 173 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
# @cypress/code-coverage [![renovate-app badge][renovate-badge]][renovate-app] [![CircleCI](https://circleci.com/gh/cypress-io/code-coverage.svg?style=svg)](https://circleci.com/gh/cypress-io/code-coverage)
# cypress-code-coverage-v8

> Saves the code coverage collected during Cypress tests

## Install

```shell
npm install -D @cypress/code-coverage
npm install -D cypress-code-coverage-v8
```

**Note:** This plugin assumes that `cypress` is a peer dependency already installed in your project.
Expand All @@ -14,7 +14,7 @@ Then add the code below to the `supportFile` and `setupNodeEvents` function.

```js
// cypress/support/e2e.js
import '@cypress/code-coverage/support'
import 'cypress-code-coverage-v8/dist/support'
```

```js
Expand All @@ -26,7 +26,7 @@ module.exports = defineConfig({
// the e2e or component configuration
e2e: {
setupNodeEvents(on, config) {
require('@cypress/code-coverage/task')(on, config)
require('cypress-code-coverage-v8/dist/plugins')(on, config)
// include any other plugin code...

// It's IMPORTANT to return the config object
Expand Down Expand Up @@ -113,54 +113,13 @@ ERROR: Coverage for lines (100%) does not meet global threshold (101%)

Watch the video [How to read code coverage report](https://youtu.be/yVvCYtsmkZU) to see how to read the HTML coverage report.

## Instrument unit tests

If you test your application code directly from `specs`, you might want to instrument them and combine unit test code coverage with any end-to-end code coverage (from iframe). You can easily instrument spec files using [babel-plugin-istanbul](https://github.com/istanbuljs/babel-plugin-istanbul), for example.

Install the plugin

```shell
npm i -D babel-plugin-istanbul
```

Set your `.babelrc` file.

```json
{
"plugins": ["istanbul"]
}
```

Put the following in the `cypress/plugins/index.js` file to use the `.babelrc` file.

```js
module.exports = (on, config) => {
require('@cypress/code-coverage/task')(on, config)
on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'))
return config
}
```
## Unit tests

The code coverage from spec files will be combined with end-to-end coverage.

Find examples of just the unit tests and JavaScript source files with collected code coverage in [test-apps/unit-tests-js](./test-apps/unit-tests-js).

### Alternative for unit tests

If you cannot use `.babelrc` (maybe it is used by other tools?), try using the Browserify transformer included with this module in the `use-browserify-istanbul` file.

```js
module.exports = (on, config) => {
require('@cypress/code-coverage/task')(on, config)
on(
'file:preprocessor',
require('@cypress/code-coverage/use-browserify-istanbul')
)
return config
}
```

## Instrument backend code
## Backend code

Example in [test-apps/backend](test-apps/backend) folder.

Expand All @@ -172,25 +131,7 @@ You can also instrument your server-side code and produce a combined coverage re
```js
const express = require('express')
const app = express()
require('@cypress/code-coverage/middleware/express')(app)
```

**Tip:** You can register the endpoint only if there is a global code coverage object, and you can exclude the middleware code from the coverage numbers

```js
// https://github.com/gotwarlost/istanbul/blob/master/ignoring-code-for-coverage.md
/* istanbul ignore next */
if (global.__coverage__) {
require('@cypress/code-coverage/middleware/express')(app)
}
```

If you use a Hapi server, define the endpoint yourself and return the object.

```js
if (global.__coverage__) {
require('@cypress/code-coverage/middleware/hapi')(server)
}
require('cypress-code-coverage-v8/dist/middleware/express')(app)
```

For any other server, define the endpoint yourself and return the coverage object:
Expand Down Expand Up @@ -319,16 +260,7 @@ if (window.Cypress) {

### Exclude the next logical statement

Often needed to skip a statement.

```js
/* istanbul ignore next */
if (global.__coverage__) {
require('@cypress/code-coverage/middleware/express')(app)
}
```

Or a particular `switch` case
Often needed to skip a statement or a particular `switch` case

```js
switch (foo) {
Expand Down Expand Up @@ -428,96 +360,7 @@ Full examples we use for testing in this repository:

### External examples

Look up the list of examples under the GitHub topic [cypress-code-coverage-example](https://github.com/topics/cypress-code-coverage-example)

- [cypress-io/cypress-realworld-app](https://github.com/cypress-io/cypress-realworld-app) is an easy to set up and run a real-world application with E2E, API, and unit tests that achieves 100% code-coverage for both front and back end code. Its CI pipeline also reports code-coverage reports across parallelized test runs to [Codecov](https://codecov.io/gh/cypress-io/cypress-realworld-app).
- [cypress-io/cypress-example-todomvc-redux](https://github.com/cypress-io/cypress-example-todomvc-redux) is a React / Redux application with 100% code coverage.
- [cypress-io/cypress-example-conduit-app](https://github.com/cypress-io/cypress-example-conduit-app) shows how to collect the coverage information from both back and frontend code and merge it into a single report. The E2E test step runs parallel in several CI containers, each saving just partial test coverage information. Then, a merge job runs, taking artifacts and combining coverage into the final report to be sent to an external coverage as a service app.
- [bahmutov/code-coverage-webpack-dev-server](https://github.com/bahmutov/code-coverage-webpack-dev-server) shows how to collect code coverage from an application that uses webpack-dev-server.
- [bahmutov/code-coverage-vue-example](https://github.com/bahmutov/code-coverage-vue-example) collects code coverage for Vue.js single file components.
- [lluia/cypress-typescript-coverage-example](https://github.com/lluia/cypress-typescript-coverage-example) shows coverage for React App that uses TypeScript. See discussion in issue [#19](https://github.com/cypress-io/code-coverage/issues/19).
- [bahmutov/cypress-and-jest](https://github.com/bahmutov/cypress-and-jest) shows how to run Jest unit tests and Cypress unit tests, collecting code coverage from both test runners and then producing a merged report.
- [bahmutov/cypress-angular-coverage-example](https://github.com/bahmutov/cypress-angular-coverage-example) forked from [skylock/cypress-angular-coverage-example](https://github.com/skylock/cypress-angular-coverage-example) shows Angular 8 + TypeScript application with instrumentation done using [istanbul-instrumenter-loader](https://github.com/webpack-contrib/istanbul-instrumenter-loader).
- [bahmutov/testing-react](https://github.com/bahmutov/testing-react) shows how to get code coverage for a React application created using [CRA v3](https://github.com/facebook/create-react-app) without ejecting `react-scripts`.
- [bahmutov/cra-ts-code-coverage-example](https://github.com/bahmutov/cra-ts-code-coverage-example) instruments TypeScript React application on the fly without ejecting `react-scripts` by using [@cypress/instrument-cra](https://github.com/cypress-io/instrument-cra).
- [bahmutov/next-and-cypress-example](https://github.com/bahmutov/next-and-cypress-example) shows how to get backend and frontend coverage for a [Next.js](https://nextjs.org) project. Uses [middleware/nextjs.js](middleware/nextjs.js).
- [kylemh/next-ts-with-cypress-coverage](https://github.com/kylemh/next-ts-with-cypress-coverage) This example project contains Next.js with TypeScript, instrumented coverage reporting, @testing-library/react, and instructions on how to type custom commands.
- [akoidan/vue-webpack-typescript](https://github.com/akoidan/vue-webpack-typescript) Pure webpack config with vue + typescript with codecov reports. This setup uses a babel-loader with a TS checker as a separate thread.
- [bahmutov/code-coverage-subfolder-example](https://github.com/bahmutov/code-coverage-subfolder-example) shows how to instrument the `app` folder using `nyc instrument` as a separate step before running E2E tests
- [bahmutov/docker-with-cypress-included-code-coverage-example](https://github.com/bahmutov/docker-with-cypress-included-code-coverage-example) runs tests inside pre-installed Cypress using [cypress/included:x.y.z](https://github.com/cypress-io/cypress-docker-images/tree/master/included) Docker image and reports code coverage.
- [bahmutov/app-in-docker-coverage-example](https://github.com/bahmutov/app-in-docker-coverage-example) shows an app running inside a Docker container, while Cypress runs on the local machine. Before generating the report, Cypress can still [discover the source files](https://github.com/cypress-io/code-coverage/pull/197).
- [bahmutov/gatsby-cypress-with-code-coverage](https://github.com/bahmutov/gatsby-cypress-with-code-coverage) shows code coverage using the official Gatsby "Hello World" starter.
- [muratkeremozcan/angular-playground](https://github.com/muratkeremozcan/angular-playground) is an Angular TypeScript application with combined unit and E2E coverage.
- [nefayran/cypress-react-vite](https://github.com/nefayran/cypress-react-vite) React with Vite and Istanbul plugin for code coverage.

## Migrations

### Cypress v9 to v10

With the removal of the `plugins` directory in Cypress version 10+, you'll need to add all of your configuration into the configuration file (`cypress.config.js` by default).

```js
// BEFORE
// Register tasks in your `cypress/plugins/index.js` file.

module.exports = (on, config) => {
require('@cypress/code-coverage/task')(on, config)

// add other tasks to be registered here

// IMPORTANT to return the config object
// with the any changed environment variables
return config
}
```

```js
// AFTER
// cypress.config.js
const { defineConfig } = require('cypress')

module.exports = defineConfig({
// setupNodeEvents can be defined in either
// the e2e or component configuration
e2e: {
setupNodeEvents(on, config) {
require('@cypress/code-coverage/task')(on, config)
// include any other plugin code...

// It's IMPORTANT to return the config object
// with any changed environment variables
return config
},
},
})
```

### v2 to v3

Change the plugins file `cypress/plugins/index.js`

```js
// BEFORE
module.exports = (on, config) => {
on('task', require('@cypress/code-coverage/task'))
}
// AFTER
module.exports = (on, config) => {
require('@cypress/code-coverage/task')(on, config)
// IMPORTANT to return the config object
// with the any changed environment variables
return config
}
```

**Tip:** We include [plugins.js](plugins.js) file you can point at from your code in simple cases. From your `cypress.json` file:

```json
{
"pluginsFile": "node_modules/@cypress/code-coverage/plugins",
"supportFile": "node_modules/@cypress/code-coverage/support"
}
```
Look up the list of examples under the GitHub topic [cypress-code-coverage-v8-example](https://github.com/topics/cypress-code-coverage--v8-example)

## Debugging

Expand All @@ -539,11 +382,9 @@ DEBUG_DEPTH=10 DEBUG=code-coverage npm run dev

### Common issues

Common issue: [not instrumenting your application when running Cypress](#instrument-your-application).
If the plugin worked before in version X but stopped after upgrading to version Y, please try the [released versions](https://github.com/rohit-gohri/cypress-code-coverage-v8/releases) between X and Y to see where the breaking change was.

If the plugin worked before in version X but stopped after upgrading to version Y, please try the [released versions](https://github.com/cypress-io/code-coverage/releases) between X and Y to see where the breaking change was.

If you decide to open an issue in this repository, please fill in all information the [issue template](https://github.com/cypress-io/code-coverage/blob/master/.github/ISSUE_TEMPLATE/bug_report.md) asks for. The issues most likely to be resolved have debug logs, screenshots, and hopefully public repository links so we can try running the tests ourselves.
If you decide to open an issue in this repository, please fill in all information the [issue template](https://github.com/rohit-gohri/cypress-code-coverage-v8/blob/master/.github/ISSUE_TEMPLATE/bug_report.md) asks for. The issues most likely to be resolved have debug logs, screenshots, and hopefully public repository links so we can try running the tests ourselves.

## Contributing

Expand All @@ -570,6 +411,3 @@ npm run check:markdown
## License

This project is licensed under the terms of the [MIT license](LICENSE.md).

[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg
[renovate-app]: https://renovateapp.com/
4 changes: 3 additions & 1 deletion cypress-backend.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
"integrationFolder": "cypress/test-backend",
"env": {
"codeCoverage": {
"url": "http://localhost:3003/__coverage__"
"timeout": 60000,
"url": "http://localhost:3003/__coverage__",
"ssr": "/api/__coverage__"
}
}
}
3 changes: 2 additions & 1 deletion cypress/e2e/combine.cy.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/// <reference types="Cypress" />
const { combineNycOptions, defaultNycOptions } = require('../../common-utils')
const { combineNycOptions, defaultNycOptions } = require('../../lib/common/common-utils')

describe('Combine NYC options', () => {
it('overrides defaults', () => {
const pkgNycOptions = {
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/filtering.cy.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const { filterFilesFromCoverage } = require('../../support-utils')
const { filterFilesFromCoverage } = require('../../lib/support/support-utils')

describe('minimatch', () => {
it('string matches', () => {
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/fix-source-paths.cy.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { fixSourcePaths } from '../../support-utils'
import { fixSourcePaths } from '../../lib/support/support-utils'

describe('fixSourcePaths', () => {
it('fixes webpack loader source-map pathes', () => {
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/merge.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const coverage = require('../fixtures/coverage.json')
const {
fileCoveragePlaceholder,
removePlaceholders
} = require('../../common-utils')
} = require('../../lib/common/common-utils')

/**
* Extracts just the data from the coverage map object
Expand Down
9 changes: 0 additions & 9 deletions cypress/plugins/index.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,6 @@
module.exports = (on, config) => {
require('../../task')(on, config)

// also use .babelrc file when bundling spec files
// to get the code coverage from unit tests
// https://glebbahmutov.com/blog/combined-end-to-end-and-unit-test-coverage/
on('file:preprocessor', require('../../use-babelrc'))

// or use browserify and just push babel-plugin-istanbul
// directory to the list of babelify plugins
// on('file:preprocessor', require('../../use-browserify-istanbul'))

// IMPORTANT to return the config object with changed environment variable
return config
}
10 changes: 0 additions & 10 deletions middleware/express.js

This file was deleted.

Loading