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

package/cypress/specs/Label.cy.tsx

@@ -0,0 +1,144 @@
+import "../../test/pages/modules/LabelPageCustomElement.js";
+import {
+	LABEL_COLON,
+} from "../../src/generated/i18n/i18n-defaults.js";
+import Label from "../../src/Label.js";
+import Input from "../../src/Input.js";
+import TextArea from "../../src/TextArea.js";
+import DatePicker from "../../src/DatePicker.js";
+
+describe("Label", () => {
+	describe("General API ", () => {
+		it("tests initial rendering - root and slot", () => {
+			cy.mount(<Label>Basic Label</Label>);
+			cy.get("[ui5-label]").shadow().find(".ui5-label-root").should("exist");
+			cy.get("[ui5-label]").shadow().find("slot:not([name])");
+		});
+
+		it("should show required star", () => {
+			cy.mount(<Label required={true}>Required Label</Label>);
+			cy.get("[ui5-label]")
+				.shadow()
+				.find(".ui5-label-required-colon")
+				.then($el => {
+					return getComputedStyle($el[0], ":after").content;
+				})
+				.should("equal", `"*"`);
+		});
+
+		it("tests show-colon does not force truncation", () => {
+			cy.mount(
+				<>
+					<Label id="showColon-false">Basic Label</Label>
+					<Label showColon={true} id="showColon-true">Basic Label</Label>
+				</>
+			);
+
+			cy.get("#showColon-true").shadow().find(".ui5-label-text-wrapper").invoke("width")
+				.then($labelWithColonWidth => {
+					cy.get("#showColon-false").shadow().find(".ui5-label-text-wrapper").should("have.css", "width", `${$labelWithColonWidth}px`);
+				});
+		});
+
+		it("should wrap the text of the label by default and truncate when wrappingType is None", () => {
+			cy.mount(
+				<>
+					<Label id="wrapping-label-1" style="width: 200px">Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</Label>
+					<Label id="truncated-label-1" wrappingType="None" style="width: 200px">Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</Label>
+				</>
+			);
+
+			cy.get("#wrapping-label-1").invoke("height").then($wrappingLabelHeight => {
+				cy.get("#truncated-label-1").invoke("height").should($truncatedLabelHeight => {
+					expect($wrappingLabelHeight).to.be.greaterThan(16);
+					expect($truncatedLabelHeight).to.be.lessThan(17);
+				});
+			});
+		});
+
+		it("colon symbol should be taken from the i18n bundle", () => {
+			cy.mount(<Label showColon={true} id="showColon-true">Basic Label</Label>);
+
+			cy.get("#showColon-true").shadow().find(".ui5-label-required-colon").then($el => {
+				return getComputedStyle($el[0], ":before").content;
+			})
+				.should("equal", `"${LABEL_COLON.defaultText}"`);
+		});
+	});
+
+	describe("linked element with 'for' property", () => {
+		it("should focus ui5-input on click and set correct aria-label", () => {
+			cy.mount(
+				<>
+					<Label for="form-ui5-input">Label for Input</Label>
+					<Input id="form-ui5-input" style="width: 200px"></Input>
+				</>
+			);
+
+			cy.get("[ui5-input]").shadow().find(".ui5-input-inner").should("have.attr", "aria-label", "Label for Input");
+
+			cy.get("[ui5-label]").realClick();
+			cy.get("[ui5-input]").should("be.focused");
+		});
+
+		it("should focus native HTML input on click", () => {
+			cy.mount(
+				<>
+					<Label for="native-input">Label for Native Input</Label>
+					<input id="native-input" />
+				</>
+			);
+
+			cy.get("[ui5-label]").realClick();
+			cy.get("#native-input").should("be.focused");
+		});
+
+		it("should focus ui5-textarea on click", () => {
+			cy.mount(
+				<>
+					<Label for="ui5-textarea">Label for Textarea</Label>
+					<TextArea id="ui5-textarea"></TextArea>
+				</>
+			);
+
+			cy.get("[ui5-label]").realClick();
+			cy.get("#ui5-textarea").should("be.focused");
+		});
+
+		it("should focus native HTML textarea on click", () => {
+			cy.mount(
+				<>
+					<Label for="native-textarea">Label for Native Textarea</Label>
+					<textarea id="native-textarea"></textarea>
+				</>
+			);
+
+			cy.get("[ui5-label]").realClick();
+			cy.get("#native-textarea").should("be.focused");
+		});
+
+		it("should focus ui5-date-picker on click", () => {
+			cy.mount(
+				<>
+					<Label for="ui5-datepicker">Label for Date Picker</Label>
+					<DatePicker id="ui5-datepicker"></DatePicker>
+				</>
+			);
+
+			cy.get("[ui5-date-picker]").should("be.visible");
+
+			cy.get("[ui5-label]").realClick();
+			cy.get("[ui5-date-picker]").should("be.focused");
+		});
+
+		// Custom component should be reworked a bit
+		// it("should focus within a shadow root", () => {
+		// 	cy.mount(
+		// 		<label-page-custom-element id="custom-element-with-label"></label-page-custom-element>
+		// 	);
+
+		// 	cy.get("#custom-element-with-label").shadow().find("[ui5-label]").realClick();
+		// 	cy.get("#custom-element-with-label").shadow().find("#input").should("be.focused");
+		// });
+	});
+});

package/cypress/specs/Link.cy.tsx

@@ -0,0 +1,216 @@
+import Link from "../../src/Link.js";
+
+describe("General API", () => {
+	it("render initially", () => {
+		cy.mount(<Link></Link>);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("exist");
+	});
+
+	it("tests rel attribute", () => {
+		cy.mount(<Link href="https://www.sap.com" target="_blank"></Link>);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("have.attr", "rel", "noreferrer noopener");
+	});
+
+	it("should wrap the text of the link", () => {
+		cy.mount(
+			<>
+				<Link style="width: 100px" id="wrapping-link">Eu enim consectetur do amet elit Lorem ipsum dolor, sit amet consectetur adipisicing elit.</Link>
+				<Link style="width: 100px" id="non-wrapping-link" wrappingType="None">Eu enim consectetur do amet elit Lorem ipsum dolor, sit amet consectetur adipisicing elit.</Link>
+			</>
+		);
+
+		cy.get("#wrapping-link")
+			.shadow()
+			.find(".ui5-link-root")
+			.should($root => {
+				const clientHeight = $root[0].clientHeight;
+				expect(clientHeight).to.be.greaterThan(16);
+			});
+
+		cy.get("#non-wrapping-link")
+			.shadow()
+			.find(".ui5-link-root")
+			.should($root => {
+				const clientHeight = $root[0].clientHeight;
+				expect(clientHeight).to.be.eq(16);
+			});
+	});
+
+	it("clicking the link works", () => {
+		cy.mount(<Link href="#testClick">Click me</Link>);
+
+		cy.url()
+			.should("not.include", "#testClick");
+
+		cy.get("[ui5-link]")
+			.realClick();
+
+		cy.url()
+			.should("include", "#testClick");
+	});
+
+	it("should prevent clicking on disabled link", () => {
+		cy.mount(<Link href="#testDisabled" disabled>Click me</Link>);
+
+		cy.url()
+			.should("not.include", "#testDisabled");
+
+		cy.get("[ui5-link]")
+			.realClick();
+
+		cy.url().should("not.include", "#testDisabled");
+	});
+
+	it("disabled link should not be enabled", () => {
+		cy.mount(<Link disabled>Click me</Link>);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("have.attr", "aria-disabled", "true");
+	});
+
+	it("tests prevent default", () => {
+		cy.mount(<Link href="#testPreventDefault">Click me</Link>);
+
+		cy.url()
+			.should("not.include", "#testPreventDefault");
+
+		cy.get("[ui5-link]")
+			.then($link => {
+				$link.get(0).addEventListener("click", event => {
+					event.preventDefault();
+				});
+			});
+
+		cy.get("[ui5-link]")
+			.realClick();
+
+		cy.url()
+			.should("not.include", "#testPreventDefault");
+	});
+
+	it("link renders aria-expanded attribute", () => {
+		cy.mount(<Link href="#">Click me</Link>);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.as("innerLink");
+
+		cy.get<Link>("[ui5-link]")
+			.then($link => {
+				$link.get(0).accessibilityAttributes = {
+					"expanded": true,
+				};
+			});
+
+		cy.get("@innerLink")
+			.should("have.attr", "aria-expanded", "true");
+
+		cy.get<Link>("[ui5-link]")
+			.then($link => {
+				$link.get(0).accessibilityAttributes = {
+					"expanded": false,
+				};
+			});
+
+		cy.get("@innerLink")
+			.should("have.attr", "aria-expanded", "false");
+	});
+
+	it("link renders proper aria-haspopup attribute", () => {
+		cy.mount(<Link>Click me</Link>);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.as("innerLink");
+
+		cy.get<Link>("[ui5-link]")
+			.then($link => {
+				$link.get(0).accessibilityAttributes = {
+					"hasPopup": "dialog",
+				};
+			});
+
+		cy.get("@innerLink")
+			.should("have.attr", "aria-haspopup", "dialog");
+	});
+
+	it("setting accessible-name applied on the host element is reflected on the anchor tag", () => {
+		cy.mount(<Link accessibleName="more info" tooltip="my tooltip">Click me</Link>);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("have.attr", "aria-label", "more info");
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("have.attr", "title", "my tooltip");
+	});
+
+	it("passes special keys pressed while item clicked", () => {
+		cy.mount(<Link>Link</Link>);
+
+		cy.get("[ui5-link]")
+			.then($link => {
+				$link[0].addEventListener("click", cy.stub().as("clickHandler"));
+			});
+
+		// CTRL Key
+		cy.get("[ui5-link]")
+			.realClick({ ctrlKey: true });
+
+		cy.get("@clickHandler")
+			.should("be.calledWithMatch", { detail: { ctrlKey: true } });
+
+		// META Key
+		cy.get("[ui5-link]")
+			.realClick({ metaKey: true });
+
+		cy.get("@clickHandler")
+			.should("be.calledWithMatch", { detail: { metaKey: true } });
+
+		// ALT Key
+		cy.get("[ui5-link]")
+			.realClick({ altKey: true });
+
+		cy.get("@clickHandler")
+			.should("be.calledWithMatch", { detail: { altKey: true } });
+
+		// SHIFT Key
+		cy.get("[ui5-link]").realClick({ shiftKey: true });
+
+		cy.get("@clickHandler")
+			.should("be.calledWithMatch", { detail: { shiftKey: true } });
+	});
+
+	it("links have icons", () => {
+		cy.mount(
+			<>
+				<Link id="linkWithIcon" icon="employee">View employee profile</Link>
+				<Link id="linkWithEndIcon" endIcon="cloud">Weather today</Link>
+			</>
+		);
+		cy.get("#linkWithIcon")
+			.shadow()
+			.find("[ui5-icon]")
+			.should("exist");
+
+		cy.get("#linkWithEndIcon")
+			.shadow()
+			.find("[ui5-icon]")
+			.should("exist");
+	});
+});

package/cypress/specs/List.cy.tsx

@@ -0,0 +1,309 @@
+import type UI5Element from "@ui5/webcomponents-base";
+import List from "../../src/List.js";
+import ListItemStandard from "../../src/ListItemStandard.js";
+
+describe("List Tests", () => {
+	it("tests 'loadMore' event fired upon infinite scroll", () => {
+		cy.mount(
+			<List style="height: 300px;" growing="Scroll">
+				<ListItemStandard>Laptop Lenovo</ListItemStandard>
+				<ListItemStandard>IPhone 3</ListItemStandard>
+				<ListItemStandard>HP Monitor 24</ListItemStandard>
+				<ListItemStandard>Audio cabel</ListItemStandard>
+				<ListItemStandard>DVD set</ListItemStandard>
+				<ListItemStandard>HP Monitor 24</ListItemStandard>
+				<ListItemStandard>Audio cabel</ListItemStandard>
+				<ListItemStandard id="lastItem">Last Item</ListItemStandard>
+			</List>);
+
+		cy.get("[ui5-list]")
+			.as("list");
+
+		cy.get<List>("@list")
+			.then(list => {
+				list.get(0)?.addEventListener("ui5-load-more", cy.stub().as("loadMore"));
+			})
+			.shadow()
+			.find(".ui5-list-scroll-container")
+			.as("scrollContainer")
+			.scrollTo("bottom", { duration: 100 });
+
+		cy.get("@loadMore")
+			.should("have.been.calledOnce");
+	});
+
+	it("Arrow down and up navigation between last item and growing button", () => {
+		cy.mount(
+			<List growing="Button">
+				<ListItemStandard>Laptop Lenovo</ListItemStandard>
+				<ListItemStandard>IPhone 3</ListItemStandard>
+				<ListItemStandard>HP Monitor 24</ListItemStandard>
+			</List>
+		);
+
+		cy.get("[ui5-list]")
+			.as("list");
+
+		// Click the last item to set focus
+		cy.get("@list")
+			.find("ui5-li")
+			.last()
+			.click();
+
+		// Verify the last item is focused
+		cy.get("@list")
+			.find("ui5-li")
+			.last()
+			.should("be.focused");
+
+		// Press arrow down once to move focus to the growing button
+		cy.realPress("ArrowDown");
+
+		// Verify the growing button is focused
+		cy.get("@list")
+			.shadow()
+			.find("[id$='growing-btn']")
+			.should("be.focused");
+
+		// Arrow up once to move focus back to the last item
+		cy.realPress("ArrowUp");
+
+		// Verify the last item is focused
+		cy.get("@list")
+			.find("ui5-li")
+			.last()
+			.should("be.focused");
+	});
+
+	it("Home key on growing button moves focus to first item", () => {
+		cy.mount(
+			<List growing="Button">
+				<ListItemStandard>Laptop Lenovo</ListItemStandard>
+				<ListItemStandard>IPhone 3</ListItemStandard>
+				<ListItemStandard>HP Monitor 24</ListItemStandard>
+			</List>
+		);
+
+		cy.get("[ui5-list]")
+			.as("list");
+
+		// Click the growing button to set focus
+		cy.get("@list")
+			.shadow()
+			.find("[id$='growing-btn']")
+			.click();
+
+		// Wait for the growing button to be focused
+		cy.get("@list")
+			.shadow()
+			.find("[id$='growing-btn']")
+			.should("be.focused");
+
+		// Press Home key to move focus to the first item
+		cy.realPress("Home");
+
+		// Verify the first item is focused
+		cy.get("@list")
+			.find("ui5-li")
+			.first()
+			.should("be.focused");
+	});
+
+	it("End key navigation moves focus from first item to last item and then to growing button", () => {
+		cy.mount(
+			<List growing="Button">
+				<ListItemStandard>Laptop Lenovo</ListItemStandard>
+				<ListItemStandard>IPhone 3</ListItemStandard>
+				<ListItemStandard>HP Monitor 24</ListItemStandard>
+			</List>
+		);
+
+		cy.get("[ui5-list]")
+			.as("list");
+
+		// Click the first item to set focus
+		cy.get("@list")
+			.find("ui5-li")
+			.first()
+			.click();
+
+		// Wait for the first item to be focused
+		cy.get("@list")
+			.find("ui5-li")
+			.first()
+			.should("be.focused");
+
+		// Press End key to move focus to the last item
+		cy.realPress("End");
+
+		// Verify the last item is focused
+		cy.get("@list")
+			.find("ui5-li")
+			.last()
+			.should("be.focused");
+
+		// Press End key again to move focus to the growing button
+		cy.realPress("End");
+
+		// Verify the growing button is focused
+		cy.get("@list")
+			.shadow()
+			.find("[id$='growing-btn']")
+			.should("be.focused");
+	});
+});
+
+describe("List - Accessibility", () => {
+	it("tests active state announcement", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard type="Active" id="active">Laptop Lenovo</ListItemStandard>
+				<ListItemStandard type="Inactive" id="inactive">Laptop Lenovo</ListItemStandard>
+			</List>
+		);
+
+		// assert
+		cy.get("#active").invoke("prop", "_id").then(_id => {
+			cy.get("#active")
+				.shadow()
+				.find(`#${_id}-invisibleText`)
+				.should("have.text", "Is Active");
+		});
+
+		cy.get("#inactive").invoke("prop", "_id").then(_id => {
+			cy.get("#inactive")
+				.shadow()
+				.find(`#${_id}-invisibleText`)
+				.should("not.have.text", "Is Active");
+		});
+	});
+});
+
+describe("List - Wrapping Behavior", () => {
+	it("renders list items with wrapping functionality", () => {
+		const longText = "This is a very long text that should demonstrate the wrapping functionality of ListItemStandard components; This is a very long text that should demonstrate the wrapping functionality of ListItemStandard components; This is a very long text that should demonstrate the wrapping functionality of ListItemStandard components; This is a very long text that should demonstrate the wrapping functionality of ListItemStandard components; This is a very long text that should demonstrate the wrapping functionality of ListItemStandard components";
+		const longDescription = "This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well; This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well; This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well; This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well; This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well; This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well";
+		
+		cy.mount(
+			<List>
+				<ListItemStandard id="wrapping-item" wrappingType="Normal" text={longText} description={longDescription}></ListItemStandard>
+			</List>
+		);
+
+		// Check wrapping attributes are set correctly
+		cy.get("#wrapping-item")
+			.should("have.attr", "wrapping-type", "Normal");
+		
+		// Check that ExpandableText components are present in the wrapping item
+		cy.get("#wrapping-item")
+			.shadow()
+			.find("ui5-expandable-text")
+			.should("exist")
+			.and("have.length", 2);
+	});
+
+	it("uses maxCharacters of 300 on desktop viewport for wrapping list items", () => {
+		const longText = "This is a very long text that exceeds 100 characters but is less than 300 characters. This sentence is just to add more text to ensure we pass the 100 character threshold. And now we're adding even more text to be extra certain that we have enough content to demonstrate the behavior properly. And now we're adding even more text to be extra certain that we have enough content to demonstrate the behavior properly. And now we're adding even more text to be extra certain that we have enough content to demonstrate the behavior properly.";
+		
+		cy.mount(
+			<List>
+				<ListItemStandard id="wrapping-item" wrappingType="Normal" text={longText}></ListItemStandard>
+			</List>
+		);
+
+		// Check that ExpandableText is created with maxCharacters prop of 300
+		cy.get("#wrapping-item")
+			.shadow()
+			.find("ui5-expandable-text")
+			.first()
+			.invoke('prop', 'maxCharacters')
+			.should('eq', 300);
+	});
+
+	it("should render different nodes based on wrappingType prop", () => {
+		const longText = "This is a very long text that should be wrapped when the wrapping prop is enabled, and truncated when it's disabled. This is a very long text that should be wrapped when the wrapping prop is enabled, and truncated when it's disabled. This is a very long text that should be wrapped when the wrapping prop is enabled, and truncated when it's disabled. This is a very long text that should be wrapped when the wrapping prop is enabled, and truncated when it's disabled. This is a very long text that should be wrapped when the wrapping prop is enabled, and truncated when it's disabled. And now we're adding even more text to be extra certain that we have enough content to demonstrate the behavior properly.";
+		
+		// First render with wrapping enabled
+		cy.mount(
+			<List>
+				<ListItemStandard id="wrapping-item" wrappingType="Normal" text={longText}></ListItemStandard>
+			</List>
+		);
+
+		// Check that wrapping-type attribute is set to Normal
+		cy.get("#wrapping-item")
+			.should("have.attr", "wrapping-type", "Normal");
+
+		// Should have expandable text component when wrapping is enabled
+		cy.get("#wrapping-item")
+			.shadow()
+			.find("ui5-expandable-text")
+			.should("exist");
+
+		// Set wrappingType to None
+		cy.get("#wrapping-item")
+			.then($el => {
+				$el[0].setAttribute("wrapping-type", "None");
+			});
+
+		// Check that wrapping-type attribute is set to None
+		cy.get("#wrapping-item")
+			.should("have.attr", "wrapping-type", "None");
+
+		// Should not have expandable text component when wrapping is disabled
+		cy.get("#wrapping-item")
+			.shadow()
+			.find("ui5-expandable-text")
+			.should("not.exist");
+	});
+});
+
+describe("List - getFocusDomRef Method", () => {
+	it("should return undefined when the list is empty", () => {
+		cy.mount(<List></List>);
+
+		cy.get<List>("[ui5-list]")
+			.then(($el) => {
+				expect($el[0].getFocusDomRef()).to.be.undefined;
+			});
+	});
+
+	it("should return first item if no item was focused before", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard id="item1">Item 1</ListItemStandard>
+				<ListItemStandard>Item 2</ListItemStandard>
+				<ListItemStandard>Item 3</ListItemStandard>
+			</List>
+		);
+
+		cy.get<UI5Element>("[ui5-list], #item1")
+			.then(($el) => {
+				const list = $el[0];
+				const item = $el[1];
+
+				expect(list.getFocusDomRef()).to.equal(item.getFocusDomRef());
+			});
+	});
+
+	it("should return last focused item in the list", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard>Item 1</ListItemStandard>
+				<ListItemStandard id="item2">Item 2</ListItemStandard>
+				<ListItemStandard>Item 3</ListItemStandard>
+			</List>
+		);
+
+		cy.get("#item2").click();
+		cy.get("#item2").should("be.focused");
+
+		cy.get<UI5Element>("[ui5-list], #item2")
+			.then(($el) => {
+				const list = $el[0];
+				const item = $el[1];
+
+				expect(list.getFocusDomRef()).to.equal(item.getFocusDomRef());
+			});
+	});
+});

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

@@ -0,0 +1,31 @@
+import List from "../../src/List.js";
+import ListItemStandard from "../../src/ListItemStandard.js";
+
+describe("List Mobile Tests", () => {
+    before(() => {
+        cy.ui5SimulateDevice("phone");
+    });
+
+    it("adjusts maxCharacters based on viewport size for wrapping list items", () => {
+        const longText = "This is a very long text that exceeds 100 characters but is less than 300 characters. This sentence is just to add more text to ensure we pass the 100 character threshold. And now we're adding even more text to be extra certain.";
+
+        cy.mount(
+            <List>
+                <ListItemStandard id="wrapping-item" wrappingType="Normal" text={longText}></ListItemStandard>
+            </List>
+        );
+
+        // Get the list item and check its media range
+        cy.get("#wrapping-item")
+            .invoke('prop', 'mediaRange')
+            .should('eq', 'S');
+
+        // Check that ExpandableText is created with maxCharacters prop of 100
+        cy.get("#wrapping-item")
+            .shadow()
+            .find("ui5-expandable-text")
+            .first()
+            .invoke('prop', 'maxCharacters')
+            .should('eq', 100);
+    });
+});