fix: trigger dom mutation observer independent of insertion order (#847)

pskelin · web-flow · commit d7d96ec4b955 · 2019-10-15T16:33:44.000+03:00
DOM insertion order was leading to situations where the mutation observer was not registered leaving empty rendered rows fixes: #839
diff --git a/packages/base/src/UI5Element.js b/packages/base/src/UI5Element.js
@@ -85,10 +85,12 @@ class UI5Element extends HTMLElement {
 			return;
 		}
 
+		// always register the observer before yielding control to the main thread (await)
+		this._startObservingDOMChildren();
+
 		await this._processChildren();
 		await RenderScheduler.renderImmediately(this);
 		this._domRefReadyPromise._deferredResolve();
-		this._startObservingDOMChildren();
 		if (typeof this.onEnterDOM === "function") {
 			this.onEnterDOM();
 		}
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/base/DOMObserver.html b/packages/main/test/sap/ui/webcomponents/main/pages/base/DOMObserver.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="utf-8">
+
+    <title>DOMObserver</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="utf-8">
+
+    <script src="../../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" type="module"></script>
+    <script nomodule src="../../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js"></script>
+
+</head>
+
+<body>
+
+</body>
+
+</html>
diff --git a/packages/main/test/specs/base/DOMObserver.spec.js b/packages/main/test/specs/base/DOMObserver.spec.js
@@ -0,0 +1,36 @@
+const assert = require("chai").assert;
+
+describe("DOMObserver", () => {
+	browser.url("http://localhost:8080/test-resources/sap/ui/webcomponents/main/pages/base/DOMObserver.html");
+
+	it("insertion order still fires DOMObserver", () => {
+
+        // prepare the table
+        browser.execute( () => {
+            const table = document.createElement("ui5-table");
+            const col1 = document.createElement("ui5-table-column");
+            col1.slot = "columns";
+            col1.appendChild(document.createTextNode("Column 1"));
+            table.appendChild(col1);
+            document.body.appendChild(table);
+        });
+
+        // execute
+        browser.execute(() => {
+            const table = document.querySelector("ui5-table");
+            const row1 = document.createElement("ui5-table-row");
+            // adding a row calls its connectedCallback, but there are async steps so the cell bellow should always trigger its mutationObserver
+            table.appendChild(row1);
+
+            // add the cell synchronously after the row's connectedCallback
+            const cell1 = document.createElement("ui5-table-cell");
+            cell1.appendChild(document.createTextNode("Cell 1"));
+            row1.appendChild(cell1);
+        })
+
+        // assert
+        const slots = browser.$("ui5-table-row").shadow$$("slot");
+        // the cell should have triggered the DOM mutation observer and a slot should be rendered in the row
+        assert.equal(slots.length, 1, "expected 1 slot in the ui5-table-row shadow DOM");
+	});
+});

Original file line number	Diff line number	Diff line change
`@@ -85,10 +85,12 @@ class UI5Element extends HTMLElement {`
`85`	`85`	`return;`
`86`	`86`	`}`
`87`	`87`
	`88`	`+ // always register the observer before yielding control to the main thread (await)`
	`89`	`+ this._startObservingDOMChildren();`
	`90`	`+`
`88`	`91`	`await this._processChildren();`
`89`	`92`	`await RenderScheduler.renderImmediately(this);`
`90`	`93`	`this._domRefReadyPromise._deferredResolve();`
`91`		`- this._startObservingDOMChildren();`
`92`	`94`	`if (typeof this.onEnterDOM === "function") {`
`93`	`95`	`this.onEnterDOM();`
`94`	`96`	`}`