@ui5/webcomponents-fiori 2.4.0-rc.1 → 2.4.0-rc.2

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.1...v2.4.0-rc.2) (2024-10-24)
+
+
+### Bug Fixes
+
+* **ui5-notification-list:** fix header bar visibility ([#10010](https://github.com/SAP/ui5-webcomponents/issues/10010)) ([95db5c6](https://github.com/SAP/ui5-webcomponents/commit/95db5c63a3c21ba2d948f5070f3bd1ba85e584ef)), closes [#9995](https://github.com/SAP/ui5-webcomponents/issues/9995)
+
+
+### Features
+
+* **ui5-barcode-scanner-dialog:** added support for custom header and footer slots ([#10066](https://github.com/SAP/ui5-webcomponents/issues/10066)) ([4d06b2e](https://github.com/SAP/ui5-webcomponents/commit/4d06b2e94024e1cf6e121650453362ca79fc8836)), closes [#8919](https://github.com/SAP/ui5-webcomponents/issues/8919)
+* **ui5-filter-item, ui5-sort-item,..:** add selected `filterItems` to `ui5-confirm` event details ([#9838](https://github.com/SAP/ui5-webcomponents/issues/9838)) ([56ad311](https://github.com/SAP/ui5-webcomponents/commit/56ad3115affe17f453a30ac0880ac879dbbd763b))
+
+
+
+
+
 # [2.4.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.0...v2.4.0-rc.1) (2024-10-17)
 
 

package/cypress/specs/BarcodeScannerDialog.cy.ts

@@ -4,6 +4,7 @@ import "../../src/BarcodeScannerDialog.js";
 import type BarcodeScannerDialog from "../../src/BarcodeScannerDialog.js";
 
 describe("BarcodeScannerDialog", () => {
+	let openDialogHandler: EventListener | null;
 	let handleScanSuccess: (event: CustomEvent) => void;
 	let handleScanError: (event: CustomEvent) => void;
 
@@ -49,6 +50,12 @@ describe("BarcodeScannerDialog", () => {
 				handleScanError = undefined!;
 			}
 
+			const btnScan = doc.querySelector("#btnScan");
+			if (btnScan && openDialogHandler) {
+				btnScan.removeEventListener("click", openDialogHandler);
+			}
+			openDialogHandler = null;
+
 			// Clear the scan result and error
 			const scanResultElement = doc.querySelector("#scanResult")!;
 			const scanErrorElement = doc.querySelector("#scanError")!;
@@ -82,7 +89,7 @@ describe("BarcodeScannerDialog", () => {
 		// Close the dialog using the close button
 		cy.get("@dialog")
 			.shadow()
-			.find("ui5-dialog [slot=footer] ui5-button")
+			.find("ui5-dialog slot[name=footer] ui5-button")
 			.realClick();
 
 		// Verify the dialog is closed
@@ -188,7 +195,7 @@ describe("BarcodeScannerDialog", () => {
 		// Close the dialog using the close button
 		cy.get("@dialog")
 			.shadow()
-			.find("ui5-dialog [slot=footer] ui5-button")
+			.find("ui5-dialog slot[name=footer] ui5-button")
 			.realClick();
 
 		// Verify the dialog is closed
@@ -266,7 +273,7 @@ describe("BarcodeScannerDialog", () => {
 			const dlgScan = $dialog.get(0) as BarcodeScannerDialog;
 
 			// Simulate the scan success
-			dlgScan.fireEvent("scan-success", {
+			dlgScan.fireDecoratorEvent("scan-success", {
 				text: "mocked-scan-result",
 				rawBytes: new Uint8Array(),
 			});
@@ -301,7 +308,7 @@ describe("BarcodeScannerDialog", () => {
 			const dlgScan = $dialog.get(0) as BarcodeScannerDialog;
 
 			// Simulate the scan error
-			dlgScan.fireEvent("scan-error", {
+			dlgScan.fireDecoratorEvent("scan-error", {
 				message: "mocked-scan-error",
 			});
 		});
@@ -347,3 +354,116 @@ describe("BarcodeScannerDialog", () => {
 		});
 	});
 });
+
+describe("BarcodeScannerDialog with Custom Slots", () => {
+	let openDialogHandler: EventListener | null;
+	let closeDialogHandler: EventListener | null;
+
+	beforeEach(() => {
+		cy.mount(html`
+		  <ui5-barcode-scanner-dialog id="dlgScanCustom">
+			<div slot="header" class="custom-dialog-header">
+			  <ui5-title level="H2">My Custom Header</ui5-title>
+			</div>
+			<div slot="footer" class="custom-dialog-footer">
+			  <ui5-button id="customCloseBtn">My Custom Close Button</ui5-button>
+			</div>
+		  </ui5-barcode-scanner-dialog>
+		  <ui5-button id="btnScanCustom" icon="camera">Open Custom Scanner Dialog</ui5-button>
+		`);
+
+		cy.get("#dlgScanCustom").as("customDialog");
+		cy.get("#btnScanCustom").as("customButton");
+		cy.get("@customDialog")
+			.shadow()
+			.find(".ui5-barcode-scanner-dialog-video")
+			.as("videoElement");
+
+		cy.document().then(doc => {
+			const dlgScanCustom = doc.querySelector<BarcodeScannerDialog>("#dlgScanCustom")!;
+			const btnScanCustom = doc.querySelector("#btnScanCustom")!;
+			const btnScanCustomClose = doc.querySelector("#customCloseBtn")!;
+
+			btnScanCustom.addEventListener("click", () => {
+				dlgScanCustom.open = true;
+			});
+
+			btnScanCustomClose.addEventListener("click", () => {
+				dlgScanCustom.open = false;
+			});
+		});
+	});
+
+	afterEach(() => {
+		cy.document().then(doc => {
+			const btnScanCustom = doc.querySelector("#btnScanCustom");
+			const btnScanCustomClose = doc.querySelector("#customCloseBtn");
+
+			if (btnScanCustom && openDialogHandler) {
+			  btnScanCustom.removeEventListener("click", openDialogHandler);
+			}
+			openDialogHandler = null;
+
+			if (btnScanCustomClose && closeDialogHandler) {
+			  btnScanCustomClose.removeEventListener("click", closeDialogHandler);
+			}
+
+			closeDialogHandler = null;
+		});
+	});
+
+	it("renders custom header when provided", () => {
+		// Click the button to open the custom dialog
+		cy.get("@customButton").realClick();
+
+		// Wait for the video to be ready
+		cy.get("@videoElement").should($video => {
+			const videoEl = $video[0] as HTMLVideoElement;
+			expect(videoEl.readyState, "Video readyState should be >= 1").to.be.at.least(1);
+		});
+
+		// Assert that the dialog is open
+		cy.get("@customDialog")
+			.shadow()
+			.find("ui5-dialog")
+			.should("have.attr", "open");
+
+		// Verify that the custom header is rendered
+		cy.get("@customDialog")
+			.find("[slot=header] ui5-title")
+			.should("contain.text", "My Custom Header");
+	});
+
+	it("renders custom footer and functions correctly", () => {
+		// Click the button to open the custom dialog
+		cy.get("@customButton").realClick();
+
+		// Wait for the video to be ready
+		cy.get("@videoElement").should($video => {
+			const videoEl = $video[0] as HTMLVideoElement;
+			expect(videoEl.readyState, "Video readyState should be >= 1").to.be.at.least(1);
+		});
+
+		// Assert that the dialog is open
+		cy.get("@customDialog")
+			.shadow()
+			.find("ui5-dialog")
+			.should("have.attr", "open");
+
+		// Verify that the custom footer is rendered
+		cy.get("@customDialog")
+			.find("[slot=footer] ui5-button")
+			.should("contain.text", "My Custom Close Button");
+
+		// Test that the custom button closes the dialog
+		cy.get("@customDialog")
+			.find("#customCloseBtn")
+			.realClick();
+
+		// Verify the dialog is closed
+		cy.get("@customDialog")
+			.shadow()
+			.find("ui5-dialog")
+			.should("not.have.attr", "open");
+	});
+});