Added keycode and which in Keyboard events (#432)

* Added keycode and which

* Refactor converter.ts to handle keyDown and keyUp actions

apps/acf-extension/src/devtools/converter.ts

@@ -2,6 +2,8 @@ import { Action, CONFIG_SOURCE, Configuration, getDefaultAction, getDefaultConfi
 
 import { Recording, Step } from './index.types';
 
+let ELEMENT_FINDER: string;
+
 const getProps = (selectors: Array<Array<string>>) => {
   let elementFinder = '';
   let name = '';
@@ -17,6 +19,7 @@ const getProps = (selectors: Array<Array<string>>) => {
     }
     return true;
   });
+  ELEMENT_FINDER = elementFinder;
   return { elementFinder, name };
 };
 
@@ -47,6 +50,12 @@ export const ConvertStep = (step: Step) => {
       break;
     case 'keyDown':
     case 'keyUp':
+      {
+        action.elementFinder = ELEMENT_FINDER;
+        action.name = step.key;
+        action.value = `KeyboardEvents::${step.key}`;
+      }
+      break;
     case 'navigate':
     case 'setViewport':
       break;
@@ -76,6 +85,8 @@ export const ConvertRecording = (recording: Recording) => {
     console.assert(navigate.url, 'URL is required for navigate step');
     config = getConfig(navigate.url);
     configs.push(config);
+  } else {
+    console.assert(false, 'First step should be navigate');
   }
 
   console.assert(steps.length === 0, 'No steps found in recording');

libs/acf/events/src/lib/keyboard-keycode.ts

@@ -0,0 +1,109 @@
+type keyCodesType = {
+  [index: string]: number;
+};
+
+const keyCodes: keyCodesType = {
+  '0': 48,
+  '1': 49,
+  '2': 50,
+  '3': 51,
+  '4': 52,
+  '5': 53,
+  '6': 54,
+  '7': 55,
+  '8': 56,
+  '9': 57,
+  backspace: 8,
+  tab: 9,
+  enter: 13,
+  shift: 16,
+  ctrl: 17,
+  alt: 18,
+  'pause/break': 19,
+  'caps lock': 20,
+  escape: 27,
+  'page up': 33,
+  Space: 32,
+  'page down': 34,
+  end: 35,
+  home: 36,
+  'arrow left': 37,
+  'arrow up': 38,
+  'arrow right': 39,
+  'arrow down': 40,
+  'print screen': 44,
+  insert: 45,
+  delete: 46,
+  a: 65,
+  b: 66,
+  c: 67,
+  d: 68,
+  e: 69,
+  f: 70,
+  g: 71,
+  h: 72,
+  i: 73,
+  j: 74,
+  k: 75,
+  l: 76,
+  m: 77,
+  n: 78,
+  o: 79,
+  p: 80,
+  q: 81,
+  r: 82,
+  s: 83,
+  t: 84,
+  u: 85,
+  v: 86,
+  w: 87,
+  x: 88,
+  y: 89,
+  z: 90,
+  'left window key': 91,
+  'right window key': 92,
+  'select key': 93,
+  'numpad 0': 96,
+  'numpad 1': 97,
+  'numpad 2': 98,
+  'numpad 3': 99,
+  'numpad 4': 100,
+  'numpad 5': 101,
+  'numpad 6': 102,
+  'numpad 7': 103,
+  'numpad 8': 104,
+  'numpad 9': 105,
+  multiply: 106,
+  add: 107,
+  subtract: 109,
+  'decimal point': 110,
+  divide: 111,
+  f1: 112,
+  f2: 113,
+  f3: 114,
+  f4: 115,
+  f5: 116,
+  f6: 117,
+  f7: 118,
+  f8: 119,
+  f9: 120,
+  f10: 121,
+  f11: 122,
+  f12: 123,
+  'num lock': 144,
+  'scroll lock': 145,
+  'My Computer (multimedia keyboard)': 182,
+  'My Calculator (multimedia keyboard)': 183,
+  'semi-colon': 186,
+  'equal sign': 187,
+  comma: 188,
+  dash: 189,
+  period: 190,
+  'forward slash': 191,
+  'open bracket': 219,
+  'back slash': 220,
+  'close braket': 221,
+  'single quote': 222,
+};
+
+export default keyCodes;

libs/acf/events/src/lib/keyboard.events.ts

@@ -1,6 +1,7 @@
 import { SystemError } from '@dhruv-techapps/core-common';
 import { ACTION_I18N_TITLE } from '.';
 import CommonEvents from './common.events';
+import keyCodes from './keyboard-keycode';
 
 const KEYBOARD_EVENT_KEYDOWN = 'keydown';
 const KEYBOARD_EVENT_KEYUP = 'keyup';
@@ -36,6 +37,8 @@ export const KeyboardEvents = (() => {
             a.key = c;
             a.code = c;
             c = c.toLowerCase();
+            a.keyCode = keyCodes[c];
+            a.which = keyCodes[c];
         }
         return a;
       }, {});