add e2e tests (#22)

.github/workflows/ci.yml

@@ -104,6 +104,12 @@ jobs:
             fcitx5-js.tgz
             fcitx5-js-dev.tar.bz2
 
+      - name: Test
+        run: |
+          npx playwright install
+          npx playwright install-deps
+          pnpm run test
+
       - name: Setup tmate session
         if: ${{ failure() }}
         uses: mxschmitt/action-tmate@v3

.gitignore

@@ -8,3 +8,4 @@ node_modules
 pnpm-lock.yaml
 preview/index.js
 preview/index.js.map
+test-results

.vscode/tasks.json

@@ -42,7 +42,7 @@
         {
             "type": "shell",
             "label": "Preview",
-            "command": "npx serve -l 9000 -S preview",
+            "command": "pnpm run preview",
             "group": {
                 "kind": "build"
             }
@@ -70,6 +70,14 @@
             "group": {
                 "kind": "build"
             }
+        },
+        {
+            "type": "shell",
+            "label": "Test",
+            "command": "pnpm run test",
+            "group": {
+                "kind": "build"
+            }
         }
     ]
 }

package.json

@@ -9,16 +9,23 @@
     "dist"
   ],
   "scripts": {
-    "lint": "eslint page",
-    "lint:fix": "eslint page --fix",
+    "lint": "eslint page tests",
+    "lint:fix": "eslint page tests --fix",
     "check": "tsc --noEmit",
     "build": "node scripts/build.mjs",
     "prepack": "bash scripts/prepack.sh",
-    "postpack": "bash scripts/postpack.sh"
+    "postpack": "bash scripts/postpack.sh",
+    "preview": "serve -l 9000 -S preview",
+    "test": "playwright test --browser all",
+    "test:chromium": "playwright test --browser chromium",
+    "test:firefox": "playwright test --browser firefox",
+    "test:webkit": "playwright test --browser webkit"
   },
   "license": "AGPL-3.0-or-later",
   "devDependencies": {
     "@antfu/eslint-config": "^3.12.1",
+    "@playwright/test": "^1.50.1",
+    "@types/node": "^22.13.5",
     "@types/textarea-caret": "^3.0.3",
     "@types/uzip": "^0.20201231.2",
     "error-stack-parser": "^2.1.4",

playwright.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: 'tests',
+  fullyParallel: true,
+  webServer: {
+    command: 'pnpm run preview',
+    port: 9000,
+    reuseExistingServer: true
+  }
+})

preview/index.html

@@ -6,9 +6,9 @@
     <button>click me</button>
     <script type="module">
       import { fcitxReady } from "./Fcitx5.js"
+      window.fcitxReady = fcitxReady
       await fcitxReady
       window.fcitx.enable()
-      window.fcitx.setInputMethods(['pinyin'])
     </script>
   </body>
 </html>

tests/global.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  interface Window {
+    fcitxReady: Promise<void>
+  }
+}
+
+export {}

tests/test-generic.spec.ts

@@ -0,0 +1,39 @@
+import { expect, test } from '@playwright/test'
+import { init } from './util'
+
+test('keyboard-us', async ({ page }) => {
+  const addons: string[] = []
+  page.on('console', (msg) => {
+    const match = msg.text().match(/Loaded addon (\S+)/)
+    if (match) {
+      addons.push(match[1])
+    }
+  })
+
+  await init(page)
+  expect(addons.sort()).toEqual(['clipboard', 'imselector', 'keyboard', 'quickphrase', 'unicode', 'wasmfrontend', 'webpanel'])
+
+  const textarea = page.locator('textarea')
+  await textarea.click()
+  await page.keyboard.press('q')
+  await expect(textarea).toHaveValue('q')
+
+  const input = page.locator('input')
+  await input.click()
+  await page.keyboard.press('w')
+  await expect(input).toHaveValue('w')
+})
+
+test('keyboard-th', async ({ page }) => {
+  await init(page)
+
+  await page.evaluate(async () => {
+    window.fcitx.setInputMethods(['keyboard-th'])
+  })
+  const textarea = page.locator('textarea')
+  await textarea.click()
+  for (const key of 'l;ylfu') {
+    await page.keyboard.press(key)
+  }
+  await expect(textarea).toHaveValue('สวัสดี')
+})

tests/util.ts

@@ -0,0 +1,10 @@
+import type {
+  Page,
+} from '@playwright/test'
+
+export async function init(page: Page) {
+  await page.goto('http://localhost:9000')
+  return page.evaluate(() => {
+    return window.fcitxReady
+  })
+}

tsconfig.json

@@ -9,5 +9,5 @@
     "esModuleInterop": true,
     "isolatedModules": true
   },
-  "include": ["page/*.ts"]
+  "include": ["page/*.ts", "tests/*.ts"]
 }