display typescript sourcemaps, display docsUrl conditionally (#7301)

packages/driver/src/cypress/error_utils.js

@@ -309,6 +309,11 @@ const processErr = (errObj = {}, config) => {
     return errObj
   }
 
+  // backup, and then delete the docsUrl property in runMode
+  // so that it does not add the 'Learn More' link to the UI
+  // for screenshots or videos
+  delete errObj.docsUrl
+
   docsUrl = _(docsUrl).castArray().compact().join('\n\n')
 
   // append the docs url when not interactive so it appears in the stdout

packages/server/package.json

@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@benmalka/foxdriver": "0.4.0",
-    "@cypress/browserify-preprocessor": "2.2.3",
+    "@cypress/browserify-preprocessor": "2.2.4",
     "@cypress/commit-info": "2.2.0",
     "@cypress/get-windows-proxy": "1.6.1",
     "@cypress/icons": "0.7.0",

packages/server/test/e2e/1_typescript_support_spec.ts

@@ -4,7 +4,7 @@ const Fixtures = require('../support/helpers/fixtures')
 const snapshot = require('snap-shot-it')
 
 describe('e2e typescript', function () {
-  e2e.setup({ npmInstall: true })
+  e2e.setup()
 
   it('spec passes', function () {
     return e2e.exec(this, {

packages/server/test/e2e/8_error_ui_spec.ts

@@ -7,12 +7,14 @@ const onServer = function (app) {
   return app.get('/response', (req, res) => res.json({ ok: true }))
 }
 
-const expectedFailures = 61
+const EXPECTED_FAILURES = 61
 
-const verifyPassedAndFailedAreSame = function ({ stdout }) {
-  const passes = stdout.match(/✓ ✓ VERIFY/g)
+const verifyPassedAndFailedAreSame = (expectedFailures) => {
+  return ({ stdout }) => {
+    const passes = stdout.match(/✓ ✓ VERIFY/g)
 
-  expect(passes.length, 'number of passes should equal the number of failures').to.equal(expectedFailures)
+    expect(passes.length, 'number of passes should equal the number of failures').to.equal(expectedFailures)
+  }
 }
 
 describe('e2e error ui', function () {
@@ -23,19 +25,27 @@ describe('e2e error ui', function () {
 
   e2e.it('displays correct UI for errors', {
     spec: 'various_failures_spec.js',
-    expectedExitCode: expectedFailures,
+    expectedExitCode: EXPECTED_FAILURES,
     noTypeScript: true,
     onRun (exec) {
-      return exec().then(verifyPassedAndFailedAreSame)
+      return exec().then(verifyPassedAndFailedAreSame(EXPECTED_FAILURES))
     },
   })
 
   e2e.it('displays correct UI for errors in custom commands', {
     spec: 'various_failures_custom_commands_spec.js',
-    expectedExitCode: expectedFailures,
+    expectedExitCode: EXPECTED_FAILURES,
     noTypeScript: true,
     onRun (exec) {
-      return exec().then(verifyPassedAndFailedAreSame)
+      return exec().then(verifyPassedAndFailedAreSame(EXPECTED_FAILURES))
+    },
+  })
+
+  e2e.it('displays correct UI for typescript errors', {
+    spec: 'various_failures_spec.ts',
+    expectedExitCode: 2,
+    onRun (exec) {
+      return exec().then(verifyPassedAndFailedAreSame(2))
     },
   })
 })

packages/server/test/support/fixtures/projects/e2e/cypress/integration/various_failures_spec.ts

@@ -0,0 +1,55 @@
+/**
+ * This tests various failure scenarios where an error and code frame is displayed
+ * It does this by having a test fail and then a subsequent test run that
+ * tests the appearance of the command log
+ * Because of this, the test order is important
+ * There should be the same number of failing tests as there are passing
+ * tests, because each failure has a verification test (e.g. 11 fail, 11 pass)
+ */
+
+// simple example of typescript types
+type Foo = {
+  something: string
+}
+
+import { fail, setup, verify } from '../support/util'
+
+setup({ verifyStackLineIsSpecFile: true })
+
+context('validation errors', function () {
+  describe('from cypress with docsUrl', function () {
+    beforeEach(() => {
+      Cypress.config('isInteractive', true)
+    })
+
+    fail(this, () => {
+      cy.viewport()
+    })
+
+    verify(this, {
+      line: 26, // this only has 1 test, so we can be specific
+      column: 10,
+      verifyDocsLearnMore: 'https://on.cypress.io/viewport',
+      message: 'can only accept a string preset or',
+      stack: ['throwErrBadArgs', 'From Your Spec Code:'],
+    })
+  })
+
+  describe('from cypress without docsUrl', function () {
+    beforeEach(() => {
+      Cypress.config('isInteractive', false)
+    })
+
+    fail(this, () => {
+      cy.viewport()
+    })
+
+    verify(this, {
+      line: 44, // this only has 1 test, so we can be specific
+      column: 10,
+      verifyDocsContent: 'https://on.cypress.io/viewport',
+      message: 'can only accept a string preset or',
+      stack: ['throwErrBadArgs', 'From Your Spec Code:'],
+    })
+  })
+})

packages/server/test/support/fixtures/projects/e2e/cypress/support/util.js

@@ -39,18 +39,28 @@ export const fail = (ctx, test) => {
 }
 
 export const verify = (ctx, options) => {
-  const { hasCodeFrame = true, column, codeFrameText, message, stack } = options
-  let { regex } = options
+  const { hasCodeFrame = true, verifyDocsContent, verifyDocsLearnMore, column, codeFrameText, message, stack } = options
+  let { regex, line } = options
+
+  // if no specific line, just accept any number
+  line = line || '\\d+'
 
   // test only the column number because the line number is brittle
   // since any changes to this file can affect it
   if (!regex) {
     regex = shouldVerifyStackLineIsSpecFile ?
-      new RegExp(`${Cypress.spec.relative}:\\d+:${column}`) :
-      new RegExp(`cypress\/support\/commands\.js:\\d+:${column}`)
+      new RegExp(`${Cypress.spec.relative}:${line}:${column}`) :
+      new RegExp(`cypress\/support\/commands\.js:${line}:${column}`)
   }
 
-  it(`✓ VERIFY`, () => {
+  it(`✓ VERIFY`, function () {
+    const currTest = this.test
+    const currTestIndex = Cypress._.findIndex(ctx.tests, (test) => {
+      return test === currTest
+    })
+    // find the previous test in the suite
+    const prevTest = ctx.tests[currTestIndex - 1]
+
     cy.wrap(Cypress.$(window.top.document.body))
     .find('.reporter')
     .contains(`FAIL - ${getTitle(ctx)}`)
@@ -81,6 +91,34 @@ export const verify = (ctx, options) => {
       cy.get('.runnable-err-stack-trace')
       .should('not.include.text', '__stackReplacementMarker')
 
+      const docsUrl = _.get(prevTest, 'err.docsUrl')
+
+      if (verifyDocsLearnMore) {
+        expect(docsUrl).to.eq(verifyDocsLearnMore)
+
+        // make sure Learn More is there
+        // and the docs url is not embedded
+        // in the error message
+        cy
+        .get('.runnable-err-message')
+        .should('not.contain', docsUrl)
+        .contains('Learn more')
+        .should('have.attr', 'href', docsUrl)
+      }
+
+      if (verifyDocsContent) {
+        expect(docsUrl).to.be.undefined
+
+        // verify that the docsUrl is
+        // embedded in the content, but
+        // that there's no Learn More link
+        cy
+        .get('.runnable-err-message')
+        .should('contain', verifyDocsContent)
+        .contains('Learn more')
+        .should('not.exist')
+      }
+
       if (!hasCodeFrame) return
 
       cy

yarn.lock

@@ -1350,10 +1350,10 @@
     through2 "^2.0.0"
     watchify "3.11.1"
 
-"@cypress/browserify-preprocessor@2.2.3":
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/@cypress/browserify-preprocessor/-/browserify-preprocessor-2.2.3.tgz#73cd0fc91fee90a9fb9a81a675ad52f6f1abddaf"
-  integrity sha512-NjumJpUlWeolsGICIseYblCRYsQDQA01W1ZxPcWZkG1hK01EI1HxMtX7fBnyeg2jY/i1xjrZV27PczmdGKAhXQ==
+"@cypress/browserify-preprocessor@2.2.4":
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/@cypress/browserify-preprocessor/-/browserify-preprocessor-2.2.4.tgz#a2ff5a6a06938f7f1e78eb6de0e492641cf8561c"
+  integrity sha512-kMjkIFe6qka8Tkm9N3BrMB+Nn7WEAHIzEd3gfVoDL17Tr40xyOnKGuMhEkff1scd3RV3bjQxwQ9BQ6kI2nToAQ==
   dependencies:
     "@babel/core" "7.4.5"
     "@babel/plugin-proposal-class-properties" "7.3.0"