Code refactor

Author: vishnuv688

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

@@ -0,0 +1,10 @@
+import type { RunCapabilities } from './types.js'
+
+export const DEFAULT_CAPABILITIES: RunCapabilities = {
+  canRunSuites: true,
+  canRunTests: true
+}
+
+export const FRAMEWORK_CAPABILITIES: Record<string, RunCapabilities> = {
+  cucumber: { canRunSuites: true, canRunTests: false }
+}

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

@@ -5,8 +5,19 @@ import { consume } from '@lit/context'
 import type { TestStats, SuiteStats } from '@wdio/reporter'
 import type { Metadata } from '@wdio/devtools-service/types'
 import { repeat } from 'lit/directives/repeat.js'
-import { TestState } from './test-suite.js'
-import { suiteContext, metadataContext } from '../../controller/DataManager.js'
+import {
+  suiteContext,
+  metadataContext,
+  isTestRunningContext
+} from '../../controller/DataManager.js'
+import type {
+  TestEntry,
+  RunCapabilities,
+  RunnerOptions,
+  TestRunDetail
+} from './types.js'
+import { TestState } from './types.js'
+import { DEFAULT_CAPABILITIES, FRAMEWORK_CAPABILITIES } from './constants.js'
 
 import '~icons/mdi/play.js'
 import '~icons/mdi/stop.js'
@@ -17,45 +28,9 @@ import '~icons/mdi/expand-all.js'
 import './test-suite.js'
 import { CollapseableEntry } from './collapseableEntry.js'
 import type { DevtoolsSidebarFilter } from './filter.js'
-import type { TestRunDetail } from './test-suite.js'
 
 const EXPLORER = 'wdio-devtools-sidebar-explorer'
 
-interface TestEntry {
-  uid: string
-  state?: string
-  label: string
-  callSource?: string
-  children: TestEntry[]
-  type: 'suite' | 'test'
-  specFile?: string
-  fullTitle?: string
-  featureFile?: string
-  featureLine?: number
-  suiteType?: string
-}
-
-interface RunCapabilities {
-  canRunSuites: boolean
-  canRunTests: boolean
-}
-
-type RunnerOptions = {
-  framework?: string
-  configFile?: string
-  configFilePath?: string
-  runCapabilities?: Partial<RunCapabilities>
-}
-
-const DEFAULT_CAPABILITIES: RunCapabilities = {
-  canRunSuites: true,
-  canRunTests: true
-}
-
-const FRAMEWORK_CAPABILITIES: Record<string, RunCapabilities> = {
-  cucumber: { canRunSuites: true, canRunTests: false }
-}
-
 @customElement(EXPLORER)
 export class DevtoolsSidebarExplorer extends CollapseableEntry {
   #testFilter: DevtoolsSidebarFilter | undefined
@@ -93,6 +68,9 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
   @consume({ context: metadataContext, subscribe: true })
   metadata: Metadata | undefined = undefined
 
+  @consume({ context: isTestRunningContext, subscribe: true })
+  isTestRunning = false
+
   connectedCallback(): void {
     super.connectedCallback()
     window.addEventListener('app-test-filter', this.#filterListener)

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

@@ -3,6 +3,8 @@ import { html, css, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { CollapseableEntry } from './collapseableEntry.js'
+import type { TestRunDetail } from './types.js'
+import { TestState } from './types.js'
 
 import '~icons/mdi/chevron-right.js'
 import '~icons/mdi/play.js'
@@ -18,19 +20,6 @@ import '~icons/mdi/checkbox-blank-circle-outline.js'
 
 const TEST_SUITE = 'wdio-test-suite'
 
-export interface TestRunDetail {
-  uid: string
-  entryType: 'suite' | 'test'
-  specFile?: string
-  fullTitle?: string
-  label?: string
-  callSource?: string
-  configFile?: string
-  featureFile?: string
-  featureLine?: number
-  suiteType?: string
-}
-
 @customElement(TEST_SUITE)
 export class ExplorerTestSuite extends Element {
   static styles = [
@@ -49,13 +38,6 @@ export class ExplorerTestSuite extends Element {
   }
 }
 
-export enum TestState {
-  PASSED = 'passed',
-  FAILED = 'failed',
-  RUNNING = 'running',
-  SKIPPED = 'skipped'
-}
-
 const TEST_ENTRY = 'wdio-test-entry'
 @customElement(TEST_ENTRY)
 export class ExplorerTestEntry extends CollapseableEntry {

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

@@ -0,0 +1,45 @@
+export interface TestEntry {
+  uid: string
+  state?: string
+  label: string
+  callSource?: string
+  children: TestEntry[]
+  type: 'suite' | 'test'
+  specFile?: string
+  fullTitle?: string
+  featureFile?: string
+  featureLine?: number
+  suiteType?: string
+}
+
+export interface RunCapabilities {
+  canRunSuites: boolean
+  canRunTests: boolean
+}
+
+export interface RunnerOptions {
+  framework?: string
+  configFile?: string
+  configFilePath?: string
+  runCapabilities?: Partial<RunCapabilities>
+}
+
+export interface TestRunDetail {
+  uid: string
+  entryType: 'suite' | 'test'
+  specFile?: string
+  fullTitle?: string
+  label?: string
+  callSource?: string
+  configFile?: string
+  featureFile?: string
+  featureLine?: number
+  suiteType?: string
+}
+
+export enum TestState {
+  PASSED = 'passed',
+  FAILED = 'failed',
+  RUNNING = 'running',
+  SKIPPED = 'skipped'
+}

packages/app/src/controller/DataManager.ts

@@ -41,6 +41,9 @@ export const suiteContext = createContext<Record<string, any>[]>(
 )
 
 const hasConnection = createContext<boolean>(Symbol('hasConnection'))
+export const isTestRunningContext = createContext<boolean>(
+  Symbol('isTestRunning')
+)
 
 interface SocketMessage<
   T extends keyof TraceLog | 'testStopped' = keyof TraceLog | 'testStopped'

packages/backend/src/index.ts

@@ -9,7 +9,8 @@ import { WebSocket } from 'ws'
 
 import { getDevtoolsApp } from './utils.js'
 import { DEFAULT_PORT } from './constants.js'
-import { testRunner, type RunnerRequestBody } from './runner.js'
+import { testRunner } from './runner.js'
+import type { RunnerRequestBody } from './types.js'
 
 let server: FastifyInstance | undefined
 

packages/backend/src/runner.ts

@@ -4,42 +4,19 @@ import path from 'node:path'
 import url from 'node:url'
 import { createRequire } from 'node:module'
 import kill from 'tree-kill'
+import type { RunnerRequestBody } from './types.js'
+import { WDIO_CONFIG_FILENAMES } from './types.js'
 
 const require = createRequire(import.meta.url)
 const wdioBin = resolveWdioBin()
 
-const WDIO_CONFIG_FILENAMES = [
-  'wdio.conf.ts',
-  'wdio.conf.js',
-  'wdio.conf.cjs',
-  'wdio.conf.mjs'
-]
-
 /**
  * Escape special regex characters in a string
  */
 function escapeRegex(str: string): string {
   return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 }
 
-export interface RunnerRequestBody {
-  uid: string
-  entryType: 'suite' | 'test'
-  specFile?: string
-  fullTitle?: string
-  label?: string
-  callSource?: string
-  runAll?: boolean
-  framework?: string
-  configFile?: string
-  lineNumber?: number
-  devtoolsHost?: string
-  devtoolsPort?: number
-  featureFile?: string
-  featureLine?: number
-  suiteType?: string
-}
-
 const FRAMEWORK_FILTERS: Record<
   string,
   (ctx: { specArg?: string; payload: RunnerRequestBody }) => string[]

packages/backend/src/types.ts

@@ -0,0 +1,24 @@
+export const WDIO_CONFIG_FILENAMES = [
+  'wdio.conf.ts',
+  'wdio.conf.js',
+  'wdio.conf.cjs',
+  'wdio.conf.mjs'
+] as const
+
+export interface RunnerRequestBody {
+  uid: string
+  entryType: 'suite' | 'test'
+  specFile?: string
+  fullTitle?: string
+  label?: string
+  callSource?: string
+  runAll?: boolean
+  framework?: string
+  configFile?: string
+  lineNumber?: number
+  devtoolsHost?: string
+  devtoolsPort?: number
+  featureFile?: string
+  featureLine?: number
+  suiteType?: string
+}