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

package/cypress/specs/Popover.cy.tsx

@@ -62,6 +62,59 @@ describe("Popover opener", () => {
 		});
 		cy.get("#btnClosePopover").realClick();
 	});
+
+	it("tests calling _showOutsideViewport method", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open</Button>
+				<Popover id="popover" opener="btnOpen">
+					<Button id="btnClosePopover">Close</Button>
+				</Popover>
+			</>
+		);
+
+		cy.get("#popover").then(el => {
+			cy.spy<Popover>((el.get(0) as Popover), "_showOutsideViewport").as("showOutsideViewport");
+		});
+
+		// act
+		cy.get("#popover").invoke("prop", "open", "true");
+
+		cy.get("@showOutsideViewport")
+			.should("have.been.calledOnce");
+	});
+
+	it("tests calling _showOutsideViewport method, when popover is created dynamically", () => {
+		cy.mount(
+			<>
+				<div id="container"></div>
+				<Button id="btnOpen">Open</Button>
+			</>
+		);
+
+		cy.get("#container").then(container => {
+			const popover = document.createElement("ui5-popover");
+
+			cy.spy<Popover>((popover as Popover), "_showOutsideViewport").as("showOutsideViewport");
+
+			popover.id = "popover";
+			popover.headerText = "Popover Header";
+			popover.opener = "btnOpen";
+			popover.open = true;
+
+			const content = document.createElement("div");
+			content.innerHTML = "<button id='popoverBtn'>button</button>";
+			popover.appendChild(content);
+
+			container.get(0).appendChild(popover);
+		});
+
+		cy.get("#popover")
+			.should("be.visible");
+
+		cy.get("@showOutsideViewport")
+			.should("have.been.calledOnce");
+	});
 });
 
 describe("Popover interaction", () => {

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/Tree.cy.tsx

@@ -28,3 +28,21 @@ describe("Tree Tests", () => {
 			.and("have.attr", "accessible-description-ref", "lblDesc2");
 	});
 });
+
+describe("Tree Props", () => {
+	it("noDataText is properly rendered", () => {
+		cy.mount(
+			<>
+				<Tree noDataText="No data"></Tree>
+			</>
+		);
+
+		cy.get("[ui5-tree]")
+			.shadow()
+			.find("[ui5-tree-list]")
+			.shadow()
+			.find("[ui5-busy-indicator]")
+			.find(".ui5-list-nodata")
+			.should("exist")
+	});
+});