test(e2e): composition events

e2e-tests/editor.spec.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 import { test } from './fixtures'
-import { createRandomPage, IsMac } from './utils'
-import { dispatch_kb_events, press_with_events, macos_pinyin_left_full_bracket } from './util/keyboard-events'
+import { createRandomPage } from './utils'
+import { dispatch_kb_events } from './util/keyboard-events'
 import * as kb_events from './util/keyboard-events'
 
 test(

e2e-tests/util/keyboard-event-cap.html

@@ -9,28 +9,30 @@
       // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
       // without deprecated / non-standard
       "altKey", "code", "ctrlKey", "isComposing", "key", "locale", "location", "metaKey",
-      "repeat", "shiftKey",
-      // empiricial
-      "composed"
+      "repeat", "shiftKey"
     ]
 
     let output_list = [];
+    let last_timestamp = Date.now();
 
     function select_keys(obj, keys) {
       let new_obj = {}
       for (let k in event)
         if (keys.indexOf(k) != -1)
-          new_obj[k] = event[k]
+          new_obj[k] = event[k];
       return new_obj
     }
 
     let key_handler_builder = (event_type) => (event) => {
       if (event["target"].id != "input")
         return;
+      let cur_timestamp = Date.now();
       let output = {
         "event_type": event_type,
-        "event": select_keys(event, keys)
+        "event": select_keys(event, keys),
+        "latency": cur_timestamp - last_timestamp // Time to wait before firing event
       }
+      last_timestamp = cur_timestamp;
       output_list.push(output);
       let to_print = JSON.stringify(
         output_list,
@@ -41,6 +43,10 @@
 
     document.addEventListener('keydown', key_handler_builder('keydown'), false);
     document.addEventListener('keyup', key_handler_builder('keyup'), false);
+    document.addEventListener('keypress', key_handler_builder('keypress'), false);
+    document.addEventListener('compositionstart', key_handler_builder('compositionstart'), false);
+    document.addEventListener('compositionend', key_handler_builder('compositionend'), false);
+    document.addEventListener('compositionupdate', key_handler_builder('compositionupdate'), false);
 
     window.onload = (e) => {
       document.getElementById("input").focus();

e2e-tests/util/keyboard-events.ts

@@ -1,11 +1,14 @@
+/*** 
+ * Author: Junyi Du <[email protected]>
+ * References:
+ * https://stackoverflow.com/questions/8892238/detect-keyboard-layout-with-javascript
+ * ***/
 
-
-// typing 【
 export let dispatch_kb_events = async function (page, selector, keyboard_events ){
     for (let idx in keyboard_events){
-      let { event_type, event } = keyboard_events[idx]
+      let { event_type, event, latency } = keyboard_events[idx]
+      await page.waitForTimeout(latency)
       await page.dispatchEvent(selector, event_type, event)
-      await page.waitForTimeout(100)
     }
 }
 
@@ -21,9 +24,24 @@ export let macos_pinyin_left_full_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": false,
-      "composed": true
-    }
+      "isComposing": false
+    },
+    "latency": 0
+  },
+  {
+    "event_type": "keypress",
+    "event": {
+      "key": "【",
+      "code": "BracketLeft",
+      "location": 0,
+      "ctrlKey": false,
+      "shiftKey": false,
+      "altKey": false,
+      "metaKey": false,
+      "repeat": false,
+      "isComposing": false
+    },
+    "latency": 1
   },
   {
     "event_type": "keyup",
@@ -36,9 +54,9 @@ export let macos_pinyin_left_full_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": false,
-      "composed": true
-    }
+      "isComposing": false
+    },
+    "latency": 17
   }
 ]
 
@@ -54,9 +72,29 @@ export let win10_pinyin_left_full_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": false,
-      "composed": true
-    }
+      "isComposing": false
+    },
+    "latency": 0
+  },
+  {
+    "event_type": "compositionstart",
+    "event": {},
+    "latency": 4
+  },
+  {
+    "event_type": "compositionupdate",
+    "event": {},
+    "latency": 0
+  },
+  {
+    "event_type": "compositionupdate",
+    "event": {},
+    "latency": 12
+  },
+  {
+    "event_type": "compositionend",
+    "event": {},
+    "latency": 1
   },
   {
     "event_type": "keyup",
@@ -69,9 +107,9 @@ export let win10_pinyin_left_full_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": false,
-      "composed": true
-    }
+      "isComposing": false
+    },
+    "latency": 61
   },
   {
     "event_type": "keyup",
@@ -84,9 +122,9 @@ export let win10_pinyin_left_full_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": false,
-      "composed": true
-    }
+      "isComposing": false
+    },
+    "latency": 1
   }
 ]
 
@@ -102,9 +140,29 @@ export let win10_legacy_pinyin_left_full_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": false,
-      "composed": true
-    }
+      "isComposing": false
+    },
+    "latency": 0
+  },
+  {
+    "event_type": "compositionstart",
+    "event": {},
+    "latency": 1
+  },
+  {
+    "event_type": "compositionupdate",
+    "event": {},
+    "latency": 0
+  },
+  {
+    "event_type": "compositionupdate",
+    "event": {},
+    "latency": 0
+  },
+  {
+    "event_type": "compositionend",
+    "event": {},
+    "latency": 1
   },
   {
     "event_type": "keyup",
@@ -117,9 +175,9 @@ export let win10_legacy_pinyin_left_full_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": false,
-      "composed": true
-    }
+      "isComposing": false
+    },
+    "latency": 93
   }
 ]
 
@@ -135,9 +193,19 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": false,
-      "composed": true
-    }
+      "isComposing": false
+    },
+    "latency": 0
+  },
+  {
+    "event_type": "compositionstart",
+    "event": {},
+    "latency": 1
+  },
+  {
+    "event_type": "compositionupdate",
+    "event": {},
+    "latency": 0
   },
   {
     "event_type": "keyup",
@@ -150,9 +218,9 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+      "isComposing": true
+    },
+    "latency": 48
   },
   {
     "event_type": "keydown",
@@ -165,9 +233,9 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+      "isComposing": true
+    },
+    "latency": 627
   },
   {
     "event_type": "keyup",
@@ -180,9 +248,9 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+      "isComposing": true
+    },
+    "latency": 59
   },
   {
     "event_type": "keydown",
@@ -195,9 +263,9 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+      "isComposing": true
+    },
+    "latency": 289
   },
   {
     "event_type": "keyup",
@@ -210,9 +278,9 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+      "isComposing": true
+    },
+    "latency": 73
   },
   {
     "event_type": "keydown",
@@ -225,9 +293,9 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+      "isComposing": true
+    },
+    "latency": 443
   },
   {
     "event_type": "keyup",
@@ -240,9 +308,9 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+      "isComposing": true
+    },
+    "latency": 79
   },
   {
     "event_type": "keydown",
@@ -255,9 +323,9 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+      "isComposing": true
+    },
+    "latency": 155
   },
   {
     "event_type": "keyup",
@@ -270,9 +338,14 @@ export let macos_pinyin_selecting_candidate_double_left_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+      "isComposing": true
+    },
+    "latency": 44
+  },
+  {
+    "event_type": "compositionend",
+    "event": {},
+    "latency": 968
   }
 ]
 
@@ -281,61 +354,26 @@ export let win10_RIME_selecting_candidate_double_left_bracket = [
     "event_type": "keydown",
     "event": {
       "key": "Process",
-      "code": "KeyA",
+      "code": "BracketRight",
       "location": 0,
       "ctrlKey": false,
       "shiftKey": false,
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": false,
-      "composed": true
-    }
+      "isComposing": false
+    },
+    "latency": 0
   },
   {
-    "event_type": "keyup",
-    "event": {
-      "key": "Process",
-      "code": "KeyA",
-      "location": 0,
-      "ctrlKey": false,
-      "shiftKey": false,
-      "altKey": false,
-      "metaKey": false,
-      "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+    "event_type": "compositionstart",
+    "event": {},
+    "latency": 0
   },
   {
-    "event_type": "keyup",
-    "event": {
-      "key": "a",
-      "code": "KeyA",
-      "location": 0,
-      "ctrlKey": false,
-      "shiftKey": false,
-      "altKey": false,
-      "metaKey": false,
-      "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
-  },
-  {
-    "event_type": "keydown",
-    "event": {
-      "key": "Process",
-      "code": "BracketRight",
-      "location": 0,
-      "ctrlKey": false,
-      "shiftKey": false,
-      "altKey": false,
-      "metaKey": false,
-      "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+    "event_type": "compositionupdate",
+    "event": {},
+    "latency": 0
   },
   {
     "event_type": "keyup",
@@ -348,9 +386,9 @@ export let win10_RIME_selecting_candidate_double_left_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+      "isComposing": true
+    },
+    "latency": 79
   },
   {
     "event_type": "keyup",
@@ -363,98 +401,58 @@ export let win10_RIME_selecting_candidate_double_left_bracket = [
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+      "isComposing": true
+    },
+    "latency": 3
   },
   {
     "event_type": "keydown",
     "event": {
       "key": "Process",
-      "code": "BracketLeft",
+      "code": "BracketRight",
       "location": 0,
       "ctrlKey": false,
       "shiftKey": false,
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+      "isComposing": true
+    },
+    "latency": 237
   },
   {
     "event_type": "keyup",
     "event": {
       "key": "Process",
-      "code": "BracketLeft",
-      "location": 0,
-      "ctrlKey": false,
-      "shiftKey": false,
-      "altKey": false,
-      "metaKey": false,
-      "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
-  },
-  {
-    "event_type": "keyup",
-    "event": {
-      "key": "[",
-      "code": "BracketLeft",
-      "location": 0,
-      "ctrlKey": false,
-      "shiftKey": false,
-      "altKey": false,
-      "metaKey": false,
-      "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
-  },
-  {
-    "event_type": "keydown",
-    "event": {
-      "key": "Process",
-      "code": "BracketLeft",
+      "code": "BracketRight",
       "location": 0,
       "ctrlKey": false,
       "shiftKey": false,
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+      "isComposing": true
+    },
+    "latency": 96
   },
   {
     "event_type": "keyup",
     "event": {
-      "key": "Process",
-      "code": "BracketLeft",
+      "key": "]",
+      "code": "BracketRight",
       "location": 0,
       "ctrlKey": false,
       "shiftKey": false,
       "altKey": false,
       "metaKey": false,
       "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+      "isComposing": true
+    },
+    "latency": 3
   },
   {
-    "event_type": "keyup",
-    "event": {
-      "key": "[",
-      "code": "BracketLeft",
-      "location": 0,
-      "ctrlKey": false,
-      "shiftKey": false,
-      "altKey": false,
-      "metaKey": false,
-      "repeat": false,
-      "isComposing": true,
-      "composed": true
-    }
+    "event_type": "compositionend",
+    "event": {},
+    "latency": 1479
   }
 ]