@ui5/webcomponents-base 2.1.0 → 2.2.0-rc.0

package/cypress/specs/Theming.cy.ts

@@ -0,0 +1,74 @@
+import { setTheme } from "../../src/config/Theme.js";
+import { getCurrentRuntimeIndex } from "../../src/Runtimes.js";
+import "../../test/test-elements/Accessor.js";
+import "../../test/assets/Themes.js";
+
+describe("Theming works", () => {
+	it("Tests that the parameters for the default theme are embedded on boot", () => {
+		const currentRuntime = 0;
+		const dataPropAttr = `data-ui5-component-properties-${currentRuntime}`;
+
+		cy.wrap({ getCurrentRuntimeIndex })
+			.invoke("getCurrentRuntimeIndex")
+			.should("equal", currentRuntime);
+
+		cy.document()
+			.its("adoptedStyleSheets")
+			.then(adoptedStyleSheets => {
+				// eslint-disable-next-line
+				return adoptedStyleSheets.find(sh => (sh as Record<string, any>)._ui5StyleId === `${dataPropAttr}|@ui5/webcomponents-base-test`);
+			})
+			.its("cssRules")
+			.its(0)
+			.its("cssText")
+			.should("include", "--var1: grey");
+	});
+
+	it("Tests that the parameters for the default theme are embedded on boot", () => {
+		const newTheme = "sap_fiori_3_hcb";
+		const currentRuntime = 0;
+		const dataPropAttr = `data-ui5-component-properties-${currentRuntime}`;
+
+		cy.wrap({ getCurrentRuntimeIndex })
+			.invoke("getCurrentRuntimeIndex")
+			.should("equal", currentRuntime);
+
+		cy.wrap({ setTheme })
+			.invoke("setTheme", newTheme);
+
+		cy.document()
+			.its("adoptedStyleSheets")
+			.then(adoptedStyleSheets => {
+				// eslint-disable-next-line
+				return adoptedStyleSheets.find(sh => (sh as Record<string, any>)._ui5StyleId === `${dataPropAttr}|@ui5/webcomponents-base-test`);
+			})
+			.its("cssRules")
+			.its(0)
+			.its("cssText")
+			.should("include", "--var1: yellow");
+	});
+
+	it("Tests that the parameters for the default theme are embedded on boot", () => {
+		const unknownTheme = "sap_unknown_theme";
+		const currentRuntime = 0;
+		const dataPropAttr = `data-ui5-component-properties-${currentRuntime}`;
+
+		cy.wrap({ getCurrentRuntimeIndex })
+			.invoke("getCurrentRuntimeIndex")
+			.should("equal", currentRuntime);
+
+		cy.wrap({ setTheme })
+			.invoke("setTheme", unknownTheme);
+
+		cy.document()
+			.its("adoptedStyleSheets")
+			.then(adoptedStyleSheets => {
+				// eslint-disable-next-line
+				return adoptedStyleSheets.find(sh => (sh as Record<string, any>)._ui5StyleId === `${dataPropAttr}|@ui5/webcomponents-base-test`);
+			})
+			.its("cssRules")
+			.its(0)
+			.its("cssText")
+			.should("include", "--var1: grey");
+	});
+});

package/cypress/specs/UI5ElementInvalidation.cy.ts

@@ -0,0 +1,207 @@
+import type UI5Element from "../../src/UI5Element.js";
+import "../../test/test-elements/Generic.js";
+
+describe("Invalidation works", () => {
+	it("Tests that changing a property invalidates", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric")
+			.then(el => {
+				cy.spy<UI5Element>((el.get(0) as UI5Element), "onInvalidation").as("invalidations");
+			});
+
+		cy.get("@testGeneric")
+			.invoke("prop", "strProp", "new value");
+
+		cy.get("@testGeneric")
+			.invoke("prop", "boolProp", true);
+
+		cy.get("@invalidations")
+			.should("have.been.calledTwice");
+	});
+
+	it("Tests that setting a property to the same value does not invalidate", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		const text = "new value";
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric")
+			.invoke("prop", "strProp", text)
+			.then(el => {
+				cy.spy<UI5Element>((el.get(0) as UI5Element), "onInvalidation").as("invalidations");
+			});
+
+		cy.get("@testGeneric")
+			.invoke("prop", "strProp", text);
+
+		cy.get("@invalidations")
+			.should("have.not.been.called");
+	});
+
+	it("Tests that setting a property of type Object always invalidates", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		const obj = {};
+		const otherObj = {};
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric")
+			.invoke("prop", "objectProp", obj)
+			.then(el => {
+				cy.spy<UI5Element>((el.get(0) as UI5Element), "onInvalidation").as("invalidations");
+			});
+
+		cy.get("@testGeneric")
+			.invoke("prop", "objectProp", otherObj);
+
+		cy.get("@invalidations")
+			.should("have.been.calledOnce");
+	});
+
+	it("Tests that setting an array property always invalidates", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		const arr: Array<string> = [];
+		const otherArr: Array<string> = [];
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric")
+			.invoke("prop", "multiProp", arr)
+			.then(el => {
+				cy.spy<UI5Element>((el.get(0) as UI5Element), "onInvalidation").as("invalidations");
+			});
+
+		cy.get("@testGeneric")
+			.invoke("prop", "multiProp", otherArr);
+
+		cy.get("@invalidations")
+			.should("have.been.calledOnce");
+	});
+
+	it("Tests that adding a child invalidates", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric")
+			.then(el => {
+				cy.spy<UI5Element>((el.get(0) as UI5Element), "onInvalidation").as("invalidations");
+			});
+
+		cy.get("@testGeneric")
+			.then($testGeneric => {
+				const div = document.createElement("div");
+				$testGeneric.append(div);
+			});
+
+		cy.get("@invalidations")
+			.should("have.been.called");
+	});
+
+	it("Tests that removing a child invalidates", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		const div = document.createElement("div");
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric")
+			.then($testGeneric => {
+				$testGeneric.append(div);
+
+				return $testGeneric;
+			})
+			.then($testGeneric => {
+				cy.spy<UI5Element>(($testGeneric.get(0) as UI5Element), "onInvalidation").as("invalidations");
+			});
+
+		cy.get("@invalidations")
+			.should("have.not.been.called");
+
+		cy.wrap(div)
+			.then($div => {
+				$div.remove();
+			});
+
+		cy.get("@invalidations")
+			.should("have.been.called");
+	});
+
+	it("Tests that modifying textContent invalidates", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric")
+			.then($testGeneric => {
+				$testGeneric.text("test");
+
+				return $testGeneric;
+			})
+			.then($testGeneric => {
+				cy.spy<UI5Element>(($testGeneric.get(0) as UI5Element), "onInvalidation").as("invalidations");
+			});
+
+		cy.get("@invalidations")
+			.should("have.not.been.called");
+
+		cy.get("@testGeneric")
+			.then($testGeneric => {
+				$testGeneric.text("test2");
+			});
+
+		cy.get("@invalidations")
+			.should("have.been.called");
+	});
+
+	it("Tests that modifying nodeValue invalidates", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric")
+			.then($testGeneric => {
+				$testGeneric.text("test");
+
+				return $testGeneric;
+			})
+			.then($testGeneric => {
+				cy.spy<UI5Element>(($testGeneric.get(0) as UI5Element), "onInvalidation").as("invalidations");
+			});
+
+		cy.get("@invalidations")
+			.should("have.not.been.called");
+
+		cy.get("@testGeneric")
+			.then($testGeneric => {
+				$testGeneric.get(0).childNodes[0].nodeValue = "test2";
+			});
+
+		cy.get("@invalidations")
+			.should("have.been.called");
+	});
+
+	it("Tests that multiple invalidations result in a single rendering", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric");
+
+		cy.get("@testGeneric")
+			.then($testGeneric => {
+				cy.spy<UI5Element>(($testGeneric.get(0) as UI5Element), "onInvalidation").as("invalidations");
+
+				cy.spy<UI5Element>(($testGeneric.get(0) as UI5Element), "_render").as("rendering");
+			});
+
+		cy.get("@testGeneric")
+			.invoke("prop", "strProp", "new");
+
+		cy.get("@testGeneric")
+			.invoke("prop", "strProp", "new2");
+
+		cy.get("@invalidations")
+			.should("have.been.calledTwice");
+
+		cy.get("@rendering")
+			.should("have.been.calledOnce");
+	});
+});

package/cypress/specs/UI5ElementLifecycle.cy.ts

@@ -0,0 +1,82 @@
+import type UI5Element from "../../src/UI5Element.js";
+import "../../test/test-elements/Generic.js";
+
+describe("Lifecycle works", () => {
+	it("Tests that changing a property invalidates", () => {
+		const el = document.createElement("ui5-test-generic");
+
+		cy.mount(`<div id="container"></div>`);
+
+		cy.spy<UI5Element>((el as UI5Element), "onBeforeRendering").as("onBeforeRendering");
+
+		cy.spy<UI5Element>((el as UI5Element), "onAfterRendering").as("onAfterRendering");
+
+		cy.spy<UI5Element>((el as UI5Element), "onEnterDOM").as("onEnterDOM");
+
+		cy.get("#container")
+			.then($container => {
+				$container.append(el);
+			});
+
+		cy.get("@onBeforeRendering")
+			.should("have.been.called")
+			.and("have.been.calledBefore", "@onAfterRendering")
+			.and("have.been.calledBefore", "@onEnterDOM");
+
+		cy.get("@onAfterRendering")
+			.should("have.been.called")
+			.and("have.been.calledBefore", "@onEnterDOM");
+
+		cy.get("@onEnterDOM")
+			.should("have.been.called");
+	});
+
+	it("Tests element invalidation callbacks", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric")
+			.then($testGeneric => {
+				cy.spy<UI5Element>(($testGeneric.get(0) as UI5Element), "onBeforeRendering").as("onBeforeRendering");
+
+				cy.spy<UI5Element>(($testGeneric.get(0) as UI5Element), "onAfterRendering").as("onAfterRendering");
+			});
+
+		cy.get("@testGeneric")
+			.invoke("prop", "strProp", "some string");
+
+		cy.get("@onBeforeRendering")
+			.should("have.been.called")
+			.and("have.been.calledBefore", "@onAfterRendering");
+
+		cy.get("@onAfterRendering")
+			.should("have.been.called");
+	});
+
+	it("Tests element destruction callback", () => {
+		const el = document.createElement("ui5-test-generic");
+
+		cy.mount(`<div id="container"></div>`);
+
+		cy.spy<UI5Element>((el as UI5Element), "onExitDOM").as("onExitDOM");
+		cy.spy<UI5Element>((el as UI5Element), "onEnterDOM").as("onEnterDOM");
+
+		cy.get("#container")
+			.then($container => {
+				$container.append(el);
+
+				return $container;
+			});
+
+		cy.get("@onEnterDOM")
+			.should("have.been.called");
+
+		cy.wrap(el)
+			.then($el => {
+				$el.remove();
+			});
+
+		cy.get("@onExitDOM")
+			.should("have.been.called");
+	});
+});

package/cypress/specs/UI5ElementListenForChildPropChanges.cy.ts

@@ -0,0 +1,62 @@
+import type UI5Element from "../../src/UI5Element.js";
+
+import "../../test/test-elements/Parent.js";
+import "../../test/test-elements/Child.js";
+
+describe("Invalidation works", () => {
+	it("Tests that changing a monitored property of a child invalidates the parent", () => {
+		cy.mount(`<ui5-test-parent>
+		<ui5-test-child></ui5-test-child>
+	</ui5-test-parent>`);
+
+		cy.get("[ui5-test-parent]")
+			.as("testParent")
+			.then(el => {
+				cy.spy<UI5Element>((el.get(0) as UI5Element), "onInvalidation").as("invalidations");
+			});
+
+		cy.get("[ui5-test-child]")
+			.invoke("prop", "prop1", "a");
+
+		cy.get("@invalidations")
+			.should("have.been.called");
+	});
+
+	it("Tests that changing a non-monitored property of a child does not invalidate the parent", () => {
+		cy.mount(`<ui5-test-parent>
+		<ui5-test-child></ui5-test-child>
+	</ui5-test-parent>`);
+
+		cy.get("[ui5-test-parent]")
+			.as("testParent")
+			.then(el => {
+				cy.spy<UI5Element>((el.get(0) as UI5Element), "onInvalidation").as("invalidations");
+			});
+
+		cy.get("[ui5-test-child]")
+			.invoke("prop", "prop2", "b");
+
+		cy.get("@invalidations")
+			.should("have.not.been.called");
+	});
+
+	it("Tests that changing a non-monitored property of a child does not invalidate the parent", () => {
+		cy.mount(`<ui5-test-parent>
+		<ui5-test-child slot="items"></ui5-test-child>
+	</ui5-test-parent>`);
+
+		cy.get("[ui5-test-parent]")
+			.as("testParent")
+			.then(el => {
+				cy.spy<UI5Element>((el.get(0) as UI5Element), "onInvalidation").as("invalidations");
+			});
+
+		cy.get("[ui5-test-child]")
+			.invoke("prop", "prop1", "a")
+			.invoke("prop", "prop2", "b")
+			.invoke("prop", "prop3", "c");
+
+		cy.get("@invalidations")
+			.should("have.been.calledThrice");
+	});
+});

package/cypress/specs/UI5ElementMetadataExt.cy.ts

@@ -0,0 +1,42 @@
+import type UI5Element from "../../src/UI5Element.js";
+import "../../test/test-elements/GenericExt.js";
+
+describe("Invalidation works", () => {
+	it("Tests that changing a monitored property of a child invalidates the parent", () => {
+		cy.mount(`<ui5-test-generic-ext></ui5-test-generic-ext>`);
+
+		cy.get("[ui5-test-generic-ext]")
+			.then($el => {
+				return ($el.get(0).constructor as typeof UI5Element).getMetadata();
+			})
+			.as("metadata");
+
+		cy.get("@metadata")
+			.invoke("getProperties")
+			.its("strProp")
+			.should("exist");
+
+		cy.get("@metadata")
+			.invoke("getProperties")
+			.its("extProp")
+			.should("exist");
+
+		cy.get("@metadata")
+			.invoke("getSlots")
+			.its("default")
+			.should("exist");
+
+		cy.get("@metadata")
+			.invoke("getSlots")
+			.its("extSlot")
+			.should("exist");
+	});
+
+	it("When extending metadata, property defaultValue can be modified", () => {
+		cy.mount(`<ui5-test-generic-ext></ui5-test-generic-ext>`);
+
+		cy.get("[ui5-test-generic-ext]")
+			.invoke("attr", "str-prop")
+			.should("equal", "Ext");
+	});
+});

package/cypress/specs/UI5ElementPropertyValidation.cy.ts

@@ -0,0 +1,17 @@
+import "../../test/test-elements/Generic.js";
+
+describe("Properties can only have values, restricted to their types", () => {
+	it("String property enforced to string", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric");
+
+		cy.get("@testGeneric")
+			.invoke("prop", "strProp", 5);
+
+		cy.get("@testGeneric")
+			.invoke("prop", "strProp")
+			.should("equal", 5);
+	});
+});

package/cypress/specs/UI5ElementPropsAndAttrs.cy.ts

@@ -0,0 +1,113 @@
+import "../../test/test-elements/Generic.js";
+
+describe("Properties and attributes convert to each other", () => {
+	it("Tests that properties with default values are initialized with the default value", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric");
+
+		cy.get("@testGeneric")
+			.invoke("prop", "defaultValueProp")
+			.should("equal", "Hello");
+	});
+
+	it("Tests that prop-attr conversion works for string properties", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric");
+
+		cy.get("@testGeneric")
+			.invoke("prop", "strProp", "test1");
+
+		cy.get("@testGeneric")
+			.should("have.attr", "str-prop", "test1");
+
+		cy.get("@testGeneric")
+			.invoke("attr", "str-prop", "test2");
+
+		cy.get("@testGeneric")
+			.invoke("prop", "strProp")
+			.should("equal", "test2");
+	});
+
+	it("Tests that prop-attr conversion works for boolean properties", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric");
+
+		cy.get("@testGeneric")
+			.invoke("prop", "boolProp", true);
+
+		cy.get("@testGeneric")
+			.should("have.attr", "bool-prop");
+
+		cy.get("@testGeneric")
+			.invoke("prop", "boolProp", false);
+
+		cy.get("@testGeneric")
+			.should("not.have.attr", "bool-prop");
+
+		cy.get("@testGeneric")
+			.invoke("attr", "bool-prop", true);
+
+		cy.get("@testGeneric")
+			.invoke("prop", "boolProp")
+			.should("be.true");
+
+		cy.get("@testGeneric")
+			.invoke("removeAttr", "bool-prop");
+
+		cy.get("@testGeneric")
+			.invoke("prop", "boolProp")
+			.should("be.false");
+	});
+
+	it("Tests that object properties have no attributes", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric");
+
+		cy.get("@testGeneric")
+			.invoke("prop", "objectProp", {});
+
+		cy.get("@testGeneric")
+			.should("not.have.attr", "object-prop");
+	});
+
+	it("Tests that array properties have no attributes", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric");
+
+		cy.get("@testGeneric")
+			.invoke("prop", "multiProp", ["a", "b"]);
+
+		cy.get("@testGeneric")
+			.should("not.have.attr", "multi-prop");
+	});
+
+	it("Tests that noAttribute properties have no attributes", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric");
+
+		cy.get("@testGeneric")
+			.invoke("prop", "noAttributeProp", "some value");
+
+		cy.get("@testGeneric")
+			.should("not.have.attr", "no-attribute-prop");
+	});
+
+	it("Tests that properties with default values do automatically set attributes", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		cy.get("[ui5-test-generic]")
+			.should("have.attr", "default-value-prop", "Hello");
+	});
+});

package/cypress/specs/UI5ElementShadowDOM.cy.ts

@@ -0,0 +1,30 @@
+import "../../test/test-elements/Generic.js";
+import "../../test/test-elements/NoShadowDOM.js";
+
+describe("The framework can define web components", () => {
+	it("Tests that element's Shadow DOM is rendered if it has a template", () => {
+		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric")
+			.then($element => {
+				return !!$element.get(0).shadowRoot;
+			})
+			.should("be.true");
+
+		cy.get("@testGeneric")
+			.shadow()
+			.find("div > p")
+			.should("exist");
+	});
+
+	it("Tests that element's Shadow DOM is not rendered if it has no template", () => {
+		cy.mount(`<ui5-test-no-shadow></ui5-test-no-shadow>`);
+
+		cy.get("[ui5-test-no-shadow]")
+			.then($element => {
+				return !!$element.get(0).shadowRoot;
+			})
+			.should("be.false");
+	});
+});