Reporter error improvements

.gitignore

@@ -22,6 +22,10 @@ Cached Theme Material Design.pak
 packages/desktop-gui/cypress/videos
 packages/desktop-gui/src/jsconfig.json
 
+# from driver
+packages/driver/test/cypress/videos
+packages/driver/test/cypress/screenshots
+
 # from example
 packages/example/app
 packages/example/build

package.json

@@ -102,6 +102,7 @@
     "@types/mini-css-extract-plugin": "0.8.0",
     "@types/mocha": "5.2.7",
     "@types/node": "12.12.21",
+    "@types/prismjs": "1.16.0",
     "@types/ramda": "0.25.47",
     "@types/react": "^16.9.27",
     "@types/react-dom": "16.9.4",

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

@@ -385,7 +385,7 @@ describe('Settings', () => {
       })
 
       it('opens ci guide when learn more is clicked', () => {
-        cy.get('.settings-record-key').contains('Learn More').click().then(function () {
+        cy.get('.settings-record-key').contains('Learn more').click().then(function () {
           expect(this.ipc.externalOpen).to.be.calledWith('https://on.cypress.io/what-is-a-record-key')
         })
       })
@@ -752,6 +752,79 @@ describe('Settings', () => {
     })
   })
 
+  describe('file preference panel', () => {
+    const availableEditors = [
+      { id: 'atom', name: 'Atom', isOther: false, openerId: 'atom' },
+      { id: 'vim', name: 'Vim', isOther: false, openerId: 'vim' },
+      { id: 'sublime', name: 'Sublime Text', isOther: false, openerId: 'sublime' },
+      { id: 'vscode', name: 'Visual Studio Code', isOther: false, openerId: 'vscode' },
+      { id: 'other', name: 'Other', isOther: true, openerId: '' },
+    ]
+
+    beforeEach(function () {
+      this.getUserEditor = this.util.deferred()
+      cy.stub(this.ipc, 'getUserEditor').returns(this.getUserEditor.promise)
+      cy.stub(this.ipc, 'setUserEditor').resolves()
+
+      this.openProject.resolve(this.config)
+      this.projectStatuses[0].id = this.config.projectId
+      this.getProjectStatus.resolve(this.projectStatuses[0])
+
+      this.goToSettings()
+
+      cy.contains('File Opener Preference').click()
+    })
+
+    it('displays file preference section', () => {
+      cy.contains('Your preference is used to open files')
+    })
+
+    it('opens file preference guide when learn more is clicked', () => {
+      cy.get('.file-preference').contains('Learn more').click().then(function () {
+        expect(this.ipc.externalOpen).to.be.calledWith('https://on.cypress.io/file-opener-preference')
+      })
+    })
+
+    it('loads preferred editor and available editors', function () {
+      expect(this.ipc.getUserEditor).to.be.called
+    })
+
+    it('shows spinner', () => {
+      cy.get('.loading-editors')
+    })
+
+    describe('when editors load with preferred editor', () => {
+      beforeEach(function () {
+        this.getUserEditor.resolve({ availableEditors, preferredOpener: availableEditors[3] })
+      })
+
+      it('displays available editors with preferred one selected', () => {
+        cy.get('.loading-editors').should('not.exist')
+        cy.contains('Atom')
+        cy.contains('Other')
+        cy.contains('Visual Studio Code').closest('li').should('have.class', 'is-selected')
+      })
+
+      it('sets editor through ipc when a different editor is selected', function () {
+        cy.contains('Atom').click()
+        .closest('li').should('have.class', 'is-selected')
+
+        cy.wrap(this.ipc.setUserEditor).should('be.calledWith', availableEditors[0])
+      })
+    })
+
+    describe('when editors load without preferred editor', () => {
+      beforeEach(function () {
+        this.getUserEditor.resolve({ availableEditors })
+      })
+
+      it('does not select an editor', () => {
+        cy.get('.loading-editors').should('not.exist')
+        cy.get('.editor-picker li').should('not.have.class', 'is-selected')
+      })
+    })
+  })
+
   describe('errors', () => {
     const errorText = 'An unexpected error occurred'
 

packages/desktop-gui/src/app/nav.scss

@@ -246,14 +246,6 @@
   margin-right: 4px;
 }
 
-.browser-beta {
-  font-size: 12px;
-  top: -5px;
-  position: relative;
-  margin-left: 4px;
-  color: #d87b0b;
-}
-
 .browser-info-tooltip {
   background: #ececec;
   border-color: #c7c7c7;
@@ -269,6 +261,14 @@
   }
 }
 
+.dropdown .browser-beta {
+  font-size: 12px;
+  top: -5px;
+  position: relative;
+  margin-left: 4px;
+  color: #d8a10b;
+}
+
 .close-browser {
   .btn {
     padding: 6px 9px;

packages/desktop-gui/src/lib/ipc.js

@@ -44,6 +44,8 @@ register('get:project:statuses')
 register('get:project:status')
 register('get:record:keys')
 register('get:specs', false)
+register('get:user:editor')
+register('set:user:editor')
 register('launch:browser', false)
 register('log:out')
 register('on:focus:tests', false)

packages/desktop-gui/src/main.scss

@@ -4,3 +4,4 @@
 @import 'styles/components/*';
 @import '!(styles)*/**/*';
 @import '../../ui-components/src/dropdown';
+@import '../../ui-components/src/editor-picker';

packages/desktop-gui/src/settings/file-preference.jsx

@@ -0,0 +1,71 @@
+import _ from 'lodash'
+import { action } from 'mobx'
+import { EditorPicker } from '@packages/ui-components'
+import { observer, useLocalStore } from 'mobx-react'
+import React, { useEffect } from 'react'
+
+import ipc from '../lib/ipc'
+
+const openHelp = (e) => {
+  e.preventDefault()
+  ipc.externalOpen('https://on.cypress.io/file-opener-preference')
+}
+
+const save = _.debounce((editor) => {
+  ipc.setUserEditor(editor)
+  .catch(() => {}) // ignore errors
+}, 500)
+
+const FilePreference = observer(() => {
+  const state = useLocalStore(() => ({
+    editors: [],
+    isLoadingEditor: true,
+    chosenEditor: {},
+    setEditors: action((editors) => {
+      state.editors = editors
+      state.isLoadingEditor = false
+    }),
+    setChosenEditor: action((editor) => {
+      state.chosenEditor = editor
+      save(editor)
+    }),
+    setOtherPath: action((otherPath) => {
+      const otherOption = _.find(state.editors, { isOther: true })
+
+      otherOption.openerId = otherPath
+      save(otherOption)
+    }),
+  }))
+
+  useEffect(() => {
+    ipc.getUserEditor().then(({ preferredOpener, availableEditors }) => {
+      if (preferredOpener) {
+        state.setChosenEditor(preferredOpener)
+      }
+
+      state.setEditors(availableEditors)
+    })
+  }, [true])
+
+  return (
+    <div className='file-preference'>
+      <a href='#' className='learn-more' onClick={openHelp}>
+        <i className='fas fa-info-circle'></i> Learn more
+      </a>
+      <p>Your preference is used to open files from the Test Runner <em>(e.g. when clicking links in error stack traces)</em></p>
+      {state.isLoadingEditor ?
+        <p className='loading-editors'>
+          <i className='fas fa-spinner fa-spin'></i> Loading Editors...
+        </p> :
+        <EditorPicker
+          chosen={state.chosenEditor}
+          editors={state.editors}
+          onSelect={state.setChosenEditor}
+          onUpdateOtherPath={state.setOtherPath}
+        />
+      }
+    </div>
+  )
+})
+
+export default FilePreference

packages/desktop-gui/src/settings/record-key.jsx

@@ -74,8 +74,7 @@ class RecordKey extends Component {
     return (
       <div>
         <a href='#' className='learn-more' onClick={openRecordKeyGuide}>
-          <i className='fas fa-info-circle'></i>{' '}
-          Learn More
+          <i className='fas fa-info-circle'></i> Learn more
         </a>
         <p className='text-muted'>
           A Record Key sends your failing tests, screenshots, and videos to your{' '}

packages/desktop-gui/src/settings/settings.jsx

@@ -9,6 +9,7 @@ import ProjectId from './project-id'
 import RecordKey from './record-key'
 import ProxySettings from './proxy-settings'
 import NodeVersion from './node-version'
+import FilePreference from './file-preference'
 import Experiments from './experiments'
 
 import { getExperiments, experimental } from '@packages/server/lib/experiments'
@@ -45,10 +46,13 @@ const Settings = observer(({ project, app }) => {
           <Panel header='Proxy Settings' key='proxy-settings' className='form-horizontal settings-proxy'>
             <ProxySettings app={app} />
           </Panel>
-          {hasExperiments &&
-          <Panel header='Experiments' key='experiments' className='form-horizontal settings-experiments'>
-            <Experiments project={project} />
+          <Panel header='File Opener Preference' key='file-preference' className='form-horizontal settings-file-preference'>
+            <FilePreference />
           </Panel>
+          {hasExperiments &&
+            <Panel header='Experiments' key='experiments' className='form-horizontal settings-experiments'>
+              <Experiments project={project} />
+            </Panel>
           }
         </Collapse>
       </div>

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

@@ -245,6 +245,20 @@
   }
 }
 
+.editor-picker {
+  margin: 0;
+  padding: 0;
+
+  li {
+    list-style: none;
+  }
+
+  label {
+    margin: 0;
+    font-weight: normal;
+  }
+}
+
 .experiment-intro {
   padding-bottom: 15px;
   margin-bottom: 0px;

packages/desktop-gui/webpack.config.ts

@@ -1,8 +1,10 @@
-import commonConfig, { HtmlWebpackPlugin } from '@packages/web-config/webpack.config.base'
+import getCommonConfig, { HtmlWebpackPlugin } from '@packages/web-config/webpack.config.base'
 import path from 'path'
+import webpack from 'webpack'
 
-const config: typeof commonConfig = {
-  ...commonConfig,
+// @ts-ignore
+const config: webpack.Configuration = {
+  ...getCommonConfig(),
   entry: {
     app: [require.resolve('@babel/polyfill'), path.resolve(__dirname, 'src/main')],
   },
@@ -26,7 +28,10 @@ config.plugins = [
 config.resolve = {
   ...config.resolve,
   alias: {
+    'bluebird': require.resolve('bluebird'),
     'lodash$': require.resolve('lodash'),
+    'mobx': require.resolve('mobx'),
+    'mobx-react': require.resolve('mobx-react'),
     'react': require.resolve('react'),
     'react-dom': require.resolve('react-dom'),
   },

packages/driver/package.json

@@ -10,6 +10,7 @@
     "start": "$(yarn bin coffee) test/support/server.coffee"
   },
   "devDependencies": {
+    "@babel/code-frame": "^7.0.0",
     "@cypress/bower-kendo-ui": "0.0.2",
     "@cypress/sinon-chai": "1.1.0",
     "@cypress/underscore.inflection": "1.0.1",
@@ -37,6 +38,7 @@
     "cors": "2.8.5",
     "cypress-multi-reporters": "1.2.4",
     "debug": "4.1.1",
+    "error-stack-parser": "2.0.6",
     "errorhandler": "1.5.1",
     "eventemitter2": "4.1.2",
     "express": "4.16.4",
@@ -60,6 +62,7 @@
     "react-dom-16.0.0": "npm:react-dom@16.0.0",
     "setimmediate": "1.0.5",
     "sinon": "8.1.1",
+    "source-map": "0.7.3",
     "text-mask-addons": "3.8.0",
     "underscore": "1.9.1",
     "underscore.string": "3.3.5",

packages/driver/src/cy/assertions.js

@@ -111,6 +111,10 @@ const create = function (state, queue, retryFn) {
       // them up with existing ones
       cmd.set('assertionIndex', 0)
 
+      if (state('current') != null) {
+        state('current').set('currentAssertionCommand', cmd)
+      }
+
       return cmd.get('fn').originalFn.apply(
         state('ctx'),
         [subject].concat(cmd.get('args')),
@@ -202,6 +206,8 @@ const create = function (state, queue, retryFn) {
         err = e2
       }
 
+      err.isDefaultAssertionErr = isDefaultAssertionErr
+
       options.error = err
 
       if (err.retry === false) {