feat(ui5-user-menu): add open and close events (#10363)

* feat(ui5-user-menu): provide open and close events * feat(ui5-user-menu): provide open and close events * chore(ui5-user-menu): fix lint error * chore(ui5-user-menu): add documentation * chore: fix review comments --------- Co-authored-by: Adrian Bobev <[email protected]>
SAP · Dec 23, 2024 · 8109bfd · 8109bfd
1 parent 63ceea3
commit 8109bfd
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 5 deletions.
diff --git a/packages/fiori/cypress/specs/UserMenu.cy.ts b/packages/fiori/cypress/specs/UserMenu.cy.ts
@@ -342,6 +342,47 @@ describe("Events", () => {
 
 		cy.get("@clicked").should("have.been.calledOnce");
 	});
+
+	it("tests open event", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu opener="openUserMenuBtn">
+							<ui5-user-menu-item text="Setting" data-id="setting"></ui5-user-menu-item>
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu")
+			.then($userMenu => {
+				$userMenu.get(0).addEventListener("open", cy.stub().as("opened"));
+			});
+
+		cy.get("@userMenu")
+			.ui5UserMenuOpen();
+
+		cy.get("@opened").should("have.been.calledOnce");
+	});
+
+	it("tests close event", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu opener="openUserMenuBtn">
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").should("exist");
+
+		cy.get("@userMenu")
+			.then($userMenu => {
+				$userMenu.get(0).addEventListener("close", cy.stub().as("closed"));
+			});
+
+		cy.get("@userMenu")
+			.ui5UserMenuOpen();
+
+		cy.get("@userMenu")
+			.ui5UserMenuOpened();
+		cy.get("@userMenu").shadow().find("[ui5-button]").as("signOutBtn");
+		cy.get("@signOutBtn")
+			.click();
+
+		cy.get("@closed").should("have.been.calledOnce");
+	});
 });
 
 describe("Responsiveness", () => {

diff --git a/packages/fiori/cypress/support/commands.ts b/packages/fiori/cypress/support/commands.ts
@@ -37,3 +37,13 @@
 // }
 
 import "../../../main/cypress/support/commands.js";
+import "./commands/UserMenu.commands.js";
+
+declare global {
+	namespace Cypress {
+		interface Chainable {
+			ui5UserMenuOpen(options?: { opener?: string }): Chainable<void>
+			ui5UserMenuOpened(): Chainable<void>
+		}
+	}
+}
diff --git a/packages/fiori/cypress/support/commands/UserMenu.commands.ts b/packages/fiori/cypress/support/commands/UserMenu.commands.ts
@@ -0,0 +1,29 @@
+Cypress.Commands.add("ui5UserMenuOpen", { prevSubject: true }, (prevSubject, options) => {
+	cy.wrap(prevSubject)
+		.as("userMenu")
+		.then($userMenu => {
+			if (options?.opener) {
+				cy.wrap($userMenu)
+					.invoke("attr", "opener", options.opener);
+			}
+
+			cy.wrap($userMenu)
+				.invoke("attr", "open", true);
+		});
+
+	cy.get("@userMenu")
+		.ui5UserMenuOpened();
+});
+
+Cypress.Commands.add("ui5UserMenuOpened", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("userMenu");
+
+	cy.get("@userMenu")
+		.should("have.attr", "open");
+
+	cy.get("@userMenu")
+		.shadow()
+		.find("[ui5-responsive-popover]")
+		.should("have.attr", "open");
+});
diff --git a/packages/fiori/src/UserMenu.ts b/packages/fiori/src/UserMenu.ts
@@ -126,9 +126,24 @@ type UserMenuOtherAccountClickEventDetail = {
 	cancelable: true,
 })
 
+/**
+ * Fired when a user menu is open.
+ * @public
+ * @since 2.6.0
+ */
+@event("open")
+
+/**
+ * Fired when a user menu is close.
+ * @public
+ * @since 2.6.0
+ */
+@event("close")
+
 /**
  * Fired when the "Sign Out" button is selected.
  * @public
+ * @since 2.6.0
  */
 @event("sign-out-click", {
 	cancelable: true,
@@ -141,6 +156,9 @@ class UserMenu extends UI5Element {
 		"change-account": UserMenuOtherAccountClickEventDetail;
 		"item-click": UserMenuItemClickEventDetail;
 		"sign-out-click": void;
+		"open": void;
+		"close": void;
+
 	}
 	/**
 	 * Defines if the User Menu is opened.
@@ -364,8 +382,13 @@ class UserMenu extends UI5Element {
 		this._closeUserMenu();
 	}
 
+	_handlePopoverAfterOpen() {
+		this.fireDecoratorEvent("open");
+	}
+
 	_handlePopoverAfterClose() {
 		this.open = false;
+		this.fireDecoratorEvent("close");
 	}
 
 	_handleDeclineClick() {

diff --git a/packages/fiori/src/UserMenuTemplate.tsx b/packages/fiori/src/UserMenuTemplate.tsx
@@ -32,6 +32,7 @@ export default function UserMenuTemplate(this: UserMenu) {
 			open={this.open}
 			opener={this.opener}
 			onClose={this._handlePopoverAfterClose}
+			onOpen={this._handlePopoverAfterOpen}
 		>
 			{this._isPhone ?
 				<>

diff --git a/packages/fiori/test/pages/UserMenu.html b/packages/fiori/test/pages/UserMenu.html
@@ -88,8 +88,6 @@
 	const shellbar = document.getElementById("shellbar");
 	const menuShellBar = document.getElementById("userMenuShellBar");
 
-
-
 	shellbar.addEventListener("ui5-profile-click", (event) => {
 		menuShellBar.opener = event.detail.targetRef;
 		if(menuShellBar.open){
@@ -135,8 +133,12 @@
 		console.log("Add account clicked");
 	});
 
-	menu.addEventListener("change-account", function (event) {
-		console.log("Change account account", event.detail);
+	menu.addEventListener("open", function (event) {
+		console.log("Change user menu open");
+	});
+
+	menu.addEventListener("close", function (event) {
+		console.log("Change user menu close");
 	});
 
 	menu.addEventListener("sign-out-click", function (event) {
@@ -194,10 +196,18 @@
 
 		const result = prompt("Sign Out", "Are you sure you want to sign out?");
 		if (result) {
-			menu2.open = false;
+			menuShellBar.open = false;
 		}
 		event.preventDefault();
 	});
+
+	menuShellBar.addEventListener("open", function (event) {
+		console.log("Change user menu open");
+	});
+
+	menuShellBar.addEventListener("close", function (event) {
+		console.log("Change user menu close");
+	});
 </script>
 </body>
 </html>