@ui5/webcomponents 2.8.1-rc.0 → 2.9.0-rc.1

package/cypress/specs/List.cy.tsx

@@ -151,3 +151,29 @@ describe("List Tests", () => {
 			.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");
+		});
+	});
+});

package/cypress/specs/Menu.cy.tsx

@@ -569,7 +569,9 @@ describe("Menu interaction", () => {
 				.should("have.attr", "accessible-name", "Select an option from the menu");
 		});
 
-		it("Menu items - navigation in endContent", () => {
+		/* The test is valid, but currently it is not stable. It will be reviewed further and stabilized afterwards. */
+
+		it.skip("Menu items - navigation in endContent", () => {
 			cy.mount(
 				<>
 					<Button id="btnOpen">Open Menu</Button>

package/cypress/specs/MultiComboBox.cy.tsx

@@ -20,6 +20,42 @@ describe("Security", () => {
 	});
 });
 
+describe("General interaction", () => {
+	it("should be able to delete long tokens", () => {
+		cy.mount(
+			<MultiComboBox noValidation={true}>
+				<MultiComboBoxItem text="This is a token with ridicilously long long long text which should be deletable when the 'x' icon is clicked"></MultiComboBoxItem>
+			</MultiComboBox>
+		);
+
+		cy.get("[ui5-multi-combobox]")
+			.shadow()
+			.find("input")
+			.type('t');
+
+		cy.get("[ui5-multi-combobox]")
+			.shadow()
+			.find("input")
+			.realPress('Enter');
+
+		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-tokenizer]").then($tokenizer => {
+			$tokenizer[0].addEventListener("ui5-token-delete", cy.stub().as("tokenDelete"))
+		});
+
+		cy.get("[ui5-multi-combobox]")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-multi-combobox]").shadow()
+			.find("[ui5-tokenizer]")
+			.find("[ui5-token]").shadow()
+			.find("[ui5-icon]").realClick();
+
+		cy.get("@tokenDelete").should("have.been.called");
+	});
+});
+
 describe("Value State", () => {
 	it("should be able to change value states upon typing", () => {
 		cy.mount(
@@ -56,3 +92,71 @@ describe("Value State", () => {
 			.should("not.exist");
 	});
 });
+
+describe("Event firing", () => {
+	it("tests if open and close events are fired correctly", () => {
+		cy.mount(
+			<MultiComboBox>
+				<MultiComboBoxItem text="Algeria"></MultiComboBoxItem>
+				<MultiComboBoxItem text="Bulgaria"></MultiComboBoxItem>
+				<MultiComboBoxItem text="England"></MultiComboBoxItem>
+			</MultiComboBox>
+		);
+
+		cy.get("ui5-multi-combobox")
+			.as("multiComboBox");
+
+		cy.get("@multiComboBox")
+			.then($mcb => {
+				$mcb[0].addEventListener("focusin", () => {
+					$mcb[0].setAttribute("open", "true");
+				});
+			});
+
+		cy.get("@multiComboBox")
+			.then($mcb => {
+				$mcb[0].addEventListener("ui5-open", cy.stub().as("mcbOpened"));
+			});
+
+		cy.get("@multiComboBox")
+			.then($mcb => {
+				$mcb[0].addEventListener("ui5-close", cy.stub().as("mcbClosed"));
+			});
+
+		cy.get("@multiComboBox")
+			.shadow()
+			.find("input")
+			.as("input");
+
+		cy.get("@input")
+			.click();
+
+		cy.get("@multiComboBox")
+			.shadow()
+			.find("ui5-responsive-popover")
+			.as("respPopover");
+
+		cy.get("@respPopover")
+			.should("have.attr", "open");
+
+		cy.get("@mcbOpened")
+			.should("have.been.calledOnce");
+
+		cy.get("@multiComboBox")
+			.shadow()
+			.find("ui5-icon")
+			.as("icon");
+
+		cy.get("@icon")
+			.click();
+
+		cy.get("@icon")
+			.click();
+
+		cy.get("@mcbClosed")
+			.should("have.been.calledOnce");
+
+		cy.get("@mcbOpened")
+			.should("have.been.calledTwice");
+	});
+});

package/cypress/specs/MultiInput.cy.tsx

@@ -38,7 +38,10 @@ describe("MultiInput Web Component", () => {
 		cy.get("#suggestion-token")
 			.shadow()
 			.find("input")
-			.type("ad{enter}");
+			.realClick();
+
+		cy.realType("ad");
+		cy.realPress("Enter");
 
 		cy.get("ui5-multi-input")
 			.find("ui5-token")

package/cypress/specs/RatingIndicator.cy.tsx

@@ -1,4 +1,5 @@
 import RatingIndicator from "../../src/RatingIndicator.js";
+import { RATING_INDICATOR_ARIA_DESCRIPTION } from "../../src/generated/i18n/i18n-defaults.js";
 
 describe("RatingIndicator", () => {
 	describe("Half Icon appearance", () => {
@@ -99,5 +100,180 @@ describe("RatingIndicator", () => {
 
 			cy.focused().should("contain", "Before");
 		});
+
+		it("Tests ACC attrs", () => {
+			const TOOLTIP = "Rating";
+			const ARIA_LABEL = "Hello World";
+
+			cy.mount(
+				<>
+					<RatingIndicator id="rating-indicator1" accessibleName={ARIA_LABEL}></RatingIndicator>
+					<RatingIndicator id="rating-indicator-readonly" value={1} max={3} readonly></RatingIndicator>
+				</>
+			);
+
+			cy.get("#rating-indicator1").as("ri");
+
+			cy.get("@ri")
+				.shadow()
+				.find(".ui5-rating-indicator-root")
+				.should("have.attr", "aria-label", ARIA_LABEL)
+				.and("have.attr", "title", TOOLTIP)
+				.and("not.have.attr", "aria-readonly");
+
+			cy.get("#rating-indicator-readonly")
+				.shadow()
+				.find(".ui5-rating-indicator-root")
+				.should("have.attr", "aria-readonly", "true");
+
+			cy.get("@ri")
+				.shadow()
+				.find(".ui5-rating-indicator-root")
+				.should("have.attr", "aria-valuetext", "0 of 5");
+
+			cy.get("@ri")
+				.shadow()
+				.find(".ui5-rating-indicator-item")
+				.eq(2)
+				.realClick();
+
+			cy.get("@ri")
+				.shadow()
+				.find(".ui5-rating-indicator-root")
+				.should("have.attr", "aria-valuetext", "3 of 5");
+
+			cy.get("@ri")
+				.shadow()
+				.find(".ui5-rating-indicator-list")
+				.should("have.attr", "aria-hidden", "true");
+		});
+
+		it("Tests ACC attrs - tooltip property", () => {
+			const TOOLTIP = "Test";
+
+			cy.mount(<RatingIndicator id="rating-indicator-title" tooltip={TOOLTIP}></RatingIndicator>);
+
+			cy.get("#rating-indicator-title")
+				.shadow()
+				.find(".ui5-rating-indicator-root")
+				.should("have.attr", "title", TOOLTIP);
+		});
+
+		it("Tests ACC attrs - required property add aria-description", () => {
+			cy.mount(<RatingIndicator id="rating-indicator-required" required></RatingIndicator>);
+
+			cy.get("#rating-indicator-required")
+				.shadow()
+				.find(".ui5-rating-indicator-root")
+				.should("have.attr", "aria-description", RATING_INDICATOR_ARIA_DESCRIPTION.defaultText);
+		});
+
+		it("Tests ACC attrs - accessible-name-ref", () => {
+			const ACCESSIBLE_NAME_REF_TEXT = "Some ACC label";
+			cy.mount(
+				<>
+					<label id="label-acc-name-ref">{ACCESSIBLE_NAME_REF_TEXT}</label>
+					<RatingIndicator id="rating-indicator-acc-name-ref" accessible-name-ref="label-acc-name-ref"></RatingIndicator>
+				</>
+			);
+
+			cy.get("#rating-indicator-acc-name-ref")
+				.shadow()
+				.find(".ui5-rating-indicator-root")
+				.should("have.attr", "aria-label", ACCESSIBLE_NAME_REF_TEXT);
+		});
+	});
+
+	describe("Rating Indicator general interaction", () => {
+		it("Tests basic rating indicator rendering", () => {
+			cy.mount(<RatingIndicator id="rating-indicator1"></RatingIndicator>);
+
+			cy.get("#rating-indicator1")
+				.shadow()
+				.find(".ui5-rating-indicator-item")
+				.should("have.length", 5);
+		});
+
+		it("Tests max property", () => {
+			cy.mount(<RatingIndicator id="rating-indicator2" value={6} max={10}></RatingIndicator>);
+
+			cy.get("#rating-indicator2")
+				.shadow()
+				.find(".ui5-rating-indicator-item")
+				.should("have.length", 10);
+		});
+
+		it("Tests clicking on star", () => {
+			cy.mount(<RatingIndicator id="rating-indicator3" value={6} max={10}></RatingIndicator>);
+
+			cy.get("#rating-indicator3").as("ri");
+
+			cy.get("@ri")
+				.shadow()
+				.find(".ui5-rating-indicator-item")
+				.eq(2)
+				.realClick();
+
+			cy.get("@ri")
+				.should("have.attr", "value", "3");
+		});
+
+		it("Tests change event", () => {
+			cy.mount(
+				<RatingIndicator id="rating-indicator4" value={6} max={8}></RatingIndicator>
+			);
+
+			cy.get("#rating-indicator4").as("ri");
+
+			cy.get("@ri")
+				.then(ratingIndicator => {
+					ratingIndicator.get(0).addEventListener("ui5-change", cy.stub().as("changeEvent"));
+				});
+
+			cy.get("@ri")
+				.shadow()
+				.find(".ui5-rating-indicator-item")
+				.eq(2)
+				.realClick();
+
+			cy.get("@ri")
+				.should("have.attr", "value", "3");
+
+			cy.get("@ri").realPress("Enter");
+			cy.get("@ri").should("have.attr", "value", "4");
+
+			cy.get("@ri").realPress("Space");
+			cy.get("@ri").should("have.attr", "value", "5");
+
+			cy.get("@ri").realPress("ArrowUp");
+			cy.get("@ri").realPress("ArrowRight");
+			cy.get("@ri").should("have.attr", "value", "7");
+
+			cy.get("@ri").realPress("ArrowLeft");
+			cy.get("@ri").realPress("ArrowLeft");
+			cy.get("@ri").realPress("ArrowDown");
+			cy.get("@ri").realPress("ArrowDown");
+			cy.get("@ri").realPress("ArrowDown");
+			cy.get("@ri").realPress("ArrowDown");
+			cy.get("@ri").realPress("ArrowDown");
+			cy.get("@ri").should("have.attr", "value", "0");
+
+			cy.get("@ri").realPress("End");
+			cy.get("@ri").should("have.attr", "value", "8");
+
+			cy.get("@ri").realPress("Home");
+			cy.get("@ri").should("have.attr", "value", "0");
+
+			cy.get("@ri").realPress("4");
+			cy.get("@ri").should("have.attr", "value", "4");
+
+			cy.get("@ri").realPress("9");
+			cy.get("@ri").should("have.attr", "value", "8");
+
+			cy.get("@ri").realPress("Enter");
+			cy.get("@ri").should("have.attr", "value", "0");
+
+			cy.get("@changeEvent").should("have.callCount", 17);
+		});
 	});
 });

package/cypress/specs/SegmentedButton.cy.tsx

@@ -0,0 +1,215 @@
+import SegmentedButton from "../../src/SegmentedButton.js";
+import SegmentedButtonItem from "../../src/SegmentedButtonItem.js";
+
+describe("SegmentedButton general interaction tests", () => {
+	it("should have first item selected by default", () => {
+		cy.mount(
+			<SegmentedButton>
+				<SegmentedButtonItem>First</SegmentedButtonItem>
+				<SegmentedButtonItem>Second</SegmentedButtonItem>
+			</SegmentedButton>
+		);
+
+		cy.get("[ui5-segmented-button]")
+			.as("segmentedButton");
+
+		cy.get<SegmentedButton>("@segmentedButton")
+			.find("[ui5-segmented-button-item]")
+			.first()
+			.should("have.attr", "selected");
+	});
+
+	it("should select second item with enter", () => {
+		cy.mount(
+			<SegmentedButton>
+				<SegmentedButtonItem>First</SegmentedButtonItem>
+				<SegmentedButtonItem>Second</SegmentedButtonItem>
+			</SegmentedButton>
+		);
+
+		cy.get("[ui5-segmented-button]")
+			.as("segmentedButton");
+
+		cy.get<SegmentedButton>("@segmentedButton")
+			.find("[ui5-segmented-button-item]")
+			.as("items");
+
+		cy.get<SegmentedButtonItem>("@items")
+			.ui5SegmentedButtonFocusFirstItem();
+
+		cy.realPress("ArrowRight");
+
+		cy.get<SegmentedButtonItem>("@items")
+			.eq(1)
+			.as("secondItem");
+
+		cy.get<SegmentedButtonItem>("@secondItem")
+			.should("be.focused");
+
+		cy.get<SegmentedButtonItem>("@secondItem")
+			.should("not.have.attr", "selected");
+
+		cy.realPress("Enter");
+
+		cy.get<SegmentedButtonItem>("@secondItem")
+			.should("have.attr", "selected");
+	});
+
+	it("should select second item with space", () => {
+		cy.mount(
+			<SegmentedButton>
+				<SegmentedButtonItem>First</SegmentedButtonItem>
+				<SegmentedButtonItem>Second</SegmentedButtonItem>
+			</SegmentedButton>
+		);
+
+		cy.get("[ui5-segmented-button]")
+			.as("segmentedButton");
+
+		cy.get<SegmentedButton>("@segmentedButton")
+			.find("[ui5-segmented-button-item]")
+			.as("items");
+
+		cy.get<SegmentedButtonItem>("@items")
+			.ui5SegmentedButtonFocusFirstItem();
+
+		cy.realPress("ArrowRight");
+
+		cy.get<SegmentedButtonItem>("@items")
+			.eq(1)
+			.as("secondItem");
+
+		cy.get<SegmentedButtonItem>("@secondItem")
+			.should("be.focused");
+
+		cy.get<SegmentedButtonItem>("@secondItem")
+			.should("not.have.attr", "selected");
+
+		cy.realPress("Space");
+
+		cy.get<SegmentedButtonItem>("@secondItem")
+			.should("have.attr", "selected");
+	});
+
+	it("should select last item with mouse", () => {
+		cy.mount(
+			<SegmentedButton>
+				<SegmentedButtonItem>First</SegmentedButtonItem>
+				<SegmentedButtonItem>Second</SegmentedButtonItem>
+				<SegmentedButtonItem>Third</SegmentedButtonItem>
+			</SegmentedButton>
+		);
+
+		cy.get("[ui5-segmented-button]")
+			.as("segmentedButton");
+
+		cy.get<SegmentedButton>("@segmentedButton")
+			.find("[ui5-segmented-button-item]")
+			.as("items");
+
+		cy.get<SegmentedButtonItem>("@items")
+			.last()
+			.as("lastItem");
+
+		cy.get<SegmentedButtonItem>("@lastItem")
+			.ui5SegmentedButtonItemToggleSelect();
+	});
+
+	it("should be able to select multple items in multiple selection mode", () => {
+		cy.mount(
+			<SegmentedButton selectionMode="Multiple">
+				<SegmentedButtonItem selected={true}>First</SegmentedButtonItem>
+				<SegmentedButtonItem>Second</SegmentedButtonItem>
+			</SegmentedButton>
+		);
+
+		cy.get("[ui5-segmented-button]")
+			.as("segmentedButton");
+
+		cy.get<SegmentedButton>("@segmentedButton")
+			.find("[ui5-segmented-button-item]")
+			.as("items");
+
+		cy.get<SegmentedButtonItem>("@items")
+			.first()
+			.as("firstItem");
+
+		cy.get<SegmentedButtonItem>("@items")
+			.last()
+			.as("lastItem");
+
+		// Select second item
+		cy.get<SegmentedButtonItem>("@lastItem")
+			.ui5SegmentedButtonItemToggleSelect();
+
+		// First item should still be selected
+		cy.get<SegmentedButtonItem>("@firstItem")
+			.should("have.attr", "selected");
+	});
+
+	it("should be able to deselect items in multiple selection mode", () => {
+		cy.mount(
+			<SegmentedButton selectionMode="Multiple">
+				<SegmentedButtonItem selected={true}>First</SegmentedButtonItem>
+				<SegmentedButtonItem selected={true}>Second</SegmentedButtonItem>
+			</SegmentedButton>
+		);
+
+		cy.get("[ui5-segmented-button]")
+			.as("segmentedButton");
+
+		cy.get<SegmentedButton>("@segmentedButton")
+			.find("[ui5-segmented-button-item]")
+			.as("items");
+
+		cy.get<SegmentedButtonItem>("@items")
+			.first()
+			.as("firstItem");
+
+		cy.get<SegmentedButtonItem>("@items")
+			.last()
+			.as("lastItem");
+
+		const deselect = true;
+		// Deselect first item
+		cy.get<SegmentedButtonItem>("@firstItem")
+			.ui5SegmentedButtonItemToggleSelect(deselect);
+
+		// Second item is still selected
+		cy.get<SegmentedButtonItem>("@lastItem")
+			.should("have.attr", "selected");
+	});
+});
+
+describe("Accessibility", () => {
+	it("should have correct aria labels", () => {
+		cy.mount(
+			<>
+				<SegmentedButton selectionMode="Multiple">
+					<SegmentedButtonItem accessibleName="accessible text">First</SegmentedButtonItem>
+					<SegmentedButtonItem accessibleNameRef="reference">Second</SegmentedButtonItem>
+				</SegmentedButton>
+				<span id="reference">accessible ref text</span>
+			</>
+		);
+
+		cy.get("[ui5-segmented-button]")
+			.as("segmentedButton");
+
+		cy.get<SegmentedButton>("@segmentedButton")
+			.find("[ui5-segmented-button-item]")
+			.as("items");
+
+		cy.get<SegmentedButtonItem>("@items")
+			.first()
+			.shadow()
+			.find("li")
+			.should("have.attr", "aria-label", "accessible text");
+
+		cy.get<SegmentedButtonItem>("@items")
+			.last()
+			.shadow()
+			.find("li")
+			.should("have.attr", "aria-label", "accessible ref text");
+	});
+});

package/cypress/specs/Select.cy.tsx

@@ -1,6 +1,7 @@
 import Option from "../../src/Option.js";
 import OptionCustom from "../../src/OptionCustom.js";
 import Select from "../../src/Select.js";
+import download from "@ui5/webcomponents-icons/dist/download.js";
 
 describe("Select - Accessibility", () => {
 	it("tests options tooltip is set displayed", () => {
@@ -69,3 +70,20 @@ describe("Select - Popover", () => {
 			.should("have.text", "Custom message");
 	});
 });
+
+describe("Select - Properties", () => {
+	it("Icon only is setting properly the required icon", () => {
+		cy.mount(
+			<Select icon={download}>
+				<Option selected>Phone</Option>
+				<Option>Tablet</Option>
+				<Option>Desktop</Option>
+			</Select>
+		);
+
+		cy.get("[ui5-select]")
+			.shadow()
+			.find("[ui5-icon]")
+			.should("have.attr", "name", "download");
+	});
+});

package/cypress/specs/Slider.cy.tsx

@@ -0,0 +1,26 @@
+import Slider from "../../src/Slider.js";
+
+describe("General interactions", () => {
+	it("Fire change event on keyup", () => {
+		let changeCount = 0;
+		cy.mount(
+			<Slider min={0} max={20}></Slider>
+		);
+
+		cy.get("[ui5-slider]").then($slider => {
+			$slider[0].addEventListener("ui5-change", () => {
+				changeCount++;
+			});
+		});
+
+		// First 'change' event is fired when the slider is clicked
+		cy.get("[ui5-slider]").click();
+
+		// Second 'change' event is fired on keyboard interaction
+		cy.get("[ui5-slider]").realPress("ArrowRight");
+
+		cy.then(() => {
+			expect(changeCount).to.equal(2);
+		});
+	});
+});

package/cypress/specs/TabContainer.cy.tsx

@@ -27,3 +27,52 @@ describe("TabContainer general interaction", () => {
 			});
 	});
 });
+
+describe("TabContainer keyboard handling", () => {
+	it("Tests preventing of known and unknown events on tab", () => {
+		cy.mount(
+			<TabContainer id="tc">
+				<Tab text="Tab 1" movable={true}>tab 1</Tab>
+			</TabContainer>
+		);
+
+		cy.get("#tc")
+			.find<Tab>("[text='Tab 1']")
+			.then(tab => {
+				return tab[0].getDomRefInStrip();
+			})
+			.as("tabInStrip")
+			.should("be.visible");
+
+		[
+			{
+				event: new KeyboardEvent("keydown", {
+					cancelable: true, bubbles: true, key: "R", ctrlKey: true,
+				}),
+				expectedDefaultPrevented: false,
+			},
+			{
+				event: new KeyboardEvent("keydown", {
+					cancelable: true, bubbles: true, key: "ArrowLeft", ctrlKey: true,
+				}),
+				expectedDefaultPrevented: true,
+			},
+			{
+				event: new KeyboardEvent("keydown", {
+					cancelable: true, bubbles: true, key: " ", ctrlKey: false,
+				}),
+				expectedDefaultPrevented: true,
+			}
+		].forEach(({ event, expectedDefaultPrevented }) => {
+			// Act
+			cy.get<HTMLElement>("@tabInStrip")
+				.then(tabInStrip => {
+					tabInStrip[0].dispatchEvent(event);
+				});
+
+			// Assert
+			cy.wrap(event)
+				.should("have.property", "defaultPrevented", expectedDefaultPrevented);
+		});
+	});
+});

package/cypress/specs/Table.cy.tsx

@@ -780,6 +780,7 @@ describe("Table - HeaderCell", () => {
 		cy.get("@headerCell1").contains("Column A");
 		cy.get("@headerCell2").should("have.attr", "aria-sort", "ascending");
 		cy.get("@headerCell2").find("ui5-table-header-cell-action-ai").as("actionB");
+		cy.get("@actionB").should("not.have.attr", "_popin");
 		cy.get("@actionB").shadow().find("ui5-button").as("actionBbutton");
 		cy.get("@actionBbutton").should("have.attr", "icon", "ai");
 		cy.get("@actionBbutton").should("have.attr", "tooltip", "Generated by AI");
@@ -805,6 +806,7 @@ describe("Table - HeaderCell", () => {
 		cy.get("@row1").find("ui5-table-cell[_popin]").as("row1popins");
 		cy.get("@row1popins").first().as("row1popinB");
 		cy.get("@row1popinB").shadow().find("ui5-table-header-cell-action-ai").as("row1popinBaction");
+		cy.get("@row1popinBaction").should("have.attr", "_popin");
 		cy.get("@row1popinBaction").shadow().find("ui5-button").as("row1popinBbutton");
 		cy.get("@row1popinBbutton").should("have.attr", "icon", "ai");
 		cy.get("@row1popinBbutton").should("have.attr", "design", "Transparent");