Skip to content

Commit

Permalink
feat(ui5-user-menu): introduce new component (#10244)
Browse files Browse the repository at this point in the history 
* feat(ui5-profile-menu): introduce new component
---------

Co-authored-by: Adrian Bobev <adrian.bobev@sap.com>
  • Loading branch information
@dobromiraboycheva @adrian-bobev
dobromiraboycheva and adrian-bobev authored Nov 29, 2024
1 parent 3032393 commit 1558499
Show file tree
Hide file tree
Showing 21 changed files with 1,507 additions and 0 deletions.
3 changes: 3 additions & 0 deletions packages/fiori/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@ such as a common header (ShellBar).
| Timeline Item | `ui5-timeline-item` | comes with `ui5-timeline` |
| Upload Collection | `ui5-upload-collection` | `import "@ui5/webcomponents-fiori/dist/UploadCollection.js";` |
| Upload Collection Item | `ui5-upload-collection-item` | `import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";` |
| User Menu | `ui5-user-menu` | `import "@ui5/webcomponents-fiori/dist/UserMenu.js";` |
| User Menu Account | `ui5-user-menu-account` | `import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";` |
| User Menu Item | `ui5-user-menu-item` | `import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";` |
| View Settings Dialog | `ui5-view-settings-dialog` | `import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js";` |
| View Settings Dialog - Sort Item | `ui5-sort-item` | `import "@ui5/webcomponents-fiori/dist/SortItem.js";` |
| View Settings Dialog - Filter Item | `ui5-filter-item` | `import "@ui5/webcomponents-fiori/dist/FilterItem.js";` |
Expand Down
345 changes: 345 additions & 0 deletions packages/fiori/cypress/specs/UserMenu.cy.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,345 @@
import { html } from "lit";
import "../../src/UserMenu.js";
import "../../src/UserMenuAccount.js";
import "../../src/UserMenuItem.js";

import "@ui5/webcomponents/dist/Avatar.js";
import "@ui5/webcomponents/dist/Button.js";
import "@ui5/webcomponents-icons/dist/action-settings.js";

describe("Initial rendering", () => {
it("tests no config provided", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open opener="openUserMenuBtn">
</ui5-user-menu>`);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu").should("exist");
cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover");
cy.get("@responsivePopover").should("exist");
cy.get("@responsivePopover").find("[ui5-button]").contains("Sign Out");
cy.get("@responsivePopover").find("[ui5-button]").should("have.length", 1);
});

it("tests config show-manage-account", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open opener="openUserMenuBtn" show-manage-account>
<ui5-user-menu-account slot="accounts"
title-text="Alain Chevalier 1"
subtitle-text="alian.chevalier@sap.com"
description="Delivery Manager, SAP SE">
</ui5-user-menu-account>
</ui5-user-menu>`);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu").should("exist");
cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover");
cy.get("@responsivePopover").should("exist");
cy.get("@responsivePopover").find("[ui5-button]").contains("Manage account");
cy.get("@responsivePopover").find("[ui5-button]").should("have.length", 2);
});

it("tests config show-other-accounts", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open opener="openUserMenuBtn" show-other-accounts>
<ui5-user-menu-account slot="accounts"
title-text="Alain Chevalier 1"
subtitle-text="alian.chevalier@sap.com"
description="Delivery Manager, SAP SE"
selected>
</ui5-user-menu-account>
<ui5-user-menu-account slot="accounts"
avatar-initials="AC"
title-text="Alain Chevalier 2"
subtitle-text="test.alian.chevalier@sap.com">
</ui5-user-menu-account>
</ui5-user-menu>`);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu").should("exist");
cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover");
cy.get("@responsivePopover").should("exist");
cy.get("@responsivePopover").find("[ui5-panel]").contains("Other accounts (1)");
cy.get("@responsivePopover").find("[ui5-button]").should("have.length", 1);
});

it("tests config show-add-account", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open opener="openUserMenuBtn" show-other-accounts show-add-account>
<ui5-user-menu-account slot="accounts"
title-text="Alain Chevalier 1"
subtitle-text="alian.chevalier@sap.com"
description="Delivery Manager, SAP SE"
selected>
</ui5-user-menu-account>
<ui5-user-menu-account slot="accounts"
avatar-initials="AC"
title-text="Alain Chevalier 2"
subtitle-text="test.alian.chevalier@sap.com">
</ui5-user-menu-account>
</ui5-user-menu>`);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu").should("exist");
cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover");
cy.get("@responsivePopover").should("exist");
cy.get("@responsivePopover").find(".ui5-pm-add-account-btn").should("exist");
cy.get("@responsivePopover").find("[ui5-button]").should("have.length", 2);
});
});

describe("Menu configuration", () => {
it("tests config items", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open opener="openUserMenuBtn">
<ui5-user-menu-account slot="accounts"
title-text="Alain Chevalier 1"
subtitle-text="alian.chevalier@sap.com"
description="Delivery Manager, SAP SE">
</ui5-user-menu-account>
<ui5-user-menu-item text="Setting" data-id="setting"></ui5-user-menu-item>
<ui5-user-menu-item text="Product-specific account action"
data-id="account-action2"></ui5-user-menu-item>
</ui5-user-menu>`);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu").should("exist");
cy.get("@userMenu").find("[ui5-user-menu-item]").as("userMenuItems");
cy.get("@userMenuItems").should("exist");
cy.get("@userMenuItems").should("have.length", 2);
});

it("tests config items with submenu items", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open opener="openUserMenuBtn">
<ui5-user-menu-account slot="accounts"
title-text="Alain Chevalier 1"
subtitle-text="alian.chevalier@sap.com"
description="Delivery Manager, SAP SE">
</ui5-user-menu-account>
<ui5-user-menu-item text="Setting" data-id="setting"></ui5-user-menu-item>
<ui5-user-menu-item text="Product-specific account action"
data-id="account-action2"></ui5-user-menu-item>
<ui5-user-menu-item text="Legal Information">
<ui5-user-menu-item text="Private Policy" data-id="privacy-policy"></ui5-user-menu-item>
<ui5-user-menu-item text="Terms of Use" data-id="terms-of-use"></ui5-user-menu-item>
</ui5-user-menu-item>
</ui5-user-menu>`);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu").should("exist");
cy.get("@userMenu").find("[ui5-user-menu-item]").as("userMenuItems");
cy.get("@userMenuItems").should("exist");
cy.get("@userMenuItems").find("[ui5-user-menu-item]").as("userSubMenuItems");
cy.get("@userSubMenuItems").should("exist");
cy.get("@userSubMenuItems").should("have.length", 2);
});

it("tests config items with icon", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open opener="openUserMenuBtn">
<ui5-user-menu-account slot="accounts"
title-text="Alain Chevalier 1"
subtitle-text="alian.chevalier@sap.com"
description="Delivery Manager, SAP SE">
</ui5-user-menu-account>
<ui5-user-menu-item icon="action-settings" text="Setting" data-id="setting"></ui5-user-menu-item>
</ui5-user-menu>`);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu").should("exist");
cy.get("@userMenu").find("[ui5-user-menu-item]").as("userMenuItems");
cy.get("@userMenuItems").should("exist");
cy.get("@userMenuItems").should("have.length", 1);
cy.get("@userMenuItems").should("have.attr", "icon", "action-settings");
});
});

describe("Avatar configuration", () => {
it("tests default", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open opener="openUserMenuBtn">
<ui5-user-menu-account slot="accounts"
title-text="Alain Chevalier 1"
subtitle-text="alian.chevalier@sap.com"
description="Delivery Manager, SAP SE">
</ui5-user-menu-account>
</ui5-user-menu>`);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu").should("exist");
cy.get("@userMenu").shadow().find("[ui5-avatar]").as("avatar");
cy.get("@avatar").should("exist");
cy.get("@avatar").should("have.length", 1);
cy.get("@avatar").should("have.attr", "fallback-icon", "person-placeholder");
});

it("tests initials", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open opener="openUserMenuBtn">
<ui5-user-menu-account slot="accounts"
avatar-initials="AC"
title-text="Alain Chevalier 1"
subtitle-text="alian.chevalier@sap.com"
description="Delivery Manager, SAP SE">
</ui5-user-menu-account>
</ui5-user-menu>`);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu").should("exist");
cy.get("@userMenu").shadow().find("[ui5-avatar]").as("avatar");
cy.get("@avatar").should("exist");
cy.get("@avatar").should("have.length", 1);
cy.get("@avatar").should("have.attr", "initials", "AC");
});

it("tests image", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open opener="openUserMenuBtn">
<ui5-user-menu-account slot="accounts"
avatar-src="./../../test/pages/img/man_avatar_1.png"
title-text="Alain Chevalier 1"
subtitle-text="alian.chevalier@sap.com"
description="Delivery Manager, SAP SE">
</ui5-user-menu-account>
</ui5-user-menu>`);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu").should("exist");
cy.get("@userMenu").shadow().find("[ui5-avatar]").as("avatar");
cy.get("@avatar").should("exist");
cy.get("@avatar").should("have.length", 1);
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");
});
});

describe("Events", () => {
it("tests avatar-click event", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open opener="openUserMenuBtn">
<ui5-user-menu-account slot="accounts"
title-text="Alain Chevalier 1"
</ui5-user-menu-account>
</ui5-user-menu>`);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu")
.shadow()
.find("[ui5-responsive-popover]")
.find("[ui5-avatar]")
.as("avatar");

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

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

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

it("tests manage-account-click event", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open opener="openUserMenuBtn" show-manage-account>
<ui5-user-menu-account slot="accounts"
title-text="Alain Chevalier 1"
</ui5-user-menu-account>
</ui5-user-menu>`);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu")
.shadow()
.find("[ui5-button]")
.eq(0)
.as("manageAccountBtn");

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

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

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

it("tests add-account-click event", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open opener="openUserMenuBtn" show-add-account show-other-accounts>
</ui5-user-menu>`);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu")
.shadow()
.find(".ui5-pm-add-account-btn")
.as("addAccountBtn");

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

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

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

it("tests change-account event", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open opener="openUserMenuBtn" show-other-accounts>
<ui5-user-menu-account slot="accounts" title-text="Alain Chevalier 1">
</ui5-user-menu-account>
<ui5-user-menu-account slot="accounts" title-text="Alain Chevalier 2">
</ui5-user-menu-account>
</ui5-user-menu>`);
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", cy.stub().as("changedAccount"));
});

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

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

cy.get("@changedAccount").should("have.been.calledOnce");
cy.get("@changedAccount").its("args.0.0.detail.prevSelectedAccount").should("have.property", "titleText", "Alain Chevalier 1");
cy.get("@changedAccount").its("args.0.0.detail.selectedAccount").should("have.property", "titleText", "Alain Chevalier 2");
});

it("tests item-click event", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open 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")
.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").click();

cy.get("@clicked").should("have.been.calledOnce");
cy.get("@clicked").its("args.0.0.detail.item").should("have.property", "text", "Setting");
});

it("tests sign-out-click event", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open opener="openUserMenuBtn">
</ui5-user-menu>`);
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", cy.stub().as("clicked"));
});

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

cy.get("@clicked").should("have.been.calledOnce");
});
});
Loading

0 comments on commit 1558499

Please sign in to comment.