@ui5/webcomponents-base 2.8.0 → 2.9.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.9.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.1-rc.0...v2.9.0-rc.0) (2025-03-13)
+
+
+### Bug Fixes
+
+* **ui5-tabcontainer:** allow browser refresh shortcut to work ([#11035](https://github.com/SAP/ui5-webcomponents/issues/11035)) ([a4a0f02](https://github.com/SAP/ui5-webcomponents/commit/a4a0f028f44a60fd6caea0f4ecdac49b0289270d))
+
+
+
+
+
+## [2.8.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0...v2.8.1-rc.0) (2025-03-06)
+
+**Note:** Version bump only for package @ui5/webcomponents-base
+
+
+
+
+
 # [2.8.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.3...v2.8.0) (2025-03-04)
 
 

package/cypress/specs/ConfigurationScript.cy.tsx

@@ -44,21 +44,37 @@ describe("Configuration script", () => {
 	};
 
 	before(() => {
-		cy.mount(<TestGeneric />, {
-			ui5Configuration: configurationObject,
-		});
+		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;
+				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")

package/cypress/specs/ConfigurationURL.cy.tsx

@@ -5,6 +5,7 @@ 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", () => {
@@ -47,7 +48,7 @@ describe("Some settings can be set via SAP UI URL params", () => {
 	it("Tests that animationMode is applied", () => {
 		cy.wrap({ getAnimationMode })
 			.invoke("getAnimationMode")
-			.should("equal", "basic");
+			.should("equal", AnimationMode.Basic);
 	});
 });
 
@@ -55,6 +56,16 @@ 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;
 		});
@@ -71,6 +82,14 @@ describe("Different themeRoot configurations", () => {
 		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", () => {

package/cypress/specs/CustomMount.cy.tsx

@@ -1,5 +1,3 @@
-import { getAnimationMode } from "../../src/config/AnimationMode.js";
-
 describe("Custom mount", () => {
 	it("mount", () => {
 		cy.mount(<button>Test</button>);
@@ -8,27 +6,4 @@ describe("Custom mount", () => {
 			.should("exist")
 			.and("have.text", "Test");
 	});
-
-	it("mount with configuration", () => {
-		const configurationObject = { "animationMode": "basic" };
-
-		cy.mount(<button>Test with configuration</button>, {
-			ui5Configuration: configurationObject,
-		});
-
-		cy.get("button")
-			.should("exist")
-			.and("have.text", "Test with configuration");
-
-		cy.get("script[data-ui5-config]")
-			.should("exist")
-			.then($el => {
-				return $el.get(0).innerHTML;
-			})
-			.should("equal", JSON.stringify(configurationObject));
-
-		cy.wrap({ getAnimationMode })
-			.invoke("getAnimationMode")
-			.should("equal", configurationObject.animationMode);
-	});
 });

package/cypress/specs/i18n_texts.cy.tsx

@@ -0,0 +1,129 @@
+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", "Някакъв ключ");
+	});
+});

package/cypress/support/commands.ts

@@ -0,0 +1,39 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+import "@ui5/cypress-internal/commands.js";

package/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

package/cypress/support/component.ts

@@ -0,0 +1,36 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+import { mount } from '@ui5/cypress-ct-ui5-webc'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)

package/cypress/tsconfig.json

@@ -4,7 +4,6 @@
 		"./**/*"
 	],
 	"compilerOptions": {
-		"types": ["@ui5/webcomponents-tools"],
 		"outDir": "dist",
 		"composite": true,
 		"tsBuildInfoFile": "dist/.tsbuildinfobuild",

package/cypress.config.js

@@ -1,3 +1,3 @@
-import cypressConfig from "@ui5/webcomponents-tools/components-package/cypress.config.js";
+import cypressConfig from "@ui5/cypress-internal/cypress.config.js";
 
 export default cypressConfig;