Save coverage for each page in a test (#70)

grantbdev · bahmutov · bahmutov · commit f933e9dd10f4 · 2020-01-27T16:08:25.000-05:00
Save coverage for each page visited in a test
by keeping a reference to the coverage for each app window loaded
and then saving the coverage at the end after coverage is calculated.

An additional page is added to the example test app
and the page test navigates to the new page.
Without this coverage change,
coverage is lost for `app.js` due to the last page not loading it.
With this coverage change,
coverage is kept for `app.js` along with coverage for `about.js`.

Co-authored-by: Gleb Bahmutov &lt;gleb.bahmutov@gmail.com&gt;
diff --git a/cypress/about.html b/cypress/about.html
@@ -0,0 +1,5 @@
+<body>
+  <h2>About</h2>
+  <main id="content"></main>
+  <script src="about.js"></script>
+</body>
diff --git a/cypress/about.js b/cypress/about.js
@@ -0,0 +1,3 @@
+document
+  .getElementById('content')
+  .appendChild(document.createTextNode('Est. 2019'))
diff --git a/cypress/index.html b/cypress/index.html
@@ -1,4 +1,7 @@
 <body>
+  <nav>
+    <a href="/about.html">About</a>
+  </nav>
   <h2>Test page</h2>
   <p>Open the DevTools to see console messages</p>
   <script src="app.js"></script>
diff --git a/cypress/integration/spec.js b/cypress/integration/spec.js
@@ -12,6 +12,8 @@ context('Page test', () => {
         cy.spy(win.console, 'log').as('log')
       }
     })
+
+    cy.contains('About').click()
   })
 
   it('logs names', function () {
diff --git a/support.js b/support.js
@@ -19,27 +19,37 @@ const sendCoverage = coverage => {
 if (Cypress.env('coverage') === false) {
   console.log('Skipping code coverage hooks')
 } else {
+  let windowCoverageObjects
+
   before(() => {
     // we need to reset the coverage when running
     // in the interactive mode, otherwise the counters will
     // keep increasing every time we rerun the tests
     cy.task('resetCoverage', { isInteractive: Cypress.config('isInteractive') })
   })
 
-  afterEach(() => {
-    // save coverage after each test
-    // because the entire "window" object is about
-    // to be recycled by Cypress before next test
-    cy.window().then(win => {
+  beforeEach(() => {
+    windowCoverageObjects = []
+
+    // save reference to coverage for each app window loaded in the test
+    cy.on('window:load', win => {
       // if application code has been instrumented, the app iframe "window" has an object
       const applicationSourceCoverage = win.__coverage__
 
       if (applicationSourceCoverage) {
-        sendCoverage(applicationSourceCoverage)
+        windowCoverageObjects.push(applicationSourceCoverage)
       }
     })
   })
 
+  afterEach(() => {
+    // save coverage after the test
+    // because now the window coverage objects have been updated
+    windowCoverageObjects.forEach(coverage => {
+      sendCoverage(coverage)
+    })
+  })
+
   after(() => {
     // there might be server-side code coverage information
     // we should grab it once after all tests finish

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+document`
	`2`	`+ .getElementById('content')`
	`3`	`+ .appendChild(document.createTextNode('Est. 2019'))`
Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,8 @@ context('Page test', () => {`
`12`	`12`	`cy.spy(win.console, 'log').as('log')`
`13`	`13`	`}`
`14`	`14`	`})`
	`15`	`+`
	`16`	`+ cy.contains('About').click()`
`15`	`17`	`})`
`16`	`18`
`17`	`19`	`it('logs names', function () {`