cypress-io · bahmutov · May 16, 2019 · May 17, 2019
diff --git a/cypress/app.js b/cypress/app.js
@@ -7,3 +7,7 @@ if (true) {
 } else {
   console.error('never reached')
 }
+
+document.getElementById('click').addEventListener('click', () => {
+  console.log('clicked')
+})
diff --git a/cypress/index.html b/cypress/index.html
@@ -1,5 +1,6 @@
 <body>
   <h2>Test page</h2>
   <p>Open the DevTools to see console messages</p>
+  <button id="click">click me</button>
   <script src="app.js"></script>
 </body>
diff --git a/cypress/integration/spec.js b/cypress/integration/spec.js
@@ -16,4 +16,9 @@ context('Page test', () => {
       .should('have.been.calledOnce')
       .should('have.been.calledWith', 'just names', ['joe', 'mary'])
   })
+
+  it('clicks on the button', function () {
+    cy.get('#click').click()
+    cy.get('@log').should('have.been.calledWith', 'clicked')
+  })
 })
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
@@ -1,3 +1,5 @@
+require('../../plugins')
+
 module.exports = (on, config) => {
   on('task', require('../../task'))
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,5 +45,11 @@
     "parcel-bundler": "1.12.3",
     "start-server-and-test": "1.9.0",
     "semantic-release": "15.13.12"
+  },
+  "dependencies": {
+    "chokidar": "2.1.6",
+    "globby": "9.2.0",
+    "its-name": "1.0.0",
+    "ws": "6.2.1"
   }
 }
diff --git a/plugins.js b/plugins.js
@@ -0,0 +1,93 @@
+const WebSocket = require('ws')
+const path = require('path')
+const fs = require('fs')
+const globby = require('globby')
+
+// https://github.com/websockets/ws#simple-server
+// create socket even if not watching files to avoid
+// tripping up client trying to connect
+const wss = new WebSocket.Server({ port: 8765 })
+let client // future Cypress client
+
+// watch files using chokidar
+const chokidar = require('chokidar')
+// const cypressJson = require(join(process.cwd(), 'cypress.json'))
+// const options = cypressJson['cypress-watch-and-reload']
+const options = {
+  watch: 'cypress/*.js'
+}
+
+// load initial source code for app files
+const sources = new Map()
+const sourceFilenames = globby
+  .sync(options.watch, { cwd: process.cwd() })
+  .map(s => path.resolve(process.cwd(), s))
+sourceFilenames.forEach(filename => {
+  sources[filename] = fs.readFileSync(filename, 'utf8')
+})
+
+const compareSources = (before, after) => {
+  if (!before) {
+    console.log('missing before source')
+    return
+  }
+  if (!after) {
+    console.log('missing after source')
+    return
+  }
+  // only detect changed lines for now
+  const beforeLines = before.split('\n')
+  const afterLines = after.split('\n')
+  if (beforeLines.length !== afterLines.length) {
+    console.log('source has changed length')
+    return
+  }
+  const changed = []
+  beforeLines.forEach((s, k) => {
+    if (s !== afterLines[k]) {
+      console.log('line %d changed: %s', k, s)
+      changed.push(k)
+    }
+  })
+  return changed
+}
+
+if (options && typeof options.watch === 'string') {
+  console.log('will watch "%s"', options.watch)
+
+  wss.on('connection', function connection (ws) {
+    console.log('new socket connection 🎉')
+    client = ws
+
+    console.log('starting to watch file index.html')
+    // TODO clear previous watcher
+    chokidar.watch(options.watch).on('change', (relativePath, event) => {
+      console.log('file %s has changed', relativePath)
+      const filename = path.resolve(process.cwd(), relativePath)
+      const source = fs.readFileSync(filename, 'utf8')
+
+      const changedLines = compareSources(sources[filename], source)
+      // update our cached sourced
+      sources[filename] = source
+
+      if (changedLines && changedLines.length) {
+        console.log('Changed lines', changedLines)
+      }
+
+      if (client) {
+        const text = JSON.stringify({
+          command: 'changed',
+          filename,
+          source,
+          changedLines
+        })
+        client.send(text)
+      }
+    })
+  })
+} else {
+  console.log(
+    'nothing to watch. Use cypress.json to set "cypress-watch-and-reload" object'
+  )
+  console.log('see https://github.com/bahmutov/cypress-watch-and-reload#use')
+}
diff --git a/support.js b/support.js
@@ -1,17 +1,39 @@
 /// <reference types="cypress" />
+const itsName = require('its-name')
+
+let codeCoveragePerTest = new Map()
+// let sources = new Map()
+
 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') })
+  const isInteractive = Cypress.config('isInteractive')
+
+  cy.task('resetCoverage', { isInteractive })
+
+  if (isInteractive) {
+    codeCoveragePerTest = new Map()
+  }
 })
 
-afterEach(() => {
+// use "function () {...}" callback to get "this" pointing
+// at the right context
+afterEach(function () {
   // save coverage after each test
   // because the entire "window" object is about
   // to be recycled by Cypress before next test
   cy.window().then(win => {
     if (win.__coverage__) {
+      // only keep track of code coverage per test in the interactive mode
+      if (Cypress.config('isInteractive')) {
+        // testName will be an array of strings
+        const testName = itsName(this.currentTest)
+        console.log('test that finished', testName)
+
+        codeCoveragePerTest[testName] = win.__coverage__
+      }
+
       cy.task('combineCoverage', win.__coverage__)
     }
   })
@@ -20,4 +42,81 @@ afterEach(() => {
 after(() => {
   // when all tests finish, lets generate the coverage report
   cy.task('coverageReport')
+
+  console.log(
+    'after all tests finished, coverage per test is',
+    codeCoveragePerTest
+  )
+})
+
+const ws = new WebSocket('ws://localhost:8765')
+
+beforeEach(() => {
+  assert(ws.readyState === WebSocket.OPEN, 'Watch & Reload is ready')
+
+  const onChangedApplicationFile = (filename, source, changedLines) => {
+    console.log('file "%s" has changed', filename)
+    // console.log('new source')
+    // console.log(source)
+    console.log('changed lines', changedLines)
+
+    // find all tests that cover each changed line
+    const testsToRun = []
+    Object.entries(codeCoveragePerTest).forEach(([testName, coverage]) => {
+      // console.log('test name', testName)
+      // console.log('coverage', coverage)
+      const fileCoverage = coverage[filename]
+      if (!fileCoverage) {
+        return
+      }
+      // note that statement map starts at line 1
+      console.log(fileCoverage)
+      const testCoversLine = Object.values(fileCoverage.statementMap).some(
+        (s, k) => {
+          if (!fileCoverage.s[k]) {
+            return // the statement is NOT hit by the test
+          }
+          return changedLines.some(line => {
+            return s.start.line === line + 1 && s.end.line === line + 1
+          })
+        }
+      )
+      if (testCoversLine) {
+        console.log(
+          'test',
+          testName,
+          'covers one of the changed lines',
+          changedLines,
+          'in file',
+          filename
+        )
+        testsToRun.push(testName)
+      }
+    })
+
+    if (testsToRun.length) {
+      console.log('only running tests', testsToRun)
+    }
+  }
+
+  const fn = Cypress._.debounce(onChangedApplicationFile, 2000)
+
+  ws.onmessage = ev => {
+    console.log('message from OS')
+    console.log(ev)
+    if (ev.type === 'message' && ev.data) {
+      try {
+        const data = JSON.parse(ev.data)
+        if (data.command === 'changed' && data.filename && data.source) {
+          fn(data.filename, data.source, data.changedLines)
+          // window.top.document.querySelector('.reporter .restart').click()
+        }
+      } catch (e) {
+        console.error('Could not parse message from plugin')
+        console.error(e.message)
+        console.error('original text')
+        console.error(ev.data)
+      }
+    }
+  }
 })