@ui5/webcomponents-base 0.0.0-9261ac932 → 0.0.0-95afb1087

package/cypress/specs/UI5ElementInvalidation.cy.ts

@@ -1,207 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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")
-			.should("have.prop", "strProp", 5);
-	});
-});

package/cypress/specs/UI5ElementPropsAndAttrs.cy.ts

@@ -1,113 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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);
-	});
-});