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

package/cypress/specs/Input.cy.ts

@@ -1,131 +0,0 @@
-import { html } from "lit";
-import "../../src/Input.js";
-import type Input from "../../src/Input.js";
-import "../../src/features/InputSuggestions.js";
-import "../../src/SuggestionItem.js";
-import "../../src/SuggestionItemCustom.js";
-import "../../src/SuggestionItemGroup.js";
-
-describe("Input Tests", () => {
-	it("tets input event prevention", () => {
-		cy.mount(html`
-			<ui5-input></ui5-input>
-		`);
-
-		cy.get("[ui5-input]")
-			.as("input");
-
-		cy.get<Input>("@input")
-			.then($input => {
-				$input.get(0).addEventListener("input", e => {
-					e.preventDefault();
-					(e.target as Input).value = "test";
-				});
-			});
-
-		cy.get<Input>("@input")
-			.realClick();
-
-		cy.realPress("a");
-
-		cy.get("@input")
-			.shadow()
-			.find("input")
-			.should("have.value", "test");
-	});
-
-	it("tests custom suggestion items tabindex", () => {
-		cy.mount(html`
-			<ui5-input show-suggestions>
-				<ui5-suggestion-item-custom text="Item 1">Item 1</ui5-suggestion-item-custom>
-				<ui5-suggestion-item-custom text="Item 2">Item 2</ui5-suggestion-item-custom>
-				<ui5-suggestion-item-custom text="Item 3">Item 3</ui5-suggestion-item-custom>
-			</ui5-input>
-		`);
-
-		cy.get("[ui5-input]")
-			.as("input");
-
-		cy.get<Input>("@input")
-			.shadow()
-			.find("input")
-			.as("inner");
-
-		cy.get("@inner").realClick();
-		cy.get("@inner").type("i");
-		cy.get("@inner").realPress("ArrowDown");
-
-		cy.get("@input")
-			.find("[ui5-suggestion-item-custom]")
-			.shadow()
-			.find("li")
-			.should("not.have.attr", "tabindex", "0")
-			.should("have.attr", "role", "option");
-	});
-
-	it("tests regular suggestion items tabindex", () => {
-		cy.mount(html`
-			<ui5-input show-suggestions>
-				<ui5-suggestion-item text="Item 1"></ui5-suggestion-item>
-				<ui5-suggestion-item text="Item 2"></ui5-suggestion-item>
-				<ui5-suggestion-item text="Item 3"></ui5-suggestion-item>
-			</ui5-input>
-		`);
-
-		cy.get("[ui5-input]")
-			.as("input");
-
-		cy.get<Input>("@input")
-			.shadow()
-			.find("input")
-			.as("inner");
-
-		cy.get("@inner").realClick();
-		cy.get("@inner").type("i");
-		cy.get("@inner").realPress("ArrowDown");
-
-		cy.get("@input")
-			.find("ui5-suggestion-item")
-			.shadow()
-			.find("li")
-			.should("not.have.attr", "tabindex", "0")
-			.should("have.attr", "role", "option");
-	});
-
-	it("tests suggestion group items tabindex", () => {
-		cy.mount(html`
-			<ui5-input show-suggestions>
-				<ui5-suggestion-item-group header-text="Group 1">
-					<ui5-suggestion-item text="Item 1"></ui5-suggestion-item>
-					<ui5-suggestion-item text="Item 2"></ui5-suggestion-item>
-					<ui5-suggestion-item text="Item 3"></ui5-suggestion-item>
-				</ui5-suggestion-item-group>
-				<ui5-suggestion-item-group header-text="Group 2">
-					<ui5-suggestion-item text="Item 4"></ui5-suggestion-item>
-					<ui5-suggestion-item text="Item 5"></ui5-suggestion-item>
-					<ui5-suggestion-item text="Item 6"></ui5-suggestion-item>
-				</ui5-suggestion-item-group>
-			</ui5-input>
-		`);
-
-		cy.get("[ui5-input]")
-			.as("input");
-
-		cy.get<Input>("@input")
-			.shadow()
-			.find("input")
-			.as("inner");
-
-		cy.get("@inner").realClick();
-		cy.get("@inner").type("i");
-		cy.get("@inner").realPress("ArrowDown");
-
-		cy.get("@input")
-			.find("[ui5-suggestion-item-group]")
-			.shadow()
-			.find("[ui5-li-group-header]")
-			.shadow()
-			.find("ul")
-			.should("not.have.attr", "tabindex", "0");
-	});
-});

package/cypress/specs/Link.cy.ts

@@ -1,16 +0,0 @@
-import { html } from "lit";
-import "../../src/Link.js";
-
-describe("Accessibility", () => {
-	it("setting accessible-description is applied to button tag", () => {
-		cy.mount(html`<ui5-link accessible-description="A long description."></ui5-link>`);
-
-		cy.get("[ui5-link]")
-			.shadow()
-			.find("a")
-			.as("link");
-
-		cy.get("@link")
-			.should("have.attr", "aria-description", "A long description.");
-	});
-});

package/cypress/specs/List.cy.ts

@@ -1,155 +0,0 @@
-import { html } from "lit";
-import "../../src/List.js";
-import "../../src/ListItemStandard.js";
-import type List from "../../src/List.js";
-
-describe("List Tests", () => {
-	it("tests 'loadMore' event fired upon infinite scroll", () => {
-		cy.mount(html`
-		<ui5-list style="height: 300px;"  growing="Scroll">
-			<ui5-li>Laptop Lenovo</ui5-li>
-			<ui5-li>IPhone 3</ui5-li>
-			<ui5-li>HP Monitor 24</ui5-li>
-			<ui5-li>Audio cabel</ui5-li>
-			<ui5-li>DVD set</ui5-li>
-			<ui5-li>HP Monitor 24</ui5-li>
-			<ui5-li>Audio cabel</ui5-li>
-			<ui5-li id="lastItem">Last Item</ui5-li>
-		</ui5-list>`);
-
-		cy.get("[ui5-list]")
-			.as("list");
-
-		cy.get<List>("@list")
-			.then(list => {
-				list.get(0).addEventListener("ui5-load-more", cy.stub().as("loadMore"));
-			})
-			.shadow()
-			.find(".ui5-list-scroll-container")
-			.as("scrollContainer")
-			.scrollTo("bottom", { duration: 100 });
-
-		cy.get("@loadMore")
-			.should("have.been.calledOnce");
-	});
-
-	it("Arrow down and up navigation between last item and growing button", () => {
-		cy.mount(html`
-			<ui5-list growing="Button">
-				<ui5-li>Laptop Lenovo</ui5-li>
-				<ui5-li>IPhone 3</ui5-li>
-				<ui5-li>HP Monitor 24</ui5-li>
-			</ui5-list>
-		`);
-
-		cy.get("[ui5-list]")
-			.as("list");
-
-		// Click the last item to set focus
-		cy.get("@list")
-			.find("ui5-li")
-			.last()
-			.click();
-
-		// Verify the last item is focused
-		cy.get("@list")
-			.find("ui5-li")
-			.last()
-			.should("be.focused");
-
-		// Press arrow down once to move focus to the growing button
-		cy.realPress("ArrowDown");
-
-		// Verify the growing button is focused
-		cy.get("@list")
-			.shadow()
-			.find("[id$='growing-btn']")
-			.should("be.focused");
-
-		// Arrow up once to move focus back to the last item
-		cy.realPress("ArrowUp");
-
-		// Verify the last item is focused
-		cy.get("@list")
-			.find("ui5-li")
-			.last()
-			.should("be.focused");
-	});
-
-	it("Home key on growing button moves focus to first item", () => {
-		cy.mount(html`
-			<ui5-list growing="Button">
-				<ui5-li>Laptop Lenovo</ui5-li>
-				<ui5-li>IPhone 3</ui5-li>
-				<ui5-li>HP Monitor 24</ui5-li>
-			</ui5-list>
-		`);
-
-		cy.get("[ui5-list]")
-			.as("list");
-
-		// Click the growing button to set focus
-		cy.get("@list")
-			.shadow()
-			.find("[id$='growing-btn']")
-			.click();
-
-		// Wait for the growing button to be focused
-		cy.get("@list")
-			.shadow()
-			.find("[id$='growing-btn']")
-			.should("be.focused");
-
-		// Press Home key to move focus to the first item
-		cy.realPress("Home");
-
-		// Verify the first item is focused
-		cy.get("@list")
-			.find("ui5-li")
-			.first()
-			.should("be.focused");
-	});
-
-	it("End key navigation moves focus from first item to last item and then to growing button", () => {
-		cy.mount(html`
-			<ui5-list growing="Button">
-				<ui5-li>Laptop Lenovo</ui5-li>
-				<ui5-li>IPhone 3</ui5-li>
-				<ui5-li>HP Monitor 24</ui5-li>
-			</ui5-list>
-		`);
-
-		cy.get("[ui5-list]")
-			.as("list");
-
-		// Click the first item to set focus
-		cy.get("@list")
-			.find("ui5-li")
-			.first()
-			.click();
-
-		// Wait for the first item to be focused
-		cy.get("@list")
-			.find("ui5-li")
-			.first()
-			.should("be.focused");
-
-		// Press End key to move focus to the last item
-		cy.realPress("End");
-
-		// Verify the last item is focused
-		cy.get("@list")
-			.find("ui5-li")
-			.last()
-			.should("be.focused");
-
-		// Press End key again to move focus to the growing button
-		cy.realPress("End");
-
-		// Verify the growing button is focused
-		cy.get("@list")
-			.shadow()
-			.find("[id$='growing-btn']")
-			.should("be.focused");
-	});
-});

package/cypress/specs/MessageStrip.cy.ts

@@ -1,91 +0,0 @@
-import { html } from "lit";
-import "../../src/MessageStrip.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";
-
-describe("API", () => {
-	it("tests close event", () => {
-		cy.mount(html`<ui5-message-strip>MessageStrip</ui5-message-strip>`);
-
-		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(html`<ui5-message-strip >MessageStrip w/ default properties</ui5-message-strip>`);
-
-		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 = [
-		  {
-				design: "Information",
-				btnText: MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION.defaultText,
-		  },
-		  {
-				design: "ColorSet1",
-				btnText: MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM.defaultText,
-		  },
-		];
-
-		designs.forEach(({ design, btnText }) => {
-		  cy.mount(html`<ui5-message-strip class="top" design="${design}">${design} design with icon and close button:</ui5-message-strip>`);
-
-		  cy.get("[ui5-message-strip]")
-				.shadow()
-				.find("ui5-button")
-				.shadow()
-				.find("button")
-				.should("have.attr", "title", btnText);
-		});
-	});
-});
-
-describe("Accessibility", () => {
-	it("Test hidden text element content", () => {
-		cy.mount(html`
-			<ui5-message-strip id="messageStrip">Hello World!</ui5-message-strip>
-			<ui5-message-strip id="colorSet1ColorScheme1" design="ColorSet1" color-scheme="1" class="top"><ui5-icon name="palette" slot="icon"></ui5-icon>Color Set 1 - color-scheme 1</ui5-message-strip>
-		`);
-
-		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.ts

@@ -1,22 +0,0 @@
-import { html } from "lit";
-import "../../src/MultiComboBox.js";
-import "../../src/MultiComboBoxItem.js";
-
-describe("Security", () => {
-	it("tests setting malicious text to items", () => {
-		cy.mount(html`
-			<ui5-multi-combobox>
-				<ui5-mcb-item text="<script>alert('XSS')</script>"></ui5-mcb-item>
-				<ui5-mcb-item text="<b onmouseover=alert('XSS')></b>"></ui5-mcb-item>
-				<ui5-mcb-item text="Albania<button onClick='alert(1)'>alert</button>"></ui5-mcb-item>
-			</ui5-multi-combobox>
-		`);
-
-		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>");
-	});
-});

package/cypress/specs/MultiInput.cy.ts

@@ -1,47 +0,0 @@
-import { html } from "lit";
-import "../../src/MultiInput.js";
-import "../../src/Tokenizer.js";
-import "../../src/features/InputSuggestions.js";
-import "../../src/SuggestionItem.js";
-
-describe("MultiInput Web Component", () => {
-	it("creates only one token when typing 'ad' and pressing Enter", () => {
-		cy.mount(html`<ui5-multi-input show-suggestions show-value-help-icon id="suggestion-token">
-            <ui5-suggestion-item text="Aute"></ui5-suggestion-item>
-            <ui5-suggestion-item text="ad"></ui5-suggestion-item>
-            <ui5-suggestion-item text="exercitation"></ui5-suggestion-item>
-            <ui5-suggestion-item text="esse"></ui5-suggestion-item>
-            <ui5-suggestion-item text="labore"></ui5-suggestion-item>
-            <ui5-suggestion-item text="amet"></ui5-suggestion-item>
-            <ui5-suggestion-item text="aute"></ui5-suggestion-item>
-            <ui5-suggestion-item text="excepteur"></ui5-suggestion-item>
-        </ui5-multi-input>`);
-		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")
-			.type("ad{enter}");
-
-		cy.get("ui5-multi-input")
-			.find("ui5-token")
-			.should("have.length", 1)
-			.and("have.attr", "text", "ad");
-	});
-});

package/cypress/specs/Popover.cy.ts

@@ -1,62 +0,0 @@
-import { html } from "lit";
-import "../../src/Button.js";
-import "../../src/Toolbar.js";
-import "../../src/ToolbarButton.js";
-import "../../src/Popover.js";
-
-describe("Popover opener", () => {
-	it("tests 'opener' set as string of abstract element's ID ", () => {
-		cy.mount(html`
-			<ui5-toolbar id="tb">
-				<ui5-toolbar-button text="Add"></ui5-toolbar-button>
-				<ui5-toolbar-button text="Delete" id="clearCounter"></ui5-toolbar-button>
-				<ui5-toolbar-button id="btnOpenMenu" text="Open Menu" prevent-overflow-closing></ui5-toolbar-button>
-			</ui5-toolbar>
-			<ui5-popover id="popup" opener="btnOpenMenu">
-				<ui5-button id="btnClosePopover">Close</ui5-button>
-			</ui5-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(html`
-			<ui5-toolbar id="tb">
-				<ui5-toolbar-button text="Add"></ui5-toolbar-button>
-				<ui5-toolbar-button text="Delete"></ui5-toolbar-button>
-				<ui5-toolbar-button id="btnOpenPopover" text="Open Menu" prevent-overflow-closing></ui5-toolbar-button>
-			</ui5-toolbar>
-			<ui5-popover id="popup">
-				<ui5-button id="btnClosePopover">Close</ui5-button>
-			</ui5-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();
-	});
-});

package/cypress/specs/RTL.cy.ts

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

package/cypress/specs/RatingIndicator.cy.ts

@@ -1,66 +0,0 @@
-import { html } from "lit";
-import "../../src/RatingIndicator.js";
-
-describe("RatingIndicator", () => {
-	describe("Half Icon appearance", () => {
-		it("Half icon should be filled when rating indicator is disabled", () => {
-			const attributeValue = "favorite";
-
-			cy.mount(html`<ui5-rating-indicator value="2.5" disabled></ui5-rating-indicator>`);
-
-			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(html`<ui5-rating-indicator value="2.5" readonly></ui5-rating-indicator>`);
-
-			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(html`<ui5-rating-indicator value="2.5"></ui5-rating-indicator>`);
-
-			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(html`<ui5-rating-indicator size="S" value="3"></ui5-rating-indicator>`);
-
-			cy.get("ui5-rating-indicator")
-				.shadow()
-				.find("li.ui5-rating-indicator-item.ui5-rating-indicator-item-sel")
-				.should("have.css", "height", "22px")
-				.should("have.css", "margin-right", "3px");
-		});
-		it("should apply correct size and spacing for size 'L' readonly", () => {
-			cy.mount(html`<ui5-rating-indicator size="L" value="3.5" readonly></ui5-rating-indicator>`);
-
-			cy.get("ui5-rating-indicator")
-				.shadow()
-				.find("li.ui5-rating-indicator-item.ui5-rating-indicator-item-sel")
-				.should("have.css", "height", "32px")
-				.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("have.css", "height", "24px");
-		});
-	});
-});

package/cypress/specs/Select.cy.ts

@@ -1,39 +0,0 @@
-import { html } from "lit";
-import "../../src/Select.js";
-import "../../src/Option.js";
-import "../../src/OptionCustom.js";
-
-describe("Select - Accessibility", () => {
-	it("tests options tooltip is set displayed", () => {
-		const EXPECTED_TOOLTIP = "Tooltip";
-		const EXPECTED_ROLE = "option";
-		cy.mount(html`
-			<ui5-select>
-				<ui5-option value="1" tooltip="${EXPECTED_TOOLTIP}">Option 1</ui5-option>
-				<ui5-option-custom value="2" tooltip="${EXPECTED_TOOLTIP}">Option 2</ui5-option-custom>
-			</ui5-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);
-	});
-});