@ui5/webcomponents-base 2.11.0-rc.1 → 2.11.0-rc.3

package/cypress/specs/UI5ElementInvalidation.cy.tsx

@@ -1,252 +0,0 @@
-import type UI5Element from "../../src/UI5Element.js";
-import Generic from "../../test/test-elements/Generic.js";
-
-describe("Invalidation works", () => {
-	it("Tests that changing a property invalidates", () => {
-		cy.mount(<Generic></Generic>);
-
-		cy.get<Generic>("[ui5-test-generic]")
-			.should($el => {
-				expect($el[0].getDomRef()).to.exist;
-			});
-
-		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(<Generic></Generic>);
-
-		const text = "new value";
-
-		cy.get<Generic>("[ui5-test-generic]")
-			.should($el => {
-				expect($el[0].getDomRef()).to.exist;
-			});
-
-		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(<Generic></Generic>);
-
-		const obj = {};
-		const otherObj = {};
-
-		cy.get<Generic>("[ui5-test-generic]")
-			.should($el => {
-				expect($el[0].getDomRef()).to.exist;
-			});
-
-		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(<Generic></Generic>);
-
-		const arr: Array<string> = [];
-		const otherArr: Array<string> = [];
-
-		cy.get<Generic>("[ui5-test-generic]")
-			.should($el => {
-				expect($el[0].getDomRef()).to.exist;
-			});
-
-		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(<Generic></Generic>);
-
-		cy.get<Generic>("[ui5-test-generic]")
-			.should($el => {
-				expect($el[0].getDomRef()).to.exist;
-			});
-
-		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(<Generic></Generic>);
-
-		const div = document.createElement("div");
-
-		cy.get<Generic>("[ui5-test-generic]")
-			.should($el => {
-				expect($el[0].getDomRef()).to.exist;
-			});
-
-		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(<Generic></Generic>);
-
-		cy.get<Generic>("[ui5-test-generic]")
-			.should($el => {
-				expect($el[0].getDomRef()).to.exist;
-			});
-
-		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(<Generic></Generic>);
-
-		cy.get<Generic>("[ui5-test-generic]")
-			.should($el => {
-				expect($el[0].getDomRef()).to.exist;
-			});
-
-		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(<Generic></Generic>);
-
-		cy.get<Generic>("[ui5-test-generic]")
-			.should($el => {
-				expect($el[0].getDomRef()).to.exist;
-			});
-
-		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.tsx

@@ -1,82 +0,0 @@
-import type UI5Element from "../../src/UI5Element.js";
-import Generic from "../../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(<Generic></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.tsx

@@ -1,83 +0,0 @@
-import type UI5Element from "../../src/UI5Element.js";
-
-import Parent from "../../test/test-elements/Parent.js";
-import Child from "../../test/test-elements/Child.js";
-
-describe("Invalidation works", () => {
-	it("Tests that changing a monitored property of a child invalidates the parent", () => {
-		cy.mount(
-			<Parent>
-				<Child></Child>
-			</Parent>
-		);
-
-		cy.get<Parent>("[ui5-test-parent]")
-			.should($el => {
-				expect($el[0].getDomRef()).to.exist;
-			});
-
-		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(
-			<Parent>
-				<Child></Child>
-			</Parent>
-		);
-
-		cy.get<Parent>("[ui5-test-parent]")
-			.should($el => {
-				expect($el[0].getDomRef()).to.exist;
-			});
-
-		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(
-			<Parent>
-				<Child slot="items"></Child>
-			</Parent>
-		);
-
-		cy.get<Parent>("[ui5-test-parent]")
-			.should($el => {
-				expect($el[0].getDomRef()).to.exist;
-			});
-
-		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.tsx

@@ -1,42 +0,0 @@
-import type UI5Element from "../../src/UI5Element.js";
-import GenericExt from "../../test/test-elements/GenericExt.js";
-
-describe("Invalidation works", () => {
-	it("Tests that changing a monitored property of a child invalidates the parent", () => {
-		cy.mount(<GenericExt></GenericExt>);
-
-		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(<GenericExt></GenericExt>);
-
-		cy.get("[ui5-test-generic-ext]")
-			.invoke("attr", "str-prop")
-			.should("equal", "Ext");
-	});
-});

package/cypress/specs/UI5ElementPropertyValidation.cy.tsx

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

package/cypress/specs/UI5ElementPropsAndAttrs.cy.tsx

@@ -1,113 +0,0 @@
-import Generic from "../../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(<Generic></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(<Generic></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(<Generic></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(<Generic></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(<Generic></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(<Generic></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(<Generic></Generic>);
-
-		cy.get("[ui5-test-generic]")
-			.should("have.attr", "default-value-prop", "Hello");
-	});
-});

package/cypress/specs/UI5ElementShadowDOM.cy.tsx

@@ -1,30 +0,0 @@
-import Generic from "../../test/test-elements/Generic.js";
-import NoShadowDOM from "../../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(<Generic></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(<NoShadowDOM></NoShadowDOM>);
-
-		cy.get("[ui5-test-no-shadow]")
-			.then($element => {
-				return !!$element.get(0).shadowRoot;
-			})
-			.should("be.false");
-	});
-});