Move full stack coverage example (#183)

* rename to backend

* update circle file

* fix circle yml

* remove extra package scripts

Author: bahmutov

.circleci/config.yml

@@ -75,16 +75,15 @@ workflows:
             - run: npx nyc report --check-coverage true --lines 100 --include cypress/unit.js
 
       - cypress/run:
-          # TODO switch to separate example in "examples/..."
           name: backend coverage
           requires:
             - cypress/install
-
           # grab the workspace created by cypress/install job
           attach-workspace: true
-
-          start: npm run start:test:backend
-          command: npx cypress run --config-file cypress-backend.json
+          working_directory: examples/backend
+          start: npm start
+          wait-on: 'http://localhost:3003'
+          command: '../../node_modules/.bin/cypress run'
 
           # there are no jobs to follow this one
           # so no need to save the workspace files (saves time)
@@ -94,12 +93,16 @@ workflows:
             # you can click on it in the CircleCI UI
             # to see live static HTML site
             - store_artifacts:
-                path: coverage
-            # print code coverage summary to the terminal
-            # and make sure there the coverage is above certain limit
-            - run: npx nyc report --check-coverage true --lines 72
-            # 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
+                path: examples/backend/coverage
+            - run:
+                command: npm run coverage:report
+                working_directory: examples/backend
+            - run:
+                name: Check code coverage 📈
+                command: |
+                  node ../../scripts/check-coverage server.js
+                  node ../../scripts/only-covered server.js
+                working_directory: examples/backend
 
       - cypress/run:
           attach-workspace: true
@@ -180,7 +183,6 @@ workflows:
             - run:
                 command: npm run coverage:check
                 working_directory: examples/ts-example
-
             - run:
                 name: Check code coverage 📈
                 command: |

README.md

@@ -134,7 +134,9 @@ module.exports = (on, config) => {
 
 ## Instrument backend code
 
-You can also instrument your server-side code and produce combined coverage report that covers both the backend and frontend code.
+Example in [examples/backend](examples/backend) folder.
+
+You can also instrument your server-side code and produce combined coverage report that covers both the backend and frontend code
 
 1. Run the server code with instrumentation. The simplest way is to use [nyc](https://github.com/istanbuljs/nyc). If normally you run `node src/server` then to run instrumented version you can do `nyc --silent node src/server`.
 2. Add an endpoint that returns collected coverage. If you are using Express, you can simply do
@@ -184,7 +186,7 @@ if (global.__coverage__) {
 }
 ```
 
-That should be enough - the code coverage from the server will be requested at the end of the test run and merged with the client-side code coverage, producing a combined report
+That should be enough - the code coverage from the server will be requested at the end of the test run and merged with the client-side code coverage, producing a combined report.
 
 ## Custom report folder
 

examples/backend/README.md

@@ -0,0 +1,3 @@
+# example: backend
+
+> Getting code coverage from backend

examples/backend/cypress.json

@@ -0,0 +1,9 @@
+{
+  "fixturesFolder": false,
+  "baseUrl": "http://localhost:3003",
+  "env": {
+    "codeCoverage": {
+      "url": "http://localhost:3003/__coverage__"
+    }
+  }
+}

cypress/test-backend/spec.js examples/backend/cypress/integration/spec.js

@@ -0,0 +1,5 @@
+module.exports = (on, config) => {
+  require('../../../../task')(on, config)
+  on('file:preprocessor', require('../../../../use-babelrc'))
+  return config
+}

examples/backend/cypress/plugins/index.js

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

examples/backend/cypress/support/index.js

@@ -0,0 +1,11 @@
+{
+  "name": "example-backend",
+  "description": "Code coverage for backend",
+  "devDependencies": {},
+  "scripts": {
+    "start": "../../node_modules/.bin/nyc --silent node server/server",
+    "cy:open": "../../node_modules/.bin/cypress open",
+    "dev": "../../node_modules/.bin/start-test 3003 cy:open",
+    "coverage:report": "../../node_modules/.bin/nyc report"
+  }
+}

examples/backend/package.json

@@ -8,7 +8,7 @@ const port = 3003
 if (global.__coverage__) {
   console.log('have code coverage, will add middleware for express')
   console.log(`to fetch: GET :${port}/__coverage__`)
-  require('../middleware/express')(app)
+  require('../../../middleware/express')(app)
 }
 
 app.use(express.static(__dirname))

test-backend/index.html examples/backend/server/index.html

@@ -14,9 +14,6 @@
     "dev:no:coverage": "start-test 1234 'cypress open --env coverage=false'",
     "format": "prettier --write '*.js'",
     "format:check": "prettier --check '*.js'",
-    "start:test:backend": "nyc --silent node test-backend",
-    "cy:backend": "cypress open --config-file cypress-backend.json",
-    "dev:backend": "start-test start:test:backend 3003 cy:backend",
     "check:markdown": "find *.md -exec npx markdown-link-check {} \\;",
     "effective:config": "circleci config process .circleci/config.yml | sed /^#/d"
   },