coverage report

Author: bahmutov

README.md

@@ -79,3 +79,59 @@ We do not want to instrument the source code in production. Thus let's move the
 ```
 
 If you run `npm run develop`, the `window.__coverage__` object will not be defined. If you execute `NODE_ENV=develop npm run develop` the code will be instrumented.
+
+Let's add [Cypress](https://github.com/cypress-io/cypress) and its [code coverage plugin](https://github.com/cypress-io/code-coverage)
+
+```
+$ npm i -D cypress @cypress/code-coverage
++ [email protected]
++ @cypress/[email protected]
+```
+
+We can quickly scaffold a spec file to simply load the page and assert the "Hello" is there.
+
+```
+$ npx @bahmutov/cly init
+```
+
+Let's use [start-server-and-test]() to start Gatsby and open Cypress
+
+```
+$ npm i -D start-server-and-test
++ [email protected]
+```
+
+In `package.json` define the scripts
+
+```json
+{
+  "scripts": {
+    "develop": "gatsby develop",
+    "cy:open": "cypress open",
+    "dev": "NODE_ENV=develop start-test develop 8000 cy:open"
+  }
+}
+```
+
+Follow the instructions in the code coverage plugin to add it to the plugins and support files. Then use the command `npm run dev` to open Cypress. Run the test
+
+```js
+// cypress/integration/spec.js
+it("shows the Hello page", () => {
+  cy.visit("/").contains("Hello world!")
+})
+```
+
+Notice the code coverage log messages
+
+![Code coverage messages](images/coverage-messages.png)
+
+Open the coverage HTML report (there are reports in different formats sorted in the folder `coverage)
+
+```
+$ open coverage/lcov-report/index.html
+```
+
+Inspect the report
+
+![Coverage report](images/coverage-report.png)

cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:8000",
+  "fixturesFolder": false
+}

cypress/README.md

@@ -0,0 +1,22 @@
+# Cypress.io end-to-end tests
+
+[Cypress.io](https://www.cypress.io) is an open source, MIT licensed end-to-end test runner
+
+## Folder structure
+
+These folders hold end-to-end tests and supporting files for the Cypress Test Runner.
+
+- [fixtures](fixtures) holds optional JSON data for mocking, [read more](https://on.cypress.io/fixture)
+- [integration](integration) holds the actual test files, [read more](https://on.cypress.io/writing-and-organizing-tests)
+- [plugins](plugins) allow you to customize how tests are loaded, [read more](https://on.cypress.io/plugins)
+- [support](support) file runs before all tests and is a great place to write or load additional custom commands, [read more](https://on.cypress.io/writing-and-organizing-tests#Support-file)
+
+## `cypress.json` file
+
+You can configure project options in the [../cypress.json](../cypress.json) file, see [Cypress configuration doc](https://on.cypress.io/configuration).
+
+## More information
+
+- [https://github.com/cypress.io/cypress](https://github.com/cypress.io/cypress)
+- [https://docs.cypress.io/](https://docs.cypress.io/)
+- [Writing your first Cypress test](http://on.cypress.io/intro)

cypress/integration/spec.js

@@ -0,0 +1,6 @@
+// enables intelligent code completion for Cypress commands
+// https://on.cypress.io/intelligent-code-completion
+/// <reference types="cypress" />
+it("shows the Hello page", () => {
+  cy.visit("/").contains("Hello world!")
+})

cypress/plugins/index.js

@@ -0,0 +1,9 @@
+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
+}

cypress/support/index.js

@@ -0,0 +1 @@
+import "@cypress/code-coverage/support"