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

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

package/cypress/specs/UI5ElementSlots.cy.tsx

@@ -1,136 +0,0 @@
-import Generic from "../../test/test-elements/Generic.js";
-
-describe("Slots work properly", () => {
-	it("Tests that properties exist on the element for each slot", () => {
-		cy.mount(
-			<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>
-			</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")
-			.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(
-			<Generic>
-				<span slot="individual">Individual slot content 1</span>
-				<span slot="individual">Individual slot content 2</span>
-			</Generic>
-		);
-
-		cy.get<Generic>("[ui5-test-generic]")
-			.should($el => {
-				expect($el[0].getDomRef()).to.exist;
-			});
-
-		cy.get("[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(
-			<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>
-			</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")
-			.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);
-	});
-});

package/cypress/specs/WithComplexTemplate.cy.tsx

@@ -1,32 +0,0 @@
-import WithComplexTemplate from "../../test/test-elements/WithComplexTemplate.js";
-
-describe("Complex templates", () => {
-	it("Tests context maintained in the HBS template before, after and inside 'each' statements", () => {
-		const EXPTECTED_LOOP_CONTENT = "Root text: root, Item text: positives";
-		const EXPTECTED_NESTED_LOOP_CONTENT = "Root Text: root, Word text: word1_good";
-
-		cy.mount(<WithComplexTemplate />);
-
-		cy.get("[ui5-test-complex-template]")
-			.shadow()
-			.find(".before-each-content--start--0")
-			.should("have.text", EXPTECTED_LOOP_CONTENT);
-
-		cy.get("[ui5-test-complex-template]")
-			.shadow()
-			.find(".nested-each-content--0--0")
-			.first()
-			.should("have.text", EXPTECTED_NESTED_LOOP_CONTENT);
-
-		cy.get("[ui5-test-complex-template]")
-			.shadow()
-			.find(".nested-each-content--0--1")
-			.first()
-			.should("have.text", EXPTECTED_NESTED_LOOP_CONTENT);
-
-		cy.get("[ui5-test-complex-template]")
-			.shadow()
-			.find(".after-each-content--end--0")
-			.should("have.text", EXPTECTED_LOOP_CONTENT);
-	});
-});

package/cypress/specs/i18n_texts.cy.tsx

@@ -1,129 +0,0 @@
-import { setLanguage } from "../../src/config/Language.js";
-import { registerI18nLoader, getI18nBundle } from "../../src/i18nBundle.js";
-import parseProperties from "../../src/PropertiesFileFormat.js";
-import I18nParent from "../../test/test-elements/I18nParent.js";
-import I18nChild from "../../test/test-elements/I18nChild.js";
-import I18nChild2 from "../../test/test-elements/I18nChild2.js";
-
-const props = `PLEASE_WAIT=Patientez.
-TEST_1=Text '{0}
-TEST_2=Text ''{0}
-TEST_3=Text ''{0}''
-TEST_4=Text
-TEST_5=Text '
-TEST_6=Text ''
-TEST_7=Text {0}
-TEST_8=Text '{0}'
-TEST_9=Text '{0}''`;
-
-const texts = [
-	{ key: "TEST_1", result: "Text {0}" },
-	{ key: "TEST_2", result: "Text 'test" },
-	{ key: "TEST_3", result: "Text 'test'" },
-	{ key: "TEST_4", result: "Text" },
-	{ key: "TEST_5", result: "Text '" },
-	{ key: "TEST_6", result: "Text '" },
-	{ key: "TEST_7", result: "Text test" },
-	{ key: "TEST_8", result: "Text {0}" },
-	{ key: "TEST_9", result: "Text {0}'" }
-];
-
-describe("i18n texts", () => {
-	beforeEach(() => {
-		cy.wrap({ setLanguage, registerI18nLoader, getI18nBundle })
-			.then(async api => {
-				// eslint-disable-next-line @typescript-eslint/require-await
-				api.registerI18nLoader("myApp", "fr", async () => {
-					return parseProperties(props);
-				});
-
-				await api.setLanguage("fr");
-			});
-	});
-
-	it("Getting text from current language", () => {
-		cy.wrap({ getI18nBundle })
-			.then(async api => {
-				const bundle = await api.getI18nBundle("myApp");
-
-				return bundle.getText("PLEASE_WAIT");
-			})
-			.should("equal", "Patientez.");
-
-		cy.wrap({ setLanguage })
-			.then(async api => {
-				await api.setLanguage("bg");
-			});
-
-		cy.wrap({ getI18nBundle })
-			.then(async api => {
-				const bundle = await api.getI18nBundle("myApp");
-
-				return bundle.getText("PLEASE_WAIT");
-			})
-			.should("equal", "PLEASE_WAIT");
-	});
-
-	// Single quote ' escape some symbols after it. For example: "Text '{0}" will result in "Text {0}". To use single
-	// quote you have to use: ''
-	it("Single quote '", () => {
-		texts.forEach(textData => {
-			cy.wrap({ getI18nBundle })
-				.then(async api => {
-					const bundle = await api.getI18nBundle("myApp");
-
-					return bundle.getText(textData.key, "test");
-				})
-				.should("equal", textData.result);
-		});
-	});
-});
-
-describe("i18n decorator", () => {
-	beforeEach(() => {
-		cy.wrap({ setLanguage, registerI18nLoader })
-			.then(async api => {
-				// eslint-disable-next-line @typescript-eslint/require-await
-				api.registerI18nLoader("custom-language", "bg", async () => {
-					return parseProperties(`PLEASE_WAIT=Моля изчакайте`);
-				});
-
-				// eslint-disable-next-line @typescript-eslint/require-await
-				api.registerI18nLoader("another-custom-language", "bg", async () => {
-					return parseProperties(`SOME_KEY=Някакъв ключ`);
-				});
-
-				await api.setLanguage("bg");
-			});
-	});
-
-	it("Bundle is accessed from every class", () => {
-		cy.mount(<>
-			<I18nParent />
-			<I18nChild />
-		</>);
-
-		cy.get("[i18n-parent]")
-			.invoke("prop", "i18nText")
-			.should("be.equal", "Моля изчакайте");
-
-		cy.get("[i18n-child]")
-			.invoke("prop", "i18nText")
-			.should("be.equal", "Моля изчакайте");
-	});
-
-	it("Bundle storage works correctly", () => {
-		cy.mount(<>
-			<I18nParent />
-			<I18nChild2 />
-		</>);
-
-		cy.get("[i18n-parent]")
-			.invoke("prop", "i18nText")
-			.should("be.equal", "Моля изчакайте");
-
-		cy.get("[i18n-child2]")
-			.invoke("prop", "i18nText")
-			.should("be.equal", "Някакъв ключ");
-	});
-});