.before is not working

[aralroca]

When running the following test:

  it('should work', () => {
      GlobalRegistrator.register();
      document.body.innerHTML = '<section><form>Foo</form></section>';
      const el = document.querySelector('form')
      el.before(document.createElement('div'))
    })

I encounter this error:

11 |      *
12 |      * @param message Message.
13 |      * @param name Name.
14 |      */
15 |     constructor(message, name = null) {
16 |         super(message);
             ^
DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

However, when running this code in a real browser environment, it works as expected. It seems that happy-DOM does not fully support Node.prototype.before() or handles the DOM differently.

[OlaviSau]

It does appear to be a bug indeed caused by having the wrong parent being used. The parent should be from the element that this is being called on rather than from the child node. It seems like an easy fix. I am not really sure why the child node parent is used as that seems like it would be wrong every time.

/**
	public static before(childNode: IChildNode, ...nodes: (string | Node)[]): void {
		const parent = <IParentNode>childNode[PropertySymbol.parentNode];
		if (!parent) {
			return;
		}

		for (const node of nodes) {
			if (node instanceof Node) {
				parent.insertBefore(node, childNode);
			} else {
				parent.insertBefore(
					parent[PropertySymbol.ownerDocument].createTextNode(String(node)),
					childNode
				);
			}
		}
	}

@capricorn86 lmk if you want a pr fix for this.

[capricorn86]

Thank you for reporting @aralroca and thank you for the analysis @OlaviSau! 🙂

I have made a fix now in v16.2.5.

The reason for why it didn't work is because of the change in v15 to use a proxy for HTMLFormElement and HTMLSelectElement. In this and a couple of other methods, the reference to the parent was to the target and not the proxy, and the element could not be found.

[capricorn86]

@OlaviSau It is always nice with a contribution 🙂