Add keyboard shortcuts (#3943)

* add keyboard shortcuts lib to the reporter

#248

* add shortcuts to main.jsx

#248

* add appState param and other cases to shortcuts.js

* remove events that are not coded to work yet

* Write tests for shortcuts in reporter


Co-authored-by: Jennifer Shehane <jennifer@cypress.io>

packages/reporter/cypress/integration/shortcuts_spec.js

@@ -0,0 +1,62 @@
+import sinon from 'sinon'
+
+const runnerStub = () => {
+  return {
+    on: sinon.stub(),
+    emit: sinon.spy(),
+  }
+}
+
+describe('controls', function () {
+  let runner
+
+  beforeEach(function () {
+    runner = runnerStub()
+
+    cy.fixture('runnables').as('runnables')
+
+    cy.visit('/dist').then((win) => {
+      win.render({
+        runner,
+        specPath: '/foo/bar',
+      })
+    })
+
+    cy.get('.reporter').then(() => {
+      runner.emit('runnables:ready', this.runnables)
+      runner.emit('reporter:start', {})
+    })
+  })
+
+  describe('shortcuts', function () {
+    it('stops tests', function () {
+      cy.get('body').then(() => {
+        expect(runner.emit).to.not.have.been.calledWith('runner:stop')
+      })
+
+      cy.get('body').type('s').then(() => {
+        expect(runner.emit).to.have.been.calledWith('runner:stop')
+      })
+    })
+
+    it('resumes tests', function () {
+      cy.get('body').then(() => {
+        expect(runner.emit).to.not.have.been.calledWith('runner:restart')
+      })
+
+      cy.get('body').type('r').then(() => {
+        expect(runner.emit).to.have.been.calledWith('runner:restart')
+      })
+    })
+
+    it('focuses on specs', function () {
+      cy.get('body').then(() => {
+        expect(runner.emit).to.not.have.been.calledWith('focus:tests')
+      })
+
+      cy.get('body').type('f').then(() => {
+        expect(runner.emit).to.have.been.calledWith('focus:tests')
+      })
+    })
+  })
+})

packages/reporter/src/lib/shortcuts.js

@@ -0,0 +1,24 @@
+import events from './events'
+
+class Shortcuts {
+  start (appState) {
+    this._appState = appState
+    document.addEventListener('keydown', this._handleKeyDownEvent)
+  }
+  stop () {
+    document.removeEventListener('keydown', this._handleKeyDownEvent)
+  }
+  _handleKeyDownEvent (event) {
+    switch (event.key) {
+      case 'r': events.emit('restart')
+        break
+      case 's': events.emit('stop')
+        break
+      case 'f': events.emit('focus:tests')
+        break
+      default: return
+    }
+  }
+}
+
+export default new Shortcuts()

packages/reporter/src/main.jsx

@@ -11,6 +11,7 @@ import events from './lib/events'
 import runnablesStore from './runnables/runnables-store'
 import scroller from './lib/scroller'
 import statsStore from './header/stats-store'
+import shortcuts from './lib/shortcuts'
 
 import Header from './header/header'
 import Runnables from './runnables/runnables'
@@ -75,8 +76,12 @@ class Reporter extends Component {
   }
 
   componentDidMount () {
+    shortcuts.start(this.props.appState)
     EQ.init()
   }
+  componentWillUnmount () {
+    shortcuts.stop()
+  }
 }
 
 if (window.Cypress) {