-
Notifications
You must be signed in to change notification settings - Fork 254
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: trigger dom mutation observer independent of insertion order (#847)
DOM insertion order was leading to situations where the mutation observer was not registered leaving empty rendered rows fixes: #839
- Loading branch information
Showing
3 changed files
with
62 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
packages/main/test/sap/ui/webcomponents/main/pages/base/DOMObserver.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"); | ||
}); | ||
}); |