@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/cypress/specs/Avatar.cy.tsx

@@ -0,0 +1,55 @@
+import Avatar from "../../src/Avatar.js";
+import Tag from "../../src/Tag.js";
+import Icon from "../../src/Icon.js";
+import "@ui5/webcomponents-icons/dist/supplier.js";
+
+describe("Accessibility", () => {
+	it("checks if initials of avatar are correctly announced", () => {
+		const INITIALS = "XS";
+
+		cy.mount(<Avatar id="interactive-avatar" initials={INITIALS} interactive></Avatar>);
+
+		// Store the expected label to compare against
+		const expectedLabel = `Avatar ${INITIALS}`;
+
+		// Check if the aria-label is correctly set
+		cy.get("#interactive-avatar")
+			.shadow()
+			.find(".ui5-avatar-root")
+			.should("have.attr", "aria-label", expectedLabel);
+	});
+
+	it("checks if accessible-name is correctly passed to the icon", () => {
+		const ACCESSIBLE_NAME = "Supplier Icon";
+		const ICON_NAME = "supplier";
+
+		cy.mount(<Avatar id="avatar-with-icon" icon={ICON_NAME} accessibleName={ACCESSIBLE_NAME}></Avatar>);
+
+		cy.get("#avatar-with-icon")
+			.shadow()
+			.find("ui5-icon")
+			.shadow()
+			.find("svg")
+			.should("have.attr", "aria-label", ACCESSIBLE_NAME);
+	});
+
+	it("doesn't fire ui5-click event, when disabled property is set", () => {
+		cy.mount(
+			<div>
+				<Avatar interactive disabled initials="JD" id="diabled-avatar" onClick={increment}>
+				<Tag slot="badge">
+					<Icon slot="icon" name="accelerated"></Icon>
+				</Tag>
+				</Avatar>
+				<input value="0" id="click-event" />
+			</div>
+		);
+
+		function increment() {
+			const input = document.getElementById("click-event") as HTMLInputElement;
+			input.value = "1";
+		}
+		cy.get("#diabled-avatar").realClick();
+		cy.get("#click-event").should("have.value", "0");
+	});
+});

package/cypress/specs/AvatarGroup.cy.tsx

@@ -0,0 +1,66 @@
+import Avatar from "../../src/Avatar.js";
+import AvatarGroup from "../../src/AvatarGroup.js";
+
+describe("Overflow", () => {
+	it("checks if overflow button is hiding properly", () => {
+		cy.mount(<AvatarGroup id="ag" style="width: 100px;">
+			<Avatar initials="II"></Avatar>
+			<Avatar initials="II"></Avatar>
+			<Avatar initials="II"></Avatar>
+		</AvatarGroup>);
+
+		// Store the expected hidden items to compare against
+		const expectedHiddenItems = 0;
+
+		// Check if the aria-label is correctly set
+		cy.get("#ag")
+			.as("ag")
+			.then($el => {
+				$el.get(0).innerHTML = "";
+				return $el;
+			});
+
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
+		cy.get("@ag")
+			.then($el => {
+				const avatar = document.createElement("ui5-avatar");
+				avatar.setAttribute("initials", "II");
+				$el.get(0).appendChild(avatar);
+				const ag = document.querySelector("#ag") as AvatarGroup;
+				return ag._hiddenItems;
+			})
+			.should("equal", expectedHiddenItems);
+	});
+});
+
+describe("Avatars", () => {
+	it("checks if no unnecessary margin is applied of only one Avatar is available", () => {
+		cy.mount(<AvatarGroup id="ag2" type="Group">
+			<Avatar id="av1" initials="II"></Avatar>
+			<Avatar id="av2" initials="II"></Avatar>
+		</AvatarGroup>);
+
+		cy.get("#av2").invoke("remove");
+
+		cy.get("#av1")
+			.invoke("attr", "style")
+			.should("equal", "");
+	});
+
+
+	it("tests if _color-scheme attribute is automatically set to avatars", () => {
+		const avatarCount = 20;
+		cy.mount(<AvatarGroup id="ag" type="Group">
+			{Array.from({ length: avatarCount }, (_, i) => {
+				return <Avatar initials="II"></Avatar>;
+			})}
+		</AvatarGroup>);
+
+		Array.from({ length: avatarCount }, (_, i) => {
+			const index = (i % 10) + 1;
+			cy.get("ui5-avatar").eq(i).should("have.attr", "_color-scheme", `Accent${index}`);
+		});
+	});
+});

package/cypress/specs/Breadcrumbs.mobile.cy.tsx

@@ -0,0 +1,53 @@
+import Breadcrumbs from "../../src/Breadcrumbs.js";
+import BreadcrumbsItem from "../../src/BreadcrumbsItem.js";
+
+describe("Breadcrumbs mobile behavior", () => {
+    before(() => {
+        cy.ui5SimulateDevice("phone");
+    });
+
+    it("displays all items in the popover on mobile", () => {
+        const breadcrumbItems = [
+            "Products",
+            "Categories",
+            "Laptops",
+            "Gaming Laptops",
+            "XPS Pro"
+        ];
+
+        cy.mount(
+            <Breadcrumbs>
+                {breadcrumbItems.map((item, index) => (
+                    <BreadcrumbsItem key={index} href={`#${item}`}>{item}</BreadcrumbsItem>
+                ))}
+            </Breadcrumbs>
+        );
+
+        // Open the overflow popover by clicking on the dropdown arrow within shadow DOM
+        cy.get("ui5-breadcrumbs")
+            .shadow()
+            .find(".ui5-breadcrumbs-dropdown-arrow-link-wrapper ui5-link")
+            .click();
+
+        // Wait for the popover to be fully open
+        cy.get("ui5-breadcrumbs")
+            .shadow()
+            .find("ui5-responsive-popover")
+            .shadow()
+            .find("ui5-dialog")
+            .should("be.visible");
+
+        // Verify that all items are displayed in the popover
+        cy.get("ui5-breadcrumbs")
+            .shadow()
+            .find("ui5-responsive-popover ui5-list ui5-li")
+            .should("have.length", breadcrumbItems.length);
+
+        // Verify the items are in the correct order (reversed)
+        cy.get("ui5-breadcrumbs")
+            .shadow()
+            .find("ui5-responsive-popover ui5-list ui5-li")
+            .eq(0)
+            .should("contain.text", breadcrumbItems[breadcrumbItems.length - 1]);
+    });
+});

package/cypress/specs/{Button.cy.ts → Button.cy.tsx}

@@ -1,12 +1,17 @@
-import { html } from "lit";
-import "../../src/Button.js";
-import type Button from "../../src/Button.js";
-import "@ui5/webcomponents-icons/dist/download.js";
-import "@ui5/webcomponents-icons/dist/employee.js";
+import Avatar from "../../src/Avatar.js";
+import Button from "../../src/Button.js";
+import Label from "../../src/Label.js";
+import ButtonBadge from "../../src/ButtonBadge.js";
+import download from "@ui5/webcomponents-icons/dist/download.js";
+import employee from "@ui5/webcomponents-icons/dist/employee.js";
+
+import {
+	BUTTON_ARIA_TYPE_EMPHASIZED,
+} from "../../src/generated/i18n/i18n-defaults.js";
 
 describe("Button general interaction", () => {
 	it("tests button's text rendering", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+		cy.mount(<Button icon={download} design="Negative">Action Bar Button</Button>);
 
 		cy.get<Button>("[ui5-button]")
 			.shadow()
@@ -15,7 +20,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button's icon rendering", () => {
-		cy.mount(html`<ui5-button>Action Bar Button</ui5-button>`);
+		cy.mount(<Button icon={download} design="Emphasized">Action Bar Button</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -42,7 +47,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button's endIon rendering", () => {
-		cy.mount(html`<ui5-button>Action Bar Button</ui5-button>`);
+		cy.mount(<Button>Action Bar Button</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -69,7 +74,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests click event", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+		cy.mount(<Button icon="home" design="Emphasized">Action Bar Button</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -91,7 +96,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests keyboard shortcuts used to prevent a click event", () => {
-		cy.mount(html`<ui5-button>Text</ui5-button>`);
+		cy.mount(<Button>Text</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -112,32 +117,33 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button's icon only rendering", () => {
-		cy.mount(html`<ui5-button icon="home"><!----><!----></ui5-button>`);
+		cy.mount(<Button icon="home"></Button>);
 
 		cy.get("[ui5-button]")
 			.should("have.attr", "icon-only");
 	});
 
 	it("tests button's icon only rendering", () => {
-		cy.mount(html`<ui5-button icon="text"> </ui5-button>`);
+		cy.mount(<Button icon="text"> </Button>);
 
 		cy.get("[ui5-button]")
 			.should("have.attr", "icon-only");
 	});
 
 	it("tests button's slot rendering", () => {
-		cy.mount(html`
-	<ui5-button>
-		<ui5-avatar id="btnImage" size="XS">
-			<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
-		</ui5-avatar>
-	</ui5-button>`);
+		cy.mount(
+			<Button>
+				<Avatar id="btnImage" size="XS">
+					<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
+				</Avatar>
+			</Button>
+		);
 		cy.get("[ui5-button]")
 			.should("be.visible", "Btn image is rendered");
 	});
 
 	it("tests clicking on disabled button", () => {
-		cy.mount(html`<ui5-button disabled>Inactive</ui5-button>`);
+		cy.mount(<Button disabled>Inactive</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -169,7 +175,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests clicking on disabled button with Icon", () => {
-		cy.mount(html`<ui5-button icon="employee" disabled></ui5-button>`);
+		cy.mount(<Button icon={employee} disabled></Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -199,7 +205,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button with text icon role", () => {
-		cy.mount(html`<ui5-button design="Attention" icon="message-warning">Warning</ui5-button>`);
+		cy.mount(<Button design="Attention" icon="message-warning">Warning</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -213,7 +219,7 @@ describe("Button general interaction", () => {
 
 describe("Accessibility", () => {
 	it("setting tooltip on the host is reflected on the button tag", () => {
-		cy.mount(html`<ui5-button icon="message-information" tooltip="Go home"></ui5-button>`);
+		cy.mount(<Button icon="message-information" tooltip="Go home"></Button>);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -225,7 +231,7 @@ describe("Accessibility", () => {
 	});
 
 	it("tooltip from inner icon is propagated", () => {
-		cy.mount(html`<ui5-button icon="download" accessible-name="Download application"></ui5-button>`);
+		cy.mount(<Button icon="download" accessibleName="Download application"></Button>);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -236,8 +242,15 @@ describe("Accessibility", () => {
 			.should("have.attr", "title", "Download");
 	});
 
+	it("tooltip not displayed when there is a text", () => {
+		cy.mount(<Button icon="home">Action</Button>);
+
+		cy.get("[ui5-button]")	
+			.should("not.have.attr", "title");
+	});
+
 	it("aria-expanded is properly applied on the button tag", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+		cy.mount(<Button icon="home" design="Emphasized">Action Bar Button</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -268,7 +281,7 @@ describe("Accessibility", () => {
 	});
 
 	it("setting accessible-role on the host is reflected on the button tag", () => {
-		cy.mount(html`<ui5-button accessible-role="Link"> Navigation Button </ui5-button>`);
+		cy.mount(<Button accessibleRole="Link"> Navigation Button </Button>);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -280,7 +293,7 @@ describe("Accessibility", () => {
 	});
 
 	it("not setting accessible-role on the host keeps the correct role on the button tag", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+		cy.mount(<Button icon="home" design="Emphasized">Action Bar Button</Button>);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -291,28 +304,56 @@ describe("Accessibility", () => {
 			.should("have.attr", "role", "button");
 	});
 
-	it("aria-describedby properly applied on the button tag", () => {
-		const hiddenTextTypeId = "ui5-button-hiddenText-type";
-
-		cy.mount(html`<ui5-button design="Attention">Content</ui5-button>`);
+	it("accessibleDescription in combination with design property applied on the button tag", () => {
+		cy.mount(<Button design="Negative" accessibleDescription="Decline">Content</Button>);
 
 		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
 			.as("button");
 
 		cy.get("@button")
+			.should("have.attr", "aria-description", "Decline");
+	});
+
+
+	it("accessibleName when the button has a ui5-button-badge with more than 1 items", () => {
+		cy.mount(
+			<Button accessibleName="Download">
+				<ButtonBadge design="OverlayText" text="999+" slot="badge"></ButtonBadge>
+			</Button>
+		);
+		cy.get("[ui5-button]")
 			.shadow()
 			.find("button")
-			.should("have.attr", "aria-describedby", hiddenTextTypeId);
+			.as("button");
 
 		cy.get("@button")
+			.should("have.attr", "aria-label", `Download 999+ items`);
+	});
+
+	it("accessibleName when the button has a ui5-button-badge with 1 item", () => {
+		cy.mount(
+			<Button design="Emphasized" accessibleName="Download">
+				<ButtonBadge text="1" design="InlineText" slot="badge"></ButtonBadge>
+			</Button>
+		);
+		cy.get("[ui5-button]")
 			.shadow()
-			.find(`span[id="${hiddenTextTypeId}"]`)
-			.should("exist");
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "aria-label", `Download ${BUTTON_ARIA_TYPE_EMPHASIZED.defaultText} 1 item`);
 	});
 
 	it("setting accessible-name-ref on the host is reflected on the button tag", () => {
-		cy.mount(html`<ui5-button icon="download" accessible-name="Help me" accessible-name-ref="1download-text"></ui5-button>
-		<ui5-label id="1download-text">Download Application</ui5-label>`);
+		cy.mount(
+			<>
+				<Button icon="download" accessibleName="Help me" accessibleNameRef="1download-text"></Button>
+				<Label id="1download-text">Download Application</Label>
+			</>
+		);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -324,7 +365,7 @@ describe("Accessibility", () => {
 	});
 
 	it("aria-haspopup and aria-controls are properly applied on the button tag", () => {
-		cy.mount(html`<ui5-button>Show Registration Dialog</ui5-button>`);
+		cy.mount(<Button>Show Registration Dialog</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -349,7 +390,7 @@ describe("Accessibility", () => {
 	});
 
 	it("setting accessible-description is applied to button tag", () => {
-		cy.mount(html`<ui5-button accessible-description="A long description."></ui5-button>`);
+		cy.mount(<Button accessibleDescription="A long description."></Button>);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -359,4 +400,35 @@ describe("Accessibility", () => {
 		cy.get("@button")
 			.should("have.attr", "aria-description", "A long description.");
 	});
+
+	it("button with a badge", () => {
+		cy.mount(
+			<Button design="Emphasized" icon={employee}>Emphasized
+				<ButtonBadge design="OverlayText" text="999+" slot="badge"></ButtonBadge>
+			</Button>
+		);
+
+		cy.get("[ui5-button]")
+			.find("ui5-button-badge")
+			.as("badge");
+
+		cy.get("@badge")
+			.shadow()
+			.find("ui5-tag")
+			.as("tag");
+
+		cy.get("@tag")
+			.should("have.attr", "design", "Critical");
+
+		cy.get("@tag")
+			.should("have.text", "999+");
+	});
 });
+
+ui5AccDescribe("Automated accessibility tests", () => {
+	it("Icon only", () => {
+		cy.mount(<Button icon="message-information"></Button>);
+
+		cy.ui5CheckA11y();
+	})
+});