Utility method for efficiently managing child nodes

test/spec/ol/dom/dom.test.js

@@ -1,4 +1,4 @@
-import {createCanvasContext2D, outerWidth, outerHeight} from '../../../../src/ol/dom.js';
+import {createCanvasContext2D, outerWidth, outerHeight, replaceChildren} from '../../../../src/ol/dom.js';
 
 describe('ol.dom', function() {
 
@@ -344,4 +344,164 @@ describe('ol.dom', function() {
 
   });
 
+  describe('replaceChildren()', function() {
+
+    function assertChildrenMatch(parent, children) {
+      const actual = parent.childNodes;
+      expect(actual).to.have.length(children.length);
+      for (let i = 0; i < children.length; i++) {
+        expect(actual[i]).to.be(children[i]);
+      }
+    }
+
+    it('adds new children to an empty parent', function() {
+      const parent = document.createElement('div');
+      const children = [
+        document.createElement('a'),
+        document.createElement('b'),
+        document.createElement('c')
+      ];
+
+      replaceChildren(parent, children);
+      assertChildrenMatch(parent, children);
+    });
+
+    it('removes children', function() {
+      const parent = document.createElement('div');
+      const existingChildren = [
+        document.createElement('a'),
+        document.createElement('b'),
+        document.createElement('c')
+      ];
+      existingChildren.forEach(function(child) {
+        parent.appendChild(child);
+      });
+
+      replaceChildren(parent, []);
+      expect(parent.childNodes).to.have.length(0);
+    });
+
+    it('swaps children', function() {
+      const parent = document.createElement('div');
+      const existingChildren = [
+        document.createElement('a'),
+        document.createElement('b'),
+        document.createElement('c')
+      ];
+      existingChildren.forEach(function(child) {
+        parent.appendChild(child);
+      });
+
+      const newChildren = [
+        document.createElement('d'),
+        document.createElement('e'),
+        document.createElement('f')
+      ];
+
+      replaceChildren(parent, newChildren);
+      assertChildrenMatch(parent, newChildren);
+    });
+
+    it('appends children', function() {
+      const parent = document.createElement('div');
+      const existingChildren = [
+        document.createElement('a'),
+        document.createElement('b'),
+        document.createElement('c')
+      ];
+      existingChildren.forEach(function(child) {
+        parent.appendChild(child);
+      });
+
+      const newChildren = [
+        document.createElement('d'),
+        document.createElement('e'),
+        document.createElement('f')
+      ];
+
+      const allChildren = existingChildren.concat(newChildren);
+
+      replaceChildren(parent, allChildren);
+      assertChildrenMatch(parent, allChildren);
+    });
+
+    it('prunes children', function() {
+      const parent = document.createElement('div');
+      const existingChildren = [
+        document.createElement('a'),
+        document.createElement('b'),
+        document.createElement('c'),
+        document.createElement('d'),
+        document.createElement('e')
+      ];
+      existingChildren.forEach(function(child) {
+        parent.appendChild(child);
+      });
+
+      const desiredChildren = [
+        existingChildren[1],
+        existingChildren[3]
+      ];
+
+      replaceChildren(parent, desiredChildren);
+      assertChildrenMatch(parent, desiredChildren);
+    });
+
+    it('reorders children', function() {
+      const parent = document.createElement('div');
+      const existingChildren = [
+        document.createElement('a'),
+        document.createElement('b'),
+        document.createElement('c'),
+        document.createElement('d'),
+        document.createElement('e')
+      ];
+      existingChildren.forEach(function(child) {
+        parent.appendChild(child);
+      });
+
+      const desiredChildren = [
+        existingChildren[1],
+        existingChildren[3],
+        existingChildren[0],
+        existingChildren[4],
+        existingChildren[2]
+      ];
+
+      replaceChildren(parent, desiredChildren);
+      assertChildrenMatch(parent, desiredChildren);
+    });
+
+    it('reorders, prunes, and appends children', function() {
+      const parent = document.createElement('div');
+      const existingChildren = [
+        document.createElement('a'),
+        document.createElement('b'),
+        document.createElement('c'),
+        document.createElement('d'),
+        document.createElement('e')
+      ];
+      existingChildren.forEach(function(child) {
+        parent.appendChild(child);
+      });
+
+      const desiredChildren = [
+        document.createElement('f'),
+        existingChildren[3],
+        document.createElement('g'),
+        existingChildren[0],
+        existingChildren[2]
+      ];
+
+      const clone = desiredChildren.slice();
+
+      replaceChildren(parent, desiredChildren);
+      assertChildrenMatch(parent, desiredChildren);
+
+      // confirm we haven't modified the input
+      expect(desiredChildren).to.eql(clone);
+    });
+
+  });
+
 });