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

package/cypress/specs/MultiComboBox.cy.tsx

@@ -0,0 +1,189 @@
+import MultiComboBox from "../../src/MultiComboBox.js";
+import MultiComboBoxItem from "../../src/MultiComboBoxItem.js";
+
+describe("Security", () => {
+	it("tests setting malicious text to items", () => {
+		cy.mount(
+			<MultiComboBox>
+				<MultiComboBoxItem text="<script>alert('XSS')</script>"></MultiComboBoxItem>
+				<MultiComboBoxItem text="<b onmouseover=alert('XSS')></b>"></MultiComboBoxItem>
+				<MultiComboBoxItem text="Albania<button onClick='alert(1)'>alert</button>"></MultiComboBoxItem>
+			</MultiComboBox>
+		);
+
+		cy.get("ui5-mcb-item").eq(0).shadow().find(".ui5-li-title")
+			.should("have.text", "<script>alert('XSS')</script>");
+		cy.get("ui5-mcb-item").eq(1).shadow().find(".ui5-li-title")
+			.should("have.text", "<b onmouseover=alert('XSS')></b>");
+		cy.get("ui5-mcb-item").eq(2).shadow().find(".ui5-li-title")
+			.should("have.text", "Albania<button onClick='alert(1)'>alert</button>");
+	});
+});
+
+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(
+			<MultiComboBox noValidation={true}>
+				<MultiComboBoxItem text="Item 1"></MultiComboBoxItem>
+				<MultiComboBoxItem text="Item 2"></MultiComboBoxItem>
+			</MultiComboBox>
+		);
+
+		// add event listener
+		cy.get("ui5-multi-combobox")
+			.then(mcb => {
+				mcb.get(0).addEventListener("input", e => {
+					(mcb.get(0) as MultiComboBox).valueState = (e.target as MultiComboBox).value.length ? "Negative" : "Information";
+				});
+			});
+
+		// type "f"
+		cy.get("ui5-multi-combobox")
+			.shadow()
+			.find("input")
+			.realType("f");
+
+		cy.realPress("Backspace");
+
+		cy.get("ui5-multi-combobox")
+			.shadow()
+			.find("input")
+			.realPress("f");
+
+		cy.get("ui5-multi-combobox")
+			.shadow()
+			.find(".ui5-valuestatemessage--information")
+			.should("not.exist");
+	});
+});
+
+describe("Event firing", () => {
+	it("tests if open and close events are fired correctly", () => {
+		cy.mount(
+			<MultiComboBox>
+				<MultiComboBoxItem text="Algeria"></MultiComboBoxItem>
+				<MultiComboBoxItem text="Bulgaria"></MultiComboBoxItem>
+				<MultiComboBoxItem text="England"></MultiComboBoxItem>
+			</MultiComboBox>
+		);
+
+		cy.get("ui5-multi-combobox")
+			.as("multiComboBox");
+
+		cy.get("@multiComboBox")
+			.then($mcb => {
+				$mcb[0].addEventListener("focusin", () => {
+					$mcb[0].setAttribute("open", "true");
+				});
+			});
+
+		cy.get("@multiComboBox")
+			.then($mcb => {
+				$mcb[0].addEventListener("ui5-open", cy.stub().as("mcbOpened"));
+			});
+
+		cy.get("@multiComboBox")
+			.then($mcb => {
+				$mcb[0].addEventListener("ui5-close", cy.stub().as("mcbClosed"));
+			});
+
+		cy.get("@multiComboBox")
+			.shadow()
+			.find("input")
+			.as("input");
+
+		cy.get("@input")
+			.click();
+
+		cy.get("@multiComboBox")
+			.shadow()
+			.find("ui5-responsive-popover")
+			.as("respPopover");
+
+		cy.get("@respPopover")
+			.should("have.attr", "open");
+
+		cy.get("@mcbOpened")
+			.should("have.been.calledOnce");
+
+		cy.get("@multiComboBox")
+			.shadow()
+			.find("ui5-icon")
+			.as("icon");
+
+		cy.get("@icon")
+			.click();
+
+		cy.get("@icon")
+			.click();
+
+		cy.get("@mcbClosed")
+			.should("have.been.calledOnce");
+
+		cy.get("@mcbOpened")
+			.should("have.been.calledTwice");
+	});
+});
+
+describe("Accessibility", () => {
+	it("should announce the associated label when MultiComboBox is focused", () => {
+		cy.mount(
+			<>
+				<label for="mcb">MultiComboBox aria-label</label>
+				<MultiComboBox id="mcb"></MultiComboBox>
+			</>
+		);
+
+		cy.get('label[for="mcb"]')
+			.invoke('text')
+			.then((labelText) => {
+
+				cy.get("[ui5-multi-combobox]")
+					.shadow()
+					.find("input")
+					.as("innerInput");
+
+				cy.get("@innerInput")
+					.click();
+
+				cy.get("@innerInput")
+					.should("have.attr", "aria-label", labelText);
+			});
+	});
+});

package/cypress/specs/MultiInput.cy.tsx

@@ -0,0 +1,72 @@
+import SuggestionItem from "../../src/SuggestionItem.js";
+import MultiInput from "../../src/MultiInput.js";
+import "../../src/Token.js";
+import { MULTIINPUT_VALUE_HELP } from "../../src/generated/i18n/i18n-defaults.js";
+
+describe("MultiInput Web Component", () => {
+	it("creates only one token when typing 'ad' and pressing Enter", () => {
+		cy.mount(
+			<MultiInput showSuggestions={true} showValueHelpIcon={true} id="suggestion-token">
+				<SuggestionItem text="Aute"></SuggestionItem>
+				<SuggestionItem text="ad"></SuggestionItem>
+				<SuggestionItem text="exercitation"></SuggestionItem>
+				<SuggestionItem text="esse"></SuggestionItem>
+				<SuggestionItem text="labore"></SuggestionItem>
+				<SuggestionItem text="amet"></SuggestionItem>
+				<SuggestionItem text="aute"></SuggestionItem>
+				<SuggestionItem text="excepteur"></SuggestionItem>
+			</MultiInput>
+		);
+
+		cy.get("#suggestion-token").then(multiInput => {
+			const createTokenFromText = (text: string): HTMLElement => {
+				const token = document.createElement("ui5-token");
+				token.setAttribute("text", text);
+				token.setAttribute("slot", "tokens");
+				return token;
+			};
+
+			multiInput[0].addEventListener("keydown", (event: KeyboardEvent) => {
+				const inputElement = multiInput[0] as HTMLInputElement;
+				if (event.key === "Enter" && inputElement.value) {
+					const token = createTokenFromText(inputElement.value);
+					inputElement.appendChild(token);
+					inputElement.value = "";
+				}
+			});
+		});
+
+		cy.get("#suggestion-token")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.realType("ad");
+		cy.realPress("Enter");
+
+		cy.get("ui5-multi-input")
+			.find("ui5-token")
+			.should("have.length", 1)
+			.and("have.attr", "text", "ad");
+	});
+
+	it("Value Help announcement", () => {
+		const valueHelpId = "hiddenText-value-help";
+
+		cy.mount(<MultiInput showValueHelpIcon={true}></MultiInput>);
+
+		cy.get("[ui5-multi-input]")
+			.as("multiInput");
+
+		cy.get("@multiInput")
+			.shadow()
+			.find("input")
+			.should("have.attr", "aria-describedby")
+			.and("include", valueHelpId);
+
+		cy.get("@multiInput")
+			.shadow()
+			.find(`#${valueHelpId}`)
+			.should("have.text", MULTIINPUT_VALUE_HELP.defaultText);
+	});
+});

package/cypress/specs/Popover.cy.tsx

@@ -0,0 +1,419 @@
+import ToolbarButton from "../../src/ToolbarButton.js";
+import Toolbar from "../../src/Toolbar.js";
+import Popover from "../../src/Popover.js";
+import Button from "../../src/Button.js";
+
+describe("Rendering", () => {
+	it("tests arrow positioning", () => {
+		cy.mount(
+			<>
+				<div id="icon1" tabindex="0" style="width: 10px; height: 10px; background:red;"></div>
+				<Popover id="popup"
+						 opener="icon1"
+						 headerText="Newsletter subscription"
+						 placement="End"
+						 verticalAlign="Top">
+					<Button id="btnClosePopover">Close</Button>
+				</Popover>
+			</>
+		);
+
+		// act
+		cy.get("#popup")
+			.invoke("prop", "open", "true");
+
+		cy.get("#popup")
+			.ui5PopoverOpened();
+
+		cy.get("#popup")
+			.shadow()
+			.find(".ui5-popover-arrow")
+			.should("be.visible");
+
+		cy.get("#popup")
+			.shadow()
+			.find(".ui5-popover-arrow")
+			.should("have.css", "transform", "matrix(1, 0, 0, 1, 0, -42)");
+	});
+});
+
+describe("Popover opener", () => {
+	it("tests 'opener' set as string of abstract element's ID ", () => {
+		cy.mount(
+			<>
+				<Toolbar id="tb">
+					<ToolbarButton text="Add"></ToolbarButton>
+					<ToolbarButton text="Delete" id="clearCounter"></ToolbarButton>
+					<ToolbarButton id="btnOpenMenu" text="Open Menu" preventOverflowClosing={true}></ToolbarButton>
+				</Toolbar>
+				<Popover id="popup" opener="btnOpenMenu">
+					<Button id="btnClosePopover">Close</Button>
+				</Popover>
+			</>
+		);
+
+		// act
+		cy.get("#popup").invoke("prop", "open", "true");
+
+		// assert - The button inside the popover is accessible => popover is opened properly.
+		cy.get("#btnClosePopover").then($btnClosePopover => {
+			$btnClosePopover.get(0).addEventListener("click", () => {
+				cy.get("#popup").invoke("prop", "open", false);
+			});
+		});
+		cy.get("#btnClosePopover").realClick();
+	});
+
+	it("tests 'opener' set as DOM ref of abstract element's DOM reference", () => {
+		cy.mount(
+			<>
+				<Toolbar id="tb">
+					<ToolbarButton text="Add"></ToolbarButton>
+					<ToolbarButton text="Delete"></ToolbarButton>
+					<ToolbarButton id="btnOpenPopover" text="Open Menu" preventOverflowClosing={true}></ToolbarButton>
+				</Toolbar>
+				<Popover id="popup">
+					<Button id="btnClosePopover">Close</Button>
+				</Popover>
+			</>
+		);
+
+		cy.get("#btnOpenPopover").then($toolbarBtn => {
+			cy.wrap($toolbarBtn.get(0)).as("toolbarBtn");
+		});
+
+		// act
+		cy.get("@toolbarBtn").then($toolbarBtn => {
+			cy.get("#popup").invoke("prop", "opener", $toolbarBtn.get(0));
+		});
+		cy.get("#popup").invoke("prop", "open", true);
+
+		// assert - The button inside the popover is accessible => popover is opened properly.
+		cy.get("#btnClosePopover").then($btnClosePopover => {
+			$btnClosePopover.get(0).addEventListener("click", () => {
+				cy.get("#popup").invoke("prop", "open", false);
+			});
+		});
+		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")
+			.ui5PopoverOpened();
+
+		cy.get("@showOutsideViewport")
+			.should("have.been.calledOnce");
+	});
+});
+
+describe("Popover interaction", () => {
+	describe("Automatic Closing", () => {
+		it("tests clicking outside the popover", () => {
+			cy.mount(
+				<>
+					<button id="opener">Open</button>
+					<Popover id="pop" open={true} opener="opener">
+						<Button id="btnClosePopover">Close</Button>
+					</Popover>
+				</>
+			);
+
+			cy.get("#pop").ui5PopoverOpened();
+
+			// act
+			cy.get("body").realClick();
+
+			// assert
+			cy.get("#pop").should("not.be.visible");
+		});
+
+		it("tests clicking on the opener", () => {
+			cy.mount(
+				<>
+					<button id="opener">Open</button>
+					<Popover id="pop" open={true} opener="opener">
+						<Button id="btnClosePopover">Close</Button>
+					</Popover>
+				</>
+			);
+
+			cy.get("#pop").ui5PopoverOpened();
+
+			// act
+			cy.get("#opener").realClick();
+
+			// assert
+			cy.get("#pop").ui5PopoverOpened();
+		});
+
+		it("tests clicking on the opener if both the popover and the opener are located in a shadow root", () => {
+			class OpenerShadowRootTest extends HTMLElement {
+				_shadow: ShadowRoot | null = null;
+
+				constructor() {
+					super();
+				}
+
+				connectedCallback() {
+					if (this._shadow) {
+						return;
+					}
+
+					this._shadow = this.attachShadow({ mode: "open" });
+
+					const btn = document.createElement("button");
+					btn.textContent = "Opener in Shadow Root";
+					btn.setAttribute("id", "opener");
+
+					const pop = document.createElement("ui5-popover") as Popover;
+					pop.opener = "opener";
+					pop.open = true;
+
+					this._shadow.appendChild(btn);
+					this._shadow.appendChild(pop);
+				}
+			}
+
+			cy.window().then(win => {
+				win.customElements.define("opener-shadow-root-test", OpenerShadowRootTest);
+			});
+
+			cy.mount(
+				<>
+					{/* @ts-expect-error */}
+					<opener-shadow-root-test id="openerShadowRooTest"></opener-shadow-root-test>
+				</>
+			);
+
+			// assert
+			cy.get("#openerShadowRooTest").shadow().find("[ui5-popover]").ui5PopoverOpened();
+
+			// act
+			cy.get("#openerShadowRooTest").shadow().find("button").realClick();
+
+			// assert
+			cy.get("#openerShadowRooTest").shadow().find("[ui5-popover]").ui5PopoverOpened();
+		});
+
+		it("tests clicking outside the popover when 'mousedown' event propagation is stopped", () => {
+			cy.mount(
+				<>
+					<button id="opener">Open</button>
+					<Popover id="pop" open={true} opener="opener" placement="Bottom">
+						<span>popover content</span>
+					</Popover>
+					<button id="btn">Stops mousedown propagation</button>
+				</>
+			);
+
+			cy.get("#pop").ui5PopoverOpened();
+			cy.get("#btn").then(btn => {
+				btn.get(0).addEventListener("mousedown", event => {
+					event.stopPropagation();
+				});
+			});
+
+			// act
+			cy.get("#btn").realMouseDown();
+
+			// assert
+			cy.get("#pop").should("not.be.visible");
+		});
+	});
+});
+
+describe("Focusing", () => {
+	it("tests no focusable elements, but content is scrolling", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open</Button>
+				<Popover id="popoverId"
+							 style="width: 10rem; height: 10rem;"
+							 opener="btnOpen">
+					<div>
+						Note: The content of the prop will be rendered into a by assigning the
+						respective slot attribute (slot="footer"). Since you can't change the
+						DOM order of slots when declaring them within a prop, it might prove
+						beneficial to manually mount them as part of the component's children,
+						especially when facing problems with the reading order of screen
+						readers. Note: When passing a custom React component to this prop, you
+						have to make sure your component reads the slot prop and appends it to
+						the most outer element of your component. Learn more about it here.
+					</div>
+				</Popover>
+			</>
+		);
+
+		// act
+		cy.get("#popoverId").invoke("prop", "open", "true");
+
+		cy.get("#popoverId")
+			.shadow()
+			.find(".ui5-popup-content")
+			.should("be.focused");
+	});
+
+	it("tests first element is keyboard focusable scroll container", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open</Button>
+				<Popover id="popoverId"
+						 opener="btnOpen">
+					<div id="innerContent" style="width: 10rem; height: 10rem; overflow-y: auto;">
+						Note: The content of the prop will be rendered into a by assigning the
+						respective slot attribute (slot="footer"). Since you can't change the
+						DOM order of slots when declaring them within a prop, it might prove
+						beneficial to manually mount them as part of the component's children,
+						especially when facing problems with the reading order of screen
+						readers. Note: When passing a custom React component to this prop, you
+						have to make sure your component reads the slot prop and appends it to
+						the most outer element of your component. Learn more about it here.
+					</div>
+					<Button>Button</Button>
+				</Popover>
+			</>
+		);
+
+		// act
+		cy.get("#popoverId").invoke("prop", "open", "true");
+
+		cy.get("#innerContent")
+			.should("be.focused");
+	});
+});
+
+describe("Events", () => {
+	it("before-open", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpenPopover">Open</Button>
+				<Popover id="popoverId" opener="btnOpenPopover">
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="first">First group focusable</button>
+					</div>
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="second">Second group focusable</button>
+					</div>
+				</Popover>
+			</>
+		);
+
+		cy.get("#popoverId")
+			.should("not.be.visible");
+
+		const preventDefault = (e : Event) => {
+			e.preventDefault();
+		};
+
+		cy.get("#popoverId").then($dialog => {
+			$dialog.get(0).addEventListener("before-open", preventDefault);
+		});
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", true);
+
+		cy.get("#popoverId")
+			.should("not.be.visible");
+
+		cy.get("#popoverId").then($popover => {
+			$popover.get(0).removeEventListener("before-open", preventDefault);
+		});
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", true);
+
+		cy.get("#popoverId")
+			.ui5PopoverOpened();
+	});
+
+	it("before-close", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpenPopover">Open</Button>
+				<Popover id="popoverId" opener="btnOpenPopover">
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="first">First group focusable</button>
+					</div>
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="second">Second group focusable</button>
+					</div>
+				</Popover>
+			</>
+		);
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", true);
+
+		cy.get("#popoverId")
+			.ui5PopoverOpened();
+
+		const preventDefault = (e : Event) => {
+			e.preventDefault();
+		};
+
+		cy.get("#popoverId").then($popover => {
+			$popover.get(0).addEventListener("before-close", preventDefault);
+		});
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", false);
+
+		cy.get("#popoverId")
+			.ui5PopoverOpened();
+
+		cy.get("#popoverId").then($popover => {
+			$popover.get(0).removeEventListener("before-close", preventDefault);
+		});
+
+		cy.get("#popoverId")
+			.invoke("prop", "open", false);
+
+		cy.get("#popoverId")
+			.should("not.be.visible");
+	});
+});

package/cypress/specs/RTL.cy.tsx

@@ -0,0 +1,18 @@
+import CheckBox from "../../src/CheckBox.js";
+
+describe("RTL", () => {
+	it("tests effectiveDir", () => {
+		cy.mount(
+			<section dir="rtl">
+				<CheckBox id="cbRTL" text="Click me"></CheckBox>
+				<CheckBox id="cbLTR" text="This checkbox however defines dir=ltr" dir="ltr"></CheckBox>
+			</section>
+		);
+
+		cy.get("#cbRTL")
+			.should("have.prop", "effectiveDir", "rtl");
+
+		cy.get("#cbLTR")
+			.should("have.prop", "effectiveDir", "ltr");
+	});
+});