@ui5/webcomponents 2.11.0-rc.2 → 2.11.0-rc.4

package/cypress/specs/RatingIndicator.cy.tsx

@@ -1,279 +0,0 @@
-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.tsx

@@ -1,112 +0,0 @@
-import ResponsivePopover from "../../src/ResponsivePopover.js";
-import Button from "../../src/Button.js";
-import Input from "../../src/Input.js";
-
-describe("ResponsivePopover mobile general interaction", () => {
-	before(() => {
-		cy.ui5SimulateDevice();
-	});
-
-	it("tests opening a popover from a responsive popover", () => {
-		cy.mount(
-			<>
-				<Button id="btnOpen">open me</Button>
-				<ResponsivePopover open={true} opener="btnOpen"></ResponsivePopover>
-			</>
-		);
-
-		cy.get("[ui5-responsive-popover]")
-			.shadow()
-			.find("[ui5-dialog]")
-			.should("be.visible");
-	});
-});
-
-describe("Accessibility", () => {
-	beforeEach(() => {
-		cy.ui5SimulateDevice();
-	});
-
-	it("tests accessible-role - Default", () => {
-		cy.mount(
-			<>
-				<Button id="btnOpen">open me</Button>
-				<ResponsivePopover open={true} opener="btnOpen"></ResponsivePopover>
-			</>
-		);
-
-		cy.get("[ui5-responsive-popover]")
-			.shadow()
-			.find("[ui5-dialog]")
-			.shadow()
-			.find(".ui5-popup-root")
-			.should("have.attr", "role", "dialog");
-
-		cy.get("[ui5-responsive-popover]")
-			.shadow()
-			.find("[ui5-dialog]")
-			.shadow()
-			.find(".ui5-popup-root")
-			.should("have.attr", "aria-modal", "true");
-	});
-
-	it("tests accessible-role - AlertDialog", () => {
-		cy.mount(
-			<>
-				<Button id="btnOpen">open me</Button>
-				<ResponsivePopover open={true} opener="btnOpen" accessibleRole="AlertDialog"></ResponsivePopover>
-			</>
-		);
-
-		cy.get("[ui5-responsive-popover]")
-			.shadow()
-			.find("[ui5-dialog]")
-			.shadow()
-			.find(".ui5-popup-root")
-			.should("have.attr", "role", "alertdialog");
-
-		cy.get("[ui5-responsive-popover]")
-			.shadow()
-			.find("[ui5-dialog]")
-			.shadow()
-			.find(".ui5-popup-root")
-			.should("have.attr", "aria-modal", "true");
-	});
-
-	it("tests accessible-role - None", () => {
-		cy.mount(
-			<>
-				<Button id="btnOpen">open me</Button>
-				<ResponsivePopover open={true} opener="btnOpen" accessibleRole="None"></ResponsivePopover>
-			</>
-		);
-
-		cy.get("[ui5-responsive-popover]")
-			.shadow()
-			.find("[ui5-dialog]")
-			.shadow()
-			.find(".ui5-popup-root")
-			.should("not.have.attr", "role", "alertdialog");
-
-		cy.get("[ui5-responsive-popover]")
-			.shadow()
-			.find("[ui5-dialog]")
-			.shadow()
-			.find(".ui5-popup-root")
-			.should("not.have.attr", "aria-modal", "true");
-	});
-
-	it("tests initial focus", () => {
-		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

@@ -1,215 +0,0 @@
-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");
-	});
-});