[PDCL-12744] Implement move action

bundlesize.json

@@ -5,13 +5,13 @@
     "brotiliSize": 133
   },
   "dist/alloy.js": {
-    "uncompressedSize": 585248,
-    "gzippedSize": 89238,
-    "brotiliSize": 69332
+    "uncompressedSize": 586586,
+    "gzippedSize": 89346,
+    "brotiliSize": 69471
   },
   "dist/alloy.min.js": {
-    "uncompressedSize": 122400,
-    "gzippedSize": 40479,
-    "brotiliSize": 35136
+    "uncompressedSize": 122542,
+    "gzippedSize": 40521,
+    "brotiliSize": 35155
   }
 }

src/components/Personalization/dom-actions/dom/util.js

@@ -0,0 +1,17 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+export const addPxIfRequired = (value) => {
+  const hasPx = value.indexOf("px") === value.length - 2;
+
+  return hasPx ? value : `${value}px`;
+};

src/components/Personalization/dom-actions/initDomActionsModules.js

@@ -18,6 +18,7 @@ import setText from "./setText.js";
 import setAttributes from "./setAttributes.js";
 import swapImage from "./swapImage.js";
 import setStyles from "./setStyles.js";
+import move from "./move.js";
 import rearrangeChildren from "./rearrangeChildren.js";
 import insertHtmlAfter from "./insertHtmlAfter.js";
 import insertHtmlBefore from "./insertHtmlBefore.js";
@@ -51,7 +52,7 @@ export default () => {
     [DOM_ACTION_SET_ATTRIBUTE]: createAction(setAttributes),
     [DOM_ACTION_SET_IMAGE_SOURCE]: createAction(swapImage),
     [DOM_ACTION_SET_STYLE]: createAction(setStyles),
-    [DOM_ACTION_MOVE]: createAction(setStyles),
+    [DOM_ACTION_MOVE]: createAction(move),
     [DOM_ACTION_RESIZE]: createAction(setStyles),
     [DOM_ACTION_REARRANGE]: createAction(rearrangeChildren),
     [DOM_ACTION_REMOVE]: createAction(removeNode),

src/components/Personalization/dom-actions/move.js

@@ -0,0 +1,33 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { setStyle } from "./dom/index.js";
+import { addPxIfRequired } from "./dom/util.js";
+
+export default (container, styles, decorateProposition) => {
+  const { priority, ...style } = styles;
+
+  Object.keys(style).forEach((key) => {
+    let value = style[key];
+    if (
+      key === "left" ||
+      key === "top" ||
+      key === "right" ||
+      key === "bottom"
+    ) {
+      value = addPxIfRequired(value);
+    }
+    setStyle(container, key, value, priority);
+  });
+
+  decorateProposition(container);
+};

test/unit/specs/components/Personalization/dom-actions/dom/util.spec.js

@@ -0,0 +1,29 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { addPxIfRequired } from "../../../../../../../src/components/Personalization/dom-actions/dom/util.js";
+
+describe("Personalization::DOM::util", () => {
+  it("appends 'px' string if missing", () => {
+    const value = "400";
+    const result = addPxIfRequired(value);
+
+    expect(result).toEqual("400px");
+  });
+
+  it("does not append 'px' string if already present", () => {
+    const value = "400px";
+    const result = addPxIfRequired(value);
+
+    expect(result).toEqual("400px");
+  });
+});

test/unit/specs/components/Personalization/dom-actions/move.spec.js

@@ -61,4 +61,29 @@ describe("Personalization::actions::move", () => {
       expect(getAttribute(element, INTERACT_ID_DATA_ATTRIBUTE)).not.toBeNull();
     });
   });
+
+  it("should move personalized content even if coordinates are not properly formatted", () => {
+    const modules = initDomActionsModules();
+    const { move } = modules;
+    const element = createNode("div", { id: "move" });
+
+    appendNode(document.body, element);
+
+    const settings = {
+      selector: "#move",
+      prehidingSelector: "#move",
+      content: { left: "100", top: "100" },
+      meta: { a: 1 },
+    };
+
+    move(settings, decorateProposition).then(() => {
+      expect(element.style.left).toEqual("100px");
+      expect(element.style.top).toEqual("100px");
+
+      expect(getAttribute(element, CLICK_LABEL_DATA_ATTRIBUTE)).toEqual(
+        "trackingLabel",
+      );
+      expect(getAttribute(element, INTERACT_ID_DATA_ATTRIBUTE)).not.toBeNull();
+    });
+  });
 });