Add QR config validation and browser testing setup (#248)

This pull request adds comprehensive test coverage for utility functions and refactors QR code configuration management.

**Testing Infrastructure:**
- Configures Vitest with a workspace setup separating Node.js and browser test environments
- Adds browser testing capabilities using Playwright for DOM-dependent functionality
- Installs required testing dependencies including `@vitest/browser` and additional Playwright version

**New Utility Functions:**
- Adds CSS validation utilities (`isValidCSSColor`, `isValidCSSLength`) using the browser's CSS.supports API
- Implements frame configuration validation functions (`isValidFrameStyle`, `isValidFrameConfig`) 
- Creates QR code configuration validation (`isValidQRCodeConfig`)

**QR Code Storage Refactoring:**
- Extracts storage logic into a dedicated `useQRCodeStorage` module with proper TypeScript interfaces
- Centralizes localStorage operations with validation and error handling
- Moves configuration constants and helper functions to the new storage module

**Test Coverage:**
- Adds comprehensive unit tests for CSS validation functions
- Tests frame preset validation with various valid/invalid inputs
- Covers QR code configuration serialization, storage, and retrieval
- Validates error handling for malformed JSON and invalid configurations

**ESLint Configuration:**
- Excludes additional directories (`scripts/**`, `*.json`) from linting
- Adds `CSS` global for browser CSS API usage

Author: lyqht

.github/workflows/test.yml

@@ -0,0 +1,38 @@
+name: Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    name: Unit & Browser Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Install Playwright Chromium
+        run: pnpm exec playwright install chromium --with-deps
+
+      - name: Run tests
+        run: pnpm vitest run

eslint.config.js

@@ -13,7 +13,9 @@ export default [
       'node_modules/**',
       '*.config.js',
       'public/**',
-      'pnpm-lock.yaml'
+      'pnpm-lock.yaml',
+      'scripts/**',
+      '*.json'
     ]
   },
   js.configs.recommended,
@@ -58,6 +60,7 @@ export default [
         Node: 'readonly',
         XMLSerializer: 'readonly',
         ClipboardItem: 'readonly',
+        CSS: 'readonly',
         DataTransferItemList: 'readonly',
         RequestInit: 'readonly',
         Response: 'readonly',

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.13.1",
   "type": "module",
+  "packageManager": "pnpm@8.14.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -51,17 +52,20 @@
     "vue-i18n": "^9.14.2"
   },
   "devDependencies": {
+    "@eslint/js": "^9",
     "@playwright/test": "^1.51.1",
     "@tailwindcss/typography": "^0.5.16",
     "@types/dom-to-image": "^2.6.7",
     "@types/node": "^20.17.23",
     "@typescript-eslint/parser": "^8.46.2",
+    "@vitest/browser": "^3.1.2",
     "@vue/eslint-config-typescript": "^14.6.0",
     "eslint": "^9",
     "eslint-plugin-tailwindcss": "^3.18.2",
     "eslint-plugin-vue": "^10.5.1",
     "husky": "^8.0.3",
     "lint-staged": "^15.4.3",
+    "playwright": "^1.58.2",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.7.1",