ChildNode#replaceWith: fix and add tests.

Author: bicknellr

src/Patch/Interface/ChildNode.js

@@ -76,24 +76,46 @@ export default function(internals, destination, builtIn) {
      * @param {...(!Node|string)} nodes
      */
     function(...nodes) {
-      // TODO: Fix this for when one of `nodes` is a DocumentFragment!
-      const connectedBefore = /** @type {!Array<!Node>} */ (nodes.filter(node => {
-        // DocumentFragments are not connected and will not be added to the list.
-        return node instanceof Node && Utilities.isConnected(node);
-      }));
+      /**
+       * A copy of `nodes`, with any DocumentFragment replaced by its children.
+       * @type {!Array<!Node>}
+       */
+      const flattenedNodes = [];
+
+      /**
+       * Elements in `nodes` that were connected before this call.
+       * @type {!Array<!Node>}
+       */
+      const connectedElements = [];
+
+      for (var i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+
+        if (node instanceof Element && Utilities.isConnected(node)) {
+          connectedElements.push(node);
+        }
+
+        if (node instanceof DocumentFragment) {
+          for (let child = node.firstChild; child; child = child.nextSibling) {
+            flattenedNodes.push(child);
+          }
+        } else {
+          flattenedNodes.push(node);
+        }
+      }
 
       const wasConnected = Utilities.isConnected(this);
 
       builtIn.replaceWith.apply(this, nodes);
 
-      for (let i = 0; i < connectedBefore.length; i++) {
-        internals.disconnectTree(connectedBefore[i]);
+      for (let i = 0; i < connectedElements.length; i++) {
+        internals.disconnectTree(connectedElements[i]);
       }
 
       if (wasConnected) {
         internals.disconnectTree(this);
-        for (let i = 0; i < nodes.length; i++) {
-          const node = nodes[i];
+        for (let i = 0; i < flattenedNodes.length; i++) {
+          const node = flattenedNodes[i];
           if (node instanceof Element) {
             internals.connectTree(node);
           }

tests/html/Interface/ChildNode/index.html

@@ -204,6 +204,213 @@
 
   beforeAfterSuite('before');
   beforeAfterSuite('after');
+
+  suite('replaceWith', function() {
+    let localName;
+    let constructor;
+    let element1;
+    let element2;
+    let connectedElement1;
+    let connectedElement2;
+    let disconnectedElement1;
+    let disconnectedElement2;
+    let documentFragment1;
+
+    setup(function() {
+      localName = generateLocalName();
+      defineWithLocalName(localName);
+
+      element1 = document.createElement(localName);
+      assert.equal(element1.connectedCallbackCount, 0);
+      assert.equal(element1.disconnectedCallbackCount, 0);
+
+      element2 = document.createElement(localName);
+      assert.equal(element2.connectedCallbackCount, 0);
+      assert.equal(element2.disconnectedCallbackCount, 0);
+
+      connectedElement1 = document.createElement(localName);
+      document.body.appendChild(connectedElement1);
+      assert.equal(connectedElement1.connectedCallbackCount, 1);
+      assert.equal(connectedElement1.disconnectedCallbackCount, 0);
+
+      connectedElement2 = document.createElement(localName);
+      document.body.appendChild(connectedElement2);
+      assert.equal(connectedElement2.connectedCallbackCount, 1);
+      assert.equal(connectedElement2.disconnectedCallbackCount, 0);
+
+      // Make sure the disconnected nodes have parents so that `replaceWith`
+      // has a place to put the given elements.
+      var disconnectedContainer1 = document.createElement('div');
+      disconnectedElement1 = document.createElement(localName);
+      disconnectedContainer1.appendChild(disconnectedElement1);
+
+      var disconnectedContainer2 = document.createElement('div');
+      disconnectedElement2 = document.createElement(localName);
+      disconnectedContainer2.appendChild(disconnectedElement2);
+
+      documentFragment1 = document.createDocumentFragment();
+    });
+
+    teardown(function() {
+      [
+        element1,
+        element2,
+        connectedElement1,
+        connectedElement2,
+        disconnectedElement1,
+        disconnectedElement2,
+      ].forEach(function(node) {
+        if (node.parentNode) {
+          node.parentNode.removeChild(node);
+        }
+      });
+    });
+
+    test('Moving nodes from a disconnected tree to a connected tree calls ' +
+      '`connectedCallback` of the inserted nodes.', function() {
+        disconnectedElement1.appendChild(element1);
+        disconnectedElement1.appendChild(element2);
+
+        assert.equal(connectedElement1.connectedCallbackCount, 1);
+        assert.equal(connectedElement1.disconnectedCallbackCount, 0);
+
+        assert.equal(element1.connectedCallbackCount, 0);
+        assert.equal(element1.disconnectedCallbackCount, 0);
+        assert.equal(element2.connectedCallbackCount, 0);
+        assert.equal(element2.disconnectedCallbackCount, 0);
+
+        connectedElement1.replaceWith(element1, element2);
+
+        assert.equal(connectedElement1.connectedCallbackCount, 1);
+        assert.equal(connectedElement1.disconnectedCallbackCount, 1);
+
+        assert.equal(element1.connectedCallbackCount, 1);
+        assert.equal(element1.disconnectedCallbackCount, 0);
+        assert.equal(element2.connectedCallbackCount, 1);
+        assert.equal(element2.disconnectedCallbackCount, 0);
+    });
+
+    test('Moving nodes from a connected tree to a connected tree calls ' +
+      '`disconnectedCallback` and `connectedCallback` of the inserted nodes.',
+      function() {
+        connectedElement1.appendChild(element1);
+        connectedElement1.appendChild(element2);
+
+        assert.equal(connectedElement2.connectedCallbackCount, 1);
+        assert.equal(connectedElement2.disconnectedCallbackCount, 0);
+
+        assert.equal(element1.connectedCallbackCount, 1);
+        assert.equal(element1.disconnectedCallbackCount, 0);
+        assert.equal(element2.connectedCallbackCount, 1);
+        assert.equal(element2.disconnectedCallbackCount, 0);
+
+        connectedElement2.replaceWith(element1, element2);
+
+        assert.equal(connectedElement2.connectedCallbackCount, 1);
+        assert.equal(connectedElement2.disconnectedCallbackCount, 1);
+
+        assert.equal(element1.connectedCallbackCount, 2);
+        assert.equal(element1.disconnectedCallbackCount, 1);
+        assert.equal(element2.connectedCallbackCount, 2);
+        assert.equal(element2.disconnectedCallbackCount, 1);
+    });
+
+    test('Moving nodes from a connected tree to a disconnected tree calls ' +
+      '`disconnectedCallback` of the inserted nodes.', function() {
+        connectedElement1.appendChild(element1);
+        connectedElement1.appendChild(element2);
+
+        assert.equal(disconnectedElement1.connectedCallbackCount, 0);
+        assert.equal(disconnectedElement1.disconnectedCallbackCount, 0);
+
+        assert.equal(element1.connectedCallbackCount, 1);
+        assert.equal(element1.disconnectedCallbackCount, 0);
+        assert.equal(element2.connectedCallbackCount, 1);
+        assert.equal(element2.disconnectedCallbackCount, 0);
+
+        disconnectedElement1.replaceWith(element1, element2);
+
+        assert.equal(disconnectedElement1.connectedCallbackCount, 0);
+        assert.equal(disconnectedElement1.disconnectedCallbackCount, 0);
+
+        assert.equal(element1.connectedCallbackCount, 1);
+        assert.equal(element1.disconnectedCallbackCount, 1);
+        assert.equal(element2.connectedCallbackCount, 1);
+        assert.equal(element2.disconnectedCallbackCount, 1);
+    });
+
+    test('Moving nodes from a disconnected tree to a disconnected tree does ' +
+      'not call any callbacks.', function() {
+        disconnectedElement1.appendChild(element1);
+        disconnectedElement1.appendChild(element2);
+
+        assert.equal(disconnectedElement1.connectedCallbackCount, 0);
+        assert.equal(disconnectedElement1.disconnectedCallbackCount, 0);
+
+        assert.equal(element1.connectedCallbackCount, 0);
+        assert.equal(element1.disconnectedCallbackCount, 0);
+        assert.equal(element2.connectedCallbackCount, 0);
+        assert.equal(element2.disconnectedCallbackCount, 0);
+
+        disconnectedElement1.replaceWith(element1, element2);
+
+        assert.equal(disconnectedElement1.connectedCallbackCount, 0);
+        assert.equal(disconnectedElement1.disconnectedCallbackCount, 0);
+
+        assert.equal(element1.connectedCallbackCount, 0);
+        assert.equal(element1.disconnectedCallbackCount, 0);
+        assert.equal(element2.connectedCallbackCount, 0);
+        assert.equal(element2.disconnectedCallbackCount, 0);
+      });
+
+    test('Moving nodes from a DocumentFragment to a connected tree calls ' +
+      '`connectedCallback` of the inserted nodes.', function() {
+        documentFragment1.appendChild(element1);
+        documentFragment1.appendChild(element2);
+
+        assert.equal(connectedElement1.connectedCallbackCount, 1);
+        assert.equal(connectedElement1.disconnectedCallbackCount, 0);
+
+        assert.equal(element1.connectedCallbackCount, 0);
+        assert.equal(element1.disconnectedCallbackCount, 0);
+        assert.equal(element2.connectedCallbackCount, 0);
+        assert.equal(element2.disconnectedCallbackCount, 0);
+
+        connectedElement1.replaceWith(element1, element2);
+
+        assert.equal(connectedElement1.connectedCallbackCount, 1);
+        assert.equal(connectedElement1.disconnectedCallbackCount, 1);
+
+        assert.equal(element1.connectedCallbackCount, 1);
+        assert.equal(element1.disconnectedCallbackCount, 0);
+        assert.equal(element2.connectedCallbackCount, 1);
+        assert.equal(element2.disconnectedCallbackCount, 0);
+    });
+
+    test('Moving nodes from a DocumentFragment to a disconnected tree does ' +
+      'not call any callbacks.', function() {
+        documentFragment1.appendChild(element1);
+        documentFragment1.appendChild(element2);
+
+        assert.equal(disconnectedElement1.connectedCallbackCount, 0);
+        assert.equal(disconnectedElement1.disconnectedCallbackCount, 0);
+
+        assert.equal(element1.connectedCallbackCount, 0);
+        assert.equal(element1.disconnectedCallbackCount, 0);
+        assert.equal(element2.connectedCallbackCount, 0);
+        assert.equal(element2.disconnectedCallbackCount, 0);
+
+        disconnectedElement1.replaceWith(element1, element2);
+
+        assert.equal(disconnectedElement1.connectedCallbackCount, 0);
+        assert.equal(disconnectedElement1.disconnectedCallbackCount, 0);
+
+        assert.equal(element1.connectedCallbackCount, 0);
+        assert.equal(element1.disconnectedCallbackCount, 0);
+        assert.equal(element2.connectedCallbackCount, 0);
+        assert.equal(element2.disconnectedCallbackCount, 0);
+    });
+  });
 });
 </script>
 </body>