Skip to content

Commit

Permalink
chore(ui5-user-menu): add additional tests (#10811)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dobromiraboycheva
dobromiraboycheva authored Feb 11, 2025
1 parent f021ca5 commit 263f349
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 25 deletions.
123 changes: 120 additions & 3 deletions packages/fiori/cypress/specs/UserMenu.cy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,10 @@ describe("Initial rendering", () => {
</UserMenuAccount>
<UserMenuAccount
slot="accounts"
avatarInitials="AC"
avatarSrc="./../../test/pages/img/man_avatar_1.png"
titleText="Alain Chevalier 2"
subtitleText="[email protected]">
subtitleText="[email protected]"
description="Delivery Manager, SAP SE">
</UserMenuAccount>
</UserMenu>
</>
Expand Down Expand Up @@ -397,6 +398,45 @@ describe("Events", () => {
cy.get("@changedAccount").its("args.0.0.detail.selectedAccount").should("have.property", "titleText", "Alain Chevalier 2");
});

it("tests change-account event prevented", () => {
cy.mount(
<>
<Button id="openUserMenuBtn">Open User Menu</Button>
<UserMenu open={true} opener="openUserMenuBtn" showOtherAccounts={true}>
<UserMenuAccount slot="accounts" titleText="Alain Chevalier 1" avatarSrc="./../../test/pages/img/man_avatar_1.png"></UserMenuAccount>
<UserMenuAccount slot="accounts" titleText="Alain Chevalier 2"></UserMenuAccount>
</UserMenu>
</>
);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu")
.shadow()
.find("[ui5-panel]")
.as("otherAccounts");

cy.get("@userMenu").then($userMenu => {
$userMenu.get(0).addEventListener("change-account", e => e.preventDefault());
$userMenu.get(0).addEventListener("change-account", cy.stub().as("changedAccount"));
});

cy.get("@otherAccounts")
.shadow()
.find("[ui5-button]")
.click();

cy.get("@otherAccounts")
.find("[ui5-li-custom]")
.realClick();

cy.get("@userMenu").shadow().find("[ui5-avatar]").first()
.as("avatar");
cy.get("@avatar").should("exist");
cy.get("@avatar").find("img").as("image");
cy.get("@image").should("have.length", 1);
cy.get("@image").should("have.attr", "src", "./../../test/pages/img/man_avatar_1.png");
cy.get("@avatar").should("have.class", "ui5-pm--selected-account-avatar");
});

it("tests item-click event", () => {
cy.mount(
<>
Expand All @@ -422,6 +462,59 @@ describe("Events", () => {
cy.get("@clicked").its("args.0.0.detail.item").should("have.property", "text", "Setting");
});

it("tests item-click sub menu event", () => {
cy.mount(
<>
<Button id="openUserMenuBtn">Open User Menu</Button>
<UserMenu open={true} opener="openUserMenuBtn">
<UserMenuItem text="Setting" data-id="setting">
<UserMenuItem text="Sub-Setting" data-id="sub-setting"></UserMenuItem>
</UserMenuItem>
</UserMenu>
</>
);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu")
.find("[ui5-user-menu-item]")
.as("userMenuItem");

cy.get("@userMenu")
.then($userMenu => {
$userMenu.get(0).addEventListener("item-click", cy.stub().as("clicked"));
});

cy.get("@userMenuItem").first().click();

cy.get("@clicked").should("have.not.been.called");
});

it("tests item-click sub menu event", () => {
cy.mount(
<>
<Button id="openUserMenuBtn">Open User Menu</Button>
<UserMenu open={true} opener="openUserMenuBtn">
<UserMenuItem text="Setting" data-id="setting">
<UserMenuItem text="Sub-Setting" data-id="sub-setting"></UserMenuItem>
</UserMenuItem>
</UserMenu>
</>
);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu")
.find("[ui5-user-menu-item]")
.as("userMenuItem");

cy.get("@userMenu")
.then($userMenu => {
$userMenu.get(0).addEventListener("item-click", cy.stub().as("clicked"));
});

cy.get("@userMenuItem").first().click();
cy.get("@userMenuItem").first().click();

cy.get("@clicked").should("have.not.been.called");
});

it("tests sign-out-click event", () => {
cy.mount(
<>
Expand All @@ -442,6 +535,27 @@ describe("Events", () => {
cy.get("@clicked").should("have.been.calledOnce");
});

it("tests sign-out-click event prevented", () => {
cy.mount(
<>
<Button id="openUserMenuBtn">Open User Menu</Button>
<UserMenu open={true} opener="openUserMenuBtn"></UserMenu>
</>
);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu").shadow().find("[ui5-button]").as("signOutBtn");

cy.get("@userMenu")
.then($userMenu => {
$userMenu.get(0).addEventListener("sign-out-click", e => e.preventDefault());
$userMenu.get(0).addEventListener("sign-out-click", cy.stub().as("clicked"));
});

cy.get("@signOutBtn").click();

cy.get("@userMenu").should("have.attr", "open");
});

it("tests open event", () => {
cy.mount(
<>
Expand Down Expand Up @@ -497,7 +611,10 @@ describe("Responsiveness", () => {
cy.mount(
<>
<Button id="openUserMenuBtn">Open User Menu</Button>
<UserMenu id="userMenuShellBar" open={true} opener="openUserMenuBtn">
<UserMenu id="userMenuShellBar" open={true}
opener="openUserMenuBtn"
showManageAccount={true}
showAddAccount={true}>
<UserMenuAccount slot="accounts" titleText="Alain Chevalier 1"></UserMenuAccount>
<UserMenuItem text="Setting1" data-id="setting1"></UserMenuItem>
</UserMenu>
Expand Down
23 changes: 1 addition & 22 deletions packages/fiori/src/UserMenu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import {
USER_MENU_POPOVER_ACCESSIBLE_NAME,
USER_MENU_EDIT_AVATAR_TXT,
USER_MENU_ADD_ACCOUNT_TXT,
USER_MENU_CLOSE_BUTTON_TXT,
USER_MENU_CLOSE_DIALOG_BUTTON,
} from "./generated/i18n/i18n-defaults.js";

Expand Down Expand Up @@ -346,7 +345,7 @@ class UserMenu extends UI5Element {
return;
}

this._closeUserMenu();
this._closeUserMenu();
}

_handleMenuItemClick(e: CustomEvent<ListItemClickEventDetail>) {
Expand Down Expand Up @@ -378,10 +377,6 @@ class UserMenu extends UI5Element {
this.fireDecoratorEvent("close");
}

_handleDeclineClick() {
this._closeUserMenu();
}

_openItemSubMenu(item: UserMenuItem) {
if (!item._popover || item._popover.open) {
return;
Expand All @@ -392,18 +387,6 @@ class UserMenu extends UI5Element {
item.selected = true;
}

_closeItemSubMenu(item: UserMenuItem) {
if (item && item._popover) {
const openedSibling = item._menuItems.find(menuItem => menuItem._popover && menuItem._popover.open);
if (openedSibling) {
this._closeItemSubMenu(openedSibling);
}

item._popover.open = false;
item.selected = false;
}
}

_closeUserMenu() {
this.open = false;
}
Expand All @@ -416,10 +399,6 @@ class UserMenu extends UI5Element {
return this.accounts.filter(account => account !== this._selectedAccount);
}

get _declineButtonTooltip() {
return UserMenu.i18nBundle.getText(USER_MENU_CLOSE_BUTTON_TXT);
}

get _manageAccountButtonText() {
return UserMenu.i18nBundle.getText(USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT);
}
Expand Down

0 comments on commit 263f349

Please sign in to comment.