@ui5/webcomponents 2.7.0-rc.0 → 2.7.0-rc.2

package/cypress/specs/Menu.cy.ts

@@ -495,5 +495,41 @@ describe("Menu interaction", () => {
 				.find("[ui5-responsive-popover]")
 				.should("have.attr", "accessible-name", "Select an option from the menu");
 		});
+
+		it("Menu items - navigation in endContent", () => {
+			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			<ui5-menu id="menu" opener="btnOpen">
+				<ui5-menu-item id="item2" text="Item 2">
+					<ui5-button id="newLock" slot="endContent" icon="locked" design="Transparent"></ui5-button>
+					<ui5-button id="newFavorite" slot="endContent" icon="favorite" design="Transparent"></ui5-button>
+				</ui5-menu-item>
+				<ui5-menu-item text="Item3" additional-text="Ctrl+F" icon="add-folder" ></ui5-menu-item>
+			</ui5-menu>`);
+
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
+			cy.get("[ui5-menu] > [ui5-menu-item]").as("items");
+			cy.get("[ui5-menu] [ui5-button]").as("buttons");
+			cy.get("@items").first().should("be.focused");
+
+			cy.realPress("ArrowRight");
+			cy.get("@buttons").first().should("be.focused");
+
+			cy.realPress("ArrowRight");
+			cy.get("@buttons").last().should("be.focused");
+
+			cy.realPress("ArrowRight");
+			cy.get("@buttons").last().should("be.focused");
+
+			cy.realPress("ArrowLeft");
+			cy.get("@buttons").first().should("be.focused");
+
+			cy.realPress("ArrowLeft");
+			cy.get("@buttons").first().should("be.focused");
+
+			cy.realPress("ArrowDown");
+			cy.get("@items").last().should("be.focused");
+		});
 	});
 });

package/cypress/specs/MultiComboBox.cy.ts

@@ -1,6 +1,7 @@
 import { html } from "lit";
 import "../../src/MultiComboBox.js";
 import "../../src/MultiComboBoxItem.js";
+import type MultiComboBox from "../../src/MultiComboBox.js";
 
 describe("Security", () => {
 	it("tests setting malicious text to items", () => {
@@ -20,3 +21,40 @@ describe("Security", () => {
 			.should("have.text", "Albania<button onClick='alert(1)'>alert</button>");
 	});
 });
+
+describe("Value State", () => {
+	it("should be able to change value states upon typing", () => {
+		cy.mount(html`
+			<ui5-multi-combobox no-validation>
+				<ui5-mcb-item text="Item 1"></ui5-mcb-item>
+				<ui5-mcb-item text="Item 2"></ui5-mcb-item>
+			</ui5-multi-combobox>
+		`);
+
+		// 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")
+			.type("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");
+	});
+});

package/cypress/specs/MultiInput.cy.ts

@@ -1,7 +1,6 @@
 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", () => {

package/cypress/specs/RatingIndicator.cy.ts

@@ -63,4 +63,29 @@ describe("RatingIndicator", () => {
 				.should("have.css", "height", "24px");
 		});
 	});
+
+	describe("RatingIndicator Accessibility", () => {
+		it("should be able to tab after and before readonly element", () => {
+			cy.mount(html`
+				<button>Before</button>
+				<ui5-rating-indicator value="3" readonly></ui5-rating-indicator>
+				<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");
+		});
+	});
 });

package/cypress/specs/Select.cy.ts

@@ -37,3 +37,22 @@ describe("Select - Accessibility", () => {
 			.should("have.attr", "title", EXPECTED_TOOLTIP);
 	});
 });
+
+describe("Select - Popover", () => {
+	it("Popover should render custom value state", () => {
+		cy.mount(html`
+			<ui5-select id="warningSelect" value-state="Critical">
+				<ui5-option>This option has text bigger than ui5-select's width</ui5-option>
+				<div slot="valueStateMessage">Custom message</div>
+
+			</ui5-select>
+		`);
+
+		cy.get("#warningSelect").realClick().realPress("Escape");
+
+		cy.get("#warningSelect")
+			.find("[slot=\"valueStateMessage\"]")
+			.should("be.visible")
+			.should("have.text", "Custom message");
+	});
+});

package/cypress/specs/Tag.cy.ts

@@ -0,0 +1,76 @@
+import { html } from "lit";
+import "../../src/Tag.js";
+import "@ui5/webcomponents-icons/dist/accept.js";
+import {
+	TAG_ROLE_DESCRIPTION,
+	TAG_SUCCESS,
+	TAG_DESCRIPTION_TAG,
+} from "../../src/generated/i18n/i18n-defaults.js";
+
+describe("Tag", () => {
+	describe("Tag rendering", () => {
+		it("initial rendering", () => {
+			cy.mount(html`<ui5-tag id="tagWithTextAndIcon" style="width: 300px" color-scheme="1" design="Set1">
+					<ui5-icon name="accept" slot="icon"></ui5-icon>bigger width
+				</ui5-tag>
+				<ui5-tag design="Positive" id="interactiveTag" interactive>
+					Interactive
+				</ui5-tag>
+				<ui5-tag design="Positive" id="noninteractiveTag">
+					Noninteractive
+				</ui5-tag>`);
+
+			cy.get("#tagWithTextAndIcon").shadow().find(".ui5-tag-root").should("have.prop", "tagName", "DIV");
+
+			cy.get("#interactiveTag").shadow().find(".ui5-tag-root").should("have.prop", "tagName", "BUTTON");
+
+			cy.get("#interactiveTag").shadow().find(".ui5-tag-root").should("have.attr", "aria-roledescription", `${TAG_ROLE_DESCRIPTION.defaultText}`);
+
+			cy.get("#interactiveTag").shadow().find(".ui5-tag-root").should("have.attr", "aria-description", `${TAG_SUCCESS.defaultText}`);
+
+			cy.get("#noninteractiveTag").shadow().find(".ui5-hidden-text").should("have.text", `${TAG_DESCRIPTION_TAG.defaultText} ${TAG_SUCCESS.defaultText}`);
+		});
+
+		it("tests that label is rendered if there is text content", () => {
+			cy.mount(html`<ui5-tag id="tagWithTextAndIcon" style="width: 300px" color-scheme="1" design="Set1">
+				<ui5-icon name="accept" slot="icon"></ui5-icon>bigger width
+			</ui5-tag>`);
+
+			cy.get("[ui5-tag]").shadow().find(".ui5-tag-text").should("exist");
+		});
+
+		it("tests that label is NOT rendered if there is only icon", () => {
+			cy.mount(html`<ui5-tag style="width: 300px">
+				<ui5-icon name="accept" slot="icon"></ui5-icon>
+			</ui5-tag>`);
+
+			cy.get("[ui5-tag]").shadow().find(".ui5-tag-text").should("not.exist");
+		});
+	});
+
+	describe("Wrapping", () => {
+		it("tests if tag text wraps - default wrappingType", () => {
+			cy.mount(html`<ui5-tag id="tagWithWrappingDefault" style="width: 300px">
+				<ui5-icon name="accept" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="Normal"
+			</ui5-tag>`);
+
+			cy.get("#tagWithWrappingDefault").shadow().find(".ui5-tag-root").should("have.css", "white-space", "normal");
+		});
+
+		it("tests if tag text wraps - wrappingType Normal", () => {
+			cy.mount(html`<ui5-tag id="tagWithWrappingNormal" style="width: 300px" wrapping-type="Normal">
+				<ui5-icon name="accept" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="Normal"
+			</ui5-tag>`);
+
+			cy.get("#tagWithWrappingNormal").shadow().find(".ui5-tag-root").should("have.css", "white-space", "normal");
+		});
+
+		it("tests if tag text wraps - wrappingType None", () => {
+			cy.mount(html`<ui5-tag id="tagWithWrappingNone" style="width: 300px" wrapping-type="None">
+				<ui5-icon name="accept" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="None"
+			</ui5-tag>`);
+
+			cy.get("#tagWithWrappingNone").shadow().find(".ui5-tag-root").should("have.css", "white-space", "nowrap");
+		});
+	});
+});

package/cypress/specs/Text.cy.ts

@@ -0,0 +1,31 @@
+import { html } from "lit";
+import "../../src/Text.js";
+
+describe("Text", () => {
+	it("tests root element is bdi", () => {
+		cy.mount(html`<ui5-text >Text</ui5-text>`);
+		cy.get("[ui5-text]").shadow().find(":first-child").should("have.prop", "tagName", "SPAN");
+	});
+
+	it("tests default wrapping behavior", () => {
+		cy.mount(html`<ui5-text >Text</ui5-text>`);
+		cy.get("[ui5-text]").should("have.css", "word-wrap", "break-word");
+	});
+
+	it("tests maxLines default behavior", () => {
+		cy.mount(html`<ui5-text >Text</ui5-text>`);
+		cy.get("[ui5-text]").should("have.css", "-webkit-line-clamp", "none");
+	});
+
+	it("tests maxLines", () => {
+		cy.mount(html`<ui5-text max-lines="1">Text</ui5-text>`);
+		cy.get("[ui5-text]").should("have.css", "-webkit-line-clamp", "1");
+	});
+
+	it("tests emptyIndicatorMode", () => {
+		cy.mount(html`<ui5-text empty-indicator-mode="On"></ui5-text>`);
+
+		cy.get("[ui5-text]").shadow().find(".empty-indicator").should("have.text", "–");
+		cy.get("[ui5-text]").shadow().find(".empty-indicator-aria-label").should("have.text", "Empty Value");
+	});
+});

package/cypress/specs/Title.cy.ts

@@ -0,0 +1,37 @@
+import { html } from "lit";
+import "../../src/Title.js";
+
+describe("Title", () => {
+	describe("Rendering ", () => {
+		it("h{n} tags rendered correctly", () => {
+			cy.mount(html`<ui5-title id="titleH1" level="H1">Title Size 1</ui5-title>`);
+			cy.get("#titleH1").shadow().find("h1").should("exist");
+
+			cy.mount(html`<ui5-title id="titleAuto">Title Size Auto (2)</ui5-title>`);
+			cy.get("#titleAuto").shadow().find("h2").should("exist");
+
+			cy.mount(html`<ui5-title id="titleH2" level="H2">Title Size 2</ui5-title>`);
+			cy.get("#titleH2").shadow().find("h2").should("exist");
+
+			cy.mount(html`<ui5-title id="titleH3" level="H3">Title Size 3</ui5-title>`);
+			cy.get("#titleH3").shadow().find("h3").should("exist");
+
+			cy.mount(html`<ui5-title id="titleH4" level="H4">Title Size 4</ui5-title>`);
+			cy.get("#titleH4").shadow().find("h4").should("exist");
+
+			cy.mount(html`<ui5-title id="titleH5" level="H5">Title Size 5</ui5-title>`);
+			cy.get("#titleH5").shadow().find("h5").should("exist");
+
+			cy.mount(html`<ui5-title id="titleH6" level="H6">Title Size 6</ui5-title>`);
+			cy.get("#titleH6").shadow().find("h6").should("exist");
+		});
+
+		it("should wrap the text of the title", () => {
+			cy.mount(html`<ui5-title size="H6" level="H6" id="wrapping-title" style="width: 200px;">Wrapping Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>`);
+			cy.get("#wrapping-title").should("have.css", "height", "64px");
+
+			cy.mount(html`<ui5-title size="H6" level="H6" id="truncated-title" wrapping-type="None" style="width: 200px;">Truncated Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>`);
+			cy.get("#truncated-title").should("have.css", "height", "16px");
+		});
+	});
+});

package/cypress/specs/Toolbar.cy.ts

@@ -122,4 +122,53 @@ describe("Toolbar general interaction", () => {
 			.find(".ui5-tb-overflow-btn-hidden")
 			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
 	});
+
+	it("Should call event handlers on abstract item", () => {
+		cy.mount(html`
+			<ui5-toolbar>
+				<ui5-toolbar-button text="Button 1"></ui5-toolbar-button>
+				<ui5-toolbar-select>
+					<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
+					<ui5-toolbar-select-option selected>2</ui5-toolbar-select-option>
+					<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
+				</ui5-toolbar-select>
+			</ui5-toolbar>
+		`);
+
+		cy.get("ui5-toolbar-button[text='Button 1']")
+			.then(button => {
+				button.get(0).addEventListener("click", cy.stub().as("clicked"));
+			});
+
+		cy.get("ui5-button", { includeShadowDom: true }).contains("Button 1")
+			.click();
+
+		cy.get("@clicked")
+			.should("have.been.calledOnce");
+
+		cy.get("ui5-toolbar-select")
+			.then(select => {
+				select.get(0).addEventListener("ui5-click", cy.stub().as("clicked"));
+				select.get(0).addEventListener("ui5-change", cy.stub().as("changed"));
+				select.get(0).addEventListener("ui5-open", cy.stub().as("opened"));
+				select.get(0).addEventListener("ui5-close", cy.stub().as("closed"));
+			});
+
+		cy.get("ui5-select", { includeShadowDom: true })
+			.click();
+
+		cy.get("@clicked")
+			.should("have.been.calledOnce");
+		cy.get("@opened")
+			.should("have.been.calledOnce");
+
+		cy.get("ui5-option", { includeShadowDom: true })
+			.first()
+			.click();
+
+		cy.get("@changed")
+			.should("have.been.calledOnce");
+		cy.get("@closed")
+			.should("have.been.calledOnce");
+	});
 });

package/cypress/specs/base/Events.cy.ts

@@ -4,7 +4,6 @@ import "../../../src/Select.js";
 import "../../../src/Option.js";
 import "../../../src/Input.js";
 import "../../../src/SuggestionItem.js";
-import "../../../src/features/InputSuggestions.js";
 import "../../../src/MessageStrip.js";
 import "../../../src/MultiComboBox.js";
 import "../../../src/MultiComboBoxItem.js";

package/cypress/support/commands/ColorPalette.commands.ts

@@ -42,7 +42,7 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },
 	cy.get("@colorPalette")
 		.shadow()
 		.find("ui5-dialog")
-		.find("ui5-button")
+		.find("ui5-button[design=Emphasized]") // The OK button is Emphasized (the Cancel button is Transparent)
 		.as("okButton");
 
 	cy.get("@redColor")
@@ -58,5 +58,11 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },
 		.should("have.attr", "value", values.a);
 
 	cy.get("@okButton")
+		.should("be.visible") // Make sure the OK button is rendered before clicking it
 		.realClick();
+
+	cy.get("@colorPalette")
+		.shadow()
+		.find("ui5-dialog")
+		.should("not.be.visible"); // Make sure the dialog is closed at the end of the command (otherwise the next command will sometimes assert against the old dialog values)
 });

package/cypress/support/commands/ColorPicker.commands.ts

@@ -0,0 +1,24 @@
+Cypress.Commands.add("ui5ColorPickerToggleColorMode", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("colorPicker")
+		.should("be.visible");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find("#toggle-picker-mode")
+		.realClick();
+});
+
+Cypress.Commands.add("ui5ColorPickerUpdateInput", { prevSubject: true }, (subject, name, value) => {
+	cy.wrap(subject)
+		.as("colorPicker")
+		.should("be.visible");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find(name)
+		.realClick({ clickCount: 2 })
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+		.realType(value)
+		.realPress("Enter");
+});

package/cypress/support/commands.ts

@@ -38,6 +38,7 @@
 
 import { internals, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import "./commands/Menu.commands.js";
+import "./commands/ColorPicker.commands.js";
 import "./commands/ColorPalette.commands.js";
 
 type SimulationDevices = "phone"
@@ -51,6 +52,8 @@ declare global {
 			ui5MenuItemClick(): Chainable<void>
 			ui5DOMRef(): Chainable<void>
 			ui5MenuItemPress(key: any): Chainable<void>
+			ui5ColorPickerToggleColorMode(): Chainable<void>
+			ui5ColorPickerUpdateInput(name: string, value: string): Chainable<void>
 			ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: {r: string, g: string, b: string, a: string}): Chainable<void>
 		}
 	}