test: live preview edit integ tests working

Author: abose

src/LiveDevelopment/LivePreviewConstants.js

@@ -35,4 +35,10 @@ define(function main(require, exports, module) {
     exports.LIVE_EDIT_MODE = "edit";
 
     exports.PREFERENCE_LIVE_PREVIEW_MODE = "livePreviewMode";
+
+    exports.PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT = "livePreviewElementHighlights";
+    exports.HIGHLIGHT_HOVER = "hover";
+    exports.HIGHLIGHT_CLICK = "click";
+
+    exports.PREFERENCE_SHOW_RULER_LINES = "livePreviewShowRulerLines";
 });

src/LiveDevelopment/main.js

@@ -93,7 +93,7 @@ define(function main(require, exports, module) {
     let params = new UrlParams();
     const defaultConfig = {
         mode: LIVE_HIGHLIGHT_MODE, // will be updated when we fetch entitlements
-        elemHighlights: "hover", // default value, this will get updated when the extension loads
+        elemHighlights: CONSTANTS.HIGHLIGHT_HOVER, // default value, this will get updated when the extension loads
         showRulerLines: false, // default value, this will get updated when the extension loads
         imageGalleryState: _getImageGalleryState() // image gallery selected state
     };
@@ -310,14 +310,14 @@ define(function main(require, exports, module) {
     // this function is responsible to update element highlight config
     // called from live preview extension when preference changes
     function updateElementHighlightConfig() {
-        const prefValue = PreferencesManager.get("livePreviewElementHighlights");
+        const prefValue = PreferencesManager.get(CONSTANTS.PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT);
         const config = MultiBrowserLiveDev.getConfig();
-        config.elemHighlights = prefValue || "hover";
+        config.elemHighlights = prefValue || CONSTANTS.HIGHLIGHT_HOVER;
         MultiBrowserLiveDev.updateConfig(config);
     }
 
     function updateRulerLinesConfig() {
-        const prefValue = PreferencesManager.get("livePreviewShowRulerLines");
+        const prefValue = PreferencesManager.get(CONSTANTS.PREFERENCE_SHOW_RULER_LINES);
         const config = MultiBrowserLiveDev.getConfig();
         config.showRulerLines = prefValue || false;
         MultiBrowserLiveDev.updateConfig(config);

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -57,6 +57,7 @@ define(function (require, exports, module) {
         Strings            = require("strings"),
         Mustache           = require("thirdparty/mustache/mustache"),
         Metrics            = require("utils/Metrics"),
+        CONSTANTS           = require("LiveDevelopment/LivePreviewConstants"),
         LiveDevelopment    = require("LiveDevelopment/main"),
         LiveDevServerManager = require("LiveDevelopment/LiveDevServerManager"),
         MultiBrowserLiveDev = require("LiveDevelopment/LiveDevMultiBrowser"),
@@ -98,13 +99,14 @@ define(function (require, exports, module) {
     const PREFERENCE_LIVE_PREVIEW_MODE = "livePreviewMode";
 
     // live preview element highlights preference (whether on hover or click)
-    const PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT = "livePreviewElementHighlights";
-    PreferencesManager.definePreference(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, "string", "hover", {
-        description: Strings.LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_PREFERENCE
+    const PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT = CONSTANTS.PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT;
+    PreferencesManager.definePreference(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, "string", CONSTANTS.HIGHLIGHT_HOVER, {
+        description: Strings.LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_PREFERENCE,
+        values: [CONSTANTS.HIGHLIGHT_HOVER, CONSTANTS.HIGHLIGHT_CLICK]
     });
 
     // live preview ruler lines preference (show/hide ruler lines on element selection)
-    const PREFERENCE_SHOW_RULER_LINES = "livePreviewShowRulerLines";
+    const PREFERENCE_SHOW_RULER_LINES = CONSTANTS.PREFERENCE_SHOW_RULER_LINES;
     PreferencesManager.definePreference(PREFERENCE_SHOW_RULER_LINES, "boolean", false, {
         description: Strings.LIVE_DEV_SETTINGS_SHOW_RULER_LINES_PREFERENCE
     });
@@ -368,7 +370,8 @@ define(function (require, exports, module) {
                     enabled: true
                 };
             } else if (item === Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON) {
-                const isHoverMode = PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT) !== "click";
+                const isHoverMode =
+                    PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT) === CONSTANTS.HIGHLIGHT_HOVER;
                 if(isHoverMode) {
                     return `✓ ${Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON}`;
                 }
@@ -418,7 +421,8 @@ define(function (require, exports, module) {
                 }
                 // Toggle between hover and click
                 const currMode = PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT);
-                const newMode = currMode !== "click" ? "click" : "hover";
+                const newMode = (currMode !== CONSTANTS.HIGHLIGHT_CLICK) ?
+                    CONSTANTS.HIGHLIGHT_CLICK : CONSTANTS.HIGHLIGHT_HOVER;
                 PreferencesManager.set(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, newMode);
                 return; // Don't dismiss highlights for this option
             } else if (item === Strings.LIVE_PREVIEW_SHOW_RULER_LINES) {