chore: Open in IDE button for block and hook definitions in Runner UI (#30859)

* init vitest unit test harness for @packages/driver

* unit tests with stack examples

* drop lines until __cypress/tests rather than just __cypress

* changelog

* changelog

* remove vitest globals (unnecessary) from driver tsconfig

* bump the number of junit reports expected from the unit tests job

* fix ts-check error in scroll.ts

* fix type definition for getInvocationDetails

* rm packageManager key on package.json

* remove junit reporter, as script that verifies result does not recognize it as valid

* change @ts-expect-error to @ts-ignore for .scroll, as this ts check is apparently flaky

* set expected mocha result back to 19

* add ct style stacks for cy in cy ct tests

* re-enable junit reporter, update mocha result verification to be more lenient about the order of xml fields

* persist binaries for this branch

* expect 20 junit reports again

* fix mocha v vitest verification?

* add binary system test to verify correct file paths for codepoints in protocol events

* fix invocation details system test filename

* add required config for binary tests

* build on darwin to fix binary system tests

* build linux-arm64 for this branch

* simplify binary test

* build windows binary

* rm binary system test

* Update cli/CHANGELOG.md

Author: cacieprins

.circleci/workflows.yml

@@ -44,6 +44,7 @@ macWorkflowFilters: &darwin-workflow-filters
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
     - equal: [ 'chore/update_vue_test_utils', << pipeline.git.branch >> ]
+    - equal: [ 'cacie/fix-hook-test-stack-analysis', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -55,6 +56,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
     - equal: [ 'chore/update_binary_branch', << pipeline.git.branch >> ]
+    - equal: [ 'cacie/fix-hook-test-stack-analysis', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -78,6 +80,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
     - equal: [ 'ryanm/chore/electron-33-upgrade', << pipeline.git.branch >> ]
+    - equal: [ 'cacie/fix-hook-test-stack-analysis', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -153,7 +156,7 @@ commands:
           name: Set environment variable to determine whether or not to persist artifacts
           command: |
             echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
-            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "chore/update_vue_test_utils" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "chore/update_vue_test_utils" && "$CIRCLE_BRANCH" != cacie/fix-hook-test-stack-analysis ]]; then
                 export SHOULD_PERSIST_ARTIFACTS=true
             fi' >> "$BASH_ENV"
   # You must run `setup_should_persist_artifacts` command and be using bash before running this command
@@ -1678,7 +1681,7 @@ jobs:
             # run type checking for each individual package
             - run: yarn lerna run types
             - verify-mocha-results:
-                expectedResultCount: 19
+                expectedResultCount: 20
       - store_test_results:
           path: /tmp/cypress
       # CLI tests generate HTML files with sample CLI command output

package.json

@@ -54,7 +54,7 @@
     "stop-only": "npx stop-only --skip .cy,.publish,.projects,node_modules,dist,dist-test,fixtures,lib,bower_components,src,__snapshots__ --exclude cypress-tests.ts,*only.cy.js",
     "stop-only-all": "yarn stop-only --folder packages",
     "pretest": "yarn ensure-deps",
-    "test": "yarn lerna exec yarn test --scope=cypress --scope=@packages/{config,data-context,electron,errors,extension,https-proxy,launcher,net-stubbing,network,packherd-require,proxy,rewriter,scaffold-config,socket,v8-snapshot-require,telemetry} --scope=@tooling/{electron-mksnapshot,v8-snapshot}",
+    "test": "yarn lerna exec yarn test --scope=cypress --scope=@packages/{config,data-context,driver,electron,errors,extension,https-proxy,launcher,net-stubbing,network,packherd-require,proxy,rewriter,scaffold-config,socket,v8-snapshot-require,telemetry} --scope=@tooling/{electron-mksnapshot,v8-snapshot}",
     "test-debug": "lerna exec yarn test-debug --ignore=@packages/{driver,root,static,web-config}",
     "test-integration": "lerna exec yarn test-integration --ignore=@packages/{driver,root,static,web-config}",
     "test-mocha": "mocha --reporter spec scripts/spec.js",

packages/driver/package.json

@@ -10,7 +10,9 @@
     "cypress:run:inject-document-domain": "node ../../scripts/cypress run --config-file ./cypress.config-injectDocumentDomain.ts",
     "postinstall": "patch-package",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx,.json, .",
-    "start": "node -e 'console.log(require(`chalk`).red(`\nError:\n\tRunning \\`yarn start\\` is no longer needed for driver/cypress tests.\n\tWe now automatically spawn the server in e2e.setupNodeEvents config.\n\tChanges to the server will be watched and reloaded automatically.`))'"
+    "start": "node -e 'console.log(require(`chalk`).red(`\nError:\n\tRunning \\`yarn start\\` is no longer needed for driver/cypress tests.\n\tWe now automatically spawn the server in e2e.setupNodeEvents config.\n\tChanges to the server will be watched and reloaded automatically.`))'",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
   },
   "dependencies": {},
   "devDependencies": {
@@ -58,6 +60,7 @@
     "jimp": "0.22.12",
     "jquery": "3.7.1",
     "js-cookie": "3.0.5",
+    "jsdom": "^26.0.0",
     "json-stable-stringify": "1.0.1",
     "lodash": "^4.17.21",
     "md5": "2.3.0",
@@ -81,6 +84,7 @@
     "url-parse": "1.5.10",
     "vanilla-text-mask": "5.1.1",
     "vite": "5.2.11",
+    "vitest": "^2.1.8",
     "webpack": "^5.88.2",
     "zone.js": "0.9.0"
   },

packages/driver/src/cy/commands/actions/scroll.ts

@@ -128,6 +128,7 @@ export default (Commands, Cypress, cy, state) => {
       const scrollIntoView = () => {
         return new Promise((resolve, reject) => {
           // scroll our axes
+          // @ts-ignore - scrollTo does not define a 'done()' key on its config object.
           return $(options.$parent).scrollTo(options.$el, {
             axis: options.axis,
             easing: options.easing,

packages/driver/src/cypress/stack_utils.ts

@@ -108,9 +108,17 @@ const stackWithUserInvocationStackSpliced = (err, userInvocationStack): StackAnd
   }
 }
 
-type InvocationDetails = MessageLineDetail | {}
+type InvocationDetails = {
+  absoluteFile?: string
+  column?: number
+  line?: number
+  originalFile?: string
+  relativeFile?: string
+  stack: string
+}
 
-const getInvocationDetails = (specWindow, config) => {
+// used to determine codeframes for hook/test/etc definitions rather than command invocations
+const getInvocationDetails = (specWindow, config): InvocationDetails | undefined => {
   if (specWindow.Error) {
     let stack = (new specWindow.Error()).stack
 
@@ -120,10 +128,19 @@ const getInvocationDetails = (specWindow, config) => {
     // firefox and chrome throw stacks that include lines from cypress
     // So we drop the lines until we get to the spec stackframe (includes __cypress)
     if (specWindow.Cypress) {
-      stack = stackWithLinesDroppedFromMarker(stack, '__cypress', true)
+      // The stack includes frames internal to cypress, after the spec stackframe. In order
+      // to determine the invocation details, the stack needs to be parsed and trimmed.
+
+      // in Chrome and Firefox in E2E contexts, the spec stackframe includes the pattern, '__cypress/tests'.
+      if (stack.includes('__cypress/tests')) {
+        stack = stackWithLinesDroppedFromMarker(stack, '__cypress/tests', true)
+      } else {
+        // CT error contexts include the `__cypress` marker but not the `/tests` portion
+        stack = stackWithLinesDroppedFromMarker(stack, '__cypress', true)
+      }
     }
 
-    const details: InvocationDetails = getSourceDetailsForFirstLine(stack, config('projectRoot')) || {};
+    const details: Omit<InvocationDetails, 'stack'> = getSourceDetailsForFirstLine(stack, config('projectRoot')) || {};
 
     (details as any).stack = stack
 

packages/driver/test/unit/cypress/__fixtures__/spec_stackframes.json

@@ -0,0 +1,68 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { vi, describe, it, expect, beforeEach } from 'vitest'
+
+import source_map_utils from '../../../src/cypress/source_map_utils'
+import stack_utils from '../../../src/cypress/stack_utils'
+import stackFrameFixture from './__fixtures__/spec_stackframes.json'
+
+vi.mock('../../../src/cypress/source_map_utils', () => {
+  return {
+    default: {
+      getSourcePosition: vi.fn(),
+    },
+  }
+})
+
+describe('stack_utils', () => {
+  beforeEach(() => {
+    // @ts-expect-error
+    global.Cypress = {
+      config: vi.fn(),
+    }
+
+    vi.resetAllMocks()
+  })
+
+  describe('getInvocationDetails', () => {
+    const { line, column, scenarios } = stackFrameFixture
+
+    const projectRoot = '/foo/bar'
+
+    let stack: string
+
+    class MockError {
+      get stack () {
+        return stack
+      }
+    }
+    const config = () => projectRoot
+
+    for (const scenario of scenarios) {
+      const { browser, build, specFrame, stack: scenarioStack } = scenario
+
+      describe(`${browser}:${build}`, () => {
+        beforeEach(() => {
+          stack = scenarioStack
+        })
+
+        it('calls getSourcePosition with the correct file, line, and column', () => {
+          stack_utils.getInvocationDetails(
+            { Error: MockError, Cypress: {} },
+            config,
+          )
+
+          // getSourcePosition is not called directly from getInvocationDetails, but via:
+          // - getSourceDetailsForFirstLine
+          // - getSourceDetailsForLine
+          expect(source_map_utils.getSourcePosition).toHaveBeenCalledWith(specFrame, expect.objectContaining({
+            column,
+            line,
+            file: specFrame,
+          }))
+        })
+      })
+    }
+  })
+})

packages/driver/test/unit/cypress/stack_utils.spec.ts

@@ -12,9 +12,11 @@
     "noEmit": true,
     "outDir": "dist",
     "noErrorTruncation": true,
-    "types": []
+    "types": [],
+    "resolveJsonModule": true
   },
   "exclude": [
-    "dist"
+    "dist",
+    "test"
   ]
 }

packages/driver/tsconfig.json

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    include: ['test/unit/**/*.spec.ts'],
+    environment: 'jsdom',
+    exclude: ['**/__fixtures__/**/*'],
+    reporters: [
+      'default',
+      ['junit', { suiteName: 'Driver Unit Tests', outputFile: '/tmp/cypress/junit/driver-test-results.xml' }],
+    ],
+  },
+})

packages/driver/vitest.config.mjs

@@ -11,19 +11,34 @@ const la = require('lazy-ass')
 const path = require('path')
 const { readCircleEnv } = require('./circle-env')
 
-const RESULT_REGEX = /<testsuites name="([^"]+)" time="([^"]+)" tests="([^"]+)" failures="([^"]+)"(?: skipped="([^"]+)"|)>/
+// mocha regex
+const MOCHA_REGEX = /<testsuites name="([^"]+)" time="([^"]+)" tests="([^"]+)" failures="([^"]+)"(?: skipped="([^"]+)"|)>/
+// vitest regex
+const VITEST_REGEX = /<testsuites name="([^"]+)" tests="([^"]+)" failures="([^"]+)" errors="([^"]+)" time="([^"]+)"(?: skipped="([^"]+)"|)>/
+
 const REPORTS_PATH = '/tmp/cypress/junit'
 
 const expectedResultCount = Number(process.argv[process.argv.length - 1])
 
-const parseResult = (xml) => {
-  const [name, time, tests, failures, skipped] = RESULT_REGEX.exec(xml).slice(1)
+const parseMochaResult = (xml) => {
+  const [name, time, tests, failures, skipped] = MOCHA_REGEX.exec(xml).slice(1)
+
+  return {
+    name, time, tests: Number(tests), failures: Number(failures), skipped: Number(skipped || 0),
+  }
+}
+const parseVitestResult = (xml) => {
+  const [name, tests, failures, , time, skipped] = VITEST_REGEX.exec(xml).slice(1)
 
   return {
     name, time, tests: Number(tests), failures: Number(failures), skipped: Number(skipped || 0),
   }
 }
 
+const parseResult = (xml) => {
+  return MOCHA_REGEX.test(xml) ? parseMochaResult(xml) : parseVitestResult(xml)
+}
+
 const total = { tests: 0, failures: 0, skipped: 0 }
 
 console.log(`Looking for reports in ${REPORTS_PATH}`)

scripts/verify-mocha-results.js

@@ -269,7 +269,7 @@ export const routeHandlers: Record<string, RouteHandler> = {
   },
 }
 
-export const createRoutes = (props: DeepPartial<typeof routeHandlers>) => {
+export const createRoutes = (props: DeepPartial<typeof routeHandlers> = {}) => {
   return _.values(_.merge(_.cloneDeep(routeHandlers), props))
 }