@ui5/webcomponents-base 0.34.0 → 1.0.1

package/dist/test-resources/elements/WithStaticArea.js

@@ -27,8 +27,9 @@ class WithStaticArea extends UI5Element {
 
 	static get template() {
 		return element => {
+			// access effectiveDir getter to mark control as RTL-aware (test changes dir attribute and expects rerender)
 			return html`
-				<div>
+				<div dir=${element.effectiveDir}>
 					WithStaticArea works!
 				</div>`;
 		};

package/dist/test-resources/pages/AllTestElements.html

@@ -35,5 +35,8 @@
 
     <ui5-with-static-area id="no-static-area"></ui5-with-static-area>
     <ui5-with-static-area id="with-static-area" static-content></ui5-with-static-area>
+    <div id="with-static-area-rtl-container" dir="rtl">
+        <ui5-with-static-area id="with-static-area-rtl" static-content></ui5-with-static-area>
+    </div>
 </body>
 </html>

package/dist/test-resources/pages/i18n.html

@@ -17,9 +17,7 @@
 		const demo = async () => {
 			["de", "es", "fr", "en"].forEach(localeId => registerI18nLoader("myApp", localeId, () => `./assets/messagebundle_${localeId}.properties`));
 
-			await fetchI18nBundle("myApp");
-
-			const bundle = getI18nBundle("myApp");
+			const bundle = await getI18nBundle("myApp");
 
 			const pleaseWait = bundle.getText("PLEASE_WAIT");
 			console.log("Please wait in the current language is: ", pleaseWait);

package/dist/test-resources/specs/ConfigurationChange.spec.js

@@ -1,27 +1,27 @@
 const assert = require("chai").assert;
 
 describe("Some configuration options can be changed at runtime", () => {
-	before(() => {
-		browser.url("http://localhost:9191/test-resources/pages/Configuration.html");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/Configuration.html");
 	});
 
-	it("Tests that theme can be changed", () => {
+	it("Tests that theme can be changed", async () => {
 		const newTheme = 'sap_belize_hcb';
 
-		const res = browser.executeAsync( async (newTheme, done) => {
+		const res = await browser.executeAsync( async (newTheme, done) => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
 			await config.setTheme(newTheme);
-			return done(config.getTheme());
+			done(config.getTheme());
 		}, newTheme);
 		assert.strictEqual(res, newTheme, "Theme changed to HCB");
 	});
 
-	it("Tests that noConflict can be changed", () => {
-		const res = browser.execute( () => {
+	it("Tests that noConflict can be changed", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
 			config.setNoConflict({events: ["selection-change"]});
-			return config.getNoConflict();
+			done(config.getNoConflict());
 		});
-		assert.strictEqual(res.events.includes("selection-change"), true, "selection-change was successfully registered as a no conflict event");
+		assert.include(res.events, "selection-change", "selection-change was successfully registered as a no conflict event");
 	});
 });

package/dist/test-resources/specs/ConfigurationScript.spec.js

@@ -1,62 +1,62 @@
 const assert = require("chai").assert;
 
 describe("Configuration script has effect", () => {
-	before(() => {
-		browser.url("http://localhost:9191/test-resources/pages/ConfigurationScript.html?do-not-change-configuration");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/ConfigurationScript.html?do-not-change-configuration");
 	});
 
-	it("Tests that RTL is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that RTL is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getRTL();
+			done(config.getRTL());
 		});
 		assert.strictEqual(res, true, "RTL is true");
 	});
 
-	it("Tests that language is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that language is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getLanguage();
+			done(config.getLanguage());
 		});
 		assert.strictEqual(res, 'ja', "language is japanese");
 	});
 
-	it("Tests that calendarType is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that calendarType is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getCalendarType();
+			done(config.getCalendarType());
 		});
 		assert.strictEqual(res, 'Japanese', "calendarType is japanese");
 	});
 
-	it("Tests that formatSettings are applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that formatSettings are applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getFirstDayOfWeek();
+			done(config.getFirstDayOfWeek());
 		});
 		assert.strictEqual(res, 0, "First day of week is applied");
 	});
 
-	it("Tests that theme is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that theme is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getTheme();
+			done(config.getTheme());
 		});
 		assert.strictEqual(res, 'sap_belize_hcb', "Thems is HCB");
 	});
 
-	it("Tests that noConflict is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that noConflict is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getNoConflict();
+			done(config.getNoConflict());
 		});
-		assert.strictEqual(res.events.includes("selection-change"), true, "selectionChange was successfully registered as a no conflict event");
+		assert.include(res.events, "selection-change", "selectionChange was successfully registered as a no conflict event");
 	});
 
-	it("Tests that animationMode is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that animationMode is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getAnimationMode();
+			done(config.getAnimationMode());
 		});
 		assert.strictEqual(res, 'basic', "animationMode is basic");
 	});

package/dist/test-resources/specs/ConfigurationURL.spec.js

@@ -1,47 +1,93 @@
 const assert = require("chai").assert;
 
-describe("Some settings can be set via URL params", () => {
-	before(() => {
-		browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-ui-rtl=true&sap-ui-language=ja&sap-ui-calendarType=Japanese&sap-ui-theme=sap_belize_hcb&sap-ui-animationMode=basic");
+describe("Some settings can be set via SAP UI URL params", () => {
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-ui-rtl=true&sap-ui-language=ja&sap-ui-calendarType=Japanese&sap-ui-theme=sap_belize_hcb&sap-ui-animationMode=basic");
 	});
 
-	it("Tests that RTL is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that RTL is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getRTL();
+			done(config.getRTL());
 		});
 		assert.strictEqual(res, true, "RTL is true");
 	});
 
-	it("Tests that language is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that language is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getLanguage();
+			done(config.getLanguage());
 		});
 		assert.strictEqual(res, 'ja', "language is japanese");
 	});
 
-	it("Tests that calendarType is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that calendarType is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getCalendarType();
+			done(config.getCalendarType());
 		});
 		assert.strictEqual(res, 'Japanese', "calendarType is japanese");
 	});
 
-	it("Tests that theme is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that theme is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getTheme();
+			done(config.getTheme());
 		});
 		assert.strictEqual(res, 'sap_belize_hcb', "Thems is HCB");
 	});
 
-	it("Tests that animationMode is applied", () => {
-		const res = browser.execute( () => {
+	it("Tests that animationMode is applied", async () => {
+		const res = await browser.executeAsync(done => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			return config.getAnimationMode();
+			done(config.getAnimationMode());
 		});
 		assert.strictEqual(res, 'basic', "animationMode is basic");
 	});
 });
+
+
+describe("Some settings can be set via SAP URL params", () => {
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-language=bg&sap-theme=sap_fiori_3_dark");
+	});
+
+	it("Tests that language is applied", async () => {
+		const res = await browser.executeAsync(done => {
+			const config = window['sap-ui-webcomponents-bundle'].configuration;
+			done(config.getLanguage());
+		});
+		assert.strictEqual(res, 'bg', "language is bulgarian");
+	});
+
+	it("Tests that theme is applied", async () => {
+		const res = await browser.executeAsync(done => {
+			const config = window['sap-ui-webcomponents-bundle'].configuration;
+			done(config.getTheme());
+		});
+		assert.strictEqual(res, 'sap_fiori_3_dark', "Thems is Fiori Dark");
+	});
+});
+
+
+describe("SAP UI params take precedence over the SAP params", () => {
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/Configuration.html?sap-language=bg&sap-ui-language=de&sap-theme=sap_fiori_3_dark&sap-theme=sap_fiori_3_hcb");
+	});
+
+	it("Tests that language is applied via sap-ui-language", async () => {
+		const res = await browser.executeAsync(done => {
+			const config = window['sap-ui-webcomponents-bundle'].configuration;
+			done(config.getLanguage());
+		});
+		assert.strictEqual(res, 'de', "language is german");
+	});
+
+	it("Tests that theme is applied via sap-ui-theme", async () => {
+		const res = await browser.executeAsync(done => {
+			const config = window['sap-ui-webcomponents-bundle'].configuration;
+			done(config.getTheme());
+		});
+		assert.strictEqual(res, 'sap_fiori_3_hcb', "Thems is Fiori HCB");
+	});
+});

package/dist/test-resources/specs/CustomTheme.spec.js

@@ -1,14 +1,14 @@
 const assert = require("chai").assert;
 
 describe("Custom themes can be registered", () => {
-	before(() => {
-		browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
 	});
 
-	it("Tests that theme parameters are changed on theme change", () => {
+	it("Tests that theme parameters are changed on theme change", async () => {
 		const newTheme = 'my_custom_theme';
 
-		const res = browser.executeAsync( async (newTheme, done) => {
+		const res = await browser.executeAsync( async (newTheme, done) => {
 			const var1 = "--var1: #555555";
 
 			window.registerThemePropertiesLoader("@ui5/webcomponents-base-test", newTheme, () => `:root{ ${var1}; }`);
@@ -16,9 +16,9 @@ describe("Custom themes can be registered", () => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
 			await config.setTheme(newTheme);
 
-			const style = document.querySelector(`style[data-ui5-theme-properties="@ui5/webcomponents-base-test"]`);
-			const varsFound = style && style.textContent.includes(var1);
-			return done(varsFound);
+			const style = document.adoptedStyleSheets.find(sh => sh._ui5StyleId === "data-ui5-theme-properties|@ui5/webcomponents-base-test").cssRules[0].cssText;
+			const varsFound = style && style.includes(var1);
+			done(varsFound);
 		}, newTheme);
 
 		assert.strictEqual(res, true, "Theme parameters changed");

package/dist/test-resources/specs/EventProvider.spec.js

@@ -0,0 +1,63 @@
+const assert = require("chai").assert;
+
+describe("Event provider attaches and detaches listeners properly", () => {
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	});
+
+	it("Tests that listeners can be removed (1 listener)", async () => {
+
+		const res = await browser.executeAsync(done => {
+			let timesCalled = 0;
+			const ep = new window["sap-ui-webcomponents-bundle"].EventProvider();
+			const callback = () => {
+				timesCalled++;
+			};
+
+			// Setup
+			ep.attachEvent("test", callback);
+
+			// Act
+			ep.fireEvent("test"); // should execute the callback and increase the counter
+
+			// Setup
+			ep.detachEvent("test", callback);
+
+			// Act
+			ep.fireEvent("test"); // should not execute the callback and increase the counter
+
+			done(timesCalled);
+		});
+
+		assert.strictEqual(res, 1, "The callback should be called exactly once");
+	});
+
+	it("Tests that listeners can be removed (more than 1 listener)", async () => {
+
+		const res = await browser.executeAsync(done => {
+			let timesCalled = 0;
+			const ep = new window["sap-ui-webcomponents-bundle"].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"); // should execute the callback and increase the counter
+
+			// Setup
+			ep.detachEvent("test", callback);
+
+			// Act
+			ep.fireEvent("test"); // should not execute the callback and increase the counter
+
+			done(timesCalled);
+		});
+
+		assert.strictEqual(res, 1, "The callback should be called exactly once");
+	});
+});

package/dist/test-resources/specs/StaticArea.spec.js

@@ -1,26 +1,26 @@
 const assert = require("chai").assert;
 
 describe("Some configuration options can be changed at runtime", () => {
-	before(() => {
-		browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
 	});
 
-	it("Tests control with no static area item", () => {
-		const componentId = browser.$("#no-static-area").getProperty("_id");
-		const staticArea = browser.$("ui5-static-area");
+	it("Tests control with no static area item", async () => {
+		const componentId = await browser.$("#no-static-area").getProperty("_id");
+		const staticArea = await browser.$("ui5-static-area");
 
-		assert.notOk(staticArea.$(`.${componentId}`).isExisting(), "No static area item is defined for this control");
+		assert.notOk(await staticArea.$(`.${componentId}`).isExisting(), "No static area item is defined for this control");
 	});
 
-	it("Tests control with static area item", () => {
-		const componentId = browser.$("#with-static-area").getProperty("_id");
-		const staticArea = browser.$("ui5-static-area");
+	it("Tests control with static area item", async () => {
+		const componentId = await browser.$("#with-static-area").getProperty("_id");
+		const staticArea = await browser.$("ui5-static-area");
 
-		assert.ok(staticArea.$(`.${componentId}`).isExisting(), "No static area item is defined for this control");
+		assert.ok(await staticArea.$(`.${componentId}`).isExisting(), "No static area item is defined for this control");
 	});
 
-	it("Tests removing an element with static area", () => {
-		const result = browser.execute(() => {
+	it("Tests removing an element with static area", async () => {
+		const result = await browser.executeAsync(done => {
 			let res = true;
 			window.onerror = (errorMsg, url, lineNumber) => {
 				res = false;
@@ -28,9 +28,51 @@ describe("Some configuration options can be changed at runtime", () => {
 
 			document.querySelector("#no-static-area").remove();
 
-			return res;
+			done(res);
 		});
 
 		assert.ok(result, "Static area removed from DOM successfully");
 	});
+
+	it("Test RTL not set for static area items", async () => {
+		const componentId = await browser.$("#with-static-area").getProperty("_id");
+		const staticArea = await browser.$("ui5-static-area");
+
+		assert.notOk(await staticArea.$(`.${componentId}`).getAttribute("dir"), "dir attribute not set for static area item");
+	});
+
+	it("Test RTL set for static area items", async () => {
+		const componentId = await browser.$("#with-static-area-rtl").getProperty("_id");
+		const staticArea = await browser.$("ui5-static-area");
+
+		assert.equal(await staticArea.$(`.${componentId}`).getAttribute("dir"), "rtl", "dir property correctly set for static area item");
+	});
+
+	it("Test setting RTL for a static area item owner", async () => {
+		const componentId = await browser.$("#with-static-area").getProperty("_id");
+		const staticArea = await browser.$("ui5-static-area");
+
+		await browser.$("#with-static-area").setAttribute("dir", "rtl");
+		await browser.executeAsync( async (done) => {
+			await window["sap-ui-webcomponents-bundle"].applyDirection();
+			await window["sap-ui-webcomponents-bundle"].renderFinished();
+
+			done();
+		});
+		assert.equal(await staticArea.$(`.${componentId}`).getAttribute("dir"), "rtl", "dir attribute dynamically set for static area item owner");
+	});
+
+	it("Test removing RTL for a static area item owner", async () => {
+		const componentId = await browser.$("#with-static-area-rtl").getProperty("_id");
+		const staticArea = await browser.$("ui5-static-area");
+
+		await browser.$("#with-static-area-rtl-container").removeAttribute("dir");
+		await browser.executeAsync( async (done) => {
+			await window["sap-ui-webcomponents-bundle"].applyDirection();
+			await window["sap-ui-webcomponents-bundle"].renderFinished();
+
+			done();
+		});
+		assert.notOk(await staticArea.$(`.${componentId}`).getAttribute("dir"), "dir attribute dynamically removed for static area item owner");
+	});
 });

package/dist/test-resources/specs/Theming.spec.js

@@ -1,30 +1,30 @@
 const assert = require("chai").assert;
 
 describe("Theming works", () => {
-	before(() => {
-		browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
 	});
 
-	it("Tests that the parameters for the default theme are embedded on boot", () => {
+	it("Tests that the parameters for the default theme are embedded on boot", async () => {
 
-		const res = browser.execute(() => {
-			const style = document.querySelector(`style[data-ui5-theme-properties="@ui5/webcomponents-base-test"]`);
-			return style && style.textContent.includes("--var1: red"); // see test/assets/Themes.js
+		const res = await browser.executeAsync(done => {
+			const style = document.adoptedStyleSheets.find(sh => sh._ui5StyleId === "data-ui5-theme-properties|@ui5/webcomponents-base-test").cssRules[0].cssText
+			done(style && style.includes("--var1: red")); // see test/assets/Themes.js
 		});
 
 		assert.strictEqual(res, true, "The fiori3 vars are found");
 	});
 
-	it("Tests that theme parameters are changed on theme change", () => {
+	it("Tests that theme parameters are changed on theme change", async () => {
 		const newTheme = 'sap_belize_hcb';
 
-		const res = browser.executeAsync( async (newTheme, done) => {
+		const res = await browser.executeAsync( async (newTheme, done) => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
 			await config.setTheme(newTheme);
 
-			const style = document.querySelector(`style[data-ui5-theme-properties="@ui5/webcomponents-base-test"]`);
-			const varsFound = style && style.textContent.includes("--var1: orange"); // see test/assets/Themes.js
-			return done(varsFound);
+			const style = document.adoptedStyleSheets.find(sh => sh._ui5StyleId === "data-ui5-theme-properties|@ui5/webcomponents-base-test").cssRules[0].cssText
+			const varsFound = style && style.includes("--var1: orange"); // see test/assets/Themes.js
+			done(varsFound);
 		}, newTheme);
 
 		assert.strictEqual(res, true, "Theme parameters changed");