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

package/cypress/specs/Accessor.cy.tsx

@@ -1,79 +0,0 @@
-import Accessor from "../../test/test-elements/Accessor.js";
-
-describe("Framework boot", () => {
-	it("Setting property updates attribute, state and DOM", () => {
-		cy.mount(<Accessor></Accessor>);
-
-		cy.get("[ui5-test-accessor]")
-			.as("testAccessor")
-			.invoke("prop", "myProp", true);
-
-		cy.get("@testAccessor")
-			.should("have.attr", "my-prop");
-
-		cy.get("@testAccessor")
-			.shadow()
-			.find("div")
-			.should("have.text", "true");
-
-		cy.get("@testAccessor")
-			.should("have.prop", "storage", true);
-
-		cy.get("[ui5-test-accessor]")
-			.as("testAccessor")
-			.invoke("prop", "myProp", false);
-
-		cy.get("@testAccessor")
-			.should("not.have.attr", "my-prop");
-
-		cy.get("@testAccessor")
-			.shadow()
-			.find("div")
-			.should("have.text", "false");
-
-		cy.get("@testAccessor")
-			.should("have.prop", "storage", false);
-	});
-
-	it("Setting attribute updates property, state and DOM", () => {
-		cy.mount(<Accessor></Accessor>);
-
-		cy.get("[ui5-test-accessor]")
-			.as("testAccessor")
-			.invoke("attr", "my-prop", "");
-
-		cy.get("@testAccessor")
-			.should("have.attr", "my-prop");
-
-		cy.get("@testAccessor")
-			.shadow()
-			.find("div")
-			.should("have.text", "true");
-
-		cy.get("@testAccessor")
-			.should("have.prop", "storage", true);
-
-		cy.get("[ui5-test-accessor]")
-			.as("testAccessor")
-			.invoke("removeAttr", "my-prop");
-
-		cy.get("@testAccessor")
-			.should("not.have.attr", "my-prop");
-
-		cy.get("@testAccessor")
-			.shadow()
-			.find("div")
-			.should("have.text", "false");
-
-		cy.get("@testAccessor")
-			.should("have.prop", "storage", false);
-	});
-
-	it("should stop searching for accessors when HTMLElement is reached", () => {
-		cy.mount(<Accessor></Accessor>);
-
-		cy.get("[ui5-test-accessor]")
-			.invoke("prop", "title")
-			.should("be.undefined");
-	});
-});

package/cypress/specs/Boot.cy.tsx

@@ -1,19 +0,0 @@
-import { registerThemePropertiesLoader } from "../../src/AssetRegistry.js";
-import { boot } from "../../src/Boot.js";
-import { hasStyle } from "../../src/ManagedStyles.js";
-
-describe("Framework boot", () => {
-	it("Tests theme loading, when registered after 'attachBoot' and 'boot'", () => {
-		cy.wrap({ boot })
-			.invoke("boot");
-
-		cy.wrap({ registerThemePropertiesLoader })
-			.invoke("registerThemePropertiesLoader", "@ui5/webcomponents-theming", "sap_horizon", () => {
-				return Promise.resolve(`:root{ --customCol: #fff; --customBg: #000; }`);
-			});
-
-		cy.wrap({ hasStyle })
-			.invoke("hasStyle", "data-ui5-theme-properties", "@ui5/webcomponents-theming")
-			.should("be.true");
-	});
-});

package/cypress/specs/ConfigurationChange.cy.tsx

@@ -1,41 +0,0 @@
-import "../../test/test-elements/Accessor.js";
-import { setTheme, getTheme } from "../../src/config/Theme.js";
-import { setThemeRoot, getThemeRoot } from "../../src/config/ThemeRoot.js";
-import { setNoConflict, getNoConflict } from "../../src/config/NoConflict.js";
-
-describe("Some configuration options can be changed at runtime", () => {
-	it("Tests that theme can be changed", () => {
-		const newTheme = "sap_horizon_hcb";
-
-		cy.wrap({ setTheme })
-			.invoke("setTheme", newTheme);
-
-		cy.wrap({ getTheme })
-			.invoke("getTheme")
-			.should("equal", newTheme);
-	});
-
-	it("Tests that noConflict can be changed", () => {
-		const noConflictObject = { events: ["selection-change"] };
-
-		cy.wrap({ setNoConflict })
-			.invoke("setNoConflict", noConflictObject);
-
-		cy.wrap({ getNoConflict })
-			.invoke("getNoConflict")
-			.should("deep.equal", noConflictObject)
-			.its("events")
-			.should("deep.equal", noConflictObject.events);
-	});
-
-	it("Tests that theme root is applied", () => {
-		const newThemeRoot = "https://example.com/";
-
-		cy.wrap({ setThemeRoot })
-			.invoke("setThemeRoot", newThemeRoot);
-
-		cy.wrap({ getThemeRoot })
-			.invoke("getThemeRoot")
-			.should("deep.equal", newThemeRoot);
-	});
-});

package/cypress/specs/ConfigurationScript.cy.tsx

@@ -1,133 +0,0 @@
-import { getAnimationMode } from "../../src/config/AnimationMode.js";
-import { getCalendarType } from "../../src/config/CalendarType.js";
-import { getDefaultFontLoading } from "../../src/config/Fonts.js";
-import TestGeneric from "../../test/test-elements/Generic.js";
-import { getFirstDayOfWeek, getLegacyDateCalendarCustomizing } from "../../src/config/FormatSettings.js";
-import { getLanguage } from "../../src/config/Language.js";
-import { getNoConflict } from "../../src/config/NoConflict.js";
-import { getTheme } from "../../src/config/Theme.js";
-import { getEnableDefaultTooltips } from "../../src/config/Tooltips.js";
-import { resetConfiguration } from "../../src/InitialConfiguration.js";
-
-describe("Configuration script", () => {
-	const configurationObject = {
-		"theme": "sap_horizon_hcb",
-		"animationMode": "basic",
-		"rtl": true,
-		"language": "ja",
-		"calendarType": "Japanese",
-		"formatSettings": {
-			"firstDayOfWeek": 0,
-			"legacyDateCalendarCustomizing": [
-				{
-					"dateFormat": "A",
-					"islamicMonthStart": "14351201",
-					"gregDate": "20140925",
-				},
-				{
-					"dateFormat": "A",
-					"islamicMonthStart": "14360101",
-					"gregDate": "20141024",
-				},
-				{
-					"dateFormat": "A",
-					"islamicMonthStart": "14360201",
-					"gregDate": "20141123",
-				},
-			],
-		},
-		"noConflict": {
-			"events": ["selection-change", "header-click"],
-		},
-		"defaultFontLoading": false,
-		"enableDefaultTooltips": false,
-	};
-
-	before(() => {
-		cy.window()
-			.then($el => {
-				const scriptElement = document.createElement("script");
-				scriptElement.type = "application/json";
-				scriptElement.setAttribute("data-ui5-config", "true");
-				scriptElement.innerHTML = JSON.stringify(configurationObject);
-				return $el.document.head.append(scriptElement);
-			})
-
-
-		cy.wrap({ resetConfiguration })
-			.invoke("resetConfiguration", true);
-
-		cy.mount(<TestGeneric />);
-		cy.get("script[data-ui5-config]")
-			.should("exist")
-			.then($el => {
-				return $el.get(0)?.innerHTML;
-			})
-			.should("equal", JSON.stringify(configurationObject));
-	});
-
-	after(() => {
-		cy.window()
-			.then($el => {
-				const scriptElement = $el.document.head.querySelector("script[data-ui5-config]");
-
-				scriptElement?.remove();
-			})
-	})
-
-	it("getLanguage", () => {
-		cy.wrap({ getLanguage })
-			.invoke("getLanguage")
-			.should("equal", configurationObject.language);
-	});
-
-	it("getCalendarType", () => {
-		cy.wrap({ getCalendarType })
-			.invoke("getCalendarType")
-			.should("equal", configurationObject.calendarType);
-	});
-
-	it("getFirstDayOfWeek", () => {
-		cy.wrap({ getFirstDayOfWeek })
-			.invoke("getFirstDayOfWeek")
-			.should("equal", configurationObject.formatSettings.firstDayOfWeek);
-	});
-
-	it("getLegacyDateCalendarCustomizing", () => {
-		cy.wrap({ getLegacyDateCalendarCustomizing })
-			.invoke("getLegacyDateCalendarCustomizing")
-			.should("deep.equal", configurationObject.formatSettings.legacyDateCalendarCustomizing);
-	});
-
-	it("getAnimationMode", () => {
-		cy.wrap({ getAnimationMode })
-			.invoke("getAnimationMode")
-			.should("equal", configurationObject.animationMode);
-	});
-
-	it("getEnableDefaultTooltips", () => {
-		cy.wrap({ getTheme })
-			.invoke("getTheme")
-			.should("equal", configurationObject.theme);
-	});
-
-	it("getNoConflict", () => {
-		cy.wrap({ getNoConflict })
-			.invoke("getNoConflict")
-			.should("deep.equal", configurationObject.noConflict)
-			.its("events")
-			.should("deep.equal", configurationObject.noConflict.events);
-	});
-
-	it("getDefaultFontLoading", () => {
-		cy.wrap({ getDefaultFontLoading })
-			.invoke("getDefaultFontLoading")
-			.should("equal", false);
-	});
-
-	it("getEnableDefaultTooltips", () => {
-		cy.wrap({ getEnableDefaultTooltips })
-			.invoke("getEnableDefaultTooltips")
-			.should("equal", false);
-	});
-});

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