devtools/client/shared/test/browser_inplace-editor_autocomplete_offset.js

   1 /* Any copyright is dedicated to the Public Domain.
   2    http://creativecommons.org/publicdomain/zero/1.0/ */
   3 /* import-globals-from helper_inplace_editor.js */
   4
   5 "use strict";
   6
   7 const AutocompletePopup = require("resource://devtools/client/shared/autocomplete-popup.js");
   8 const {
   9   InplaceEditor,
  10 } = require("resource://devtools/client/shared/inplace-editor.js");
  11 loadHelperScript("helper_inplace_editor.js");
  12
  13 const TEST_URI =
  14   CHROME_URL_ROOT + "doc_inplace-editor_autocomplete_offset.xhtml";
  15
  16 // Test the inplace-editor autocomplete popup is aligned with the completed query.
  17 // Which means when completing "style=display:flex; color:" the popup will aim to be
  18 // aligned with the ":" next to "color".
  19
  20 // format :
  21 //  [
  22 //    what key to press,
  23 //    expected input box value after keypress,
  24 //    selected suggestion index (-1 if popup is hidden),
  25 //    number of suggestions in the popup (0 if popup is hidden),
  26 //  ]
  27 // or
  28 //  ["checkPopupOffset"]
  29 // to measure and test the autocomplete popup left offset.
  30 const testData = [
  31   ["VK_RIGHT", "style=", -1, 0],
  32   ["d", "style=display", 1, 2],
  33   ["checkPopupOffset"],
  34   ["VK_RIGHT", "style=display", -1, 0],
  35   [":", "style=display:block", 0, 3],
  36   ["checkPopupOffset"],
  37   ["f", "style=display:flex", -1, 0],
  38   ["VK_RIGHT", "style=display:flex", -1, 0],
  39   [";", "style=display:flex;", -1, 0],
  40   ["c", "style=display:flex;color", 1, 2],
  41   ["checkPopupOffset"],
  42   ["VK_RIGHT", "style=display:flex;color", -1, 0],
  43   [":", "style=display:flex;color:blue", 0, 2],
  44   ["checkPopupOffset"],
  45 ];
  46
  47 const mockValues = {
  48   clear: [],
  49   color: ["blue", "red"],
  50   direction: [],
  51   display: ["block", "flex", "none"],
  52 };
  53
  54 add_task(async function () {
  55   await addTab(
  56     "data:text/html;charset=utf-8,inplace editor CSS value autocomplete"
  57   );
  58   const { host, doc } = await createHost("bottom", TEST_URI);
  59
  60   const popup = new AutocompletePopup(doc, { autoSelect: true });
  61
  62   info("Create a CSS_MIXED type autocomplete");
  63   await new Promise(resolve => {
  64     createInplaceEditorAndClick(
  65       {
  66         initial: "style=",
  67         start: runAutocompletionTest,
  68         contentType: InplaceEditor.CONTENT_TYPES.CSS_MIXED,
  69         done: resolve,
  70         popup,
  71         cssProperties: {
  72           getNames: () => Object.keys(mockValues),
  73           getValues: propertyName => mockValues[propertyName] || [],
  74         },
  75       },
  76       doc
  77     );
  78   });
  79
  80   popup.destroy();
  81   host.destroy();
  82   gBrowser.removeCurrentTab();
  83 });
  84
  85 const runAutocompletionTest = async function (editor) {
  86   info("Starting autocomplete test for inplace-editor popup offset");
  87   let previousOffset = -1;
  88   for (const data of testData) {
  89     if (data[0] === "checkPopupOffset") {
  90       info("Check the popup offset has been modified");
  91       // We are not testing hard coded offset values here, which could be fragile. We only
  92       // want to ensure the popup tries to match the position of the query in the editor
  93       // input.
  94       const offset = getPopupOffset(editor);
  95       Assert.greater(
  96         offset,
  97         previousOffset,
  98         "New popup offset is greater than the previous one"
  99       );
 100       previousOffset = offset;
 101     } else {
 102       await testCompletion(data, editor);
 103     }
 104   }
 105
 106   EventUtils.synthesizeKey("VK_RETURN", {}, editor.input.defaultView);
 107 };
 108
 109 /**
 110  * Get the autocomplete panel left offset, relative to the provided input's left offset.
 111  */
 112 function getPopupOffset({ popup, input }) {
 113   const popupQuads = popup._panel.getBoxQuads({ relativeTo: input });
 114   return popupQuads[0].getBounds().left;
 115 }