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

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(

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/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");

package/cypress/specs/Tag.cy.tsx

@@ -95,4 +95,26 @@ describe("Tag", () => {
 			cy.get("#tagWithWrappingNone").shadow().find(".ui5-tag-root").should("have.css", "white-space", "nowrap");
 		});
 	});
+
+	describe("Events", () => {
+		it("tests interactive tag click event", () => {
+			cy.mount(
+				<Tag interactive>Tag</Tag>
+			);
+
+			cy.get("[ui5-tag]")
+				.as("tag");
+
+			cy.get("@tag")
+				.then(tag => {
+					tag.get(0).addEventListener("click", cy.stub().as("clicked"));
+				});
+
+			cy.get("@tag")
+				.realClick();
+
+			cy.get("@clicked")
+				.should("have.been.calledOnce");
+		});
+	});
 });

package/cypress/specs/base/AccessibilityTextsHelper.cy.tsx

@@ -242,6 +242,147 @@ describe("AccessibilityTextsHelper", () => {
 			.should("not.have.attr", "aria-label");
 	});
 
+	it("Input accessibleDescriptionRef Tests", () => {
+		cy.mount(
+			<>
+				<Label id="lblDesc1">FirstDesc</Label>
+				<Label id="lblDesc2">SecondDesc</Label>
+				<Label id="lblDesc3">ThirdDesc</Label>
+				<Input id="inputDescRef" accessibleDescriptionRef="lblDesc1 lblDesc3"></Input>
+			</>
+		);
+
+		// assert
+		cy.get("#inputDescRef")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "FirstDesc ThirdDesc");
+
+		// act - update text of referenced label
+		cy.get("#lblDesc1")
+			.then($el => {
+				$el.get(0).innerHTML = "First Label Desc";
+			});
+
+		// assert
+		cy.get("#inputDescRef")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "First Label Desc ThirdDesc");
+
+		// act - update accessible-description-ref
+		cy.get("#inputDescRef")
+			.invoke("attr", "accessible-description-ref", "lblDesc2");
+
+		// assert
+		cy.get("#inputDescRef")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "SecondDesc");
+
+		// act - update accessible-description-ref
+		cy.get("#inputDescRef")
+			.invoke("attr", "accessible-description-ref", "lblDesc3");
+
+		// assert
+		cy.get("#inputDescRef")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "ThirdDesc");
+
+		// act - remove accessible-description-ref
+		cy.get("#inputDescRef")
+			.invoke("removeAttr", "accessible-description-ref");
+
+		// assert
+		cy.get("#inputDescRef")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("not.have.text", "");
+	});
+
+	it("Input accessibleDescription Tests", () => {
+		cy.mount(
+			<>
+				<Input id="inputDesc" accessibleDescription="Some description added by accessibleDescription"></Input>
+			</>
+		);
+		// assert
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "Some description added by accessibleDescription");
+
+		// act - update accessible-description
+		cy.get("#inputDesc")
+			.invoke("attr", "accessible-description", "Some description added by accessibleDescription");
+
+		// assert
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "Some description added by accessibleDescription");
+
+		// act - remove accessible-description
+		cy.get("#inputDesc")
+			.invoke("removeAttr", "accessible-description");
+
+		// assert
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("not.have.text", "");
+	});
+
+	// both
+	it("Input accessibleDescriptionRef and accessibleDescription Tests", () => {
+		cy.mount(
+			<>
+				<Label id="lblDesc1">FirstDesc</Label>
+				<Label id="lblDesc2">SecondDesc</Label>
+				<Input id="inputDesc" accessibleDescriptionRef="lblDesc1" accessibleDescription="Some description added by accessibleDescription"></Input>
+			</>
+		);
+
+		// assert - accessibleDescription is used
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "FirstDesc");
+
+		// act - update text of referenced label
+		cy.get("#lblDesc1")
+			.then($el => {
+				$el.get(0).innerHTML = "First Label Desc";
+			});
+
+		// assert - accessibleDescriptionRef is used
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "First Label Desc");
+
+		// act - remove accessible-description-ref
+		cy.get("#inputDesc")
+			.invoke("removeAttr", "accessible-description-ref");
+
+		// assert - accessibleDescription is used
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "Some description added by accessibleDescription");
+
+		// act - remove accessible-description
+		cy.get("#inputDesc")
+			.invoke("removeAttr", "accessible-description");
+
+		// assert - accessibleDescriptionRef is used
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("not.have.text", "");
+	});
+
 	it("Tests generic html elements with for attribute", () => {
 		cy.mount(
 			<>