Migrate test framework from Jest/jest-electron to Playwright with coverage collection

[Copilot]

Migration Plan: Jest + jest-electron → Playwright

• 1. Install Playwright dependencies and create basic config
  • Add @playwright/test to devDependencies
  • Remove jest, jest-electron, babel-jest from devDependencies
  • Create playwright.config.js with appropriate settings
• 2. Set up test infrastructure
  • Create tests/ directory structure
  • Create test fixture HTML page for loading the library
  • Create utility helpers for tests (e.g., injectStyle)
• 3. Migrate test files from tests to tests/
  • Migrate index.spec.js (export/version checks, demo test with bind)
  • Migrate unbind.spec.js (clear and unbind behavior)
  • Migrate issue-17.spec.js (memory leak test with Sensors pool)
• 4. Update package.json scripts
  • Change test script to run Playwright
  • Update debug script appropriately
  • Remove jest configuration section
• 5. Update CI workflow
  • Add Playwright browser installation step
  • Ensure tests run correctly in CI
• 6. Verify and cleanup
  • Remove tests directory
  • Update .gitignore for Playwright artifacts
  • Fix module exports consistency
  • Run code review and address feedback
  • Run security checks (0 alerts found)
  • Add package-lock.json to .gitignore
• 7. Configure coverage collection
  • Build test version with source maps using rollup
  • Implement Playwright V8 coverage API integration
  • Add v8-to-istanbul for coverage format conversion
  • Configure nyc for coverage reporting

Summary

Successfully migrated from Jest + jest-electron to Playwright testing framework with full coverage collection from source files. All 3 original test files have been migrated to run in real browsers (Chromium, Firefox, WebKit).

Coverage Collection

Coverage is collected from source files (src/) using:

• Test Build: Rollup generates unminified dist/size-sensor.test.js with source maps
• Coverage Collection: Playwright's V8 coverage API captures coverage data during test execution in Chromium
• Source Mapping: v8-to-istanbul converts V8 coverage to Istanbul format and maps it back to source files via source maps
• Reporting: NYC generates HTML, text, and lcov coverage reports

Run npm test to execute tests and automatically generate coverage reports in the coverage/ directory.

Test Coverage

The tests cover:

• Export/version verification
• bind/clear/unbind behavior with size-sensor-id attributes
• Memory leak prevention (issue 只调用 unbind 不调用 clear 的话存在内存泄漏 #17 - Sensors pool cleanup)

Tests will run in CI with npm test after browsers are installed via npx playwright install --with-deps.

Original prompt

在仓库 hustcc/size-sensor 的 master 分支上，按 issue #23 进行测试框架迁移：将现有 jest + jest-electron 的测试迁移为基于真实浏览器的 Playwright 测试（用户选择方案 B）。

Issue: https://github.com/hustcc/size-sensor/issues/23

当前情况（基于 commit ref b9be27ef358a32546110c011bc2fa587e23ec62e 观察到的现状，用于参考）：

• package.json 中 scripts: test/debug 运行 jest。
• devDependencies 包含 jest, jest-electron, babel-jest。
• package.json 内联 jest 配置使用 runner: jest-electron/runner 与 testEnvironment: jest-electron/environment，testRegex 指向 __tests__/.*\.spec\.jsx?$。
• 存在测试文件：
  • __tests__/index.spec.js
  • __tests__/unbind.spec.js
  • __tests__/issue-17.spec.js

目标：

1. 移除 Jest / jest-electron 测试栈，改为 Playwright（真实浏览器）测试。
2. 尽量精准、最小化改动：优先复用现有测试意图与断言，只在必要处调整测试结构。
3. 更新 package.json：
   • scripts: test 改为运行 Playwright（例如 playwright test），debug 如有需要也调整（可保留或改为 PW debug）。
   • devDependencies: 删除 jest, jest-electron, babel-jest，新增 @playwright/test（及必要辅助依赖）。
4. 新增 Playwright 配置与测试运行所需的最小脚手架：
   • playwright.config.*（指定测试目录、浏览器项目、CI 适配等）
   • 如需静态页面来运行 DOM 测试，增加最小的 test page/fixture（例如 tests/fixtures/index.html），并在测试中通过 page.setContent 或 page.goto 使用。
5. 将 __tests__ 下的用例迁移到 Playwright 测试（建议目录 tests/），保持原有覆盖点：
   • export/ver 断言
   • bind/clear/unbind 行为（包括 size-sensor-id 属性）
   • issue 只调用 unbind 不调用 clear 的话存在内存泄漏 #17 memory leak 行为（Sensors 池清理）
   • 需要用到 getComputedStyle 的场景在浏览器上下文中执行。
   • 如果原测试依赖 node 模块导入，在 Playwright 中需要通过 bundling 或在 page.addScriptTag 注入构建产物：优先选择对现有构建流程影响最小的方式（例如在测试前构建 dist 或 lib 并注入），或使用 @playwright/test 的 page.evaluate 搭配 import（取决于模块形态）。
6. 更新 CI（如必要）：确保在 GitHub Actions 中安装 Playwright 浏览器依赖并运行测试（例如 npx playwright install --with-deps），但尽量只修改必要的 workflow。

验收标准：

• npm test 在本地与 GitHub Actions 上能跑通。
• 仓库不再依赖 jest/jest-electron。
• Playwright 测试覆盖现有 3 个测试文件的核心断言与行为。

注意：响应中的代码链接如需引用仓库文件，请使用 job 提供的 ref（例如 b9be27ef...）进行链接。

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[hustcc]

@copilot 将 lock 文件 git ignore

[Copilot]

@copilot 将 lock 文件 git ignore

Done in df1d86c. Added package-lock.json to .gitignore and removed it from git tracking.

[hustcc]

@copilot 现在的单元测试，测试的是构建出来的 dist 文件，而不是 src 中的源文件，这样会导致单元测试收集不到正确的覆盖率数据，这不是我想要的。

[Copilot]

@copilot 现在的单元测试，测试的是构建出来的 dist 文件，而不是 src 中的源文件，这样会导致单元测试收集不到正确的覆盖率数据，这不是我想要的。

我理解您的需求。当前测试使用构建后的 dist 文件确实无法收集源码覆盖率。

我有几个方案可以解决这个问题：

方案 A: 继续使用 Playwright，但切换到 @web/test-runner（专门为浏览器测试设计，支持源码覆盖率收集）

• 优点：真实浏览器测试 + 源码覆盖率
• 缺点：需要改变测试写法（不用 Playwright API）

方案 B: 使用构建工具（如 rollup）生成带 instrument 的测试版本，配合 Playwright 的 coverage API

• 优点：保持 Playwright 测试不变
• 缺点：配置较复杂

方案 C: 回退到 Jest（或类似的 Vitest），使用 jsdom 而不是 jest-electron

• 优点：覆盖率收集简单
• 缺点：不是真实浏览器环境

您更倾向于哪个方案？或者您有其他期望的实现方式吗？

[hustcc]

@copilot 你不要忽悠我，playwright 也能收集覆盖率的～

[Copilot]

@copilot 你不要忽悠我，playwright 也能收集覆盖率的～

您说得对！已在 9ac807e 中实现 Playwright 覆盖率收集。

实现方案：

• 使用 rollup 构建带 source map 的测试版本（dist/size-sensor.test.js）
• 通过 Playwright 的 V8 coverage API 收集覆盖率数据
• 使用 v8-to-istanbul 将覆盖率转换为 Istanbul 格式
• 通过 source map 映射回 src/ 源文件
• 使用 nyc 生成覆盖率报告（HTML/text/lcov）

使用方式：

npm test  # 运行测试并生成覆盖率报告

覆盖率报告会生成在 coverage/ 目录，包含所有 src/ 源文件的覆盖率数据。