@ui5/webcomponents 2.10.0-rc.0 → 2.10.0-rc.2

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

@@ -0,0 +1,67 @@
+import Button from "../../src/Button.js";
+import Carousel from "../../src/Carousel.js";
+
+describe("Carousel general interaction", () => {
+	before(() => {
+		cy.ui5SimulateDevice("phone");
+	});
+
+	it("Buttons (navigation arrows) are rendered in the content without hovering", () => {
+		cy.mount(
+			<Carousel id="carousel2">
+				<Button>Button 1 </Button>
+				<Button>Button 2 </Button>
+				<Button>Button 3 </Button>
+				<Button>Button 4 </Button>
+				<Button>Button 5 </Button>
+				<Button>Button 6 </Button>
+				<Button>Button 7 </Button>
+				<Button>Button 8 </Button>
+				<Button>Button 9 </Button>
+			</Carousel>);
+
+		cy.get("#carousel2")
+			.shadow()
+			.find(".ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)")
+			.should("have.length", 1);
+	});
+
+	it("Buttons (navigation arrows) are rendered in the navigation without hovering (arrows-placement)", () => {
+		cy.mount(
+			<Carousel id="carousel3" arrowsPlacement="Navigation">
+				<Button>Button 1</Button>
+				<Button>Button 2</Button>
+				<Button>Button 3</Button>
+			</Carousel>);
+
+		cy.get("#carousel3")
+			.shadow()
+			.find(".ui5-carousel-navigation-button[data-ui5-arrow-forward]")
+			.realClick();
+
+		cy.get("#carousel3")
+			.shadow()
+			.find(".ui5-carousel-navigation-wrapper .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)")
+			.should("have.length", 2);
+	});
+
+	it("Arrows (navigation arrows) and Dots (page indicator) not displayed in case of single page", () => {
+		cy.mount(
+			<Carousel id="carousel6">
+				<Button>Button 1</Button>
+			</Carousel>);
+
+		cy.get("#carousel6")
+			.shadow()
+			.find(".ui5-carousel-navigation-wrapper")
+			.should("not.exist");
+
+		cy.get("#carousel6")
+			.shadow()
+			.find(".ui5-carousel-navigation-arrows")
+			.should("not.exist");
+
+		cy.get("#carousel6")
+			.should("have.prop", "pagesCount", 1);
+	});
+});

package/cypress/specs/Form.cy.tsx

@@ -199,6 +199,27 @@ describe("General API", () => {
 			.and("have.prop", "emptySpanXl", 1);
 	});
 
+	it("tests calculated state of Form item-spacing='Large'", () => {
+		cy.mount(<Form id="addressForm" item-spacing="Large">
+			<FormGroup id="formGroup">
+				<FormItem id="formItem">
+					<Label slot="labelContent">Name:</Label>
+					<Text>Red Point Stores</Text>
+				</FormItem>
+
+				<FormItem>
+					<Label slot="labelContent">Country:</Label>
+					<Text>Germany</Text>
+				</FormItem>
+			</FormGroup>
+		</Form>);
+
+		cy.get("#formGroup")
+			.should("have.prop", "itemSpacing", "Large");
+		cy.get("#formItem")
+			.should("have.prop", "itemSpacing", "Large");
+	});
+
 	it("tests calculated state of two FormGroups in layout='S1 M2 L3 XL4'", () => {
 		cy.mount(<Form headerText="WebC :: Supplier 2gr (S1 M2 L3 XL4)" layout="S1 M2 L3 XL4">
 			<FormGroup id="testFormGroup4" headerText="Address">

package/cypress/specs/Input.cy.tsx

@@ -384,13 +384,13 @@ describe("Input general interaction", () => {
 	it("tests selection-change with custom items", () => {
 		cy.mount(
 			<Input id="myInput2" showSuggestions class="input3auto">
-			  <SuggestionItem text="Cozy" />
-			  <SuggestionItem text="Compact" />
-			  <SuggestionItem text="Condensed" />
-			  <SuggestionItem text="Compact" />
-			  <SuggestionItem text="Condensed" />
+				<SuggestionItem text="Cozy" />
+				<SuggestionItem text="Compact" />
+				<SuggestionItem text="Condensed" />
+				<SuggestionItem text="Compact" />
+				<SuggestionItem text="Condensed" />
 			</Input>
-		  );
+		);
 
 		cy.get("ui5-input")
 			.as("input");
@@ -435,11 +435,11 @@ describe("Input general interaction", () => {
 	it("Should fire 'input' event when the value is cleared with ESC", () => {
 		cy.mount(
 			<Input></Input>
-		  );
+		);
 
-		  cy.get("[ui5-input]").then($input => {
-			  $input[0].addEventListener("ui5-input", cy.spy().as("inputEvent"));
-		  });
+		cy.get("[ui5-input]").then($input => {
+			$input[0].addEventListener("ui5-input", cy.spy().as("inputEvent"));
+		});
 
 		cy.get("[ui5-input]").realClick();
 		cy.get("[ui5-input]").realPress("a");
@@ -499,13 +499,13 @@ describe("Input arrow navigation", () => {
 	it("Should navigate up and down through the suggestions popover with arrow keys", () => {
 		cy.mount(
 			<Input id="myInput2" showSuggestions class="input3auto">
-			  <SuggestionItem text="Cozy" />
-			  <SuggestionItem text="Compact" />
-			  <SuggestionItem text="Condensed" />
-			  <SuggestionItem text="Compact" />
-			  <SuggestionItem text="Condensed" />
+				<SuggestionItem text="Cozy" />
+				<SuggestionItem text="Compact" />
+				<SuggestionItem text="Condensed" />
+				<SuggestionItem text="Compact" />
+				<SuggestionItem text="Condensed" />
 			</Input>
-		  );
+		);
 
 		cy.get("#myInput2")
 			.as("input");
@@ -551,7 +551,7 @@ describe("Input PAGEUP/PAGEDOWN navigation", () => {
 	beforeEach(() => {
 		cy.mount(
 			<Input id="myInput" showSuggestions placeholder="Search for a country ...">
-			  <SuggestionItemGroup headerText="A">
+				<SuggestionItemGroup headerText="A">
 					<SuggestionItem text="Afghanistan" />
 					<SuggestionItem text="Argentina" />
 					<SuggestionItem text="Albania" />
@@ -564,9 +564,9 @@ describe("Input PAGEUP/PAGEDOWN navigation", () => {
 					<SuggestionItem text="Azerbaijan" />
 					<SuggestionItem text="Aruba" />
 					<SuggestionItem text="Antigua and Barbuda" />
-			  </SuggestionItemGroup>
+				</SuggestionItemGroup>
 			</Input>
-		  );
+		);
 	});
 	it("Should focus the tenth item from the suggestions popover with PAGEDOWN", () => {
 		cy.get("ui5-input")
@@ -626,11 +626,11 @@ describe("Selection-change event", () => {
 	it("Selection-change event fires with null arguments when suggestion was selected but user alters input value to something else", () => {
 		cy.mount(
 			<Input id="input-selection-change" showSuggestions>
-			  <SuggestionItem text="Cozy" />
-			  <SuggestionItem text="Compact" />
-			  <SuggestionItem text="Condensed" />
+				<SuggestionItem text="Cozy" />
+				<SuggestionItem text="Compact" />
+				<SuggestionItem text="Condensed" />
 			</Input>
-		  );
+		);
 
 		cy.get("ui5-input")
 			.as("input");
@@ -676,6 +676,60 @@ describe("Selection-change event", () => {
 			expect(eventCount).to.equal(2);
 		});
 	});
+
+	it("Fires selection-change when same item is reselected after input is changed", () => {
+		cy.mount(
+			<Input id="input-selection-change" showSuggestions>
+				<SuggestionItem text="Cozy" />
+				<SuggestionItem text="Compact" />
+				<SuggestionItem text="Condensed" />
+			</Input>
+		);
+
+		cy.get("ui5-input")
+			.as("input");
+
+		cy.get("ui5-input")
+			.shadow()
+			.find("input")
+			.as("innerInput");
+
+		cy.get("@input").then($input => { $input[0].addEventListener("ui5-selection-change", cy.stub().as("inputSelectionChange")); });
+
+		cy.get("@innerInput")
+			.realClick();
+
+		cy.get("[ui5-suggestion-item")
+			.eq(0)
+			.as("suggestion-item");
+
+		cy.get("@innerInput")
+			.type("C");
+
+		cy.get("@suggestion-item")
+			.realClick();
+
+		cy.get("@inputSelectionChange").should("have.been.calledOnce");
+
+		cy.get("@innerInput")
+			.should("have.value", "Cozy");
+
+		cy.get("@innerInput")
+			.realClick();
+		cy.get("@innerInput").type("{selectall}{backspace}");
+
+		cy.get("@inputSelectionChange").should("have.been.calledTwice");
+
+		cy.get("@innerInput")
+			.type("C");
+		cy.get("@suggestion-item")
+			.realClick();
+
+		cy.get("@inputSelectionChange").should("have.been.calledThrice");
+
+		cy.get("@innerInput")
+			.should("have.value", "Cozy");
+	});
 });
 
 describe("Change event behavior when selecting the same suggestion item", () => {
@@ -684,15 +738,15 @@ describe("Change event behavior when selecting the same suggestion item", () =>
 	beforeEach(() => {
 		cy.mount(
 			<Input id="myInput" showSuggestions placeholder="Search for a country ...">
-			  <SuggestionItemGroup headerText="A">
+				<SuggestionItemGroup headerText="A">
 					<SuggestionItem text="Afghanistan" />
 					<SuggestionItem text="Argentina" />
 					<SuggestionItem text="Albania" />
 					<SuggestionItem text="Armenia" />
 					<SuggestionItem text="Algeria" />
-			  </SuggestionItemGroup>
+				</SuggestionItemGroup>
 			</Input>
-		  );
+		);
 
 		cy.get("#myInput")
 			.as("input");

package/cypress/specs/List.cy.tsx

@@ -20,7 +20,7 @@ describe("List Tests", () => {
 
 		cy.get<List>("@list")
 			.then(list => {
-				list.get(0).addEventListener("ui5-load-more", cy.stub().as("loadMore"));
+				list.get(0)?.addEventListener("ui5-load-more", cy.stub().as("loadMore"));
 			})
 			.shadow()
 			.find(".ui5-list-scroll-container")
@@ -177,3 +177,82 @@ describe("List - Accessibility", () => {
 		});
 	});
 });
+
+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");
+	});
+});

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);
+    });
+});

package/cypress/specs/Popover.cy.tsx

@@ -3,6 +3,40 @@ import Toolbar from "../../src/Toolbar.js";
 import Popover from "../../src/Popover.js";
 import Button from "../../src/Button.js";
 
+describe("Rendering", () => {
+	it("tests arrow positioning", () => {
+		cy.mount(
+			<>
+				<div id="icon1" tabindex="0" style="width: 10px; height: 10px; background:red;"></div>
+				<Popover id="popup"
+						 opener="icon1"
+						 headerText="Newsletter subscription"
+						 placement="End"
+						 verticalAlign="Top">
+					<Button id="btnClosePopover">Close</Button>
+				</Popover>
+			</>
+		);
+
+		// act
+		cy.get("#popup")
+			.invoke("prop", "open", "true");
+
+		cy.get("#popup")
+			.ui5PopoverOpened();
+
+		cy.get("#popup")
+			.shadow()
+			.find(".ui5-popover-arrow")
+			.should("be.visible");
+
+		cy.get("#popup")
+			.shadow()
+			.find(".ui5-popover-arrow")
+			.should("have.css", "transform", "matrix(1, 0, 0, 1, 0, -42)");
+	});
+});
+
 describe("Popover opener", () => {
 	it("tests 'opener' set as string of abstract element's ID ", () => {
 		cy.mount(
@@ -110,7 +144,7 @@ describe("Popover opener", () => {
 		});
 
 		cy.get("#popover")
-			.should("be.visible");
+			.ui5PopoverOpened();
 
 		cy.get("@showOutsideViewport")
 			.should("have.been.calledOnce");
@@ -129,7 +163,7 @@ describe("Popover interaction", () => {
 				</>
 			);
 
-			cy.get("#pop").should("be.visible");
+			cy.get("#pop").ui5PopoverOpened();
 
 			// act
 			cy.get("body").realClick();
@@ -148,13 +182,13 @@ describe("Popover interaction", () => {
 				</>
 			);
 
-			cy.get("#pop").should("be.visible");
+			cy.get("#pop").ui5PopoverOpened();
 
 			// act
 			cy.get("#opener").realClick();
 
 			// assert
-			cy.get("#pop").should("be.visible");
+			cy.get("#pop").ui5PopoverOpened();
 		});
 
 		it("tests clicking on the opener if both the popover and the opener are located in a shadow root", () => {
@@ -197,13 +231,13 @@ describe("Popover interaction", () => {
 			);
 
 			// assert
-			cy.get("#openerShadowRooTest").shadow().find("[ui5-popover]").should("be.visible");
+			cy.get("#openerShadowRooTest").shadow().find("[ui5-popover]").ui5PopoverOpened();
 
 			// act
 			cy.get("#openerShadowRooTest").shadow().find("button").realClick();
 
 			// assert
-			cy.get("#openerShadowRooTest").shadow().find("[ui5-popover]").should("be.visible");
+			cy.get("#openerShadowRooTest").shadow().find("[ui5-popover]").ui5PopoverOpened();
 		});
 
 		it("tests clicking outside the popover when 'mousedown' event propagation is stopped", () => {
@@ -217,7 +251,7 @@ describe("Popover interaction", () => {
 				</>
 			);
 
-			cy.get("#pop").should("be.visible");
+			cy.get("#pop").ui5PopoverOpened();
 			cy.get("#btn").then(btn => {
 				btn.get(0).addEventListener("mousedown", event => {
 					event.stopPropagation();
@@ -334,7 +368,7 @@ describe("Events", () => {
 			.invoke("prop", "open", true);
 
 		cy.get("#popoverId")
-			.should("be.visible");
+			.ui5PopoverOpened();
 	});
 
 	it("before-close", () => {
@@ -356,7 +390,7 @@ describe("Events", () => {
 			.invoke("prop", "open", true);
 
 		cy.get("#popoverId")
-			.should("be.visible");
+			.ui5PopoverOpened();
 
 		const preventDefault = (e : Event) => {
 			e.preventDefault();
@@ -370,7 +404,7 @@ describe("Events", () => {
 			.invoke("prop", "open", false);
 
 		cy.get("#popoverId")
-			.should("be.visible");
+			.ui5PopoverOpened();
 
 		cy.get("#popoverId").then($popover => {
 			$popover.get(0).removeEventListener("before-close", preventDefault);