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

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");
+	});
+});

package/cypress/specs/UI5ElementSlots.cy.ts

@@ -0,0 +1,116 @@
+import "../../test/test-elements/Generic.js";
+
+describe("Slots work properly", () => {
+	it("Tests that properties exist on the element for each slot", () => {
+		cy.mount(`<ui5-test-generic>
+		Default slot text
+		<span>Default slot content</span>
+		<span slot="other">Other slot content 1</span>
+		<span slot="other">Other slot content 2</span>
+		<span slot="individual">Individual slot content 1</span>
+		<span slot="individual">Individual slot content 2</span>
+		<span slot="named">Item in slot with propertyName</span>
+		<span slot="named">Item in slot with propertyName</span>
+		<span slot="row-header">Item in slot row-header</span>
+		<span slot="row-header">Item in slot row-header</span>
+	</ui5-test-generic>
+		`);
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric");
+
+		cy.get("@testGeneric")
+			.invoke("prop", "content")
+			.then(value => {
+				return (value as Array<unknown>).length;
+			})
+			.should("be.greaterThan", 0);
+
+		cy.get("@testGeneric")
+			.invoke("prop", "other")
+			.should("have.length", 2);
+
+		cy.get("@testGeneric")
+			.invoke("prop", "individual")
+			.should("have.length", 2);
+
+		cy.get("@testGeneric")
+			.invoke("prop", "row-header")
+			.should("have.length", 2);
+
+		cy.get("@testGeneric")
+			.invoke("prop", "named")
+			.should("be.undefined");
+	});
+
+	it("Tests that properties exist on the element for each slot", () => {
+		cy.mount(`<ui5-test-generic>
+		<span slot="individual">Individual slot content 1</span>
+		<span slot="individual">Individual slot content 2</span>
+	</ui5-test-generic>
+		`);
+
+		cy.get("[slot=individual]")
+			.should("not.exist");
+
+		cy.get("[slot=individual-1]")
+			.should("exist");
+
+		cy.get("[slot=individual-2]")
+			.should("exist");
+	});
+
+	it("Tests that changing the slot attribute of children redistributes them across slot accessors", () => {
+		let defaultSlotLength = 0;
+
+		cy.mount(`<ui5-test-generic>
+<span>Default slot content</span>
+<span slot="other" id="o1">Other slot content 1</span>
+<span slot="other" id="o2">Other slot content 2</span>
+<span slot="named">Item in slot with propertyName</span>
+<span slot="named">Item in slot with propertyName</span>
+	</ui5-test-generic>
+		`);
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric");
+
+		cy.get("@testGeneric")
+			.invoke("prop", "content")
+			.then(value => {
+				defaultSlotLength = value.length;
+
+				return defaultSlotLength;
+			})
+			.should("be.greaterThan", 0);
+
+		cy.get("@testGeneric")
+			.invoke("prop", "other")
+			.should("have.length", 2);
+
+		cy.get("@testGeneric")
+			.invoke("prop", "items")
+			.should("have.length", 2);
+
+		cy.get("#o1")
+			.invoke("removeAttr", "slot");
+
+		cy.get("#o2")
+			.invoke("attr", "slot", "named");
+
+		cy.get("@testGeneric")
+			.then($testGeneric => {
+				cy.wrap($testGeneric)
+					.invoke("prop", "content")
+					.should("have.length", defaultSlotLength + 1);
+			});
+
+		cy.get("@testGeneric")
+			.invoke("prop", "other")
+			.should("have.length", 0);
+
+		cy.get("@testGeneric")
+			.invoke("prop", "items")
+			.should("have.length", 3);
+	});
+});