Unit test case for service package

Author: vishnuv688

.github/workflows/ci.yml

@@ -32,6 +32,8 @@ jobs:
           run_install: false
       - name: Install dependencies
         run: pnpm install
+      - name: Lint
+        run: pnpm lint
       - name: 📦 Bundle
         run: pnpm -r --workspace-concurrency=1 build
       - name: 🧪 Run Tests

package.json

@@ -6,7 +6,12 @@
     "demo": "wdio run ./example/wdio.conf.ts",
     "dev": "pnpm --parallel dev",
     "preview": "pnpm --parallel preview",
-    "test": "pnpm --parallel test",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "test:debug": "node --inspect-brk ./node_modules/.bin/vitest run",
+    "lint": "pnpm --parallel lint",
     "watch": "pnpm build --watch"
   },
   "pnpm": {
@@ -26,6 +31,7 @@
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-unicorn": "^62.0.0",
+    "happy-dom": "^20.0.11",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.5.6",
     "postcss-lit": "^1.2.0",

packages/app/package.json

@@ -13,7 +13,7 @@
     "dev": "vite build --watch",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "test": "eslint ."
+    "lint": "eslint ."
   },
   "dependencies": {
     "@codemirror/lang-javascript": "^6.2.4",
@@ -32,15 +32,18 @@
   "author": "Christian Bromann <mail@bromann.dev>",
   "license": "MIT",
   "devDependencies": {
+    "@open-wc/testing": "^4.0.0",
     "@tailwindcss/postcss": "^4.1.18",
     "@wdio/reporter": "9.18.0",
     "autoprefixer": "^10.4.21",
+    "happy-dom": "^16.8.0",
     "postcss": "^8.5.6",
     "postcss-import": "^16.1.1",
     "rollup": "^4.47.0",
     "stylelint": "^16.24.0",
     "stylelint-config-recommended": "^17.0.0",
     "stylelint-config-tailwindcss": "^1.0.0",
-    "tailwindcss": "~4.1.18"
+    "tailwindcss": "~4.1.18",
+    "vitest": "^4.0.16"
   }
 }

packages/backend/package.json

@@ -20,7 +20,7 @@
     "dev:ts": "tsc --watch",
     "dev:app": "nodemon --watch ./dist ./dist/index.js",
     "build": "tsc -p ./tsconfig.json",
-    "test": "eslint ."
+    "lint": "eslint ."
   },
   "dependencies": {
     "@fastify/static": "^9.0.0",

packages/script/package.json

@@ -16,7 +16,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "test": "eslint ."
+    "lint": "eslint ."
   },
   "dependencies": {
     "htm": "^3.1.1",

packages/script/tests/preload.test.ts

@@ -31,7 +31,7 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc && vite build",
-    "test": "eslint ."
+    "lint": "eslint ."
   },
   "dependencies": {
     "@babel/types": "^7.28.4",

packages/service/package.json

@@ -0,0 +1,112 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import DevToolsHookService from '../src/index.js'
+
+const fakeFrame = {
+  getFileName: () => '/test/specs/fake.spec.ts',
+  getLineNumber: () => 1,
+  getColumnNumber: () => 1
+}
+// Create mock instance that will be returned by SessionCapturer constructor
+vi.mock('stack-trace', () => ({
+  parse: () => [fakeFrame]
+}))
+const mockSessionCapturerInstance = {
+  afterCommand: vi.fn(),
+  sendUpstream: vi.fn(),
+  injectScript: vi.fn().mockResolvedValue(undefined),
+  commandsLog: [],
+  sources: new Map(),
+  mutations: [],
+  traceLogs: [],
+  consoleLogs: [],
+  isReportingUpstream: false
+}
+
+vi.mock('../src/session.js', () => ({
+  SessionCapturer: vi.fn(function (this: any) {
+    return mockSessionCapturerInstance
+  })
+}))
+
+describe('DevtoolsService - Internal Command Filtering', () => {
+  let service: DevToolsHookService
+  const mockBrowser = {
+    isBidi: true,
+    sessionId: 'test-session',
+    scriptAddPreloadScript: vi.fn().mockResolvedValue(undefined),
+    takeScreenshot: vi.fn().mockResolvedValue('screenshot'),
+    execute: vi.fn().mockResolvedValue({
+      width: 1200,
+      height: 800,
+      offsetLeft: 0,
+      offsetTop: 0
+    })
+  } as any
+
+  // Helper to execute a command (before + after)
+  const executeCommand = (
+    cmd: string,
+    args: any[] = [],
+    result: any = undefined
+  ) => {
+    service.beforeCommand(cmd as any, args)
+    service.afterCommand(cmd as any, args, result)
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockSessionCapturerInstance.afterCommand.mockClear()
+    mockSessionCapturerInstance.sendUpstream.mockClear()
+    service = new DevToolsHookService()
+  })
+
+  describe('beforeCommand', () => {
+    it('should not add internal commands to command stack', () => {
+      const internalCommands = [
+        'getTitle',
+        'waitUntil',
+        'getUrl',
+        'execute',
+        'findElement'
+      ]
+      internalCommands.forEach((cmd) => service.beforeCommand(cmd as any, []))
+      expect(true).toBe(true)
+    })
+
+    it('should add user commands to command stack', () => {
+      ;['click', 'url', 'getText'].forEach((cmd, i) => {
+        const args = [['.button', 'https://example.com', '.result'][i]]
+        service.beforeCommand(cmd as any, args)
+      })
+      expect(true).toBe(true)
+    })
+  })
+
+  describe('afterCommand - internal command filtering', () => {
+    beforeEach(async () => {
+      await service.before({} as any, [], mockBrowser)
+      vi.clearAllMocks()
+      mockSessionCapturerInstance.afterCommand.mockClear()
+    })
+
+    it('should filter mixed internal and user commands correctly', () => {
+      // Execute mix of user and internal commands
+      executeCommand('url', ['https://example.com'])
+      executeCommand('getTitle', [], 'Page Title') // internal
+      executeCommand('click', ['.button'])
+      executeCommand('waitUntil', [expect.any(Function)], true) // internal
+      executeCommand('getText', ['.result'], 'Success')
+
+      // Only user commands (url, click, getText) should be captured
+      expect(mockSessionCapturerInstance.afterCommand).toHaveBeenCalledTimes(3)
+
+      const capturedCommands =
+        mockSessionCapturerInstance.afterCommand.mock.calls.map(
+          (call) => call[1]
+        )
+      expect(capturedCommands).toEqual(['url', 'click', 'getText'])
+      expect(capturedCommands).not.toContain('getTitle')
+      expect(capturedCommands).not.toContain('waitUntil')
+    })
+  })
+})