Start testing full examples (cypress-io#151)

* add example running tool in a subfolder

* add example to circleci

* add local dev tools

* install deps in root folder

* print current folder

* print output json file

* use relative paths

Author: bahmutov

.circleci/config.yml

@@ -68,6 +68,31 @@ workflows:
             # and look at the server index file - should be fully covered
             - run: npx nyc report --check-coverage true --lines 100 --include test-backend/index.js
 
+      - cypress/run:
+          name: example-before-each-visit
+          requires:
+            - cypress/install
+          # install dependencies in the root folder
+          post-install:
+            - run: npm ci
+          # there are no jobs to follow this one
+          # so no need to save the workspace files (saves time)
+          no-workspace: true
+          working_directory: examples/before-each-visit
+          # store screenshots and videos
+          store_artifacts: true
+          post-steps:
+            - run: cat examples/before-each-visit/.nyc_output/out.json
+            # store the created coverage report folder
+            # you can click on it in the CircleCI UI
+            # to see live static HTML site
+            - store_artifacts:
+                path: examples/before-each-visit/coverage
+            # make sure the examples captures 100% of code
+            - run:
+                command: npx nyc report --check-coverage true --lines 100
+                working_directory: examples/before-each-visit
+
       - publish:
           filters:
             branches:
@@ -76,3 +101,4 @@ workflows:
           requires:
             - frontend coverage
             - backend coverage
+            - example-before-each-visit

README.md

@@ -181,6 +181,46 @@ You can specify custom coverage reporter(s) to use. For example to output text s
 
 **Tip:** find list of reporters [here](https://istanbul.js.org/docs/advanced/alternative-reporters/)
 
+## Custom NYC command
+
+Sometimes NYC tool might be installed in a different folder, or you might want to customize the report command. In that case, put the custom command into `package.json` in the current folder and this plugin will automatically use it.
+
+```json
+{
+  "scripts": {
+    "coverage:report": "call NYC report ..."
+  }
+}
+```
+
+See examples below.
+
+### Install NYC on the fly
+
+The simplest solution: let `npx` install `nyc` on the fly
+
+```json
+{
+  "scripts": {
+    "coverage:report": "npx nyc report --report-dir ./coverage --temp-dir .nyc_output --reporter=lcov --reporter=clover --reporter=json"
+  }
+}
+```
+
+### Find NYC in a parent folder
+
+If you have [bin-up](https://github.com/bahmutov/bin-up) installed globally, you can use it to find `nyc` installed somewhere in the higher folder.
+
+```json
+{
+  "scripts": {
+    "coverage:report": "bin-up nyc report --report-dir ./coverage --temp-dir .nyc_output --reporter=lcov --reporter=clover --reporter=json"
+  }
+}
+```
+
+**Tip:** finding and running pre-installed tool is always faster than installing it again and again.
+
 ## TypeScript users
 
 TypeScript source files are NOT included in the code coverage report by default, even if they are properly instrumented. In order to tell `nyc` to include TS files in the report, you need to:

examples/before-each-visit/README.md

@@ -0,0 +1,13 @@
+# example: before-each-visit
+
+Code coverage example where the `cy.visit` happens in `beforeEach` hook
+
+Code was instrumented with
+
+```shell
+npx nyc instrument --compact false main.js > main-instrumented.js
+```
+
+and then removed absolute folder paths, leaving just relative path `main.js` in the produced file.
+
+The code uses custom coverage report command in [package.json](package.json) to call `nyc`

examples/before-each-visit/cypress.json

@@ -0,0 +1 @@
+{}

examples/before-each-visit/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

examples/before-each-visit/cypress/integration/spec.js

@@ -0,0 +1,18 @@
+/// <reference types="cypress" />
+describe('coverage information', () => {
+  beforeEach(() => {
+    cy.visit('index.html')
+  })
+
+  it('calls add', () => {
+    cy.window()
+      .invoke('add', 2, 3)
+      .should('equal', 5)
+  })
+
+  it('calls sub', () => {
+    cy.window()
+      .invoke('sub', 2, 3)
+      .should('equal', -1)
+  })
+})

examples/before-each-visit/cypress/plugins/index.js

@@ -0,0 +1,3 @@
+module.exports = (on, config) => {
+  on('task', require('../../../../task'))
+}

examples/before-each-visit/cypress/support/index.js

@@ -0,0 +1 @@
+import '../../../../support'

examples/before-each-visit/index.html

@@ -0,0 +1,4 @@
+<body>
+  Page body
+  <script src="main-instrumented.js"></script>
+</body>

examples/before-each-visit/main-instrumented.js

@@ -0,0 +1,3 @@
+window.add = (a, b) => a + b
+
+window.sub = (a, b) => a - b