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

package/cypress/specs/RatingIndicator.cy.tsx

@@ -0,0 +1,279 @@
+import RatingIndicator from "../../src/RatingIndicator.js";
+import { RATING_INDICATOR_ARIA_DESCRIPTION } from "../../src/generated/i18n/i18n-defaults.js";
+
+describe("RatingIndicator", () => {
+	describe("Half Icon appearance", () => {
+		it("Half icon should be filled when rating indicator is disabled", () => {
+			const attributeValue = "favorite";
+
+			cy.mount(<RatingIndicator value={2.5} disabled={true}></RatingIndicator>);
+
+			cy.get("[ui5-rating-indicator]")
+				.shadow()
+				.find(".ui5-rating-indicator-item-half [ui5-icon]")
+				.should("have.attr", "name", attributeValue);
+		});
+
+		it("Half icon should be filled when rating indicator is readonly", () => {
+			const attributeValue = "favorite";
+
+			cy.mount(<RatingIndicator value={2.5} readonly={true}></RatingIndicator>);
+
+			cy.get("[ui5-rating-indicator]")
+				.shadow()
+				.find(".ui5-rating-indicator-item-half [ui5-icon]")
+				.should("have.attr", "name", attributeValue);
+		});
+
+		it("Half icon should be border only when rating indicator is regular", () => {
+			const attributeValue = "unfavorite";
+
+			cy.mount(<RatingIndicator value={2.5}></RatingIndicator>);
+
+			cy.get("[ui5-rating-indicator]")
+				.shadow()
+				.find(".ui5-rating-indicator-item-half [ui5-icon]")
+				.should("have.attr", "name", attributeValue);
+		});
+	});
+
+	describe("RatingIndicator Sizes", () => {
+		it("should apply correct size and spacing for size 'S'", () => {
+			cy.mount(<RatingIndicator size="S" value={3}></RatingIndicator>);
+
+			cy.get("ui5-rating-indicator")
+				.shadow()
+				.find("li.ui5-rating-indicator-item.ui5-rating-indicator-item-sel")
+				.should($el => {
+					const height = parseFloat($el.css("height"));
+					expect(height).to.be.greaterThan(21.9);
+					expect(height).to.be.lessThan(22.1);
+				  });
+		});
+		it("should apply correct size and spacing for size 'L' readonly", () => {
+			cy.mount(<RatingIndicator size="L" value={3.5} readonly={true}></RatingIndicator>);
+
+			cy.get("ui5-rating-indicator")
+				.shadow()
+				.find("li.ui5-rating-indicator-item.ui5-rating-indicator-item-sel")
+				.should($el => {
+					const height = parseFloat($el.css("height"));
+					expect(height).to.be.greaterThan(31.9);
+					expect(height).to.be.lessThan(32.1);
+				  })
+				.should("have.css", "margin-right", "4px");
+
+			cy.get("ui5-rating-indicator")
+				.shadow()
+				.find("li.ui5-rating-indicator-item.ui5-rating-indicator-item-unsel")
+				.find("ui5-icon")
+				.should($el => {
+					const height = parseFloat($el.css("height"));
+					expect(height).to.be.greaterThan(23.9);
+					expect(height).to.be.lessThan(24.1);
+				  });
+		});
+	});
+
+	describe("RatingIndicator Accessibility", () => {
+		it("should be able to tab after and before readonly element", () => {
+			cy.mount(
+				<>
+					<button>Before</button>
+					<RatingIndicator value={3} readonly={true}></RatingIndicator>
+					<button>after</button>
+				</>
+			);
+
+			cy.get("button:first").realClick();
+			cy.focused().should("contain", "Before");
+
+			// press tab
+			cy.realPress("Tab");
+			cy.realPress("Tab");
+
+			cy.focused().should("contain", "after");
+
+			// press shift + tab
+			cy.realPress(["Shift", "Tab"]);
+			cy.realPress(["Shift", "Tab"]);
+
+			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" accessibleNameRef="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/{ResponsivePopover.mobile.cy.ts → ResponsivePopover.mobile.cy.tsx}

@@ -1,7 +1,6 @@
-import { html } from "lit";
-import "../../src/ResponsivePopover.js";
-import "../../src/Button.js";
-import "../../src/Input.js";
+import ResponsivePopover from "../../src/ResponsivePopover.js";
+import Button from "../../src/Button.js";
+import Input from "../../src/Input.js";
 
 describe("ResponsivePopover mobile general interaction", () => {
 	before(() => {
@@ -9,8 +8,12 @@ describe("ResponsivePopover mobile general interaction", () => {
 	});
 
 	it("tests opening a popover from a responsive popover", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
-		<ui5-responsive-popover open opener="btnOpen"></ui5-responsive-popover>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">open me</Button>
+				<ResponsivePopover open={true} opener="btnOpen"></ResponsivePopover>
+			</>
+		);
 
 		cy.get("[ui5-responsive-popover]")
 			.shadow()
@@ -25,8 +28,12 @@ describe("Accessibility", () => {
 	});
 
 	it("tests accessible-role - Default", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
-		<ui5-responsive-popover open opener="btnOpen"></ui5-responsive-popover>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">open me</Button>
+				<ResponsivePopover open={true} opener="btnOpen"></ResponsivePopover>
+			</>
+		);
 
 		cy.get("[ui5-responsive-popover]")
 			.shadow()
@@ -44,8 +51,12 @@ describe("Accessibility", () => {
 	});
 
 	it("tests accessible-role - AlertDialog", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
-		<ui5-responsive-popover open opener="btnOpen" accessible-role="AlertDialog"></ui5-responsive-popover>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">open me</Button>
+				<ResponsivePopover open={true} opener="btnOpen" accessibleRole="AlertDialog"></ResponsivePopover>
+			</>
+		);
 
 		cy.get("[ui5-responsive-popover]")
 			.shadow()
@@ -63,8 +74,12 @@ describe("Accessibility", () => {
 	});
 
 	it("tests accessible-role - None", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
-		<ui5-responsive-popover open opener="btnOpen" accessible-role="None"></ui5-responsive-popover>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">open me</Button>
+				<ResponsivePopover open={true} opener="btnOpen" accessibleRole="None"></ResponsivePopover>
+			</>
+		);
 
 		cy.get("[ui5-responsive-popover]")
 			.shadow()
@@ -82,10 +97,14 @@ describe("Accessibility", () => {
 	});
 
 	it("tests initial focus", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
-		<ui5-responsive-popover open opener="btnOpen" initial-focus="emailInput">
-			<ui5-input id="emailInput"></ui5-input>
-		</ui5-responsive-popover>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">open me</Button>
+				<ResponsivePopover open={true} opener="btnOpen" initialFocus="emailInput">
+					<Input id="emailInput"></Input>
+				</ResponsivePopover>
+			</>
+		);
 
 		cy.get("#emailInput")
 			.should("be.focused");

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