Test lens feature intial commit

Author: vishnuv688

packages/app/src/components/sidebar/explorer.ts

@@ -23,6 +23,7 @@ interface TestEntry {
   uid: string
   state?: string
   label: string
+  callSource?: string
   children: TestEntry[]
 }
 
@@ -66,7 +67,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
 
   #renderEntry (entry: TestEntry): TemplateResult {
     return html`
-      <wdio-test-entry state="${entry.state as any}">
+      <wdio-test-entry state="${entry.state as any}" call-source="${entry.callSource || ''}">
         <label slot="label">${entry.label}</label>
         ${entry.children && entry.children.length
           ? html`
@@ -116,6 +117,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
           : entry.tests.find((t) => t.state === 'failed')
             ? TestState.FAILED
             : TestState.PASSED,
+        callSource: (entry as any).callSource,
         children: Object.values(entries)
           .map(this.#getTestEntry.bind(this))
           .filter(this.#filterEntry.bind(this))
@@ -129,6 +131,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
         : entry.state === 'failed'
           ? TestState.FAILED
           : TestState.PASSED,
+      callSource: (entry as any).callSource,
       children: []
     }
   }

packages/app/src/components/sidebar/test-suite.ts

@@ -48,6 +48,9 @@ export class ExplorerTestEntry extends CollapseableEntry {
   @property({ type: String })
   state?: TestState
 
+  @property({ type: String, attribute: 'call-source' })
+  callSource?: string
+
   static styles = [...Element.styles, css`
     :host {
       display: block;
@@ -71,6 +74,13 @@ export class ExplorerTestEntry extends CollapseableEntry {
     this.requestUpdate()
   }
 
+  #viewSource() {
+    if (!this.callSource) return
+    window.dispatchEvent(new CustomEvent('app-source-highlight', {
+      detail: this.callSource
+    }))
+  }
+
   get hasPassed () {
     return this.state === TestState.PASSED
   }
@@ -126,7 +136,7 @@ export class ExplorerTestEntry extends CollapseableEntry {
               </button>
             `
           }
-          <button class="p-1 rounded hover:bg-toolbarHoverBackground my-1 group">
+          <button class="p-1 rounded hover:bg-toolbarHoverBackground my-1 group" @click="${() => this.#viewSource()}">
             <icon-mdi-eye class="group-hover:text-chartsYellow"></icon-mdi-eye>
           </button>
           ${!hasNoChildren ? html`

packages/app/src/components/workbench/source.ts

@@ -24,6 +24,7 @@ export class DevtoolsSource extends Element {
 
     .cm-editor {
       width: 100%;
+      height: 100%;
       padding: 10px 0px;
     }
     .cm-content {
@@ -63,20 +64,23 @@ export class DevtoolsSource extends Element {
     const editorView = new EditorView(opts)
     container.replaceWith(editorView.dom)
 
-    /**
-     * highlight line of call source
-     */
-    const lines = [...(this.shadowRoot?.querySelectorAll('.cm-line') || [])]
-    if (highlightLine && lines.length && highlightLine < lines.length) {
-      setTimeout(() => {
-        lines[highlightLine].classList.add('cm-activeLine')
-      }, 100)
+   // Use CodeMirror API to select and scroll to the target line (1-based index)
+    if (highlightLine && highlightLine > 0) {
+      try {
+        const lineInfo = editorView.state.doc.line(highlightLine) // 1-based
+        requestAnimationFrame(() => {
+          editorView.dispatch({
+            selection: { anchor: lineInfo.from },
+            effects: EditorView.scrollIntoView(lineInfo.from, { y: 'center' }) // center the line
+          })
+        })
+      } catch { /* ignore */ }
     }
   }
 
   #highlightCallSource (ev: CustomEvent<string>) {
     const [filePath, line] = ev.detail.split(':')
-    this.#renderEditor(filePath, parseInt(line, 10) + 1)
+    this.#renderEditor(filePath, parseInt(line, 10))
   }
 
   render() {

packages/service/package.json

@@ -25,21 +25,26 @@
     "test": "eslint ."
   },
   "dependencies": {
+    "@babel/types": "^7.28.4",
     "@wdio/devtools-backend": "workspace:^",
     "@wdio/devtools-script": "workspace:^",
     "@wdio/logger": "9.18.0",
     "@wdio/reporter": "9.18.0",
     "@wdio/types": "9.16.2",
     "import-meta-resolve": "^4.1.0",
-    "stack-trace": "1.0.0-pre2",
     "ws": "^8.18.3"
   },
   "license": "MIT",
   "devDependencies": {
+    "@babel/parser": "^7.28.4",
+    "@babel/traverse": "^7.28.4",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__traverse": "^7.28.0",
     "@types/stack-trace": "^0.0.33",
     "@types/ws": "^8.18.1",
     "@wdio/globals": "9.17.0",
     "@wdio/protocols": "9.16.2",
+    "stack-trace": "1.0.0-pre2",
     "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {

packages/service/src/reporter.ts

@@ -1,7 +1,9 @@
 import WebdriverIOReporter, { type SuiteStats, type TestStats } from '@wdio/reporter'
+import { enrichTestStats, setCurrentSpecFile } from './utils.js'
 
 export class TestReporter extends WebdriverIOReporter {
   #report: (data: any) => void
+  #currentSpecFile?: string
 
   constructor (options: any, report: (data: any) => void) {
     super(options)
@@ -10,10 +12,17 @@ export class TestReporter extends WebdriverIOReporter {
 
   onSuiteStart(suiteStats: SuiteStats): void {
     super.onSuiteStart(suiteStats)
+    this.#currentSpecFile = suiteStats.file
+    setCurrentSpecFile(suiteStats.file)
     this.#sendUpstream()
   }
 
   onTestStart(testStats: TestStats): void {
+    //Enrich testStats with file + line info
+    enrichTestStats(testStats, this.#currentSpecFile)
+    if ((testStats as any).file && (testStats as any).line != null) {
+      ;(testStats as any).callSource = `${(testStats as any).file}:${(testStats as any).line}`
+    }
     super.onTestStart(testStats)
     this.#sendUpstream()
   }
@@ -25,6 +34,8 @@ export class TestReporter extends WebdriverIOReporter {
 
   onSuiteEnd(suiteStats: SuiteStats): void {
     super.onSuiteEnd(suiteStats)
+    this.#currentSpecFile = undefined
+    setCurrentSpecFile(undefined)
     this.#sendUpstream()
   }
 

packages/service/src/types.ts

@@ -66,3 +66,11 @@ declare module WebdriverIO {
   interface ServiceOption extends ServiceOptions {}
   interface Capabilities {}
 }
+
+declare module '@wdio/reporter' {
+  interface TestStats {
+    file?: string
+    line?: number
+    column?: number
+  }
+}