@ui5/webcomponents-base 0.0.0-50304f58c → 0.0.0-51202adee

package/dist/test-resources/specs/UI5ElementInvalidation.js

@@ -1,240 +0,0 @@
-const assert = require("chai").assert;
-
-describe("Invalidation works", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
-
-	it("Tests that changing a property invalidates", () => {
-
-		const res = browser.executeAsync( async (done) => {
-
-			const el = document.getElementById("gen");
-
-			// Exactly 1 invalidation for each property change
-			let invalidations = 0;
-
-			el.onInvalidation = () => {
-				invalidations++;
-			};
-
-			el.strProp = "new value";
-			el.boolProp = true;
-
-			await window.RenderScheduler.whenFinished();
-
-			return done(invalidations);
-		});
-
-		assert.strictEqual(res, 2, "Invalidated 2 times");
-	});
-
-	it("Tests that setting a property to the same value does not invalidate", () => {
-
-		const res = browser.executeAsync( async (done) => {
-			const text = "some value";
-
-			const el = document.getElementById("gen");
-			el.strProp = text;
-			await window.RenderScheduler.whenFinished();
-
-			let invalidations = 0;
-
-			el.onInvalidation = () => {
-				invalidations++;
-			};
-
-			el.strProp = text;
-
-			await window.RenderScheduler.whenFinished();
-
-			return done(invalidations);
-		});
-
-		assert.strictEqual(res, 0, "Not invalidated");
-	});
-
-	it("Tests that setting a property of type Object always invalidates", () => {
-
-		const res = browser.executeAsync( async (done) => {
-			const obj = {};
-			const otherObj = {};
-
-			const el = document.getElementById("gen");
-			el.objectProp = obj;
-			await window.RenderScheduler.whenFinished();
-
-			let invalidations = 0;
-
-			el.onInvalidation = () => {
-				invalidations++;
-			};
-
-			el.objectProp = otherObj;
-
-			await window.RenderScheduler.whenFinished();
-
-			return done(invalidations);
-		});
-
-		assert.strictEqual(res, 1, "Invalidated");
-	});
-
-	it("Tests that setting an array property always invalidates", () => {
-
-		const res = browser.executeAsync( async (done) => {
-			const arr = [];
-			const otherArr = [];
-
-			const el = document.getElementById("gen");
-			el.multiProp = arr;
-			await window.RenderScheduler.whenFinished();
-
-			let invalidations = 0;
-
-			el.onInvalidation = () => {
-				invalidations++;
-			};
-
-			el.multiProp = otherArr;
-
-			await window.RenderScheduler.whenFinished();
-
-			return done(invalidations);
-		});
-
-		assert.strictEqual(res, 1, "Invalidated");
-	});
-
-	it("Tests that adding a child invalidates", () => {
-
-		const res = browser.executeAsync( async (done) => {
-
-			const el = document.getElementById("gen");
-
-			// Number of invalidations may vary with children/slots count, so just check for invalidation
-			let invalidated = false;
-
-			el.onInvalidation = () => {
-				invalidated = true;
-			};
-
-			const div = document.createElement("div");
-			el.appendChild(div);
-
-			await window.RenderScheduler.whenFinished();
-
-			return done(invalidated);
-		});
-
-		assert.strictEqual(res, true, "Invalidated");
-	});
-
-	it("Tests that removing a child invalidates", () => {
-
-		const res = browser.executeAsync( async (done) => {
-
-			const el = document.getElementById("gen");
-			const div = document.createElement("div");
-			el.appendChild(div);
-
-			await window.RenderScheduler.whenFinished();
-
-			let invalidated = false;
-
-			el.onInvalidation = () => {
-				invalidated = true;
-			};
-
-			el.removeChild(div);
-
-			await window.RenderScheduler.whenFinished();
-
-			return done(invalidated);
-		});
-
-		assert.strictEqual(res, true, "Invalidated");
-	});
-
-	it("Tests that modifying textContent invalidates", () => {
-
-		const res = browser.executeAsync( async (done) => {
-
-			const el = document.getElementById("gen");
-			el.textContent = "test";
-			await window.RenderScheduler.whenFinished();
-
-			// Number of invalidations may vary with children/slots count, so just check for invalidation
-			let invalidated = false;
-
-			el.onInvalidation = () => {
-				invalidated = true;
-			};
-
-			el.textContent = "test2";
-
-			await window.RenderScheduler.whenFinished();
-
-			return done(invalidated);
-		});
-
-		assert.strictEqual(res, true, "Invalidated");
-	});
-
-	it("Tests that modifying nodeValue invalidates", () => {
-
-		const res = browser.executeAsync( async (done) => {
-
-			const el = document.getElementById("gen");
-			el.textContent = "test";
-			await window.RenderScheduler.whenFinished();
-
-			// Number of invalidations may vary with children/slots count, so just check for invalidation
-			let invalidated = false;
-
-			el.onInvalidation = () => {
-				invalidated = true;
-			};
-
-			el.childNodes[0].nodeValue = "test2";
-
-			await window.RenderScheduler.whenFinished();
-
-			return done(invalidated);
-		});
-
-		assert.strictEqual(res, true, "Invalidated");
-	});
-
-	it("Tests that multiple invalidations result in a single rendering", () => {
-
-		const res = browser.executeAsync( async (done) => {
-
-			const el = document.getElementById("gen");
-
-			const operations = {
-				invalidation: 0,
-				rendering: 0,
-			};
-
-			el.onInvalidation = () => {
-				operations.invalidation++;
-			};
-
-			const originalRender = el._render;
-			el._render = () => {
-				originalRender.apply(el, arguments);
-				operations.rendering++;
-			};
-
-			el.strProp = "new";
-			el.strProp = "newer";
-
-			await window.RenderScheduler.whenFinished();
-
-			return done(operations);
-		});
-
-		assert.strictEqual(res.invalidation, 2, "Invalidated 2 times");
-		assert.strictEqual(res.rendering, 1, "Rendered once");
-	});
-
-});

package/dist/test-resources/specs/UI5ElementLifecycle.js

@@ -1,96 +0,0 @@
-const assert = require("chai").assert;
-
-describe("Lifecycle works", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
-
-	it("Tests element creation callbacks", () => {
-
-		const res = browser.executeAsync( async (done) => {
-			const creationCallbacks = ["onBeforeRendering", "onAfterRendering", "onEnterDOM"];
-			const calledCallbacks = [];
-
-			const el = document.createElement("ui5-test-generic");
-
-			creationCallbacks.forEach(callback => {
-				const original = el[callback];
-				el[callback] = () => {
-					calledCallbacks.push(callback);
-					original.call(el);
-				};
-			});
-
-			document.body.appendChild(el);
-			await window.RenderScheduler.whenFinished();
-
-			return done(calledCallbacks);
-		});
-
-		assert.strictEqual(res.length, 3, "All 3 callbacks called");
-		assert.strictEqual(res[0], "onBeforeRendering", "onBeforeRendering called first");
-		assert.strictEqual(res[1], "onAfterRendering", "onAfterRendering called second");
-		assert.strictEqual(res[2], "onEnterDOM", "onEnterDOM called third");
-	});
-
-	it("Tests element invalidation callbacks", () => {
-
-		const res = browser.executeAsync( async (done) => {
-			const invalidationCallbacks = ["onBeforeRendering", "onAfterRendering"];
-			const calledCallbacks = [];
-
-			const el = document.createElement("ui5-test-generic");
-			document.body.appendChild(el);
-
-			await window.RenderScheduler.whenFinished();
-
-			el.strProp = "some string";
-
-			invalidationCallbacks.forEach(callback => {
-				const original = el[callback];
-				el[callback] = () => {
-					calledCallbacks.push(callback);
-					original.call(el);
-				};
-			});
-
-			await window.RenderScheduler.whenFinished();
-
-			return done(calledCallbacks);
-		});
-
-		assert.strictEqual(res.length, 2, "All 2 callbacks called");
-		assert.strictEqual(res[0], "onBeforeRendering", "onBeforeRendering called first");
-		assert.strictEqual(res[1], "onAfterRendering", "onAfterRendering called second");
-	});
-
-	it("Tests element destruction callback", () => {
-
-		const res = browser.executeAsync( async (done) => {
-			const destructionCallbacks = ["onExitDOM"];
-			const calledCallbacks = [];
-
-			const el = document.createElement("ui5-test-generic");
-
-			destructionCallbacks.forEach(callback => {
-				const original = el[callback];
-				el[callback] = () => {
-					calledCallbacks.push(callback);
-					original.call(el);
-				};
-			});
-
-			document.body.appendChild(el);
-
-			await window.RenderScheduler.whenFinished(); // Must wait, otherwise onExitDOM won't be called
-
-			document.body.removeChild(el);
-
-			await window.RenderScheduler.whenFinished();
-
-			return done(calledCallbacks);
-		});
-
-		assert.strictEqual(res.length, 1, "Only 1 callback was called");
-		assert.strictEqual(res[0], "onExitDOM", "onExitDOM called");
-	});
-
-});

package/dist/test-resources/specs/UI5ElementListenForChildPropChanges.spec.js

@@ -1,73 +0,0 @@
-const assert = require("chai").assert;
-
-describe("Metadata slot invalidateOnChildChange works", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
-
-	it("Tests that changing a monitored property of a child invalidates the parent", () => {
-
-		const res = browser.executeAsync( async (done) => {
-			const parent = document.getElementById("parent");
-			const child = document.getElementById("child1");
-
-			let parentInvalidated = false;
-
-			parent.onInvalidation = () => {
-				parentInvalidated = true;
-			};
-
-			child.prop1 = "a"; // child1(default slot) prop1 -> invalidates
-
-			await window.RenderScheduler.whenFinished();
-
-			return done(parentInvalidated);
-		});
-
-		assert.strictEqual(res, true, "Parent invalidated");
-	});
-
-	it("Tests that changing a non-monitored property of a child does not invalidate the parent", () => {
-
-		const res = browser.executeAsync( async (done) => {
-			const parent = document.getElementById("parent");
-			const child = document.getElementById("child1");
-
-			let parentInvalidated = false;
-
-			parent.onInvalidation = () => {
-				parentInvalidated = true;
-			};
-
-			child.prop2 = "b"; // child1(default slot) prop 2 -> does not
-
-			await window.RenderScheduler.whenFinished();
-
-			return done(parentInvalidated);
-		});
-
-		assert.strictEqual(res, false, "Parent not invalidated");
-	});
-
-	it("Tests that listening for all properties works", () => {
-
-		const res = browser.executeAsync( async (done) => {
-			const parent = document.getElementById("parent");
-			const child = document.getElementById("child2");
-
-			let parentInvalidatedCount = 0;
-
-			parent.onInvalidation = () => {
-				parentInvalidatedCount++;
-			};
-
-			child.prop1 = "c";
-			child.prop2 = "c";
-			child.prop3 = "c";
-
-			await window.RenderScheduler.whenFinished();
-
-			return done(parentInvalidatedCount);
-		});
-
-		assert.strictEqual(res, 3, "Parent invalidated 3 times");
-	});
-});

package/dist/test-resources/specs/UI5ElementMetadataExt.js

@@ -1,40 +0,0 @@
-const assert = require("chai").assert;
-
-describe("Metadata can be extended", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
-
-	it("When extending metadata, both own and extended entities exist in the resulting metadata", () => {
-
-		const res = browser.execute( () => {
-
-			const el = document.getElementById("genExt");
-			const m = el.constructor.getMetadata();
-
-			const ok = !!m.getProperties().strProp &&
-				!!m.getProperties().extProp &&
-				!!m.getSlots().default &&
-				!!m.getSlots().extSlot;
-
-			return ok;
-		});
-
-		assert.strictEqual(res, true, "Metadata properly extended");
-	});
-
-	it("When extending metadata, property defaultValue can be modified", () => {
-
-		const res = browser.execute( () => {
-
-			const el = document.getElementById("genExt");
-			const m = el.constructor.getMetadata();
-
-			const ok = !!m.getProperties().strProp &&
-				m.getProperties().strProp.defaultValue === "Ext";
-
-			return ok;
-		});
-
-		assert.strictEqual(res, true, "Property defaultValue changed");
-	});
-
-});

package/dist/test-resources/specs/UI5ElementPropertyValidation.js

@@ -1,12 +0,0 @@
-const assert = require("chai").assert;
-
-describe("Properties can only have values, restricted to their types", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
-
-	it("String property enforced to string", () => {
-		const el = browser.$("#gen");
-		el.setProperty("strProp", 5);
-		assert.strictEqual(el.getProperty("strProp"), "5", "String property is string");
-	});
-
-});

package/dist/test-resources/specs/UI5ElementPropsAndAttrs.spec.js

@@ -1,65 +0,0 @@
-const assert = require("chai").assert;
-
-describe("Properties and attributes convert to each other", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
-
-	it("Tests that properties with default values are initialized with the default value", () => {
-		const el = browser.$("#gen");
-
-		assert.strictEqual(el.getProperty("defaultValueProp"), "Hello", "defaultValueProp is properly initialized");
-	});
-
-	it("Tests that prop-attr conversion works for string properties", () => {
-		const el = browser.$("#gen");
-
-		el.setProperty("strProp", "test1");
-		assert.strictEqual(el.getAttribute("str-prop"), "test1", "Attribute affected by property change");
-
-		el.setAttribute("str-prop", "test2");
-		assert.strictEqual(el.getProperty("strProp"), "test2", "Property affected by attribute change");
-	});
-
-	it("Tests that prop-attr conversion works for boolean properties", () => {
-		const el = browser.$("#gen");
-
-		el.setProperty("boolProp", true);
-		assert.strictEqual(el.getAttribute("bool-prop"), "", "Attribute affected by property change");
-
-		el.setProperty("boolProp", false);
-		assert.strictEqual(el.getAttribute("bool-prop"), null, "Attribute affected by property change");
-
-		el.setAttribute("bool-prop", "");
-		assert.strictEqual(el.getProperty("boolProp"), true, "Property affected by attribute change");
-
-		el.removeAttribute("bool-prop");
-		assert.strictEqual(el.getProperty("boolProp"), false, "Property affected by attribute change");
-	});
-
-	it("Tests that object properties have no attributes", () => {
-		const el = browser.$("#gen");
-
-		el.setProperty("objectProp", {});
-		assert.strictEqual(el.getAttribute("object-prop"), null, "Attribute not there");
-	});
-
-	it("Tests that array properties have no attributes", () => {
-		const el = browser.$("#gen");
-
-		el.setProperty("multiProp", ["a", "b"]);
-		assert.strictEqual(el.getAttribute("multi-prop"), null, "Attribute not there");
-	});
-
-	it("Tests that noAttribute properties have no attributes", () => {
-		const el = browser.$("#gen");
-
-		el.setProperty("noAttributeProp", "some value");
-		assert.strictEqual(el.getAttribute("no-attribute-prop"), null, "Attribute not there");
-	});
-
-	it("Tests that properties with default values do not automatically set attributes", () => {
-		const el = browser.$("#gen");
-
-		assert.strictEqual(el.getAttribute("default-value-prop"), null, "Attribute not there for defaultValueProp");
-	});
-
-});

package/dist/test-resources/specs/UI5ElementShadowDOM.js

@@ -1,22 +0,0 @@
-const assert = require("chai").assert;
-
-describe("The framework can define web components", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
-
-	it("Tests that element's Shadow DOM is rendered if it has a template", () => {
-		const res = browser.execute(() => {
-			return document.getElementById("gen").shadowRoot;
-		});
-
-		assert.strictEqual(!!res, true, "Shadow root created");
-		assert.strictEqual(browser.$("#gen").shadow$("div>p").isExisting(), true, "Shadow root content created");
-	});
-
-	it("Tests that element's Shadow DOM is not rendered if it has no template", () => {
-		const res = browser.execute(() => {
-			return document.getElementById("noShadow").shadowRoot;
-		});
-
-		assert.strictEqual(!!res, false, "Shadow root not created");
-	});
-});

package/dist/test-resources/specs/UI5ElementSlots.js

@@ -1,34 +0,0 @@
-const assert = require("chai").assert;
-
-describe("Slots work properly", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
-
-	it("Tests that properties exist on the element for each slot", () => {
-		const res = browser.execute(() => {
-			const expectedValues = {};
-
-			const el = document.getElementById("withContent");
-
-			expectedValues.default = el.default.length > 0;
-			expectedValues.other = el.other.length === 2;
-			expectedValues.individual = el.individual.length === 2;
-			expectedValues.items = el.items.length === 2;
-			expectedValues.named = el.named === undefined;
-
-			return expectedValues;
-		});
-
-		assert.strictEqual(res.default, true, "There are elements in the default property");
-		assert.strictEqual(res.other, true, "There are 2 elements in the other property");
-		assert.strictEqual(res.individual, true, "There are 2 elements in the individual property");
-		assert.strictEqual(res.items, true, "There are 2 elements in the items property");
-		assert.strictEqual(res.named, true, "There is no named property as propertyName changed it to items");
-	});
-
-	it("Tests that individualSlots modifies the slot property of slotted children", () => {
-		assert.strictEqual(browser.$$("#withContent>[slot=individual]").length, 0, "There are no children with slot=individual");
-		assert.strictEqual(browser.$$("#withContent>[slot=individual-1]").length, 1, "The slot of the first child became individual-1");
-		assert.strictEqual(browser.$$("#withContent>[slot=individual-2]").length, 1, "The slot of the second child became individual-2");
-	});
-
-});

package/dist/theming/CSSVarsPonyfill.js

@@ -1,68 +0,0 @@
-let ponyfillTimer;
-
-const ponyfillNeeded = () => !!window.CSSVarsPonyfill;
-
-/**
- * Removes the "data-cssvars-group" attribute for all element styles and their respective out nodes.
- * CSSVarsPonyfill has internal counters for "group" and "job" and running several instances of the ponyfill may lead to issues, since these counters are not shared
- * Therefore we remove them for our "data-ui5-element-styles"
- *
- * @param rootElement
- */
-const cleanPonyfillMetadata = (rootElement = document.head) => {
-	rootElement.querySelectorAll(`style[data-ui5-element-styles][data-cssvars="src"]`).forEach(tag => {
-		const group = tag.getAttribute("data-cssvars-group");
-		tag.removeAttribute("data-cssvars-group");
-		tag.disabled = false;
-		const outNode = rootElement.querySelector(`style[data-cssvars="out"][data-cssvars-group="${group}"]`);
-		if (outNode) {
-			outNode.removeAttribute("data-cssvars-group");
-		}
-	});
-};
-
-const runPonyfill = () => {
-	ponyfillTimer = undefined;
-
-	cleanPonyfillMetadata();
-	window.CSSVarsPonyfill.cssVars({
-		rootElement: document.head,
-		variables: isCompact() ? getCompactModeVars() : {},
-		silent: true,
-	});
-};
-
-const schedulePonyfill = () => {
-	if (!ponyfillTimer) {
-		ponyfillTimer = window.setTimeout(runPonyfill, 0);
-	}
-};
-
-const isCompact = () => {
-	const b = document.body;
-	return b.hasAttribute("data-ui5-compact-size") || b.classList.contains("ui5-content-density-compact") || b.classList.contains("sapUiSizeCompact");
-};
-
-const getCompactModeVars = () => {
-	const compactVars = {};
-	[...document.querySelectorAll(`[data-ui5-theme-properties]`)].forEach(el => {
-		const cssContent = el.textContent.replace("\n", "");
-		let match;
-		const regExp = new RegExp("data-ui5-compact-size[^{]*{(.*?)}", "g");
-		while ((match = regExp.exec(cssContent)) !== null) { // eslint-disable-line
-			const compactCSS = match[1];
-			compactCSS.split(";").forEach(declaration => {
-				const pair = declaration.split(":");
-				compactVars[pair[0].trim()] = pair[1].trim();
-			});
-		}
-	});
-
-	return compactVars;
-};
-
-export {
-	ponyfillNeeded,
-	runPonyfill,
-	schedulePonyfill,
-};