@ui5/webcomponents-base 2.10.0 → 2.10.1

package/cypress/specs/ConfigurationURL.cy.tsx

@@ -7,6 +7,7 @@ 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";
+import applyTheme from "../../src/theming/applyTheme.js";
 
 describe("Some settings can be set via SAP UI URL params", () => {
 	before(() => {
@@ -53,88 +54,409 @@ describe("Some settings can be set via SAP UI URL params", () => {
 });
 
 describe("Different themeRoot configurations", () => {
-	it("Allowed theme root", () => {
-		const searchParams = "sap-ui-theme=sap_horizon_hcb@https://example.com";
+	describe("Allowed theme root", () => {
+		before(() => {
+			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";
+			// All allowed theme roots need to be described inside the meta tag.
+			cy.window()
+				.then($el => {
+					const metaTag = document.createElement("meta");
+					metaTag.name = "sap-allowed-theme-origins";
+					metaTag.content = "https://example.com";
 
-				$el.document.head.append(metaTag);
-			})
+					$el.document.head.append(metaTag);
+				});
 
-		cy.stub(internals, "search", () => {
-			return searchParams;
+			cy.stub(internals, "search").callsFake(() => {
+				return searchParams;
+			});
+
+			cy.wrap({ resetConfiguration })
+				.invoke("resetConfiguration", true);
+
+			cy.wrap(internals)
+				.invoke("search")
+				.should("be.equal", searchParams);
+
+			cy.mount(<TestGeneric />);
 		});
 
-		cy.wrap({ resetConfiguration })
-			.invoke("resetConfiguration", true);
+		afterEach(() => {
+			cy.window()
+				.then($el => {
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
 
-		cy.wrap(internals)
-			.invoke("search")
-			.should("be.equal", searchParams);
+		after(() => {
+			cy.window()
+				.then($el => {
+					const metaTag = $el.document.head.querySelector("[name='sap-allowed-theme-origins']");
+					metaTag?.remove();
+				});
+		});
 
-		cy.mount(<TestGeneric />);
+		it("should return raw themeRoot from URL parameter", () => {
+			cy.wrap({ getThemeRoot })
+				.invoke("getThemeRoot")
+				.should("equal", "https://example.com");
+		});
 
-		cy.wrap({ getThemeRoot })
-			.invoke("getThemeRoot")
-			.should("equal", "https://example.com/UI5/");
+		it("should extract theme without themeRoot part", () => {
+			cy.wrap({ getTheme })
+				.invoke("getTheme")
+				.should("equal", "sap_horizon_hcb");
+		});
+
+		it("should create link in DOM with validated URL", () => {
+			// Apply theme to trigger link creation
+			cy.wrap({ applyTheme, getTheme })
+				.invoke("getTheme")
+				.then(theme => {
+					return cy.wrap({ applyTheme }).invoke("applyTheme", theme);
+				});
+
+			cy.get("link[sap-ui-webcomponents-theme='sap_horizon_hcb']")
+				.should("exist")
+				.and("have.attr", "href")
+				.and("equal", "https://example.com/UI5/Base/baseLib/sap_horizon_hcb/css_variables.css");
+		});
+	});
+
+	describe("Unallowed theme root", () => {
+		before(() => {
+			const searchParams = "sap-ui-theme=sap_horizon_hcb@https://another-example.com";
+
+			cy.stub(internals, "search").callsFake(() => {
+				return searchParams;
+			});
+
+			cy.wrap({ resetConfiguration })
+				.invoke("resetConfiguration", true);
 
-		// 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']");
+			cy.wrap(internals)
+				.invoke("search")
+				.should("be.equal", searchParams);
+
+			cy.mount(<TestGeneric />);
+		});
+
+		afterEach(() => {
+			cy.window()
+				.then($el => {
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
+
+		it("should return raw themeRoot even if not allowed", () => {
+			cy.wrap({ getThemeRoot })
+				.invoke("getThemeRoot")
+				.should("equal", "https://another-example.com");
+		});
 
-				metaTag?.remove();
-			})
+		it("should not create link in DOM due to validation failure", () => {
+			cy.get("link[sap-ui-webcomponents-theme='sap_horizon_hcb']")
+				.should("not.exist");
+		});
 	});
 
-	it("Unallowed theme root", () => {
-		const searchParams = "sap-ui-theme=sap_horizon_hcb@https://another-example.com";
+	describe("Relative theme root", () => {
+		before(() => {
+			const searchParams = "sap-ui-theme=sap_horizon_hcb@./test";
 
-		cy.stub(internals, "search", () => {
-			return searchParams;
+			cy.window()
+				.then($el => {
+					const metaTag = document.createElement("meta");
+					metaTag.name = "sap-allowed-theme-origins";
+					metaTag.content = "*";
+					$el.document.head.append(metaTag);
+				});
+
+			cy.stub(internals, "search").callsFake(() => {
+				return searchParams;
+			});
+
+			cy.wrap({ resetConfiguration })
+				.invoke("resetConfiguration", true);
+
+			cy.wrap(internals)
+				.invoke("search")
+				.should("be.equal", searchParams);
+
+			cy.mount(<TestGeneric />);
 		});
 
-		cy.wrap({ resetConfiguration })
-			.invoke("resetConfiguration", true);
+		afterEach(() => {
+			cy.window()
+				.then($el => {
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
 
-		cy.wrap(internals)
-			.invoke("search")
-			.should("be.equal", searchParams);
+		after(() => {
+			cy.window()
+				.then($el => {
+					const metaTag = $el.document.head.querySelector("[name='sap-allowed-theme-origins']");
+					metaTag?.remove();
+				});
+		});
 
-		cy.mount(<TestGeneric />);
+		it("should return raw relative themeRoot", () => {
+			cy.wrap({ getThemeRoot })
+				.invoke("getThemeRoot")
+				.should("equal", "./test");
+		});
 
-		cy.wrap({ getThemeRoot })
-			.invoke("getThemeRoot")
-			.should("equal", `${window.location.origin}/UI5/`);
+		it("should create link with resolved URL", () => {
+			// Apply theme to trigger link creation
+			cy.wrap({ applyTheme, getTheme })
+				.invoke("getTheme")
+				.then(theme => {
+					return cy.wrap({ applyTheme }).invoke("applyTheme", theme);
+				});
+
+			cy.get("link[sap-ui-webcomponents-theme='sap_horizon_hcb']")
+				.should("exist")
+				.and("have.attr", "href")
+				.then(href => {
+					return href.endsWith("/test/UI5/Base/baseLib/sap_horizon_hcb/css_variables.css");
+				})
+				.should("be.true");
+		});
 	});
 
-	it("Relative theme root", () => {
-		const searchParams = "sap-ui-theme=sap_horizon_hcb@./test";
+	describe("Absolute path theme root", () => {
+		before(() => {
+			const searchParams = "sap-ui-theme=custom_theme@/absolute/path";
 
-		cy.stub(internals, "search", () => {
-			return searchParams;
+			cy.window()
+				.then($el => {
+					const metaTag = document.createElement("meta");
+					metaTag.name = "sap-allowed-theme-origins";
+					metaTag.content = "*";
+					$el.document.head.append(metaTag);
+				});
+
+			cy.stub(internals, "search").callsFake(() => {
+				return searchParams;
+			});
+
+			cy.wrap({ resetConfiguration })
+				.invoke("resetConfiguration", true);
+
+			cy.wrap(internals)
+				.invoke("search")
+				.should("be.equal", searchParams);
+
+			cy.mount(<TestGeneric />);
 		});
 
-		cy.wrap({ resetConfiguration })
-			.invoke("resetConfiguration", true);
+		afterEach(() => {
+			cy.window()
+				.then($el => {
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
 
-		cy.wrap(internals)
-			.invoke("search")
-			.should("be.equal", searchParams);
+		after(() => {
+			cy.window()
+				.then($el => {
+					const metaTag = $el.document.head.querySelector("[name='sap-allowed-theme-origins']");
+					metaTag?.remove();
+				});
+		});
 
-		cy.mount(<TestGeneric />);
+		it("should return raw absolute path", () => {
+			cy.wrap({ getThemeRoot })
+				.invoke("getThemeRoot")
+				.should("equal", "/absolute/path");
+		});
+
+		it("should create link with resolved URL", () => {
+			// Apply theme to trigger link creation
+			cy.wrap({ applyTheme, getTheme })
+				.invoke("getTheme")
+				.then(theme => {
+					return cy.wrap({ applyTheme }).invoke("applyTheme", theme);
+				});
+
+			cy.get("link[sap-ui-webcomponents-theme='custom_theme']")
+				.should("exist")
+				.and("have.attr", "href")
+				.then(href => {
+					return href.endsWith("/absolute/path/UI5/Base/baseLib/custom_theme/css_variables.css");
+				})
+				.should("be.true");
+		});
+	});
+
+	describe("ThemeRoot with trailing slash", () => {
+		before(() => {
+			const searchParams = "sap-ui-theme=custom_theme@https://cdn.example.com/themes/";
+
+			cy.window()
+				.then($el => {
+					const metaTag = document.createElement("meta");
+					metaTag.name = "sap-allowed-theme-origins";
+					metaTag.content = "https://cdn.example.com";
+					$el.document.head.append(metaTag);
+				});
+
+			cy.stub(internals, "search").callsFake(() => {
+				return searchParams;
+			});
+
+			cy.wrap({ resetConfiguration })
+				.invoke("resetConfiguration", true);
+
+			cy.wrap(internals)
+				.invoke("search")
+				.should("be.equal", searchParams);
+
+			cy.mount(<TestGeneric />);
+		});
+
+		afterEach(() => {
+			cy.window()
+				.then($el => {
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
+
+		after(() => {
+			cy.window()
+				.then($el => {
+					const metaTag = $el.document.head.querySelector("[name='sap-allowed-theme-origins']");
+					metaTag?.remove();
+				});
+		});
+
+		it("should return raw themeRoot with trailing slash", () => {
+			cy.wrap({ getThemeRoot })
+				.invoke("getThemeRoot")
+				.should("equal", "https://cdn.example.com/themes/");
+		});
+
+		it("should create link normalizing trailing slash", () => {
+			// Apply theme to trigger link creation
+			cy.wrap({ applyTheme, getTheme })
+				.invoke("getTheme")
+				.then(theme => {
+					return cy.wrap({ applyTheme }).invoke("applyTheme", theme);
+				});
+
+			cy.get("link[sap-ui-webcomponents-theme='custom_theme']")
+				.should("exist")
+				.and("have.attr", "href")
+				.and("equal", "https://cdn.example.com/themes/UI5/Base/baseLib/custom_theme/css_variables.css");
+		});
+	});
+
+	describe("Invalid URL format", () => {
+		before(() => {
+			const searchParams = "sap-ui-theme=custom_theme@not-a-valid-url";
 
-		cy.wrap({ getThemeRoot })
-			.invoke("getThemeRoot")
-			.then(themeRoot => {
-				return themeRoot?.endsWith("/test/UI5/");
-			})
-			.should("be.true");
+			cy.stub(internals, "search").callsFake(() => {
+				return searchParams;
+			});
+
+			cy.wrap({ resetConfiguration })
+				.invoke("resetConfiguration", true);
+
+			cy.wrap(internals)
+				.invoke("search")
+				.should("be.equal", searchParams);
+
+			cy.mount(<TestGeneric />);
+		});
+
+		afterEach(() => {
+			cy.window()
+				.then($el => {
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
+
+		it("should return raw invalid URL value", () => {
+			cy.wrap({ getThemeRoot })
+				.invoke("getThemeRoot")
+				.should("equal", "not-a-valid-url");
+		});
+
+		it("should not create link due to invalid URL", () => {
+			cy.get("link[sap-ui-webcomponents-theme='custom_theme']")
+				.should("not.exist");
+		});
+	});
+
+	describe("Legacy meta tag name support", () => {
+		before(() => {
+			const searchParams = "sap-ui-theme=custom_theme@https://legacy.example.com";
+
+			cy.window()
+				.then($el => {
+					const metaTag = document.createElement("meta");
+					metaTag.name = "sap-allowedThemeOrigins"; // Old camelCase format
+					metaTag.content = "https://legacy.example.com";
+					$el.document.head.append(metaTag);
+				});
+
+			cy.stub(internals, "search").callsFake(() => {
+				return searchParams;
+			});
+
+			cy.wrap({ resetConfiguration })
+				.invoke("resetConfiguration", true);
+
+			cy.wrap(internals)
+				.invoke("search")
+				.should("be.equal", searchParams);
+
+			cy.mount(<TestGeneric />);
+		});
+
+		afterEach(() => {
+			cy.window()
+				.then($el => {
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
+
+		after(() => {
+			cy.window()
+				.then($el => {
+					const metaTag = $el.document.head.querySelector("[name='sap-allowedThemeOrigins']");
+					metaTag?.remove();
+				});
+		});
+
+		it("should return raw themeRoot", () => {
+			cy.wrap({ getThemeRoot })
+				.invoke("getThemeRoot")
+				.should("equal", "https://legacy.example.com");
+		});
+
+		it("should support legacy sap-allowedThemeOrigins meta tag", () => {
+			// Apply theme to trigger link creation
+			cy.wrap({ applyTheme, getTheme })
+				.invoke("getTheme")
+				.then(theme => {
+					return cy.wrap({ applyTheme }).invoke("applyTheme", theme);
+				});
+
+			cy.get("link[sap-ui-webcomponents-theme='custom_theme']")
+				.should("exist")
+				.and("have.attr", "href")
+				.and("equal", "https://legacy.example.com/UI5/Base/baseLib/custom_theme/css_variables.css");
+		});
 	});
 });
 

package/cypress/specs/ThemeRoot.cy.tsx

@@ -0,0 +1,180 @@
+import { internals } from "../../src/Location.js";
+import TestGeneric from "../../test/test-elements/Generic.js";
+import { resetConfiguration } from "../../src/InitialConfiguration.js";
+import { getTheme } from "../../src/config/Theme.js";
+import { getThemeRoot } from "../../src/config/ThemeRoot.js";
+import applyTheme from "../../src/theming/applyTheme.js";
+
+const THEME = "sap_horizon";
+
+const addMetaTag = (content: string) => {
+	cy.window().then($win => {
+		const metaTag = $win.document.createElement("meta");
+		metaTag.name = "sap-allowed-theme-origins";
+		metaTag.content = content;
+		$win.document.head.append(metaTag);
+	});
+};
+
+const removeMetaTag = () => {
+	cy.window().then($win => {
+		$win.document.head.querySelector("[name='sap-allowed-theme-origins']")?.remove();
+	});
+};
+
+const removeThemeLink = () => {
+	cy.window().then($win => {
+		$win.document.head.querySelector("link[sap-ui-webcomponents-theme]")?.remove();
+	});
+};
+
+const applyAndCheckLink = (theme: string) => {
+	cy.wrap({ applyTheme, getTheme })
+		.invoke("getTheme")
+		.then(() => {
+			return cy.wrap({ applyTheme }).invoke("applyTheme", theme);
+		});
+};
+
+// ─── Without meta tag ────────────────────────────────────────────────────────
+
+describe("ThemeRoot via URL param — without meta tag", () => {
+	afterEach(() => {
+		removeThemeLink();
+	});
+
+	[
+		{ label: "absolute URL (different origin)", themeRoot: "http://example2.com/themes/", blocked: true },
+		{ label: "absolute URL (different protocol)", themeRoot: "https://example.com/themes/", blocked: true },
+		{ label: "absolute URL (different port)", themeRoot: "http://example:9090.com/themes/", blocked: true },
+		{ label: "absolute URL (same host, no meta tag)", themeRoot: "http://example.com/themes/", blocked: true },
+		{ label: "protocol-relative (different origin)", themeRoot: "//example2.com/themes/", blocked: true },
+		{ label: "protocol-relative (different port)", themeRoot: "//example:9090.com/themes/", blocked: true },
+		{ label: "protocol-relative (same host, no meta tag)", themeRoot: "//example.com/themes/", blocked: true },
+		{ label: "root-relative", themeRoot: "/themes/", blocked: false },
+		{ label: "relative (current dir)", themeRoot: "./themes/", blocked: false },
+		{ label: "relative (parent dir)", themeRoot: "../themes/", blocked: false },
+	].forEach(({ label, themeRoot, blocked }) => {
+		describe(`${label}: ${themeRoot}`, () => {
+			before(() => {
+				cy.stub(internals, "search").callsFake(() => {
+					return `sap-ui-theme=${THEME}@${themeRoot}`;
+				});
+
+				cy.wrap({ resetConfiguration }).invoke("resetConfiguration", true);
+				cy.mount(<TestGeneric />);
+			});
+
+			it(blocked ? "should not create a link element" : "should create a link element (same-origin, no meta tag needed)", () => {
+				applyAndCheckLink(THEME);
+				if (blocked) {
+					cy.get(`link[sap-ui-webcomponents-theme='${THEME}']`).should("not.exist");
+				} else {
+					cy.get(`link[sap-ui-webcomponents-theme='${THEME}']`)
+						.should("exist")
+						.and("have.attr", "href")
+						.and("include", `UI5/Base/baseLib/${THEME}/css_variables.css`);
+				}
+			});
+		});
+	});
+});
+
+// ─── With meta tag ────────────────────────────────────────────────────────────
+
+describe("ThemeRoot via URL param — with meta tag (allowed: http://example.com)", () => {
+	afterEach(() => {
+		removeThemeLink();
+	});
+
+	after(() => {
+		removeMetaTag();
+	});
+
+	before(() => {
+		addMetaTag("http://example.com");
+	});
+
+	const blocked = [
+		{ label: "absolute URL (different origin)", themeRoot: "http://example2.com/themes/" },
+		{ label: "absolute URL (different protocol)", themeRoot: "https://example.com/themes/" },
+		{ label: "absolute URL (different port)", themeRoot: "http://example:9090.com/themes/" },
+		{ label: "protocol-relative (different origin)", themeRoot: "//example2.com/themes/" },
+		{ label: "protocol-relative (different port)", themeRoot: "//example:9090.com/themes/" },
+	];
+
+	const allowed = [
+		{
+			label: "absolute URL (matches allowed origin)",
+			themeRoot: "http://example.com/themes/",
+			expectedHref: "http://example.com/themes/UI5/Base/baseLib/sap_horizon/css_variables.css",
+		},
+		{
+			label: "protocol-relative (resolves to allowed origin)",
+			themeRoot: "//example.com/themes/",
+			expectedHref: "http://example.com/themes/UI5/Base/baseLib/sap_horizon/css_variables.css",
+		},
+	];
+
+	const sameOriginAllowed = [
+		{ label: "root-relative", themeRoot: "/themes/" },
+		{ label: "relative (current dir)", themeRoot: "./themes/" },
+		{ label: "relative (parent dir)", themeRoot: "../themes/" },
+	];
+
+	blocked.forEach(({ label, themeRoot }) => {
+		describe(`blocked — ${label}: ${themeRoot}`, () => {
+			before(() => {
+				cy.stub(internals, "search").callsFake(() => {
+					return `sap-ui-theme=${THEME}@${themeRoot}`;
+				});
+				cy.wrap({ resetConfiguration }).invoke("resetConfiguration", true);
+				cy.mount(<TestGeneric />);
+			});
+
+			it("should not create a link element", () => {
+				applyAndCheckLink(THEME);
+				cy.get(`link[sap-ui-webcomponents-theme='${THEME}']`).should("not.exist");
+			});
+		});
+	});
+
+	allowed.forEach(({ label, themeRoot, expectedHref }) => {
+		describe(`allowed — ${label}: ${themeRoot}`, () => {
+			before(() => {
+				cy.stub(internals, "search").callsFake(() => {
+					return `sap-ui-theme=${THEME}@${themeRoot}`;
+				});
+				cy.wrap({ resetConfiguration }).invoke("resetConfiguration", true);
+				cy.mount(<TestGeneric />);
+			});
+
+			it("should create a link element with correct href", () => {
+				applyAndCheckLink(THEME);
+				cy.get(`link[sap-ui-webcomponents-theme='${THEME}']`)
+					.should("exist")
+					.and("have.attr", "href", expectedHref);
+			});
+		});
+	});
+
+	sameOriginAllowed.forEach(({ label, themeRoot }) => {
+		describe(`allowed (same-origin) — ${label}: ${themeRoot}`, () => {
+			before(() => {
+				cy.stub(internals, "search").callsFake(() => {
+					return `sap-ui-theme=${THEME}@${themeRoot}`;
+				});
+				cy.wrap({ resetConfiguration }).invoke("resetConfiguration", true);
+				cy.mount(<TestGeneric />);
+			});
+
+			it("should create a link element", () => {
+				applyAndCheckLink(THEME);
+				cy.get(`link[sap-ui-webcomponents-theme='${THEME}']`)
+					.should("exist")
+					.and("have.attr", "href")
+					.and("include", `UI5/Base/baseLib/${THEME}/css_variables.css`);
+			});
+		});
+	});
+});