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

Shellbar unit tests #10248

Merged
merged 4 commits into from
Nov 27, 2024
Merged

Shellbar unit tests #10248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0463ea6
chore(ui5-shellbar): unit tests added
Nov 21, 2024
626f869
fix(ui5-shellbar): small size no OTB button
Nov 22, 2024
b382f8d
Merge branch 'chore-shellbar-evolution' of github.com:SAP/ui5-webcomp…
Nov 22, 2024
a580c48
Merge branch 'chore-shellbar-evolution' of github.com:SAP/ui5-webcomp…
Nov 25, 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
223 changes: 180 additions & 43 deletions packages/fiori/cypress/specs/ShellBar.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { html } from "lit";
import "../../src/ShellBar.js";
import "@ui5/webcomponents-icons/dist/activities.js";
import "@ui5/webcomponents-icons/dist/da.js";

describe("Responsiveness", () => {
beforeEach(() => {
cy.mount(html`
const basicTemplate = html`
<ui5-shellbar
id="shellbar"
primary-title="Product Title"
Expand All @@ -13,8 +14,43 @@ describe("Responsiveness", () => {
show-product-switch
>

<ui5-toggle-button icon="sap-icon://da" slot="assistant"></ui5-toggle-button>
<ui5-toggle-button id="assistant" icon="sap-icon://da" slot="assistant" text="Button3"></ui5-toggle-button>

<ui5-avatar slot="profile">
<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
</ui5-avatar>

<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"/>

<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>

<ui5-shellbar-item id="disc" icon="activities" text="Disconnect"></ui5-shellbar-item>
<ui5-shellbar-item id="call" icon="sys-type" text="Incoming Calls"></ui5-shellbar-item>

<ui5-input placeholder="Instructions" slot="searchField" show-suggestions value-state="Information">
<div slot="valueStateMessage">Instructions</div>
</ui5-input>

<ui5-switch design="Textual" text-on="PR0" text-off="PR0" slot="additionalContextStart"></ui5-switch>
<ui5-toggle-button slot="additionalContextEnd" text="PR2" data-priority="2">PR2</ui5-toggle-button>
</ui5-shellbar>`;

const templateWithMenuItems = html`
<ui5-shellbar
id="shellbar"
primary-title="Product Title"
secondary-title="Solution name"
notifications-count="99+"
show-notifications
show-product-switch
>

<ui5-toggle-button icon="sap-icon://da" slot="assistant"></ui5-toggle-button>
<ui5-li id="menu-item-1" slot="menuItems" data-key="key1">Application 1</ui5-li>
<ui5-li id="menu-item-2" slot="menuItems" data-key="key2">Application 2</ui5-li>
<ui5-li slot="menuItems" data-key="key3">Application 3</ui5-li>
<ui5-li slot="menuItems" data-key="key4">Application 4</ui5-li>
<ui5-li slot="menuItems" data-key="key5">Application 5</ui5-li>
<ui5-avatar slot="profile">
<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
</ui5-avatar>
Expand All @@ -23,8 +59,8 @@ describe("Responsiveness", () => {

<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>

<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
<ui5-shellbar-item id="disc" icon="activities" text="Disconnect"></ui5-shellbar-item>
<ui5-shellbar-item id="call" icon="sys-type" text="Incoming Calls"></ui5-shellbar-item>

<ui5-input placeholder="Instructions" slot="searchField" show-suggestions value-state="Information">
<div slot="valueStateMessage">Instructions</div>
Expand All @@ -35,71 +71,172 @@ describe("Responsiveness", () => {
<ui5-li slot="menuItems" data-key="key3">Application 3</ui5-li>
<ui5-li slot="menuItems" data-key="key4">Application 4</ui5-li>
<ui5-li slot="menuItems" data-key="key5">Application 5</ui5-li>
</ui5-shellbar>
`);
</ui5-shellbar>`;

const templateWithOnlyOneAction = html`<ui5-shellbar
id="shellbar"
primary-title="Product Title"
secondary-title="Solution name"
notifications-count="99+"
show-notifications
show-product-switch
>
<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"/>
</ui5-shellbar>`;
beforeEach(() => {
cy.mount(basicTemplate).as("html");

cy.get("#shellbar")
.as("shellbar");
});

it("tests XXL Breakpoint 1920px", () => {
afterEach(() => {
cy.viewport(1920, 1080);
cy.get("@shellbar").invoke("attr", "variant", "Full");
});

cy.get("#shellbar")
.as("shellbar")
.shadow()
.find(".ui5-shellbar-overflow-button")
.as("overflowButton");
it("tests XXL Breakpoint 1920px", () => {
cy.viewport(1920, 1080).then(() => {
cy.get("@shellbar")
.find("ui5-button[slot='startButton']")
.as("backButton");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-title")
.as("primaryTitle");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-secondary-title")
.as("secondaryTitle");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-search-button")
.as("searchButton");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-custom-item")
.as("customActionIcon1");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-bell-button")
.as("notificationsIcon");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-image-button")
.as("profileIcon");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-button-product-switch")
.as("productSwitchIcon");

cy.get("@backButton").should("be.visible");
cy.get("@primaryTitle").should("be.visible");
cy.get("@secondaryTitle").should("be.visible");
cy.get("@customActionIcon1").should("be.visible");
cy.get("@notificationsIcon").should("be.visible");
cy.get("@profileIcon").should("be.visible");
cy.get("@productSwitchIcon").should("be.visible");

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

cy.get("@shellbar")
.find("ui5-input[slot='searchField']")
.as("searchField").should("be.visible");

cy.get("@searchButton").click();
});
});

it("tests S Breakpoint 320px", () => {
cy.get("html").viewport("iphone-x").then(() => {
cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-overflow-button")
.should("exist");
cy.get("ui5-switch")
.should("be.hidden");
});
});

it("tests items visibility in Lean mode", () => {
cy.get("@shellbar")
.find("ui5-button[slot='startButton']")
.as("backButton");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-menu-button-title")
.as("primaryTitle");
.find(".ui5-shellbar-search-button")
.as("searchButton");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-secondary-title")
.as("secondaryTitle");

cy.get("@shellbar")
.find("[slot='searchField']")
.as("searchField");
.find(".ui5-shellbar-bell-button")
.as("notificationsIcon");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-custom-item")
.as("customActionIcon1");
.find(".ui5-shellbar-image-button")
.as("profileIcon");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-custom-item:nth-child(3)")
.as("customActionIcon2");
.find(".ui5-shellbar-button-product-switch")
.as("productSwitchIcon");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-bell-button")
.as("notificationsIcon");
cy.get("@shellbar").invoke("attr", "variant", "Lean").then(() => {
cy.get("@backButton").should("not.be.visible");
cy.get("@searchButton").should("not.exist");
cy.get("@notificationsIcon").should("not.exist");
cy.get("@productSwitchIcon").should("not.exist");
cy.get("@profileIcon").should("be.visible");
});
});

it("tests logo and Primary title when no menuItems are presented", () => {
cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-image-button")
.as("profileIcon");
.find(".ui5-shellbar-logo-area")
.as("logoLink");

cy.get("@logoLink").should("exist");
});

it("tests Primary title when menuItems are presented", () => {
cy.mount(templateWithMenuItems).as("html1");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-button-product-switch")
.as("productSwitchIcon");
.find(".ui5-shellbar-menu-button")
.as("menuButton");

cy.get("@menuButton").should("be.visible");
});

it("tests XXL Breakpoint Search bar", () => {
cy.get("@shellbar").invoke("attr", "show-search-field", "true");
cy.viewport(2560, 1080).then(() => {
cy.get("[slot='searchField']")
.should("exist");

// cy.get("searchField").should("exist");
});
});

it("Test overflow button not showing, when only one action is presented", () => {
cy.mount(templateWithOnlyOneAction).as("html1");

cy.get("@overflowButton").should("not.exist");
cy.get("@backButton").should("be.visible");
cy.get("@primaryTitle").should("be.visible");
cy.get("@secondaryTitle").should("be.visible");
cy.get("@searchField").should("be.visible");
cy.get("@customActionIcon1").should("be.visible");
cy.get("@customActionIcon2").should("be.visible");
cy.get("@notificationsIcon").should("be.visible");
cy.get("@profileIcon").should("be.visible");
cy.get("@productSwitchIcon").should("be.visible");
cy.get("html").viewport("iphone-6").then(() => {
cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-overflow-button")
.should("be.hidden");
});
});
});
4 changes: 2 additions & 2 deletions packages/fiori/src/ShellBar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -751,7 +751,7 @@ class ShellBar extends UI5Element {
}

onBeforeRendering() {
const input = this.searchField[0]?.shadowRoot!.querySelector(".ui5-input-inner");
const input = this.searchField.length && this.searchField[0]?.querySelector(".ui5-input-inner");

this.withLogo = this.hasLogo;

Expand Down Expand Up @@ -839,7 +839,7 @@ class ShellBar extends UI5Element {
const newItems = this._getAllItems(hasIcons > 1).filter(i => i.show).map((info): IShelBarItemInfo => {
const isOverflowIcon = info.classes.indexOf("ui5-shellbar-overflow-button") !== -1;
const isImageIcon = info.classes.indexOf("ui5-shellbar-image-button") !== -1;
const shouldStayOnScreen = isOverflowIcon || (isImageIcon && this.hasProfile) || !this._isFullVariant;
const shouldStayOnScreen = hasIcons === 1 || isOverflowIcon || (isImageIcon && this.hasProfile) || !this._isFullVariant;

return {
...info,
Expand Down
Loading