Add fullstack example (#187)

* add more links to internal examples

* start fullstack example

* instrument specs on the fly

* add screenshot and unit tests

* add circle job

* add link to example from README

Author: bahmutov

.circleci/config.yml

@@ -104,6 +104,38 @@ workflows:
                   node ../../scripts/only-covered server.js
                 working_directory: examples/backend
 
+      - cypress/run:
+          name: fullstack coverage
+          requires:
+            - cypress/install
+          # grab the workspace created by cypress/install job
+          attach-workspace: true
+          working_directory: examples/fullstack
+          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)
+          no-workspace: true
+          post-steps:
+            # 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/backend/coverage
+            - run:
+                command: npm run report
+                working_directory: examples/fullstack
+            - run:
+                name: Check code coverage 📈
+                command: |
+                  node ../../scripts/check-coverage server.js
+                  node ../../scripts/check-coverage main.js
+                  node ../../scripts/check-coverage string-utils.js
+                  node ../../scripts/only-covered server.js main.js string-utils.js
+                working_directory: examples/fullstack
+
       - cypress/run:
           attach-workspace: true
           name: example-before-each-visit
@@ -322,6 +354,7 @@ workflows:
             - unit
             - frontend coverage
             - backend coverage
+            - fullstack coverage
             - example-before-each-visit
             - example-before-all-visit
             - example-ts-example

README.md

@@ -332,8 +332,13 @@ npm run dev:no:coverage
 
 ### Internal examples
 
-- [examples/before-each-visit](examples/before-each-visit) checks if code coverage correctly keeps track of code when doing `cy.visit` before each test
+Full examples we use for testing in this repository:
+
+- [examples/backend](examples/backend) only instruments the backend Node server and saves the coverage report
+- [examples/fullstack](examples/fullstack) instruments and merges backend, e2e and unit test coverage into a single report
 - [examples/before-all-visit](examples/before-all-visit) checks if code coverage works when `cy.visit` is made once in the `before` hook
+- [examples/before-each-visit](examples/before-each-visit) checks if code coverage correctly keeps track of code when doing `cy.visit` before each test
+- [examples/one-spec.js](examples/one-spec.js) confirms that coverage is collected and filtered correctly if the user only executes a single Cypress test
 - [examples/ts-example](examples/ts-example) uses Babel + Parcel to instrument and serve TypeScript file
 
 ### External examples

examples/fullstack/README.md

@@ -0,0 +1,21 @@
+# example: fullstack
+
+> Combined code coverage from the backend code, and e2e and unit tests
+
+This example runs instrumented server code, that serves instrumented frontend code, and instruments the unit tests on the fly. The final report combines all 3 sources of information.
+
+To run
+
+```sh
+$ npm run dev
+```
+
+You should see messages from the plugin when it saves each coverage object
+
+![Coverage messages](images/fullstack.png)
+
+In the produced report, you should see
+
+- `server/server.js` coverage for backend
+- `main.js` coverage from end-to-end tests
+- `string-utils.js` coverage from unit tests

examples/fullstack/cypress.json

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

examples/fullstack/cypress/integration/spec.js

@@ -0,0 +1,23 @@
+/// <reference types="Cypress" />
+
+// load extra files to instrument on the fly
+const { reverse } = require('../../string-utils')
+
+it('uses frontend code and calls backend', () => {
+  cy.visit('/')
+  cy.contains('Page body').should('be.visible')
+
+  cy.window()
+    .invoke('add', 2, 3)
+    .should('equal', 5)
+
+  cy.window()
+    .invoke('sub', 2, 3)
+    .should('equal', -1)
+
+  cy.log('**backend request**')
+  cy.request('/hello')
+
+  cy.log('**unit test**')
+  expect(reverse('Hello')).to.equal('olleH')
+})

examples/fullstack/cypress/plugins/index.js

@@ -0,0 +1,6 @@
+module.exports = (on, config) => {
+  require('../../../../task')(on, config)
+  // instrument loaded spec files (and the application code loaded from them)
+  on('file:preprocessor', require('../../../../use-browserify-istanbul'))
+  return config
+}

examples/fullstack/cypress/support/index.js

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

examples/fullstack/images/fullstack.png

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

examples/fullstack/main.js

@@ -0,0 +1,11 @@
+{
+  "name": "example-fullstack",
+  "description": "Combined code coverage from the backend code, and e2e and unit tests",
+  "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",
+    "report": "../../node_modules/.bin/nyc report --reporter text"
+  }
+}

examples/fullstack/package.json

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

examples/fullstack/server/index.html

@@ -0,0 +1,21 @@
+const express = require('express')
+const app = express()
+const port = 3003
+
+// if there is code coverage information
+// then expose an endpoint that returns it
+/* istanbul ignore next */
+if (global.__coverage__) {
+  console.log('have code coverage, will add middleware for express')
+  console.log(`to fetch: GET :${port}/__coverage__`)
+  require('../../../middleware/express')(app)
+}
+
+app.use(express.static(__dirname))
+
+app.get('/hello', (req, res) => {
+  console.log('sending hello world')
+  res.send('Hello World!')
+})
+
+app.listen(port, () => console.log(`Example app listening on port ${port}!`))

examples/fullstack/server/main-instrumented.js

@@ -0,0 +1,10 @@
+// reverses a string
+const reverse = s => {
+  return s
+    .split('')
+    .reverse()
+    .join('')
+}
+module.exports = {
+  reverse
+}