test: add WXT test engineering (#11)

* test: add WXT test engineering
* docs: sync Chinese README testing section

Author: jevin98

.gitignore

@@ -13,6 +13,9 @@ stats.html
 stats-*.json
 .wxt
 web-ext.config.ts
+coverage
+playwright-report
+test-results
 
 # Editor directories and files
 .vscode/*

README.md

@@ -80,6 +80,20 @@ Package extensions:
 pnpm zip
 ```
 
+## Testing
+
+This project uses Vitest for unit/component tests and Playwright for a built-panel smoke test.
+
+```sh
+pnpm test
+pnpm test:coverage
+pnpm test:e2e
+```
+
+-`pnpm test` runs fast Vitest tests for pure CSS diff utilities, DOM style formatting, and the Vue DevTools panel shell.
+-`pnpm test:coverage` generates local coverage output under `coverage/`.
+-`pnpm test:e2e` builds the Chrome extension first, then serves `.output/chrome-mv3` locally and verifies that the built DevTools panel renders.
+
 ## Tech Stack
 
 -[WXT](https://wxt.dev/) for browser extension development

README.zh-CN.md

@@ -80,6 +80,20 @@ pnpm build:edge
 pnpm zip
 ```
 
+## 测试
+
+本项目使用 Vitest 进行单元/组件测试，并使用 Playwright 对构建后的面板做冒烟测试。
+
+```sh
+pnpm test
+pnpm test:coverage
+pnpm test:e2e
+```
+
+-`pnpm test` 会运行快速 Vitest 测试，覆盖 CSS diff 纯工具、DOM 样式格式化和 Vue DevTools 面板外壳。
+-`pnpm test:coverage` 会在本地 `coverage/` 目录下生成覆盖率报告。
+-`pnpm test:e2e` 会先构建 Chrome 扩展，然后在本地服务 `.output/chrome-mv3` 并验证构建后的 DevTools 面板可以正常渲染。
+
 ## 技术栈
 
 -[WXT](https://wxt.dev/) 用于浏览器扩展开发

entrypoints/devtools-panel/hooks/useDevToolsPanel.ts

@@ -3,7 +3,7 @@ import { useClipboard } from '@vueuse/core'
 import{ElMessage}from'element-plus'
 import{t}from'../lang'
 importSMfrom'../message'
-import{formatStyle,typeFormatStyleValue}from'../utils'
+import{compareStyles,formatStyle,typeFormatStyleValue,getVisibleCssDiffs}from'../utils'
 
 exportfunctionuseDevToolsPanel(){
 constinputValue=ref('')
@@ -83,40 +83,17 @@ export function useDevToolsPanel() {
 functioncompareSelectedEl(){
 const[{style: styles1={}},{style: styles2={}}]=selectedEl
 
-constdiffs: Array<CssDiffsType>=[]
-
-constallProperties=newSet([
- ...Object.keys(styles1),
- ...Object.keys(styles2),
-])
-
-allProperties.forEach((property)=>{
-constleft=styles1[property]||'未定义'
-constright=styles2[property]||'未定义'
-
-diffs.push({
- property,
- left,
- right,
-isDiff: left!==right,
-})
-})
-
-cssDiffs.push(...diffs)
+cssDiffs.length=0
+cssDiffs.push(...compareStyles(styles1,styles2))
 }
 
 constrenderCssDiffs=computed(()=>{
-returninputValueFilter(isAllProperty.value
- ? cssDiffs
- : cssDiffs.filter(css=>css.isDiff),inputValue.value)
+returngetVisibleCssDiffs(cssDiffs,{
+isAllProperty: isAllProperty.value,
+inputValue: inputValue.value,
+})
 })
 
-functioninputValueFilter(cssDiffs: Array<CssDiffsType>,inputValue: string){
-return!inputValue
- ? cssDiffs
- : cssDiffs.filter(c=>c.property.includes(inputValue))
-}
-
 functiononTableCellClassName({ columnIndex }: {columnIndex: number}){
 return!columnIndex ? 'text-[var(--el-table-text-color)] cursor-auto' : ''
 }

entrypoints/devtools-panel/message.ts

@@ -13,18 +13,18 @@ class SendMessage {
 privateasyncinit(){
 const[currentTab]=awaitbrowser.tabs.query({active: true})
 
-this.currentTabId=currentTab.id!
+this.currentTabId=currentTab?.id
 }
 
 publicasyncsend(data: Array<SelectedElType>){
 constwindows=awaitbrowser.windows.getAll({populate: true});
 
 (windowsasunknownasArray<_Window>).forEach((window)=>{
 for(consttabofwindow.tabs){
-if(tab.id!==this.currentTabId){
+if(tab.id!=null&&tab.id!==this.currentTabId){
 // Send selected data to other windows/tabs
 browser.tabs.sendMessage(
-tab.id!,
+tab.id,
 data,
 )
 }

entrypoints/devtools-panel/utils/cssDiff.ts

@@ -0,0 +1,50 @@
+importtype{CssDiffsType}from'../types'
+
+exporttypeCssStyleRecord=Record<string,string|null|undefined>
+
+constMISSING_STYLE_VALUE='未定义'
+
+functionnormalizeStyleValue(value: string|null|undefined){
+returnvalue||MISSING_STYLE_VALUE
+}
+
+exportfunctioncompareStyles(
+leftStyles: CssStyleRecord={},
+rightStyles: CssStyleRecord={},
+): Array<CssDiffsType>{
+constallProperties=newSet([
+ ...Object.keys(leftStyles),
+ ...Object.keys(rightStyles),
+])
+
+returnArray.from(allProperties,(property)=>{
+constleft=normalizeStyleValue(leftStyles[property])
+constright=normalizeStyleValue(rightStyles[property])
+
+return{
+ property,
+ left,
+ right,
+isDiff: left!==right,
+}
+})
+}
+
+exportfunctiongetVisibleCssDiffs(
+cssDiffs: Array<CssDiffsType>,
+{
+ isAllProperty,
+ inputValue,
+}: {
+isAllProperty: boolean
+inputValue: string
+},
+): Array<CssDiffsType>{
+constsource=isAllProperty
+ ? cssDiffs
+ : cssDiffs.filter(css=>css.isDiff)
+
+returninputValue
+ ? source.filter(css=>css.property.includes(inputValue))
+ : [...source]
+}

entrypoints/devtools-panel/utils/formatStyle.ts

@@ -2,22 +2,24 @@ export interface FormatStyleValue {
 tag: string
 id?: string
 class?: string
-style?: Record<string,any>
+style?: Record<string,string>
 }
 
-exportfunctionformatStyle(element: Element): FormatStyleValue|null{
+exportfunctionformatStyle(element: Element|null): FormatStyleValue|null{
 if(!element){
 returnnull
 }
 
 conststyles=(elementasNode)?.ownerDocument?.defaultView?.getComputedStyle(element)
-constoutValue: Record<string,any>={}
+constoutValue: Record<string,string>={}
 
 if(styles){
-for(leti=0;i<=styles.length;i++){
-constStyleKey=styles[i]
-constStyleValue=styles.getPropertyValue(StyleKey)
-outValue[StyleKey]=StyleValue
+for(leti=0;i<styles.length;i++){
+conststyleKey=styles[i]
+
+if(styleKey){
+outValue[styleKey]=styles.getPropertyValue(styleKey)
+}
 }
 }
 

entrypoints/devtools-panel/utils/index.ts

@@ -1,2 +1,3 @@
 export*from'./array'
+export*from'./cssDiff'
 export*from'./formatStyle'

package.json

@@ -18,6 +18,11 @@
 "zip:firefox": "wxt zip -b firefox --mv3",
 "zip:edge": "wxt zip -b edge",
 "compile": "vue-tsc --noEmit",
+"test": "pnpm test:unit",
+"test:unit": "vitest run",
+"test:watch": "vitest",
+"test:coverage": "vitest run --coverage",
+"test:e2e": "pnpm build:chrome && playwright test",
 "postinstall": "wxt prepare",
 "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
  },
@@ -28,14 +33,20 @@
  },
 "devDependencies": {
 "@antfu/eslint-config": "^3.12.0",
+"@playwright/test": "^1.60.0",
 "@tailwindcss/vite": "^4.3.0",
 "@types/chrome": "^0.0.280",
+"@vitejs/plugin-vue": "^6.0.6",
+"@vitest/coverage-v8": "^4.1.6",
+"@vue/test-utils": "^2.4.10",
 "@vueuse/core": "^12.0.0",
 "@wxt-dev/module-vue": "^1.0.3",
 "conventional-changelog-cli": "^5.0.0",
 "eslint": "^9.17.0",
+"happy-dom": "^20.9.0",
 "tailwindcss": "^4.3.0",
 "typescript": "5.6.3",
+"vitest": "^4.1.6",
 "vue-tsc": "^2.1.10",
 "wxt": "^0.20.26"
  }

playwright.config.ts

@@ -0,0 +1,33 @@
+import{existsSync}from'node:fs'
+importprocessfrom'node:process'
+import{defineConfig}from'@playwright/test'
+
+constchromiumExecutablePath=[
+process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE,
+'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
+'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
+'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
+'C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe',
+'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+'/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge',
+'/usr/bin/google-chrome',
+'/usr/bin/chromium',
+'/usr/bin/chromium-browser',
+].find((value): value is string=>Boolean(value&&existsSync(value)))
+
+exportdefaultdefineConfig({
+testDir: './tests/e2e',
+timeout: 60_000,
+expect: {
+timeout: 5_000,
+},
+fullyParallel: false,
+reporter: 'list',
+use: {
+browserName: 'chromium',
+launchOptions: chromiumExecutablePath
+ ? {executablePath: chromiumExecutablePath}
+ : undefined,
+trace: 'retain-on-failure',
+},
+})