@ui5/webcomponents 2.8.1-rc.0 → 2.9.0-rc.1

package/cypress/specs/Tag.cy.tsx

@@ -95,4 +95,26 @@ describe("Tag", () => {
 			cy.get("#tagWithWrappingNone").shadow().find(".ui5-tag-root").should("have.css", "white-space", "nowrap");
 		});
 	});
+
+	describe("Events", () => {
+		it("tests interactive tag click event", () => {
+			cy.mount(
+				<Tag interactive>Tag</Tag>
+			);
+
+			cy.get("[ui5-tag]")
+				.as("tag");
+
+			cy.get("@tag")
+				.then(tag => {
+					tag.get(0).addEventListener("click", cy.stub().as("clicked"));
+				});
+
+			cy.get("@tag")
+				.realClick();
+
+			cy.get("@clicked")
+				.should("have.been.calledOnce");
+		});
+	});
 });

package/cypress/specs/base/AccessibilityTextsHelper.cy.tsx

@@ -242,6 +242,147 @@ describe("AccessibilityTextsHelper", () => {
 			.should("not.have.attr", "aria-label");
 	});
 
+	it("Input accessibleDescriptionRef Tests", () => {
+		cy.mount(
+			<>
+				<Label id="lblDesc1">FirstDesc</Label>
+				<Label id="lblDesc2">SecondDesc</Label>
+				<Label id="lblDesc3">ThirdDesc</Label>
+				<Input id="inputDescRef" accessibleDescriptionRef="lblDesc1 lblDesc3"></Input>
+			</>
+		);
+
+		// assert
+		cy.get("#inputDescRef")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "FirstDesc ThirdDesc");
+
+		// act - update text of referenced label
+		cy.get("#lblDesc1")
+			.then($el => {
+				$el.get(0).innerHTML = "First Label Desc";
+			});
+
+		// assert
+		cy.get("#inputDescRef")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "First Label Desc ThirdDesc");
+
+		// act - update accessible-description-ref
+		cy.get("#inputDescRef")
+			.invoke("attr", "accessible-description-ref", "lblDesc2");
+
+		// assert
+		cy.get("#inputDescRef")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "SecondDesc");
+
+		// act - update accessible-description-ref
+		cy.get("#inputDescRef")
+			.invoke("attr", "accessible-description-ref", "lblDesc3");
+
+		// assert
+		cy.get("#inputDescRef")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "ThirdDesc");
+
+		// act - remove accessible-description-ref
+		cy.get("#inputDescRef")
+			.invoke("removeAttr", "accessible-description-ref");
+
+		// assert
+		cy.get("#inputDescRef")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("not.have.text", "");
+	});
+
+	it("Input accessibleDescription Tests", () => {
+		cy.mount(
+			<>
+				<Input id="inputDesc" accessibleDescription="Some description added by accessibleDescription"></Input>
+			</>
+		);
+		// assert
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "Some description added by accessibleDescription");
+
+		// act - update accessible-description
+		cy.get("#inputDesc")
+			.invoke("attr", "accessible-description", "Some description added by accessibleDescription");
+
+		// assert
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "Some description added by accessibleDescription");
+
+		// act - remove accessible-description
+		cy.get("#inputDesc")
+			.invoke("removeAttr", "accessible-description");
+
+		// assert
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("not.have.text", "");
+	});
+
+	// both
+	it("Input accessibleDescriptionRef and accessibleDescription Tests", () => {
+		cy.mount(
+			<>
+				<Label id="lblDesc1">FirstDesc</Label>
+				<Label id="lblDesc2">SecondDesc</Label>
+				<Input id="inputDesc" accessibleDescriptionRef="lblDesc1" accessibleDescription="Some description added by accessibleDescription"></Input>
+			</>
+		);
+
+		// assert - accessibleDescription is used
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "FirstDesc");
+
+		// act - update text of referenced label
+		cy.get("#lblDesc1")
+			.then($el => {
+				$el.get(0).innerHTML = "First Label Desc";
+			});
+
+		// assert - accessibleDescriptionRef is used
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "First Label Desc");
+
+		// act - remove accessible-description-ref
+		cy.get("#inputDesc")
+			.invoke("removeAttr", "accessible-description-ref");
+
+		// assert - accessibleDescription is used
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("have.text", "Some description added by accessibleDescription");
+
+		// act - remove accessible-description
+		cy.get("#inputDesc")
+			.invoke("removeAttr", "accessible-description");
+
+		// assert - accessibleDescriptionRef is used
+		cy.get("#inputDesc")
+			.shadow()
+			.find("#accessibleDescription")
+			.should("not.have.text", "");
+	});
+
 	it("Tests generic html elements with for attribute", () => {
 		cy.mount(
 			<>

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

@@ -13,8 +13,15 @@ import Menu from "../../../src/Menu.js";
 import MultiComboBox from "../../../src/MultiComboBox.js";
 import MultiComboBoxItem from "../../../src/MultiComboBoxItem.js";
 import CheckBox from "../../../src/CheckBox.js";
+import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 
 describe("Event bubbling", () => {
+	before(() => {
+		cy.wrap({ setAnimationMode })
+			.invoke("setAnimationMode", AnimationMode.None);
+	})
+
 	it("test bubbling events", () => {
 		cy.mount(
 			<div id="app">
@@ -81,7 +88,9 @@ describe("Event bubbling", () => {
 			.realClick();
 
 		cy.get("@input")
-			.realType("a");
+			.should("be.focused");
+
+		cy.realType("a");
 
 		cy.get("@input")
 			.find("[ui5-suggestion-item]")

package/cypress/specs/base/Tooltips.cy.tsx

@@ -1,5 +1,4 @@
 import { setEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
-
 import Button from "../../../src/Button.js";
 import RatingIndicator from "../../../src/RatingIndicator.js";
 import ToggleButton from "../../../src/ToggleButton.js";
@@ -11,9 +10,12 @@ import settings from "@ui5/webcomponents-icons/dist/settings.js";
 import add from "@ui5/webcomponents-icons/dist/add.js";
 import activate from "@ui5/webcomponents-icons/dist/activate.js";
 
-setEnableDefaultTooltips(false);
-
 describe("Default Tooltips", () => {
+	before(() => {
+		cy.wrap({ setEnableDefaultTooltips })
+			.invoke("setEnableDefaultTooltips", false);
+	})
+
 	it("tests navigation", () => {
 		cy.mount(
 			<>

package/cypress/support/commands/DatePicker.commands.ts

@@ -0,0 +1,218 @@
+Cypress.Commands.add("ui5DatePickerGetInnerInput", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-input")
+		.shadow()
+		.find("input")
+		.as("innerInput");
+
+	return cy.get("@innerInput");
+});
+
+Cypress.Commands.add("ui5DatePickerGetPopoverDate", { prevSubject: true }, (subject, timestamp) => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find("ui5-daypicker")
+		.shadow()
+		.find(`[data-sap-timestamp='${timestamp}']`)
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerGetDisplayedDay", { prevSubject: true }, (subject, index) => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find("ui5-daypicker")
+		.shadow()
+		.find(".ui5-dp-content .ui5-dp-item")
+		.eq(index);
+});
+
+Cypress.Commands.add("ui5DatePickerGetFirstDisplayedDate", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find("ui5-daypicker")
+		.shadow()
+		.find("div.ui5-dp-item")
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerGetFirstDisplayedYear", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.shadow()
+		.find("ui5-yearpicker")
+		.as("yearPicker")
+		.should("be.visible");
+
+	return cy.get("@yearPicker")
+		.shadow()
+		.find("div.ui5-yp-item")
+		.first();
+});
+Cypress.Commands.add("ui5DatePickerGetDisplayedMonth", { prevSubject: true }, (subject: string, index: number) => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.shadow()
+		.find("ui5-monthpicker")
+		.as("monthPicker")
+		.should("be.visible");
+
+	return cy.get("@monthPicker")
+		.shadow()
+		.find(".ui5-mp-root .ui5-mp-item")
+		.eq(index);
+});
+
+Cypress.Commands.add("ui5DatePickerGetDisplayedYear", { prevSubject: true }, (subject: string, index: number) => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.shadow()
+		.find("ui5-yearpicker")
+		.as("yearPicker")
+		.should("be.visible");
+
+	return cy.get("@yearPicker")
+		.shadow()
+		.find(".ui5-yp-root .ui5-yp-item")
+		.eq(index);
+});
+
+Cypress.Commands.add("ui5DatePickerGetNextButton", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find(".ui5-calheader div[data-ui5-cal-header-btn-next]")
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerGetPreviousButton", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find(".ui5-calheader div[data-ui5-cal-header-btn-prev]")
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerGetMonthButton", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find(".ui5-calheader div[data-ui5-cal-header-btn-month]")
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerGetYearButton", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find(".ui5-calheader div[data-ui5-cal-header-btn-year]")
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerValueHelpIconPress", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-icon")
+		.realClick();
+});

package/cypress/support/commands/SegmentedButton.commands.ts

@@ -0,0 +1,32 @@
+import type SegmentedButtonItem from "../../../src/SegmentedButtonItem.js";
+
+Cypress.Commands.add("ui5SegmentedButtonItemToggleSelect", { prevSubject: true }, (subject, deselect) => {
+	const arg = deselect ? "have.attr" : "not.have.attr";
+	const arg2 = deselect ? "not.have.attr" : "have.attr";
+
+	cy.wrap(subject)
+		.as("segmentedButtonItem")
+		.should("be.visible");
+
+	cy.get<SegmentedButtonItem>("@segmentedButtonItem")
+		.should(arg, "selected");
+
+	cy.get<SegmentedButtonItem>("@segmentedButtonItem")
+		.realClick();
+
+	cy.get<SegmentedButtonItem>("@segmentedButtonItem")
+		.should(arg2, "selected");
+});
+
+Cypress.Commands.add("ui5SegmentedButtonFocusFirstItem", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("items")
+		.should("be.visible");
+
+	cy.get<SegmentedButtonItem>("@items")
+		.first()
+		.realClick();
+
+	cy.get<SegmentedButtonItem>("@items")
+		.should("be.focused");
+});

package/cypress/support/commands.ts

@@ -36,13 +36,16 @@
 //   }
 // }
 
+import "@ui5/cypress-internal/commands.js";
 import { internals, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 
 // Please keep this list in alphabetical order
 import "./commands/Calendar.commands.js";
 import "./commands/ColorPalette.commands.js";
 import "./commands/ColorPicker.commands.js";
+import "./commands/DatePicker.commands.js";
 import "./commands/Menu.commands.js";
+import "./commands/SegmentedButton.commands.js";
 
 type SimulationDevices = "phone"
 
@@ -61,6 +64,20 @@ declare global {
 			ui5ColorPickerUpdateInput(name: string, value: string): Chainable<void>
 			ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: {r: string, g: string, b: string, a: string}): Chainable<void>
 			ui5ColorPaletteNavigateAndCheckSelectedColor(colorPalette: string, startIndex: number, key: string, expectedValue: string): Chainable<void>
+			ui5DatePickerGetInnerInput(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetPopoverDate(timestamp: number): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetDisplayedDay(index: number): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetFirstDisplayedDate(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetFirstDisplayedYear(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetDisplayedMonth(index: number): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetDisplayedYear(index: number): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetNextButton(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetPreviousButton(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetMonthButton(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetYearButton(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerValueHelpIconPress(): Chainable<void>
+			ui5SegmentedButtonItemToggleSelect(deselect?: boolean): Chainable<void>
+			ui5SegmentedButtonFocusFirstItem(): Chainable<void>
 		}
 	}
 }

package/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

package/cypress/support/component.ts

@@ -1,3 +1,36 @@
-import "@ui5/webcomponents-tools/components-package/cypress/support/component.js";
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
 
-import "./commands.js";
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+import { mount } from '@ui5/cypress-ct-ui5-webc'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)

package/cypress/tsconfig.json

@@ -4,7 +4,6 @@
 		"./**/*"
 	],
 	"compilerOptions": {
-		"types": ["@ui5/webcomponents-tools"],
 		"composite": true,
 		"tsBuildInfoFile": "dist/.tsbuildinfobuild",
 		"module": "NodeNext",

package/cypress.config.js

@@ -1,10 +1,15 @@
-import cypressConfig from "@ui5/webcomponents-tools/components-package/cypress.config.js";
-import path from "path";
-import { fileURLToPath } from "node:url";
+import cypressConfig from "@ui5/cypress-internal/cypress.config.js";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const suites = {
+	SUITE1: [
+		"**/specs/base/*.cy.{jsx,tsx}",
+		"**/specs/[A-I]*.cy.{js,jsx,ts,tsx}",
+	],
+	SUITE2: [
+		"**/specs/[^A-I]*.cy.{js,jsx,ts,tsx}",
+	],
+};
 
-cypressConfig.component.supportFile = path.join(__dirname, "cypress/support/component.ts");
+cypressConfig.component.specPattern = suites[process.env.TEST_SUITE] || ["**/specs/**/*.cy.{js,ts,jsx,tsx}"];
 
 export default cypressConfig;