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

package/cypress/specs/Select.cy.tsx

@@ -1,241 +0,0 @@
-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 - value handling", () => {
-	it("tests selection via Select's value", () => {
-		cy.mount(
-			<>
-				<Select value="option2">
-					<Option id="opt1" value="option1">Option 1</Option>
-					<Option id="opt2" value="option2">Option 2</Option>
-					<Option id="opt3" value="option3">Option 3</Option>
-				</Select>
-
-				<Select value="option6">
-					<Option id="opt4" value="option4">Option 4</Option>
-					<Option id="opt5" value="option5">Option 5</Option>
-					<Option id="opt6" value="option6">Option 6</Option>
-				</Select>
-			</>
-		);
-
-		cy.get("#opt2").should("have.attr", "selected");
-		cy.get("#opt6").should("have.attr", "selected");
-	});
-
-	it("tests Select's value has precedence over Option's selected", () => {
-		cy.mount(
-			<>
-				<Select value="option1">
-					<Option id="opt1" value="option1">Option 1</Option>
-					<Option id="opt2" value="option2">Option 2</Option>
-					<Option id="opt3" value="option3" selected={true}>Option 3</Option>
-				</Select>
-
-				<Select value="option6">
-					<Option id="opt4" value="option4">Option 4</Option>
-					<Option id="opt5" value="option5" selected={true}>Option 5</Option>
-					<Option id="opt6" value="option6">Option 6</Option>
-				</Select>
-			</>
-		);
-
-		// assert that Select's value is preferred over Option's selected
-		cy.get("#opt1").should("have.attr", "selected");
-		cy.get("#opt3").should("not.have.attr", "selected");
-		cy.get("#opt5").should("not.have.attr", "selected");
-		cy.get("#opt6").should("have.attr", "selected");
-	});
-
-	it("tests Select's value of an option, added with delay", () => {
-		const addOption = () => {
-			const newOption = document.createElement("ui5-option") as Option;
-			newOption.id = "opt3";
-			newOption.value = "option3";
-			newOption.textContent = "Option 3";
-			document.getElementById("sel")?.appendChild(newOption);
-		};
-
-		cy.mount(
-			<Select id="sel" value="option3">
-				<Option id="opt1" value="option1">Option 1</Option>
-				<Option id="opt2" value="option2">Option 2</Option>
-			</Select>
-		);
-
-		cy.get("#opt3").should("not.exist");
-
-		cy.wrap(addOption).invoke("call");
-
-		// assert "Option 3" is selected although added after the Select was mounted
-		cy.get("#opt3").should("have.attr", "selected");
-	});
-
-	it("tests Select's value set with a delay", () => {
-		const setValue = () => {
-			const select = document.getElementById("sel") as Select;
-			select.value = "option2";
-		};
-
-		cy.mount(
-			<Select id="sel">
-				<Option id="opt1" value="option1">Option 1</Option>
-				<Option id="opt2" value="option2">Option 2</Option>
-				<Option id="opt3" value="option3">Option 3</Option>
-			</Select>
-		);
-
-		cy.wrap(setValue).invoke("call");
-
-		// assert "Option 2" is selected after dynamic value change
-		cy.get("#opt2").should("have.attr", "selected");
-	});
-
-	it("tests Select's value of a missing option - auto-selects firsts", () => {
-		cy.mount(
-			<Select id="sel" value="option3">
-				<Option id="opt1" value="option1">Option 1</Option>
-				<Option id="opt2" value="option2">Option 2</Option>
-			</Select>
-		);
-
-		// assert: Value remains "option3"
-		cy.get("#sel")
-			.should("have.attr", "value", "option3")
-			.invoke("prop", "value", "option3");
-
-		// assert: no option is selected - the Select is displayed empty
-		cy.get("#opt1").should("not.have.attr", "selected");
-		cy.get("#opt2").should("not.have.attr", "selected");
-	});
-
-	it("tests Select's value updated after user interaction", () => {
-		cy.mount(
-			<Select id="sel" value="option3">
-				<Option id="opt1" value="option1">Option 1</Option>
-				<Option id="opt2" value="option2">Option 2</Option>
-				<Option id="opt3" value="option3">Option 3</Option>
-			</Select>
-		);
-
-		cy.get("#sel")
-			.realClick();
-
-		cy.get("#sel")
-			.should("have.attr", "opened");
-
-		// act: select first option with click
-
-		cy.get("#sel")
-			.find("[ui5-option]")
-			.eq(0)
-			.realClick();
-
-		// assert: value is updated after user interaction
-		cy.get("#sel")
-			.should("have.attr", "value", "option1")
-			.invoke("prop", "value", "option1");
-
-		// act: select second option with keyboard
-		cy.get("#sel")
-			.realClick();
-
-		cy.get("#sel")
-			.realPress("ArrowDown");
-
-		cy.get("#sel")
-			.realPress("Enter");
-
-		// assert: value is updated after ArrowDown + Enter
-		cy.get("#sel")
-		.should("have.attr", "value", "option2")
-		.invoke("prop", "value", "option2");
-	});
-});
-
-describe("Select - Accessibility", () => {
-	it("tests options tooltip is set displayed", () => {
-		const EXPECTED_TOOLTIP = "Tooltip";
-		const EXPECTED_ROLE = "option";
-		cy.mount(
-			<Select>
-				<Option value="1" tooltip={EXPECTED_TOOLTIP}>Option 1</Option>
-				<OptionCustom value="2" tooltip={EXPECTED_TOOLTIP}>Option 2</OptionCustom>
-			</Select>
-		);
-
-		// Check if the role is set to option
-		cy
-			.get("[ui5-option]")
-			.shadow()
-			.find("li.ui5-li-root")
-			.should("have.attr", "role", EXPECTED_ROLE)
-			.get("[ui5-option-custom]")
-			.shadow()
-			.find("li.ui5-li-root")
-			.should("have.attr", "role", EXPECTED_ROLE);
-
-		// Check if the tooltip is set
-		cy
-			.get("[ui5-option][tooltip]")
-			.shadow()
-			.find("li.ui5-li-root")
-			.should("have.attr", "title", EXPECTED_TOOLTIP)
-			.get("[ui5-option-custom][tooltip]")
-			.shadow()
-			.find("li.ui5-li-root")
-			.should("have.attr", "title", EXPECTED_TOOLTIP);
-	});
-
-	it("setting tooltip on the host is reflected on the select's shadow dom root", () => {
-		cy.mount(<Select tooltip="Go home">
-			<Option value="1">Option 1</Option>
-			<OptionCustom value="2">Option 2</OptionCustom>
-		</Select>);
-
-		cy.get("[ui5-select]")
-			.shadow()
-			.find(".ui5-select-root")
-			.as("select");
-
-		cy.get("@select")
-			.should("have.attr", "title", "Go home");
-	});
-});
-
-describe("Select - Popover", () => {
-	it("Popover should render custom value state", () => {
-		cy.mount(
-			<Select id="warningSelect" valueState="Critical">
-				<Option>This option has text bigger than ui5-select's width</Option>
-				<div slot="valueStateMessage">Custom message</div>
-			</Select>
-		);
-
-		cy.get("#warningSelect").realClick().realPress("Escape");
-
-		cy.get("#warningSelect")
-			.find("[slot=\"valueStateMessage\"]")
-			.should("be.visible")
-			.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

@@ -1,87 +0,0 @@
-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);
-		});
-	});
-});
-
-describe("Accessibility", () => {
-	it("aria-keyshortcuts should not be set on regular slider", () => {
-		cy.mount(
-			<Slider min={0} max={20}></Slider>
-		);
-
-		cy.get("[ui5-slider]")
-			.shadow()
-			.find(".ui5-slider-handle")
-			.should("not.have.attr", "aria-keyshortcuts");
-	});
-
-	it("aria-keyshortcuts should be set on slider with editable tooltips", () => {
-		cy.mount(
-			<Slider editableTooltip={true} min={0} max={20}></Slider>
-		);
-
-		cy.get("[ui5-slider]")
-			.shadow()
-			.find(".ui5-slider-handle")
-			.should("have.attr", "aria-keyshortcuts");
-	});
-
-	it("should apply associated label text as aria-label on the slider element", () => {
-		const labelText = "label for slider";
-		cy.mount(
-			<>
-				<label for="slider">{labelText}</label>
-				<Slider id="slider" min={0} max={20}></Slider>
-			</>
-		);
-
-		cy.get("[ui5-slider]")
-			.shadow()
-			.find(".ui5-slider-handle")
-			.should("have.attr", "aria-label", `${labelText} Slider handle`);
-});
-	it("Aria attributes are set correctly", () => {
-			cy.mount(
-				<Slider id="basic-slider" accessible-name="Basic Slider" min={0} max={10}></Slider>
-			);
-
-			cy.get("#basic-slider")
-				.shadow()
-				.find(".ui5-slider-handle")
-				.as("sliderHandle");
-
-			cy.get("@sliderHandle")
-				.should("have.attr", "aria-label", "Basic Slider Slider handle");
-
-			cy.get("@sliderHandle")
-				.should("have.attr", "aria-valuemin", "0");
-
-			cy.get("@sliderHandle")
-				.should("have.attr", "aria-valuemax", "10");
-
-			cy.get("@sliderHandle")
-				.should("have.attr", "aria-valuenow", "0");
-		});
-});

package/cypress/specs/StepInput.cy.tsx

@@ -1,32 +0,0 @@
-import StepInput from "../../src/StepInput.js";
-
-describe("StepInput Tests", () => {
-	it("tets input event prevention", () => {
-		cy.mount(
-			<StepInput></StepInput>
-		);
-
-		cy.get("[ui5-step-input]")
-			.as("stepInput");
-
-		cy.get<StepInput>("@stepInput")
-			.then($input => {
-				$input.get(0).addEventListener("input", e => {
-					e.preventDefault();
-					(e.target as StepInput).value = 30;
-				});
-			});
-
-		cy.get<StepInput>("@stepInput")
-			.realClick();
-
-		cy.realPress("1");
-
-		cy.get("@stepInput")
-			.shadow()
-			.find("ui5-input")
-			.shadow()
-			.find("input")
-			.should("have.value", "30");
-	});
-});

package/cypress/specs/TabContainer.cy.tsx

@@ -1,78 +0,0 @@
-import TabContainer from "../../src/TabContainer.js";
-import Tab from "../../src/Tab.js";
-
-describe("TabContainer general interaction", () => {
-	it("Tests no auto selection", () => {
-		cy.mount(
-			<TabContainer noAutoSelection id="tcNoAuto">
-				<Tab text="Products ID">
-					tab1
-				</Tab>
-				<Tab text="Availability">
-					tab2
-				</Tab>
-				<Tab text="Expiration Date">
-					tab3
-				</Tab>
-			</TabContainer>
-		);
-
-		cy.get("#tcNoAuto")
-			.then(tc => {
-				const tabContainer = tc.get(0) as TabContainer;
-				const allItems = tabContainer.allItems;
-				allItems.forEach(item => {
-					cy.wrap(item).should("have.prop", "selected", false);
-				});
-			});
-	});
-});
-
-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);
-		});
-	});
-});