Merge remote-tracking branch 'origin/develop' into readonly-actionabi…

…lity

.eslintignore

@@ -26,3 +26,5 @@ packages/launcher/lib/**/*.js
 **/package-lock.json
 **/tsconfig.json
 **/.vscode
+**/.history
+**/.cy

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "eslint.alwaysShowStatus": true,
   "eslint.autoFixOnSave": true,
   "eslint.validate": [
     {

cli/types/index.d.ts

@@ -4364,7 +4364,7 @@ declare namespace Cypress {
 
   type Encodings = 'ascii' | 'base64' | 'binary' | 'hex' | 'latin1' | 'utf8' | 'utf-8' | 'ucs2' | 'ucs-2' | 'utf16le' | 'utf-16le'
   type PositionType = "topLeft" | "top" | "topRight" | "left" | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight"
-  type ViewportPreset = 'macbook-15' | 'macbook-13' | 'macbook-11' | 'ipad-2' | 'ipad-mini' | 'iphone-6+' | 'iphone-6' | 'iphone-5' | 'iphone-4' | 'iphone-3'
+  type ViewportPreset = 'macbook-15' | 'macbook-13' | 'macbook-11' | 'ipad-2' | 'ipad-mini' | 'iphone-xr' | 'iphone-x' | 'iphone-6+' | 'iphone-6' | 'iphone-5' | 'iphone-4' | 'iphone-3' | 'samsung-s10' | 'samsung-note9'
   interface Offset {
     top: number,
     left: number

package.json

@@ -67,8 +67,7 @@
     "@cypress/bumpercar": "2.0.9",
     "@cypress/commit-message-install": "2.7.0",
     "@cypress/env-or-json-file": "2.0.0",
-    "@cypress/eslint-plugin-dev": "3.7.2",
-    "@cypress/eslint-plugin-json": "3.2.3",
+    "@cypress/eslint-plugin-dev": "4.0.0",
     "@cypress/github-commit-status-check": "1.5.0",
     "@cypress/npm-run-all": "4.0.5",
     "@cypress/questions-remain": "1.0.1",
@@ -108,9 +107,10 @@
     "decaffeinate": "6.0.1",
     "del": "3.0.0",
     "electron-builder": "20.39.0",
-    "eslint": "5.16.0",
+    "eslint": "6.1.0",
     "eslint-plugin-cypress": "2.6.0",
-    "eslint-plugin-mocha": "5.3.0",
+    "eslint-plugin-json-format": "2.0.0",
+    "eslint-plugin-mocha": "6.1.0",
     "eslint-plugin-react": "7.14.2",
     "execa": "1.0.0",
     "execa-wrap": "1.4.0",

packages/desktop-gui/cypress/integration/error_message_spec.js

@@ -1,4 +1,4 @@
-describe('ErrorMessage', function () {
+describe('Error Message', function () {
   beforeEach(function () {
     this.err = {
       message: 'Port 2020 is already in use.',
@@ -9,6 +9,27 @@ describe('ErrorMessage', function () {
       type: 'PORT_IN_USE_SHORT',
     }
 
+    this.detailsErr = {
+      name: 'Error',
+      message: 'This is an error message explaining an event. Learn more about this event in the error details section.',
+      stack: '[object Object]↵',
+      details: 'ReferenceError: alsdkjf is not defined\n \
+\tat module.exports (/Users/lilaconlee/cypress/debug/desktop-gui-mishap/cypress/plugins/index.js:15:3)\n \
+\tat Promise.try (/Users/lilaconlee/cypress/cypress/packages/server/lib/plugins/child/run_plugins.js:62:12)\n \
+\tat tryCatcher (/Users/lilaconlee/cypress/cypress/packages/server/node_modules/bluebird/js/release/util.js:16:23)\n \
+\tat Function.Promise.attempt.Promise.try (/Users/lilaconlee/cypress/cypress/packages/server/node_modules/bluebird/js/release/method.js:39:29)\n \
+\tat load (/Users/lilaconlee/cypress/cypress/packages/server/lib/plugins/child/run_plugins.js:61:7)\n \
+\tat EventEmitter.ipc.on (/Users/lilaconlee/cypress/cypress/packages/server/lib/plugins/child/run_plugins.js:132:5)\n \
+\tat emitOne (events.js:115:13)\n \
+\tat EventEmitter.emit (events.js:210:7)\n \
+\tat process.<anonymous> (/Users/lilaconlee/cypress/cypress/packages/server/lib/plugins/util.coffee:18:7)\n \
+\tat emitTwo (events.js:125:13)\n \
+\tat process.emit (events.js:213:7)\n \
+\tat emit (internal/child_process.js:768:12)\n \
+\tat _combinedTickCallback (internal/process/next_tick.js:141:11)\n \
+\tat process._tickCallback (internal/process/next_tick.js:180:9)',
+    }
+
     cy.visitIndex().then((win) => {
       ({ start: this.start, ipc: this.ipc } = win.App)
 
@@ -103,29 +124,6 @@ describe('ErrorMessage', function () {
   })
 
   it('shows error details if provided', function () {
-    const messageText = 'This is an error message explaining an event. Learn more about this event in the error details section.'
-
-    this.detailsErr = {
-      name: 'Error',
-      message: messageText,
-      stack: '[object Object]↵',
-      details: 'ReferenceError: alsdkjf is not defined\n \
-\tat module.exports (/Users/lilaconlee/cypress/debug/desktop-gui-mishap/cypress/plugins/index.js:15:3)\n \
-\tat Promise.try (/Users/lilaconlee/cypress/cypress/packages/server/lib/plugins/child/run_plugins.js:62:12)\n \
-\tat tryCatcher (/Users/lilaconlee/cypress/cypress/packages/server/node_modules/bluebird/js/release/util.js:16:23)\n \
-\tat Function.Promise.attempt.Promise.try (/Users/lilaconlee/cypress/cypress/packages/server/node_modules/bluebird/js/release/method.js:39:29)\n \
-\tat load (/Users/lilaconlee/cypress/cypress/packages/server/lib/plugins/child/run_plugins.js:61:7)\n \
-\tat EventEmitter.ipc.on (/Users/lilaconlee/cypress/cypress/packages/server/lib/plugins/child/run_plugins.js:132:5)\n \
-\tat emitOne (events.js:115:13)\n \
-\tat EventEmitter.emit (events.js:210:7)\n \
-\tat process.<anonymous> (/Users/lilaconlee/cypress/cypress/packages/server/lib/plugins/util.coffee:18:7)\n \
-\tat emitTwo (events.js:125:13)\n \
-\tat process.emit (events.js:213:7)\n \
-\tat emit (internal/child_process.js:768:12)\n \
-\tat _combinedTickCallback (internal/process/next_tick.js:141:11)\n \
-\tat process._tickCallback (internal/process/next_tick.js:180:9)',
-    }
-
     cy.stub(this.ipc, 'onProjectError').yields(null, this.detailsErr)
     this.start()
 
@@ -182,4 +180,35 @@ describe('ErrorMessage', function () {
       expect(this.ipc.externalOpen).to.not.be.called
     })
   })
+
+  it('footer is at bottom when error is displayed (issue #4912)', function () {
+    this.ipc.openProject.rejects(this.err)
+    this.start()
+
+    cy.get('footer').invoke('position').then(({ top }) => {
+      cy.get('footer').invoke('outerHeight').then((height) => {
+        expect(top).to.equal(Cypress.config('viewportHeight') - height)
+      })
+    })
+  })
+
+  it('does not overlay the nav/footer when long details are expanded (issue #4959)', function () {
+    this.detailsErr.details = `${this.detailsErr.details}${this.detailsErr.details}` // make details longer
+    this.ipc.openProject.rejects(this.detailsErr)
+    this.start()
+
+    cy.get('details').click()
+    cy.get('nav').should('be.visible')
+    cy.get('footer').should('be.visible')
+  })
+
+  it('it scrolls the error details when details are expanded (issue #4959)', function () {
+    this.detailsErr.details = `${this.detailsErr.details}${this.detailsErr.details}` // make details longer
+    this.ipc.openProject.rejects(this.detailsErr)
+    this.start()
+
+    cy.get('details').click()
+    cy.contains('Try Again').should('be.visible')
+    cy.get('.full-alert pre').should('have.css', 'overflow', 'auto')
+  })
 })

packages/desktop-gui/cypress/integration/project_mode_spec.js

@@ -27,7 +27,11 @@ describe('Project Mode', function () {
     this.ipc.openProject.resolves(openProject.promise)
     this.start()
 
-    cy.get('footer').invoke('position').its('top').should('be.gt', 50)
+    cy.get('footer').invoke('position').then(({ top }) => {
+      cy.get('footer').invoke('outerHeight').then((height) => {
+        expect(top).to.equal(Cypress.config('viewportHeight') - height)
+      })
+    })
   })
 
   describe('when specs load', function () {

packages/desktop-gui/cypress/integration/warning_message_spec.js

@@ -1,4 +1,4 @@
-describe('WarningMessage', function () {
+describe('Warning Message', function () {
   beforeEach(function () {
     cy.fixture('specs').as('specs')
     this.warningObj = {
@@ -124,6 +124,14 @@ describe('WarningMessage', function () {
     })
   })
 
+  it('displays warning above specs (issue #4912)', function () {
+    cy.shouldBeOnProjectSpecs().then(() => {
+      this.ipc.onProjectWarning.yield(null, this.warningObj)
+    })
+
+    cy.get('.specs').invoke('position').its('top').should('gt', 100)
+  })
+
   context('with multiple warnings', function () {
     beforeEach(function () {
       this.warningObj2 = {

packages/desktop-gui/src/project/error-message.jsx

@@ -56,32 +56,34 @@ class ErrorMessage extends Component {
     let err = this.props.error
 
     return (
-      <div className='full-alert alert alert-danger error'>
-        <p className='header'>
-          <i className='fa fa-warning'></i>{' '}
-          <strong>{err.title || 'Can\'t start server'}</strong>
-        </p>
-        <span className='alert-content'>
-          <div ref={(node) => this.errorMessageNode = node} dangerouslySetInnerHTML={{
-            __html: md.render(err.message),
-          }}></div>
-          {err.details && (
-            <ErrorDetails err={err} />
-          )}
-          {err.portInUse && (
-            <div>
-              <hr />
-              <p>To fix, stop the other running process or change the port in <code>cypress.json</code></p>
-            </div>
-          )}
-        </span>
-        <button
-          className='btn btn-default btn-sm'
-          onClick={this.props.onTryAgain}
-        >
-          <i className='fa fa-refresh'></i>{' '}
-          Try Again
-        </button>
+      <div className='full-alert-container'>
+        <div className='full-alert alert alert-danger error'>
+          <p className='header'>
+            <i className='fa fa-warning'></i>{' '}
+            <strong>{err.title || 'Can\'t start server'}</strong>
+          </p>
+          <span className='alert-content'>
+            <div ref={(node) => this.errorMessageNode = node} dangerouslySetInnerHTML={{
+              __html: md.render(err.message),
+            }}></div>
+            {err.details && (
+              <ErrorDetails err={err} />
+            )}
+            {err.portInUse && (
+              <div>
+                <hr />
+                <p>To fix, stop the other running process or change the port in <code>cypress.json</code></p>
+              </div>
+            )}
+          </span>
+          <button
+            className='btn btn-default btn-sm'
+            onClick={this.props.onTryAgain}
+          >
+            <i className='fa fa-refresh'></i>{' '}
+            Try Again
+          </button>
+        </div>
       </div>
     )
   }

packages/desktop-gui/src/project/project.scss

@@ -1,5 +1,6 @@
 .project-content {
   display: flex;
+  flex-direction: column;
   flex-grow: 2;
   margin-bottom: 0;
   width: 100%;

packages/desktop-gui/src/runs/setup-project-modal.jsx

@@ -141,7 +141,7 @@ class SetupProject extends Component {
         </div>
         <div>
           <input
-            autoFocus='true'
+            autoFocus={true}
             ref='projectName'
             type='text'
             className='form-control'

packages/desktop-gui/src/styles/components/_alerts.scss

@@ -37,11 +37,22 @@
   }
 }
 
+.full-alert-container {
+  align-items: center;
+  display: flex;
+  flex-grow: 2;
+  justify-content: center;
+  overflow: auto;
+  padding: 30px 60px;
+}
+
 .full-alert {
+  // `margin: auto` fixes issue with flexbox vertically-centered element + oveflow
+  // https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container
+  margin: auto;
   overflow: auto;
-  text-align: center;
   padding: 20px;
-  margin: 80px 60px 60px;
+  text-align: center;
 
   .alert-content {
     text-align: left;
@@ -57,6 +68,11 @@
     padding: 1px 4px;
   }
 
+  pre {
+    max-height: 200px;
+    overflow: auto;
+  }
+
   summary {
     cursor: pointer;
     outline: none;
@@ -76,12 +92,14 @@
 }
 
 .project-content .alert-warning {
-  position: relative;
   border-bottom: 1px solid #ddd;
+  flex-grow: 0;
+  flex-shrink: 0;
+  position: relative;
 
   code, pre {
-    color: #8a6d3b;
     border: none;
+    color: #8a6d3b;
   }
 }
 

packages/driver/src/cy/commands/actions/click.js

@@ -1,15 +1,14 @@
 const _ = require('lodash')
 const Promise = require('bluebird')
-
-const $Mouse = require('../../../cypress/mouse')
-
 const $dom = require('../../../dom')
 const $utils = require('../../../cypress/utils')
 const $elements = require('../../../dom/elements')
 const $selection = require('../../../dom/selection')
 const $actionability = require('../../actionability')
 
 module.exports = (Commands, Cypress, cy, state, config) => {
+  const { mouse } = cy.devices
+
   return Commands.addAll({ prevSubject: 'element' }, {
     click (subject, positionOrX, y, options = {}) {
     //# TODO handle pointer-events: none
@@ -74,11 +73,11 @@ module.exports = (Commands, Cypress, cy, state, config) => {
           //# https://www.w3.org/TR/uievents/#event-type-click (scroll up slightly)
 
           if ($dom.isAttached($elToClick)) {
-            domEvents.mouseUp = $Mouse.mouseUp($elToClick, fromViewport)
+            domEvents.mouseUp = mouse.mouseUp($elToClick, fromViewport)
           }
 
           if ($dom.isAttached($elToClick)) {
-            domEvents.click = $Mouse.click($elToClick, fromViewport)
+            domEvents.click = mouse.click($elToClick, fromViewport)
           }
 
           if (options._log) {
@@ -167,7 +166,7 @@ module.exports = (Commands, Cypress, cy, state, config) => {
 
             el = $elToClick.get(0)
 
-            domEvents.mouseDown = $Mouse.mouseDown($elToClick, coords.fromViewport)
+            domEvents.mouseDown = mouse.mouseDown($elToClick, coords.fromViewport)
 
             //# if mousedown was canceled then or caused
             //# our element to be removed from the DOM

packages/driver/src/cy/commands/actions/type.js

@@ -5,7 +5,6 @@ const moment = require('moment')
 const $dom = require('../../../dom')
 const $elements = require('../../../dom/elements')
 const $selection = require('../../../dom/selection')
-const $Keyboard = require('../../../cypress/keyboard')
 const $utils = require('../../../cypress/utils')
 const $actionability = require('../../actionability')
 
@@ -17,9 +16,7 @@ const weekRegex = /^\d{4}-W(0[1-9]|[1-4]\d|5[0-3])$/
 const timeRegex = /^([0-1]\d|2[0-3]):[0-5]\d(:[0-5]\d)?(\.[0-9]{1,3})?$/
 
 module.exports = function (Commands, Cypress, cy, state, config) {
-  Cypress.on('test:before:run', () => {
-    return $Keyboard.resetModifiers(state('document'), state('window'))
-  })
+  const { keyboard } = cy.devices
 
   return Commands.addAll({ prevSubject: 'element' }, {
     type (subject, chars, options = {}) {
@@ -54,7 +51,7 @@ module.exports = function (Commands, Cypress, cy, state, config) {
           let obj
 
           table[id] = (obj = {})
-          const modifiers = $Keyboard.activeModifiers()
+          const modifiers = keyboard.getActiveModifiersArray()
 
           if (modifiers.length) {
             obj.modifiers = modifiers.join(', ')
@@ -300,7 +297,7 @@ module.exports = function (Commands, Cypress, cy, state, config) {
         const isContentEditable = $elements.isContentEditable(options.$el.get(0))
         const isTextarea = $elements.isTextarea(options.$el.get(0))
 
-        return $Keyboard.type({
+        return keyboard.type({
           $el: options.$el,
           chars: options.chars,
           delay: options.delay,