feat: add support for user-events

Author: smeijer

devtools/src/content-script/highlighter/index.js

@@ -125,7 +125,7 @@ export default function setupHighlighter({
   function onPointerDown(event) {
     stopPropagation(event);
 
-    selectNode(event.target, { trigger: 'click' });
+    selectNode(event.target, { origin: event.isTrusted ? 'click' : 'script' });
   }
 
   function onPointerOver(event) {
@@ -145,7 +145,7 @@ export default function setupHighlighter({
     }
 
     showOverlay([target], false);
-    selectNode(target, { trigger: 'hover' });
+    selectNode(target, { origin: event.isTrusted ? 'hover' : 'script' });
   }
 
   function onPointerUp(event) {

package-lock.json

@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "@testing-library/dom": "^7.15.0",
+    "@testing-library/user-event": "^12.0.2",
     "codemirror": "5.54.0",
     "crx-bridge": "^2.1.0",
     "deep-diff": "^1.0.2",
@@ -65,7 +66,6 @@
     "@babel/preset-react": "^7.10.1",
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.2.0",
-    "@testing-library/user-event": "^11.4.2",
     "@types/fs-extra": "^9.0.1",
     "babel-eslint": "^10.1.0",
     "chrome-launch": "^1.1.4",

package.json

@@ -8,9 +8,9 @@ import 'codemirror/addon/fold/xml-fold';
 import 'codemirror/addon/scroll/simplescrollbars';
 import 'codemirror/addon/hint/show-hint';
 import { queries } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
 
 import CodeMirror from 'codemirror';
-import debounce from 'lodash/debounce';
 import beautify from '../lib/beautify';
 
 const baseOptions = {
@@ -26,17 +26,14 @@ const baseOptions = {
 
 const options = {
   html: {
-    ...baseOptions,
     mode: { name: 'text/html', multilineTagIndentPastTag: false },
   },
 
   htmlmixed: {
-    ...baseOptions,
     mode: { name: 'htmlmixed', multilineTagIndentPastTag: false },
   },
 
   javascript: {
-    ...baseOptions,
     mode: 'javascript',
     extraKeys: { 'Ctrl-Space': 'autocomplete' },
     hintOptions: { hint: getQueryHints },
@@ -48,6 +45,7 @@ const suggestions = {
     .filter((x) => x.startsWith('getBy'))
     .sort(),
   container: ['querySelector', 'querySelectorAll'],
+  userEvent: Object.keys(userEvent).sort(),
 };
 
 function getQueryHints(cm) {
@@ -66,7 +64,7 @@ function getQueryHints(cm) {
     ++end;
   }
 
-  const word = line.slice(start, end).toLowerCase();
+  const word = line.slice(start, end); //.toLowerCase();
   const offset = word.lastIndexOf('.') + 1;
   const list = [];
 
@@ -83,8 +81,8 @@ function getQueryHints(cm) {
   } else if (word.includes('.')) {
     // user is already one level deeper, entered `screen.get...`
     const [obj, method] = word.split('.');
-    const values = (suggestions[obj] || []).filter((x) =>
-      x.toLowerCase().includes(method),
+    const values = (suggestions[obj] || []).filter(
+      (x) => x.includes(method), //x.toLowerCase().includes(method.toLowerCase()),
     );
     list.push(...values);
   } else {
@@ -154,71 +152,143 @@ const NON_TRIGGER_KEYS = {
   '222': 'quote',
 };
 
-function Editor({ onLoad, onChange, mode, initialValue }) {
-  const elem = useRef();
-  const editor = useRef();
+function formatValue(cm) {
+  const mode = cm.options.mode.name;
+  const value = cm.getValue();
+  const formatted = beautify.format(mode, value);
+  cm.setValue(formatted);
+}
 
-  useEffect(() => {
-    editor.current = CodeMirror.fromTextArea(
-      elem.current,
-      options[mode] || baseOptions,
-    );
-    editor.current.setValue(initialValue || '');
+function autoComplete(cm, event) {
+  const cursor = cm.getDoc().getCursor();
+  const token = cm.getTokenAt(cursor);
 
-    // in some cases, CM loads with a scrollbar visible
-    // while it shouldn't be required. Requesting a refresh
-    // fixes this
-    requestAnimationFrame(() => {
-      editor.current.refresh();
+  const shouldComplete =
+    !cm.state.completionActive &&
+    !NON_TRIGGER_KEYS[(event.keyCode || event.which).toString()] &&
+    !(token.string === '(' || token.string === ')');
+
+  if (shouldComplete) {
+    CodeMirror.commands.autocomplete(cm, null, {
+      completeSingle: false,
     });
-  }, [mode]);
+  }
+}
 
-  useEffect(() => {
-    if (!editor.current || typeof onChange !== 'function') {
+function handleChange(cm, change) {
+  switch (change.origin) {
+    case 'setValue':
       return;
+
+    case 'paste': {
+      formatValue(cm);
+      break;
     }
 
-    editor.current.on(
-      'changes',
-      debounce(() => {
-        onChange(editor.current.getValue());
-      }, 25),
-    );
+    default: {
+      cm.onChange(cm.getValue(), { origin: change.origin });
+      break;
+    }
+  }
+}
 
-    editor.current.on('keyup', (editor, event) => {
-      const cursor = editor.getDoc().getCursor();
-      const token = editor.getTokenAt(cursor);
+// with devtools open, the roundtrip between blur and result is about 200 ms.
+// Close devtools, and it drops down to ~ 5 ms. If you're still getting weird
+// user-event / fireEvent issues, it might be that either 25 or 500 ms is to low for
+// your machine. Pumping up production timeouts can cause more side-effects, but
+// I think we can quite safely increase to ~ 100 ms when neccasary. For the dev
+// environment, I hope you can life with it. The worst thing that happens, is
+// that the query editor loses focus while you're typing your userEvents.
+const threshold = process.env.NODE_ENV === 'production' ? 25 : 500;
 
-      const shouldComplete =
-        !editor.state.completionActive &&
-        !NON_TRIGGER_KEYS[(event.keyCode || event.which).toString()] &&
-        !(token.string === '(' || token.string === ')');
+// There are two ways that the query editor can use blur. One is if the user
+// decides to leave the editor. The other is caused by evaluating the users
+// script. For example to focus one of the inputs in the sandbox, to enter
+// some text, or click an element. If this happens, we need to restore focus
+// as soon as possible. This is, when the SANDBOX_READY event occurs before
+// the `threshold`ms timeout has passed.
+function handleBlur(cm) {
+  const cursor = cm.getCursor();
+  let timeout;
 
-      if (shouldComplete) {
-        CodeMirror.commands.autocomplete(editor, null, {
-          completeSingle: false,
-        });
-      }
-    });
+  function listener(event) {
+    const {
+      data: { source, type },
+    } = event;
 
-    const format = () => {
-      const value = editor.current.getValue();
-      const formatted = beautify.format(mode, value);
-      editor.current.setValue(formatted);
-    };
+    if (source !== 'testing-playground-sandbox' || type !== 'SANDBOX_READY') {
+      return;
+    }
+
+    // if we came to here, it means that the time between the `blur` event and
+    // SANDBOX_READY msg was within `threshold` ms. Otherwise, the timeout would
+    // already have removed this listener.
+    clearTimeout(timeout);
+    window.removeEventListener('message', listener);
+    cm.focus();
+    cm.setCursor(cursor);
+  }
+
+  // note, { once: true } doesn't work here! there can be multiple messages, while
+  // we need one with a specific event attribute
+  window.addEventListener('message', listener);
+
+  // we wait a couple of ms for the SANDBOX_READY event, if that doesn't come
+  // before given treshold, we assume the user left the editor, and allow it
+  // lose focus.
+  timeout = setTimeout(() => {
+    window.removeEventListener('message', listener);
+    formatValue(cm);
+  }, threshold);
+}
 
-    editor.current.on('change', (_, change) => {
-      if (change.origin !== 'paste') {
-        return;
-      }
+function Editor({ onLoad, onChange, mode, initialValue }) {
+  const elem = useRef();
+  const editor = useRef();
 
-      format();
+  useEffect(() => {
+    editor.current = CodeMirror.fromTextArea(elem.current, {
+      ...baseOptions,
+      ...options[mode],
+      extraKeys:
+        typeof onChange === 'function'
+          ? {
+              'Ctrl-Enter': () => {
+                onChange(editor.current.getValue(), { origin: 'user' });
+              },
+              'Cmd-Enter': () => {
+                onChange(editor.current.getValue(), { origin: 'user' });
+              },
+              ...(options[mode].extraKeys || {}),
+            }
+          : options[mode].extraKeys,
     });
 
-    editor.current.on('blur', format);
+    editor.current.setValue(initialValue || '');
+
+    editor.current.on('change', handleChange);
+    editor.current.on('keyup', autoComplete);
+    editor.current.on('blur', handleBlur);
 
     onLoad(editor.current);
-  }, [editor.current, onChange]);
+
+    // in some cases, CM loads with a scrollbar visible
+    // while it shouldn't be required. Requesting a refresh
+    // fixes this
+    requestAnimationFrame(() => {
+      editor.current.refresh();
+    });
+
+    return () => {
+      editor.current.off('change', handleChange);
+      editor.current.off('keyup', autoComplete);
+      editor.current.off('blur', handleBlur);
+    };
+  }, [mode, onChange, onLoad, initialValue]);
+
+  useEffect(() => {
+    editor.current.onChange = onChange;
+  }, [onChange]);
 
   return (
     <div className="w-full h-full">

src/components/Editor.js

@@ -39,12 +39,12 @@ function Playground() {
 
       <div className="flex-none h-8" />
 
-      <div className="editor gap-4 md:gap-8 md:h-56 flex-auto grid-cols-1 md:grid-cols-2 overflow-hidden">
+      <div className="editor gap-4 md:gap-8 md:h-56 flex-auto grid-cols-1 md:grid-cols-2">
         <div className="flex-auto relative h-56 md:h-full">
           <Query query={query} result={result} dispatch={dispatch} />
         </div>
 
-        <div className="flex-auto h-56 md:h-full overflow-hidden">
+        <div className="flex-auto h-56 md:h-full">
           <Result result={result} dispatch={dispatch} />
         </div>
       </div>