Test re-run - now preserve the previous test results for easy access of other test case/suite

Author: vishnuv688

packages/app/src/app.ts

@@ -52,6 +52,7 @@ export class WebdriverIODevtoolsApplication extends Element {
   connectedCallback(): void {
     super.connectedCallback()
     window.addEventListener('load-trace', this.#loadTrace.bind(this))
+    this.addEventListener('clear-execution-data', this.#clearExecutionData.bind(this))
   }
 
   render() {
@@ -66,6 +67,10 @@ export class WebdriverIODevtoolsApplication extends Element {
     this.requestUpdate()
   }
 
+  #clearExecutionData() {
+    this.dataManager.clearExecutionData()
+  }
+
   #mainContent() {
     if (!this.dataManager.hasConnection) {
       return html`<wdio-devtools-start></wdio-devtools-start>`

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

@@ -120,6 +120,9 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
       return
     }
 
+    // Clear execution data before triggering rerun
+    this.dispatchEvent(new CustomEvent('clear-execution-data', { bubbles: true, composed: true }))
+
     await this.#postToBackend('/api/tests/run', {
       ...detail,
       runAll: detail.uid === '*',
@@ -190,6 +193,9 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
       return
     }
 
+    // Clear execution data before triggering rerun
+    this.dispatchEvent(new CustomEvent('clear-execution-data', { bubbles: true, composed: true }))
+
     void this.#postToBackend('/api/tests/run', {
       uid: '*',
       entryType: 'suite',

packages/app/src/controller/DataManager.ts

@@ -5,9 +5,21 @@ import type {
   CommandLog,
   TraceLog
 } from '@wdio/devtools-service/types'
+import type { SuiteStats, TestStats } from '@wdio/reporter'
 
 const CACHE_ID = 'wdio-trace-cache'
 
+type TestStatsFragment = Omit<Partial<TestStats>, 'uid'> & { uid: string }
+
+type SuiteStatsFragment = Omit<
+  Partial<SuiteStats>,
+  'uid' | 'tests' | 'suites'
+> & {
+  uid: string
+  tests?: TestStatsFragment[]
+  suites?: SuiteStatsFragment[]
+}
+
 export const mutationContext = createContext<TraceMutation[]>(
   Symbol('mutationContext')
 )
@@ -38,6 +50,7 @@ interface SocketMessage<T extends keyof TraceLog = keyof TraceLog> {
 export class DataManagerController implements ReactiveController {
   #ws?: WebSocket
   #host: ReactiveControllerHost & HTMLElement
+  #lastSeenRunTimestamp = 0
 
   mutationsContextProvider: ContextProvider<typeof mutationContext>
   logsContextProvider: ContextProvider<typeof logContext>
@@ -46,7 +59,6 @@ export class DataManagerController implements ReactiveController {
   commandsContextProvider: ContextProvider<typeof commandContext>
   sourcesContextProvider: ContextProvider<typeof sourceContext>
   suitesContextProvider: ContextProvider<typeof suiteContext>
-
   hasConnectionProvider: ContextProvider<typeof hasConnection>
 
   constructor(host: ReactiveControllerHost & HTMLElement) {
@@ -90,30 +102,26 @@ export class DataManagerController implements ReactiveController {
     return this.metadataContextProvider.value?.type
   }
 
-  /**
-   * connect to backend to receive data
-   */
+  // Public method to clear execution data when rerun is triggered
+  clearExecutionData() {
+    this.mutationsContextProvider.setValue([])
+    this.commandsContextProvider.setValue([])
+    this.logsContextProvider.setValue([])
+    this.consoleLogsContextProvider.setValue([])
+    this.#host.requestUpdate()
+  }
+
   hostConnected() {
-    /**
-     * expect application to be served from backend
-     */
     const wsUrl = `ws://${window.location.host}/client`
     console.log(`Connecting to ${wsUrl}`)
     const ws = (this.#ws = new WebSocket(wsUrl))
 
-    /**
-     * if a connection to the backend is established we can
-     * start fetching data
-     */
     ws.addEventListener('open', () => {
       this.hasConnectionProvider.setValue(true)
       ws.addEventListener('message', this.#handleSocketMessage.bind(this))
       return this.#host.requestUpdate()
     })
 
-    /**
-     * otherwise attempt to load cached trace file
-     */
     ws.addEventListener('error', () => {
       try {
         const localStorageValue = JSON.parse(
@@ -130,7 +138,8 @@ export class DataManagerController implements ReactiveController {
 
   hostDisconnected() {
     if (this.#ws) {
-      return this.#ws.close()
+      this.#ws.close()
+      this.#ws = undefined
     }
   }
 
@@ -141,47 +150,29 @@ export class DataManagerController implements ReactiveController {
         return
       }
 
+      // Check for new run BEFORE processing suites data
+      if (scope === 'suites') {
+        const shouldReset = this.#shouldResetForNewRun(data)
+        if (shouldReset) {
+          this.#resetExecutionData()
+        }
+      }
+
+      // Route data to appropriate handler
       if (scope === 'mutations') {
-        this.mutationsContextProvider.setValue([
-          ...this.mutationsContextProvider.value,
-          ...(data as TraceMutation[])
-        ])
+        this.#handleMutationsUpdate(data as TraceMutation[])
       } else if (scope === 'commands') {
-        this.commandsContextProvider.setValue([
-          ...this.commandsContextProvider.value,
-          ...(data as CommandLog[])
-        ])
+        this.#handleCommandsUpdate(data as CommandLog[])
       } else if (scope === 'metadata') {
-        this.metadataContextProvider.setValue({
-          ...this.metadataContextProvider.value,
-          ...(data as Metadata)
-        })
+        this.#handleMetadataUpdate(data as Metadata)
       } else if (scope === 'consoleLogs') {
-        this.consoleLogsContextProvider.setValue([
-          ...this.consoleLogsContextProvider.value,
-          ...(data as string[])
-        ])
+        this.#handleConsoleLogsUpdate(data as string[])
       } else if (scope === 'sources') {
-        const merged = {
-          ...(this.sourcesContextProvider.value || {}),
-          ...(data as Record<string, string>)
-        }
-        this.sourcesContextProvider.setValue(merged)
-        console.debug('Merged sources keys', Object.keys(merged))
+        this.#handleSourcesUpdate(data as Record<string, string>)
+      } else if (scope === 'suites') {
+        this.#handleSuitesUpdate(data)
       } else {
-        const providerMap = {
-          mutations: this.mutationsContextProvider,
-          logs: this.logsContextProvider,
-          consoleLogs: this.consoleLogsContextProvider,
-          metadata: this.metadataContextProvider,
-          commands: this.commandsContextProvider,
-          sources: this.sourcesContextProvider,
-          suites: this.suitesContextProvider
-        } as const
-        const provider = providerMap[scope as keyof typeof providerMap]
-        if (provider) {
-          provider.setValue(data as any)
-        }
+        this.#handleGenericUpdate(scope, data)
       }
 
       this.#host.requestUpdate()
@@ -190,6 +181,201 @@ export class DataManagerController implements ReactiveController {
     }
   }
 
+  #shouldResetForNewRun(data: unknown): boolean {
+    const payloads = Array.isArray(data)
+      ? (data as Record<string, SuiteStatsFragment>[])
+      : ([data] as Record<string, SuiteStatsFragment>[])
+
+    for (const chunk of payloads) {
+      if (!chunk) continue
+
+      for (const suite of Object.values(chunk)) {
+        if (!suite?.start) continue
+
+        const suiteStartTime = suite.start instanceof Date
+          ? suite.start.getTime()
+          : (typeof suite.start === 'number' ? suite.start : 0)
+
+        // New run detected if we see a newer start timestamp
+        if (suiteStartTime > this.#lastSeenRunTimestamp) {
+          this.#lastSeenRunTimestamp = suiteStartTime
+          return true
+        }
+      }
+    }
+    return false
+  }
+
+  #resetExecutionData() {
+    // Clear ONLY execution visualization data
+    this.mutationsContextProvider.setValue([])
+    this.commandsContextProvider.setValue([])
+    this.logsContextProvider.setValue([])
+    this.consoleLogsContextProvider.setValue([])
+
+    // Keep suitesContextProvider intact - test list stays visible
+    // Keep metadata and sources - they're environment-level
+
+    // Force synchronous re-render
+    this.#host.requestUpdate()
+  }
+
+  #handleMutationsUpdate(data: TraceMutation[]) {
+    this.mutationsContextProvider.setValue([
+      ...(this.mutationsContextProvider.value || []),
+      ...data
+    ])
+  }
+
+  #handleCommandsUpdate(data: CommandLog[]) {
+    this.commandsContextProvider.setValue([
+      ...(this.commandsContextProvider.value || []),
+      ...data
+    ])
+  }
+
+  #handleConsoleLogsUpdate(data: string[]) {
+    this.consoleLogsContextProvider.setValue([
+      ...(this.consoleLogsContextProvider.value || []),
+      ...data
+    ])
+  }
+
+  #handleMetadataUpdate(data: Metadata) {
+    this.metadataContextProvider.setValue({
+      ...this.metadataContextProvider.value,
+      ...data
+    })
+  }
+
+  #handleSourcesUpdate(data: Record<string, string>) {
+    const merged = {
+      ...(this.sourcesContextProvider.value || {}),
+      ...data
+    }
+    this.sourcesContextProvider.setValue(merged)
+    console.debug('Merged sources keys', Object.keys(merged))
+  }
+
+  #handleSuitesUpdate(data: unknown) {
+    const payloads = Array.isArray(data)
+      ? (data as Record<string, SuiteStatsFragment>[])
+      : ([data] as Record<string, SuiteStatsFragment>[])
+
+    const suiteMap = new Map<string, SuiteStatsFragment>()
+
+    // Populate with existing suites (keeps test list visible)
+    ;(this.suitesContextProvider.value || []).forEach((chunk) => {
+      Object.entries(chunk as Record<string, SuiteStatsFragment>).forEach(
+        ([uid, suite]) => {
+          if (suite?.uid) {
+            suiteMap.set(uid, suite)
+          }
+        }
+      )
+    })
+
+    // Process incoming payloads
+    payloads.forEach((chunk) => {
+      if (!chunk) return
+
+      Object.entries(chunk).forEach(([uid, suite]) => {
+        if (!suite?.uid) return
+
+        const existing = suiteMap.get(uid)
+
+        // Always merge to preserve all tests in the suite
+        suiteMap.set(uid, existing ? this.#mergeSuite(existing, suite) : suite)
+      })
+    })
+
+    this.suitesContextProvider.setValue(
+      Array.from(suiteMap.entries()).map(([uid, suite]) => ({ [uid]: suite }))
+    )
+  }
+
+  #getTimestamp(date: Date | number | undefined): number {
+    if (!date) return 0
+    return date instanceof Date ? date.getTime() : date
+  }
+
+  #handleGenericUpdate(scope: keyof TraceLog, data: any) {
+    const providerMap = {
+      mutations: this.mutationsContextProvider,
+      logs: this.logsContextProvider,
+      consoleLogs: this.consoleLogsContextProvider,
+      metadata: this.metadataContextProvider,
+      commands: this.commandsContextProvider,
+      sources: this.sourcesContextProvider,
+      suites: this.suitesContextProvider
+    } as const
+
+    const provider = providerMap[scope as keyof typeof providerMap]
+    if (provider) {
+      provider.setValue(data)
+    }
+  }
+
+  #mergeSuite(existing: SuiteStatsFragment, incoming: SuiteStatsFragment) {
+    // Note: Rerun detection and clearing is now handled in #handleSuitesUpdate
+    // before any merges happen, so data is cleared proactively
+
+    // First merge tests and suites properly
+    const mergedTests = this.#mergeTests(existing.tests, incoming.tests)
+    const mergedSuites = this.#mergeChildSuites(existing.suites, incoming.suites)
+
+    // Then merge suite properties, ensuring merged tests/suites are preserved
+    const { tests: _incomingTests, suites: _incomingSuites, ...incomingProps } = incoming
+
+    return {
+      ...existing,
+      ...incomingProps,
+      tests: mergedTests,
+      suites: mergedSuites
+    }
+  }
+
+  #mergeChildSuites(
+    prev: SuiteStatsFragment[] = [],
+    next: SuiteStatsFragment[] = []
+  ) {
+    const map = new Map<string, SuiteStatsFragment>()
+    prev?.forEach((suite) => suite && map.set(suite.uid, suite))
+
+    next?.forEach((suite) => {
+      if (!suite) return
+      const existing = map.get(suite.uid)
+      map.set(suite.uid, existing ? this.#mergeSuite(existing, suite) : suite)
+    })
+
+    return Array.from(map.values())
+  }
+
+  #mergeTests(
+    prev: TestStatsFragment[] = [],
+    next: TestStatsFragment[] = []
+  ) {
+    const map = new Map<string, TestStatsFragment>()
+    prev?.forEach((test) => test && map.set(test.uid, test))
+
+    next?.forEach((test) => {
+      if (!test) return
+      const existing = map.get(test.uid)
+
+      // Check if this test is a rerun (different start time)
+      const isRerun =
+        existing &&
+        test.start &&
+        existing.start &&
+        this.#getTimestamp(test.start) !== this.#getTimestamp(existing.start)
+
+      // Replace on rerun, merge on normal update
+      map.set(test.uid, isRerun ? test : existing ? { ...existing, ...test } : test)
+    })
+
+    return Array.from(map.values())
+  }
+
   loadTraceFile(traceFile: TraceLog) {
     localStorage.setItem(CACHE_ID, JSON.stringify(traceFile))
     this.mutationsContextProvider.setValue(traceFile.mutations)

packages/app/src/vite-env.d.ts

@@ -23,4 +23,5 @@ interface GlobalEventHandlersEventMap {
   'app-logs': CustomEvent<string>
   'load-trace': CustomEvent<TraceLog>
   'show-command': CustomEvent<CommandEventProps>
+  'clear-execution-data': CustomEvent<void>
 }