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

package/cypress/specs/ConfigurationURL.cy.tsx

@@ -1,201 +0,0 @@
-import { internals } from "../../src/Location.js";
-import TestGeneric from "../../test/test-elements/Generic.js";
-import { resetConfiguration } from "../../src/InitialConfiguration.js";
-import { getLanguage } from "../../src/config/Language.js";
-import { getCalendarType } from "../../src/config/CalendarType.js";
-import { getTheme } from "../../src/config/Theme.js";
-import { getAnimationMode } from "../../src/config/AnimationMode.js";
-import AnimationMode from "../../src/types/AnimationMode.js";
-import { getThemeRoot } from "../../src/config/ThemeRoot.js";
-
-describe("Some settings can be set via SAP UI URL params", () => {
-	before(() => {
-		const searchParams = "sap-ui-rtl=true&sap-ui-language=ja&sap-ui-calendarType=Japanese&sap-ui-theme=sap_horizon_hcb&sap-ui-animationMode=basic";
-
-		cy.stub(internals, "search", () => {
-			return searchParams;
-		});
-
-		cy.then(() => {
-			return resetConfiguration(true);
-		});
-
-		cy.wrap(internals)
-			.invoke("search")
-			.should("be.equal", searchParams);
-
-		cy.mount(<TestGeneric />);
-	});
-
-	it("Tests that language is applied", () => {
-		cy.wrap({ getLanguage })
-			.invoke("getLanguage")
-			.should("equal", "ja");
-	});
-
-	it("Tests that calendarType is applied", () => {
-		cy.wrap({ getCalendarType })
-			.invoke("getCalendarType")
-			.should("equal", "Japanese");
-	});
-
-	it("Tests that theme is applied", () => {
-		cy.wrap({ getTheme })
-			.invoke("getTheme")
-			.should("equal", "sap_horizon_hcb");
-	});
-
-	it("Tests that animationMode is applied", () => {
-		cy.wrap({ getAnimationMode })
-			.invoke("getAnimationMode")
-			.should("equal", AnimationMode.Basic);
-	});
-});
-
-describe("Different themeRoot configurations", () => {
-	it("Allowed theme root", () => {
-		const searchParams = "sap-ui-theme=sap_horizon_hcb@https://example.com";
-
-		// All allowed theme roots need to be described inside the meta tag.
-		cy.window()
-			.then($el => {
-				const metaTag = document.createElement("meta");
-				metaTag.name = "sap-allowedThemeOrigins";
-				metaTag.content = "https://example.com";
-
-				$el.document.head.append(metaTag);
-			})
-
-		cy.stub(internals, "search", () => {
-			return searchParams;
-		});
-
-		cy.wrap({ resetConfiguration })
-			.invoke("resetConfiguration", true);
-
-		cy.wrap(internals)
-			.invoke("search")
-			.should("be.equal", searchParams);
-
-		cy.mount(<TestGeneric />);
-
-		cy.wrap({ getThemeRoot })
-			.invoke("getThemeRoot")
-			.should("equal", "https://example.com/UI5/");
-
-		// All allowed theme roots need to be described inside the meta tag.
-		cy.window()
-			.then($el => {
-				const metaTag = $el.document.head.querySelector("[name='sap-allowedThemeOrigins']");
-
-				metaTag?.remove();
-			})
-	});
-
-	it("Unallowed theme root", () => {
-		const searchParams = "sap-ui-theme=sap_horizon_hcb@https://another-example.com";
-
-		cy.stub(internals, "search", () => {
-			return searchParams;
-		});
-
-		cy.wrap({ resetConfiguration })
-			.invoke("resetConfiguration", true);
-
-		cy.wrap(internals)
-			.invoke("search")
-			.should("be.equal", searchParams);
-
-		cy.mount(<TestGeneric />);
-
-		cy.wrap({ getThemeRoot })
-			.invoke("getThemeRoot")
-			.should("equal", `${window.location.origin}/UI5/`);
-	});
-
-	it("Relative theme root", () => {
-		const searchParams = "sap-ui-theme=sap_horizon_hcb@./test";
-
-		cy.stub(internals, "search", () => {
-			return searchParams;
-		});
-
-		cy.wrap({ resetConfiguration })
-			.invoke("resetConfiguration", true);
-
-		cy.wrap(internals)
-			.invoke("search")
-			.should("be.equal", searchParams);
-
-		cy.mount(<TestGeneric />);
-
-		cy.wrap({ getThemeRoot })
-			.invoke("getThemeRoot")
-			.then(themeRoot => {
-				return themeRoot?.endsWith("/test/UI5/");
-			})
-			.should("be.true");
-	});
-});
-
-describe("Some settings can be set via SAP URL params", () => {
-	before(() => {
-		const searchParams = "sap-language=bg&sap-theme=sap_fiori_3_dark";
-
-		cy.stub(internals, "search", () => {
-			return searchParams;
-		});
-
-		cy.wrap({ resetConfiguration })
-			.invoke("resetConfiguration", true);
-
-		cy.wrap(internals)
-			.invoke("search")
-			.should("be.equal", searchParams);
-
-		cy.mount(<TestGeneric />);
-	});
-
-	it("Tests that language is applied via sap-ui-language", () => {
-		cy.wrap({ getLanguage })
-			.invoke("getLanguage")
-			.should("equal", "bg");
-	});
-
-	it("Tests that theme is applied via sap-ui-theme", () => {
-		cy.wrap({ getTheme })
-			.invoke("getTheme")
-			.should("equal", "sap_fiori_3_dark");
-	});
-});
-
-describe("Some settings can be set via SAP UI URL params", () => {
-	before(() => {
-		const searchParams = "sap-language=bg&sap-ui-language=de&sap-theme=sap_fiori_3_dark&sap-theme=sap_fiori_3_hcb";
-
-		cy.stub(internals, "search", () => {
-			return searchParams;
-		});
-
-		cy.wrap({ resetConfiguration })
-			.invoke("resetConfiguration", true);
-
-		cy.wrap(internals)
-			.invoke("search")
-			.should("be.equal", searchParams);
-
-		cy.mount(<TestGeneric />);
-	});
-
-	it("Tests that language is applied via sap-ui-language", () => {
-		cy.wrap({ getLanguage })
-			.invoke("getLanguage")
-			.should("equal", "de");
-	});
-
-	it("Tests that theme is applied via sap-ui-theme", () => {
-		cy.wrap({ getTheme })
-			.invoke("getTheme")
-			.should("equal", "sap_fiori_3_hcb");
-	});
-});

package/cypress/specs/CustomMount.cy.tsx

@@ -1,9 +0,0 @@
-describe("Custom mount", () => {
-	it("mount", () => {
-		cy.mount(<button>Test</button>);
-
-		cy.get("button")
-			.should("exist")
-			.and("have.text", "Test");
-	});
-});

package/cypress/specs/CustomTheme.cy.tsx

@@ -1,36 +0,0 @@
-import { registerThemePropertiesLoader } from "../../src/AssetRegistry.js";
-import { setTheme } from "../../src/config/Theme.js";
-import { getCurrentRuntimeIndex } from "../../src/Runtimes.js";
-import TestGeneric from "../../test/test-elements/Generic.js";
-
-describe("Custom themes can be registered", () => {
-	it("Tests that theme parameters are changed on theme change", () => {
-		const newTheme = "my_custom_theme";
-		const var1 = "--var1: #555555";
-		const currentRuntime = 0;
-		const dataPropAttr = `data-ui5-component-properties-${currentRuntime}`;
-
-		cy.mount(<TestGeneric />);
-
-		cy.wrap({ getCurrentRuntimeIndex })
-			.invoke("getCurrentRuntimeIndex")
-			.should("equal", currentRuntime);
-
-		cy.wrap({ registerThemePropertiesLoader })
-			.invoke("registerThemePropertiesLoader", "@ui5/webcomponents-base-test", newTheme, () => Promise.resolve(`:root{ ${var1}; }`));
-
-		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);
-	});
-});

package/cypress/specs/EventProvider.cy.tsx

@@ -1,59 +0,0 @@
-import EventProvider from "../../src/EventProvider.js";
-
-describe("Event provider attaches and detaches listeners properly", () => {
-	it("Tests that listeners can be removed (1 listener)", () => {
-		let timesCalled = 0;
-
-		cy.then(() => {
-			const ep = new EventProvider();
-			const callback = () => {
-				timesCalled++;
-			};
-
-			// Setup
-			ep.attachEvent("test", callback);
-
-			// Act
-			ep.fireEvent("test", undefined); // should execute the callback and increase the counter
-
-			// Setup
-			ep.detachEvent("test", callback);
-
-			// Act
-			ep.fireEvent("test", undefined); // should not execute the callback and increase the counter
-		})
-			.then(() => {
-				return timesCalled;
-			})
-			.should("equal", 1);
-	});
-
-	it("Tests that listeners can be removed (more than 1 listener)", () => {
-		let timesCalled = 0;
-
-		cy.then(() => {
-			const ep = new EventProvider();
-			const callback = () => {
-				timesCalled++;
-			};
-			const somePreviousCallback = () => { };
-
-			// Setup
-			ep.attachEvent("test", somePreviousCallback); // Attach something so that after detachEvent the listeners array is not empty!
-			ep.attachEvent("test", callback);
-
-			// Act
-			ep.fireEvent("test", undefined); // should execute the callback and increase the counter
-
-			// Setup
-			ep.detachEvent("test", callback);
-
-			// Act
-			ep.fireEvent("test", undefined); // should not execute the callback and increase the counter
-		})
-			.then(() => {
-				return timesCalled;
-			})
-			.should("equal", 1);
-	});
-});

package/cypress/specs/Events.cy.tsx

@@ -1,28 +0,0 @@
-import EventsConsumer from "../../test/test-elements/Events.js";
-import type { Events } from "../../test/test-elements/Events.js";
-
-describe("Event provider attaches and detaches listeners properly", () => {
-	it("Tests that attaching camelCase and kebab-case events in templates works", () => {
-		cy.mount(<EventsConsumer></EventsConsumer>);
-		cy.get<EventsConsumer>("[ui5-test-events-consumer]")
-			.as("eventsConsumer");
-
-		cy.get("@eventsConsumer")
-			.shadow()
-			.find("[ui5-test-events]")
-			.then(elements => {
-				(elements[0] as Events).fireKebaCaseEvent();
-			});
-		cy.get("@eventsConsumer")
-			.should("have.prop", "kebabCaseFired", true);
-
-		cy.get("@eventsConsumer")
-			.shadow()
-			.find("[ui5-test-events]")
-			.then(elements => {
-				(elements[0] as Events).fireCamelCaseEvent();
-			});
-		cy.get("@eventsConsumer")
-			.should("have.prop", "camelCaseFired", true);
-	});
-});

package/cypress/specs/SystemDOMElements.cy.tsx

@@ -1,8 +0,0 @@
-import "../../test/test-elements/Accessor.js";
-
-describe("Shared Resources", () => {
-	it("Tests the presense of the shared resources 'meta' element", () => {
-		cy.get(`meta[name="ui5-shared-resources"]`)
-			.should("exist");
-	});
-});

package/cypress/specs/Theming.cy.tsx

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