@ui5/webcomponents-base 0.0.0-389bdbabc → 0.0.0-3e3654870

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

@@ -1,258 +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;
-
-			const original = el._invalidate;
-			el._invalidate = () => {
-				original.apply(el, arguments);
-				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;
-
-			const original = el._invalidate;
-			el._invalidate = () => {
-				original.apply(el, arguments);
-				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;
-
-			const original = el._invalidate;
-			el._invalidate = () => {
-				original.apply(el, arguments);
-				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;
-
-			const original = el._invalidate;
-			el._invalidate = () => {
-				original.apply(el, arguments);
-				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;
-
-			const original = el._invalidate;
-			el._invalidate = () => {
-				original.apply(el, arguments);
-				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;
-
-			const original = el._invalidate;
-			el._invalidate = () => {
-				original.apply(el, arguments);
-				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;
-
-			const original = el._invalidate;
-			el._invalidate = () => {
-				original.apply(el, arguments);
-				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;
-
-			const original = el._invalidate;
-			el._invalidate = () => {
-				original.apply(el, arguments);
-				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,
-			};
-
-			const originalInvalidate = el._invalidate;
-			el._invalidate = () => {
-				originalInvalidate.apply(el, arguments);
-				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,93 +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);
-			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,101 +0,0 @@
-const assert = require("chai").assert;
-
-describe("Metadata slot listenFor works", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
-
-	it("Tests that changing a listenFor property of a child invalidates the parent", () => {
-
-		const res = browser.executeAsync( async (done) => {
-			const parent = document.getElementById("parent");
-			const child = document.getElementById("child1");
-
-			const parentInvalidate = parent._invalidate;
-			let parentInvalidated = false;
-
-			parent._invalidate = () => {
-				parentInvalidate.apply(parent, arguments);
-				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-listenFor 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");
-
-			const parentInvalidate = parent._invalidate;
-			let parentInvalidated = false;
-
-			parent._invalidate = () => {
-				parentInvalidate.apply(parent, arguments);
-				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 listenFor include works", () => {
-
-		const res = browser.executeAsync( async (done) => {
-			const parent = document.getElementById("parent");
-			const child = document.getElementById("child2");
-
-			const parentInvalidate = parent._invalidate;
-			let parentInvalidated = false;
-
-			parent._invalidate = () => {
-				parentInvalidate.apply(parent, arguments);
-				parentInvalidated = true;
-			};
-
-			child.prop1 = "c"; // child2(items slot) prop1 invalidates
-
-			await window.RenderScheduler.whenFinished();
-
-			return done(parentInvalidated);
-		});
-
-		assert.strictEqual(res, true, "Parent invalidated");
-	});
-
-	it("Tests that listenFor exclude works", () => {
-
-		const res = browser.executeAsync( async (done) => {
-			const parent = document.getElementById("parent");
-			const child = document.getElementById("child2");
-
-			const parentInvalidate = parent._invalidate;
-			let parentInvalidated = false;
-
-			parent._invalidate = () => {
-				parentInvalidate.apply(parent, arguments);
-				parentInvalidated = true;
-			};
-
-			child.prop3 = "d"; //child2(items slot) prop3 does not
-
-			await window.RenderScheduler.whenFinished();
-
-			return done(parentInvalidated);
-		});
-
-		assert.strictEqual(res, false, "Parent not invalidated");
-	});
-});

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/StyleInjection.js

@@ -1,67 +0,0 @@
-import createStyleInHead from "../util/createStyleInHead.js";
-
-let ponyfillTimer;
-
-const ponyfillNeeded = () => !!window.CSSVarsPonyfill;
-
-const runPonyfill = () => {
-	ponyfillTimer = undefined;
-
-	window.CSSVarsPonyfill.cssVars({
-		rootElement: document.head,
-		include: "style[data-ui5-theme-properties],style[data-ui5-element-styles]",
-		silent: true,
-	});
-};
-
-const schedulePonyfill = () => {
-	if (!ponyfillTimer) {
-		ponyfillTimer = window.setTimeout(runPonyfill, 0);
-	}
-};
-
-/**
- * Creates/updates a style element holding all CSS Custom Properties
- * @param cssText
- * @param packageName
- */
-const injectThemeProperties = (cssText, packageName) => {
-	// Needed for all browsers
-	const styleElement = document.head.querySelector(`style[data-ui5-theme-properties="${packageName}"]`);
-	if (styleElement) {
-		styleElement.textContent = cssText || "";	// in case of undefined
-	} else {
-		const attributes = {
-			"data-ui5-theme-properties": packageName,
-		};
-		createStyleInHead(cssText, attributes);
-	}
-
-	// When changing the theme, run the ponyfill immediately
-	if (ponyfillNeeded()) {
-		runPonyfill();
-	}
-};
-
-/**
- * Creates a style element holding the CSS for a web component (and resolves CSS Custom Properties for IE)
- * @param tagName
- * @param cssText
- */
-const injectWebComponentStyle = (tagName, cssText) => {
-	// Edge and IE
-	createStyleInHead(cssText, {
-		"data-ui5-element-styles": tagName,
-		"disabled": "disabled",
-	});
-
-	// When injecting component styles, more might come in the same tick, so run the ponyfill async (to avoid double work)
-	if (ponyfillNeeded()) {
-		schedulePonyfill();
-	}
-};
-
-export {
-	injectThemeProperties,
-	injectWebComponentStyle,
-};