WIP: #4452 Add message specify_file_by_relative_path

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

@@ -9,6 +9,27 @@ describe('Error Message', 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('Error Message', 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()
 
@@ -193,4 +191,24 @@ describe('Error Message', function () {
       })
     })
   })
+
+  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/src/styles/components/_alerts.scss

@@ -42,12 +42,17 @@
   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;
+  text-align: center;
 
   .alert-content {
     text-align: left;
@@ -63,6 +68,11 @@
     padding: 1px 4px;
   }
 
+  pre {
+    max-height: 200px;
+    overflow: auto;
+  }
+
   summary {
     cursor: pointer;
     outline: none;

packages/driver/src/cy/commands/navigation.coffee

@@ -71,6 +71,14 @@ cannotVisit2ndDomain = (origin, previousDomainVisited, log) ->
     }
   })
 
+specifyFileByRelativePath = (url, log) ->
+  $utils.throwErrByPath("visit.specify_file_by_relative_path", {
+    onFail: log
+    args: {
+      attemptedUrl: url
+    }
+  })
+
 aboutBlank = (win) ->
   new Promise (resolve) ->
     cy.once("window:load", resolve)
@@ -603,6 +611,9 @@ module.exports = (Commands, Cypress, cy, state, config) ->
 
         ## TODO: $Location.resolve(existing.origin, url)
 
+        if $Location.isLocalFileUrl(url)
+          return specifyFileByRelativePath(url, options._log)
+
         ## in the case we are visiting a relative url
         ## then prepend the existing origin to it
         ## so we get the right remote url

packages/driver/src/cypress/error_messages.coffee

@@ -1090,6 +1090,13 @@ module.exports = {
 
         #{cmd('request')} will automatically get and set cookies and enable you to parse responses.
       """
+    specify_file_by_relative_path: """
+      #{cmd('visit')} failed because the 'file://...' protocol is not supported by Cypress.
+
+      However, you can pass in the relative path to the file from your projectRoot.
+
+      https://docs.cypress.io/api/commands/visit.html
+    """
 
   wait:
     alias_invalid: "'{{prop}}' is not a valid alias property. Are you trying to ask for the first request? If so write @{{str}}.request"

packages/driver/src/cypress/location.coffee

@@ -19,6 +19,7 @@ ipAddressRe = /^[\d\.]+$/
 
 reHttp = /^https?:\/\//
 reWww = /^www/
+reFile = /^file:\/\//
 
 reLocalHost = /^(localhost|0\.0\.0\.0|127\.0\.0\.1)/
 
@@ -130,6 +131,9 @@ class $Location
       toString: _.bind(@getToString, @)
     }
 
+  @isLocalFileUrl = (url) ->
+    reFile.test(url)
+
   @isFullyQualifiedUrl = (url) ->
     reHttp.test(url)