@ui5/webcomponents 2.6.3 → 2.7.0-rc.1

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

@@ -96,4 +96,79 @@ 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("shouldn't display the overflow button when initially rendered in a hidden container and later made visible", () => {
+		cy.mount(html`
+			<div id="otb_hidden_container" style="display:none;">
+				<ui5-toolbar id="otb_hidden">
+					<ui5-toolbar-button icon="add" text="Append"></ui5-toolbar-button>
+				</ui5-toolbar>
+			</div>
+		`);
+
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(500);
+
+		cy.get("#otb_hidden_container")
+			.as("hiddenContainer");
+
+		// show the hidden container
+		cy.get("@hiddenContainer")
+			.invoke("show");
+
+		// overflowbutton should not be rendered
+		cy.get("#otb_hidden")
+			.shadow()
+			.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/support/commands/ColorPalette.commands.ts

@@ -43,6 +43,7 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },
 		.shadow()
 		.find("ui5-dialog")
 		.find("ui5-button")
+		.should("have.attr", "design", "Emphasized") // The OK button is Emphasized (the Cancel button is Transparent)
 		.as("okButton");
 
 	cy.get("@redColor")
@@ -59,4 +60,9 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },
 
 	cy.get("@okButton")
 		.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>
 		}
 	}