Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(ui5-user-menu): introduce new component #10244

Merged
merged 34 commits into from
Nov 29, 2024
Merged

feat(ui5-user-menu): introduce new component #10244

Show file tree
Hide file tree
Changes from 28 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
d9ce4d1
feat(ui5-profile-menu): introduce new component
adrian-bobev Nov 19, 2024
4865fc0
chore: add manageAccount property
dobromiraboycheva Nov 20, 2024
a95be5e
chore: add sample
dobromiraboycheva Nov 21, 2024
248d464
chore: update documentation
dobromiraboycheva Nov 22, 2024
f1f8216
chore: some small changes
adrian-bobev Nov 24, 2024
f553b52
chore: renaming
dobromiraboycheva Nov 25, 2024
f395786
Merge remote-tracking branch 'origin/main' into ui5-profile-menu
dobromiraboycheva Nov 25, 2024
270d344
chore: add version
dobromiraboycheva Nov 25, 2024
3d0b245
chore: fix documentation
dobromiraboycheva Nov 25, 2024
e329acf
chore: fix documentation
dobromiraboycheva Nov 25, 2024
b745693
chore: correct playground sample
adrian-bobev Nov 25, 2024
0379ef9
Merge remote-tracking branch 'origin/main' into ui5-profile-menu
dobromiraboycheva Nov 25, 2024
745e473
chore: fix version
dobromiraboycheva Nov 25, 2024
86a4af2
chore: some small changes
dobromiraboycheva Nov 25, 2024
0d85b5d
chore: some small changes
dobromiraboycheva Nov 25, 2024
c9189f5
chore: some small changes
dobromiraboycheva Nov 25, 2024
502d095
chore: prevent error thrown when no accounts are provided
adrian-bobev Nov 25, 2024
aa6540e
chore: remove width of submenus
adrian-bobev Nov 25, 2024
e0b23aa
chore: rename properties of UserMenuAccount
adrian-bobev Nov 26, 2024
601968d
chore: remove some not needed things from sample
adrian-bobev Nov 26, 2024
ebe4964
chore: add tooltip to avatar
dobromiraboycheva Nov 26, 2024
dc11496
chore: add showAddAccont
dobromiraboycheva Nov 27, 2024
188d3f8
chore: some small change
dobromiraboycheva Nov 27, 2024
edafaa7
Merge remote-tracking branch 'origin/main' into ui5-profile-menu
dobromiraboycheva Nov 27, 2024
83fa375
chore: add tests
dobromiraboycheva Nov 27, 2024
362ec00
chore: some small change
dobromiraboycheva Nov 27, 2024
cd0f2ee
chore: add tests for events
adrian-bobev Nov 27, 2024
e3389b6
chore: fix comments from code review
adrian-bobev Nov 28, 2024
33b362f
chore: fix comment from code review
dobromiraboycheva Nov 29, 2024
a77fa1f
chore: fix comment from code review
dobromiraboycheva Nov 29, 2024
8ddb814
Merge remote-tracking branch 'origin/main' into ui5-profile-menu
dobromiraboycheva Nov 29, 2024
d719a61
chore: some small change
dobromiraboycheva Nov 29, 2024
2c6ebbf
chore: fix comment from code review
dobromiraboycheva Nov 29, 2024
276d392
chore: change type of default slot
adrian-bobev Nov 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/fiori/README.md
View file
Open in desktop
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
Open in desktop
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"
additional-text="[email protected]"
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"
additional-text="[email protected]"
description="Delivery Manager, SAP SE"
selected>
</ui5-user-menu-account>
<ui5-user-menu-account slot="accounts"
initials="AC"
title-text="Alain Chevalier 2"
additional-text="[email protected]">
</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"
additional-text="[email protected]"
description="Delivery Manager, SAP SE"
selected>
</ui5-user-menu-account>
<ui5-user-menu-account slot="accounts"
initials="AC"
title-text="Alain Chevalier 2"
additional-text="[email protected]">
</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"
additional-text="[email protected]"
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"
additional-text="[email protected]"
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"
additional-text="[email protected]"
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"
additional-text="[email protected]"
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"
initials="AC"
title-text="Alain Chevalier 1"
additional-text="[email protected]"
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="./../../test/pages/img/man_avatar_1.png"
title-text="Alain Chevalier 1"
additional-text="[email protected]"
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