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

package/cypress/specs/MessageStrip.cy.tsx

@@ -1,171 +0,0 @@
-import Button from "../../src/Button.js";
-import Icon from "../../src/Icon.js";
-import MessageStrip from "../../src/MessageStrip.js";
-import ResponsivePopover from "../../src/ResponsivePopover.js";
-import {
-	MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION,
-	MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM,
-	MESSAGE_STRIP_INFORMATION,
-	MESSAGE_STRIP_CLOSABLE,
-	MESSAGE_STRIP_CUSTOM,
-} from "../../src/generated/i18n/i18n-defaults.js";
-
-import palette from "@ui5/webcomponents-icons/dist/palette.js";
-
-type MSDesignInfo = {
-	design: "ColorSet1" | "Information" | "Positive" | "Negative" | "Critical" | "ColorSet2" | undefined;
-	btnText: string;
-}
-
-describe("API", () => {
-	it("tests close event", () => {
-		cy.mount(<MessageStrip>MessageStrip</MessageStrip>);
-
-		cy.get("[ui5-message-strip]").then($strip => {
-			$strip.get(0).addEventListener("close", cy.stub().as("close"));
-		});
-
-		cy.get("[ui5-message-strip]")
-			.shadow()
-			.find(".ui5-message-strip-close-button")
-			.as("closeButton");
-
-		cy.get("@closeButton")
-			.realClick();
-
-		cy.get("@closeButton")
-			.realPress("Space");
-
-		cy.get("@closeButton")
-			.realPress("Enter");
-
-		cy.get("@close").should("have.callCount", 3);
-	});
-
-	it("Message strip is rendered without icon when design changes from default to a specific color set and scheme", () => {
-		cy.mount(<MessageStrip >MessageStrip w/ default properties</MessageStrip>);
-
-		cy.get("[ui5-message-strip]")
-			.invoke("prop", "design", "ColorSet1")
-			.invoke("prop", "colorScheme", "1");
-
-		cy.get("[ui5-message-strip]")
-			.shadow()
-			.find("ui5-icon")
-			.should("not.exist");
-	});
-
-	it("should display the correct tooltip text for different designs", () => {
-		const designs: Array<MSDesignInfo> = [
-		  {
-				design: "Information",
-				btnText: MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION.defaultText,
-		  },
-		  {
-				design: "ColorSet1",
-				btnText: MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM.defaultText,
-		  },
-		];
-
-		designs.forEach(({ design, btnText }) => {
-			cy.mount(<MessageStrip class="top" design={design}>{design} design with icon and close button:</MessageStrip>);
-
-			cy.get("[ui5-message-strip]")
-				.shadow()
-				.find("ui5-button")
-				.shadow()
-				.find("button")
-				.should("have.attr", "title", btnText);
-
-			cy.get("[ui5-message-strip]")
-				.shadow()
-				.find("ui5-button")
-				.shadow()
-				.find("button")
-				.should("have.attr", "aria-label", btnText);
-		});
-	});
-
-	it("should not close the popover when close button is clicked", () => {
-		cy.mount(
-			<>
-				<Button id="btnopen">Open ResponsivePopover</Button>
-				<ResponsivePopover
-					opener="btnopen"
-					headerText="Newsletter subscription"
-					id="resppopover"
-				>
-					<div class="popover-content">
-						<MessageStrip design="Information">Information Message</MessageStrip>
-					</div>
-
-					<div slot="footer" class="popover-footer">
-						<Button id="closePopoverButton" design="Emphasized">Subscribe</Button>
-					</div>
-				</ResponsivePopover>
-			</>
-		);
-
-		cy.get("[ui5-button]")
-			.as("button");
-
-		cy.get("[ui5-responsive-popover]")
-			.as("popover");
-
-		cy.get("@button")
-			.then($btn => {
-				$btn[0].addEventListener("click", () => {
-					cy.get("@popover").then($popover => {
-						$popover[0].setAttribute("open", "");
-					});
-				});
-			});
-
-		cy.get("@popover")
-			.then($popover => {
-				$popover[0].addEventListener("close", () => {
-					$popover[0].removeAttribute("open");
-				});
-			});
-
-		cy.get("@button")
-			.realClick();
-
-		cy.get("@popover")
-			.should("have.attr", "open");
-
-		cy.get("ui5-message-strip")
-			.shadow()
-			.find("ui5-button")
-			.as("buttonMS");
-
-		cy.get("@buttonMS")
-			.realClick();
-
-		cy.get("@popover")
-			.should("have.attr", "open");
-	});
-});
-
-describe("Accessibility", () => {
-	it("Test hidden text element content", () => {
-		cy.mount(
-			<>
-				<MessageStrip id="messageStrip">Hello World!</MessageStrip>
-				<MessageStrip id="colorSet1ColorScheme1" design="ColorSet1" colorScheme="1" class="top">
-					<Icon name={palette} slot="icon"></Icon>Color Set 1 - color-scheme 1
-				</MessageStrip>
-			</>
-		);
-
-		cy.get("#messageStrip")
-			.shadow()
-			.find(".ui5-hidden-text")
-			.should("have.text", `${MESSAGE_STRIP_INFORMATION.defaultText} ${MESSAGE_STRIP_CLOSABLE.defaultText}`);
-
-		cy.get("#colorSet1ColorScheme1")
-			.shadow()
-			.find(".ui5-hidden-text")
-			.should("have.text", `${MESSAGE_STRIP_CUSTOM.defaultText} ${MESSAGE_STRIP_CLOSABLE.defaultText}`);
-	});
-});

package/cypress/specs/MultiComboBox.cy.tsx

@@ -1,189 +0,0 @@
-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

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