fix(utils): onLayoutChange didn't clone object in last release

Fixes react-grid-layout#683 and test added

Author: STRML

lib/utils.js

@@ -152,7 +152,7 @@ export function compact(
   const out = Array(layout.length);
 
   for (let i = 0, len = sorted.length; i < len; i++) {
-    let l = sorted[i];
+    let l = cloneLayoutItem(sorted[i]);
 
     // Don't move static elements
     if (!l.static) {

test/spec/utils-test.js

@@ -15,6 +15,28 @@ import assert from "power-assert";
 /*:: declare function describe(name: string, fn: Function): void; */
 /*:: declare function it(name: string, fn: Function): void; */
 
+//
+// Utils
+//
+function stripArray(arr) {
+  return arr.map(stripObject);
+}
+
+function stripObject(obj) {
+  obj = Object.assign({}, obj);
+  return Object.keys(obj).reduce((memo, key) => {
+    if (obj[key] != null) memo[key] = obj[key];
+    return memo;
+  }, {});
+}
+
+function assertDeepEqualStrip(obj1, obj2) {
+  assert.deepEqual(stripArray(obj1), stripArray(obj2));
+}
+//
+// Specs
+//
+
 describe("bottom", () => {
   it("Handles an empty layout as input", () => {
     assert(bottom([]) === 0);
@@ -248,8 +270,8 @@ describe("moveElement", () => {
 describe("compact vertical", () => {
   it("Removes empty vertical space above item", () => {
     const layout = [{ i: "1", x: 0, y: 1, w: 1, h: 1 }];
-    assert.deepEqual(compact(layout, "vertical", 10), [
-      { i: "1", x: 0, y: 0, w: 1, h: 1, moved: false }
+    assertDeepEqualStrip(compact(layout, "vertical", 10), [
+      { i: "1", x: 0, y: 0, w: 1, h: 1, moved: false, static: false }
     ]);
   });
 
@@ -258,9 +280,9 @@ describe("compact vertical", () => {
       { x: 0, y: 0, w: 1, h: 5, i: "1" },
       { x: 0, y: 1, w: 1, h: 1, i: "2" }
     ];
-    assert.deepEqual(compact(layout, "vertical", 10), [
-      { x: 0, y: 0, w: 1, h: 5, i: "1", moved: false },
-      { x: 0, y: 5, w: 1, h: 1, i: "2", moved: false }
+    assertDeepEqualStrip(compact(layout, "vertical", 10), [
+      { x: 0, y: 0, w: 1, h: 5, i: "1", moved: false, static: false },
+      { x: 0, y: 5, w: 1, h: 1, i: "2", moved: false, static: false }
     ]);
   });
 
@@ -272,21 +294,33 @@ describe("compact vertical", () => {
       { x: 5, y: 2, w: 1, h: 1, i: "4" },
       { x: 5, y: 3, w: 1, h: 1, i: "5", static: true }
     ];
-    assert.deepEqual(compact(layout, "vertical", 10), [
-      { x: 0, y: 0, w: 2, h: 5, i: "1", moved: false },
-      { x: 0, y: 5, w: 10, h: 1, i: "2", moved: false },
-      { x: 5, y: 6, w: 1, h: 1, i: "3", moved: false },
-      { x: 5, y: 7, w: 1, h: 1, i: "4", moved: false },
+
+    assertDeepEqualStrip(compact(layout, "vertical", 10), [
+      { x: 0, y: 0, w: 2, h: 5, i: "1", moved: false, static: false },
+      { x: 0, y: 5, w: 10, h: 1, i: "2", moved: false, static: false },
+      { x: 5, y: 6, w: 1, h: 1, i: "3", moved: false, static: false },
+      { x: 5, y: 7, w: 1, h: 1, i: "4", moved: false, static: false },
       { x: 5, y: 3, w: 1, h: 1, i: "5", moved: false, static: true }
     ]);
   });
+
+  it("Clones layout items (does not modify input)", () => {
+    const layout = [
+      { x: 0, y: 0, w: 2, h: 5, i: "1" },
+      { x: 0, y: 0, w: 10, h: 1, i: "2" }
+    ];
+    const out = compact(layout, "vertical", 10);
+    layout.forEach(item => {
+      assert(!out.includes(item));
+    });
+  });
 });
 
 describe("compact horizontal", () => {
   it("compact horizontal should remove empty horizontal space to left of item", () => {
-    const layout = [{ i: "1", x: 5, y: 5, w: 1, h: 1 }];
-    assert.deepEqual(compact(layout, "horizontal", 10), [
-      { i: "1", x: 0, y: 0, w: 1, h: 1, moved: false }
+    const layout = [{ x: 5, y: 5, w: 1, h: 1, i: "1" }];
+    assertDeepEqualStrip(compact(layout, "horizontal", 10), [
+      { x: 0, y: 0, w: 1, h: 1, i: "1", moved: false, static: false }
     ]);
   });
 
@@ -295,9 +329,9 @@ describe("compact horizontal", () => {
       { y: 0, x: 0, h: 1, w: 5, i: "1" },
       { y: 0, x: 1, h: 1, w: 1, i: "2" }
     ];
-    assert.deepEqual(compact(layout, "horizontal", 10), [
-      { y: 0, x: 0, h: 1, w: 5, i: "1", moved: false },
-      { y: 0, x: 5, h: 1, w: 1, i: "2", moved: false }
+    assertDeepEqualStrip(compact(layout, "horizontal", 10), [
+      { y: 0, x: 0, h: 1, w: 5, i: "1", moved: false, static: false },
+      { y: 0, x: 5, h: 1, w: 1, i: "2", moved: false, static: false }
     ]);
   });
 
@@ -309,11 +343,11 @@ describe("compact horizontal", () => {
       { y: 5, x: 2, h: 1, w: 1, i: "4" },
       { y: 5, x: 2, h: 1, w: 1, i: "5", static: true }
     ];
-    assert.deepEqual(compact(layout, "horizontal", 10), [
-      { y: 0, x: 0, h: 2, w: 5, i: "1", moved: false },
-      { y: 0, x: 5, h: 10, w: 1, i: "2", moved: false },
-      { y: 5, x: 6, h: 1, w: 1, i: "3", moved: false },
-      { y: 5, x: 7, h: 1, w: 1, i: "4", moved: false },
+    assertDeepEqualStrip(compact(layout, "horizontal", 10), [
+      { y: 0, x: 0, h: 2, w: 5, i: "1", moved: false, static: false },
+      { y: 0, x: 5, h: 10, w: 1, i: "2", moved: false, static: false },
+      { y: 5, x: 6, h: 1, w: 1, i: "3", moved: false, static: false },
+      { y: 5, x: 7, h: 1, w: 1, i: "4", moved: false, static: false },
       { y: 5, x: 2, h: 1, w: 1, i: "5", moved: false, static: true }
     ]);
   });