Fix insertBefore children order.

.changeset/six-taxis-march.md

@@ -0,0 +1,5 @@
+---
+'@chialab/quantum': patch
+---
+
+Fix `insertBefore` children order.

src/Realm.js

@@ -491,7 +491,7 @@ export class Realm {
      * @returns The nodes that were inserted.
      */
     _insert(node, nodes) {
-        const io = this._childNodes.indexOf(node);
+        let io = this._childNodes.indexOf(node);
         if (io === -1) {
             throw new Error(
                 "Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."
@@ -503,6 +503,9 @@ export class Realm {
             const previousIndex = this._childNodes.indexOf(child);
             if (previousIndex !== -1) {
                 this._childNodes.splice(previousIndex, 1);
+                if (previousIndex < io) {
+                    io--;
+                }
             }
         });
         this._childNodes.splice(io, 0, ...changed);

tests/realm.spec.js

@@ -96,19 +96,27 @@ describe('realm', () => {
         expect(container.innerHTML).toBe('<span></span><div></div>');
     });
 
-    test('Node.prototype.insertBefore should work in realm', () => {
+    test.only('Node.prototype.insertBefore should work in realm', () => {
         const container = document.createElement('div');
         const child = document.createElement('div');
         const child2 = document.createElement('span');
+        const child3 = document.createElement('article');
         attachRealm(container);
         container.appendChild(child);
         container.insertBefore(child2, child);
-        expect(container.childNodes.length).toBe(2);
+        container.appendChild(child3);
+        expect(container.childNodes.length).toBe(3);
         expect(container.childNodes[0]).toBe(child2);
         expect(container.childNodes[1]).toBe(child);
+        expect(container.childNodes[2]).toBe(child3);
         expect(child.parentNode).toBe(container);
         expect(child2.parentNode).toBe(container);
+        expect(child3.parentNode).toBe(container);
         expect(container.innerHTML).toBe('');
+        container.insertBefore(child2, child3);
+        expect(container.childNodes[0]).toBe(child);
+        expect(container.childNodes[1]).toBe(child2);
+        expect(container.childNodes[2]).toBe(child3);
     });
 
     test('Node.prototype.hasChildNodes|firstChild|lastChild|parentNode|parentElement|previousSibling|nextSibling should work as usual', () => {