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

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

@@ -1,218 +0,0 @@
-Cypress.Commands.add("ui5DatePickerGetInnerInput", { prevSubject: true }, subject => {
-	cy.wrap(subject)
-		.as("datePicker");
-
-	cy.get("@datePicker")
-		.shadow()
-		.find("ui5-datetime-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/DateTimePicker.commands.ts

@@ -1,105 +0,0 @@
-import Button from "../../../src/Button.js";
-import type DateTimePicker from "../../../src/DateTimePicker.js";
-import type ResponsivePopover from "../../../src/ResponsivePopover.js";
-
-Cypress.Commands.add("ui5DateTimePickerOpen", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
-	cy.wrap(subject).invoke("prop", "open", true);
-});
-
-Cypress.Commands.add("ui5DateTimePickerClose", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
-	cy.wrap(subject).invoke("prop", "open", false);
-});
-
-Cypress.Commands.add("ui5DateTimePickerGetPopover", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
-	return cy.wrap(subject)
-		.shadow()
-		.find<ResponsivePopover>("[ui5-responsive-popover]");
-});
-
-Cypress.Commands.add("ui5DateTimePickerExpectToBeOpen", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
-	cy.wrap(subject)
-		.should("have.prop", "open", true);
-
-	cy.wrap(subject)
-		.shadow()
-		.find<ResponsivePopover>("[ui5-responsive-popover]")
-		.ui5ResponsivePopoverOpened();
-});
-
-Cypress.Commands.add("ui5DateTimePickerExpectToBeClosed", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
-	cy.wrap(subject)
-		.should("have.prop", "open", false);
-
-	cy.wrap(subject)
-		.shadow()
-		.find<ResponsivePopover>("[ui5-responsive-popover]")
-		.ui5ResponsivePopoverClosed();
-});
-
-Cypress.Commands.add("ui5DateTimePickerGetSubmitButton", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
-	return cy.wrap(subject)
-		.shadow()
-		.find("[ui5-responsive-popover]")
-		.find<Button>("#ok");
-});
-
-Cypress.Commands.add("ui5DateTimePickerGetCancelButton", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
-	return cy.wrap(subject)
-		.shadow()
-		.find("[ui5-responsive-popover]")
-		.find<Button>("#cancel");
-});
-
-Cypress.Commands.add("ui5DateTimePickerTimeSelectionClocksCount", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
-	return cy.wrap(subject)
-		.shadow()
-		.find("[ui5-responsive-popover]")
-		.find("[ui5-time-selection-clocks]")
-		.shadow()
-		.find("[ui5-time-picker-clock]")
-		.its("length");
-});
-
-Cypress.Commands.add("ui5DateTimePickerPeriodSegmentedButtonCount", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
-	return cy.wrap(subject)
-		.shadow()
-		.find("[ui5-responsive-popover]")
-		.find("[ui5-time-selection-clocks]")
-		.shadow()
-		.find("[ui5-segmented-button]")
-		.its("length");
-});
-
-declare global {
-	namespace Cypress {
-		interface Chainable {
-			ui5DateTimePickerOpen(
-				this: Chainable<JQuery<DateTimePicker>>,
-			): Chainable<void>;
-			ui5DateTimePickerExpectToBeOpen(
-				this: Chainable<JQuery<DateTimePicker>>,
-			): Chainable<void>;
-			ui5DateTimePickerClose(
-				this: Chainable<JQuery<DateTimePicker>>
-			): Chainable<void>;
-			ui5DateTimePickerExpectToBeClosed(
-				this: Chainable<JQuery<DateTimePicker>>,
-			): Chainable<void>;
-			ui5DateTimePickerGetPopover(
-				this: Chainable<JQuery<DateTimePicker>>
-			): Chainable<JQuery<ResponsivePopover>>;
-			ui5DateTimePickerGetSubmitButton(
-				this: Chainable<JQuery<DateTimePicker>>
-			): Chainable<JQuery<Button>>;
-			ui5DateTimePickerGetCancelButton(
-				this: Chainable<JQuery<DateTimePicker>>
-			): Chainable<JQuery<Button>>;
-			ui5DateTimePickerTimeSelectionClocksCount(
-				this: Chainable<JQuery<DateTimePicker>>
-			): Chainable<number>;
-			ui5DateTimePickerPeriodSegmentedButtonCount(
-				this: Chainable<JQuery<DateTimePicker>>
-			): Chainable<number>;
-		}
-	}
-}

package/cypress/support/commands/Dialog.commands.ts

@@ -1,16 +0,0 @@
-import type Dialog from "../../../src/Dialog.js";
-import { isPopupOpen } from "./utils/popup-open.js";
-
-Cypress.Commands.add("ui5DialogOpened", { prevSubject: true }, (subject: JQuery<Dialog>) => {
-	isPopupOpen(subject);
-});
-
-declare global {
-	namespace Cypress {
-		interface Chainable {
-			ui5DialogOpened(
-				this: Chainable<JQuery<Dialog>>
-			): Chainable<void>;
-		}
-	}
-}

package/cypress/support/commands/Menu.commands.ts

@@ -1,52 +0,0 @@
-Cypress.Commands.add("ui5MenuOpen", { prevSubject: true }, (prevSubject, options) => {
-	cy.wrap(prevSubject)
-		.as("menu")
-		.then($menu => {
-			if (options?.opener) {
-				cy.wrap($menu)
-					.invoke("attr", "opener", options.opener);
-			}
-
-			cy.wrap($menu)
-				.invoke("attr", "open", true);
-		});
-
-	cy.get("@menu")
-		.ui5MenuOpened();
-});
-
-Cypress.Commands.add("ui5MenuOpened", { prevSubject: true }, subject => {
-	cy.wrap(subject)
-		.as("menu");
-
-	cy.get("@menu")
-		.should("have.attr", "open");
-
-	cy.get("@menu")
-		.shadow()
-		.find("[ui5-responsive-popover]")
-		.should($rp => {
-			expect($rp.is(":popover-open")).to.be.true;
-			expect($rp.width()).to.not.equal(0);
-			expect($rp.height()).to.not.equal(0);
-		})
-		.and("have.attr", "open");
-});
-
-Cypress.Commands.add("ui5MenuItemClick", { prevSubject: true }, subject => {
-	cy.get(subject)
-		.as("item")
-		.should("be.visible");
-
-	cy.get("@item")
-		.realClick();
-});
-
-Cypress.Commands.add("ui5MenuItemPress", { prevSubject: true }, (subject, key) => {
-	cy.get(subject)
-		.should("have.focused")
-		.and("be.visible");
-
-	// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-	cy.realPress(key);
-});

package/cypress/support/commands/Popover.commands.ts

@@ -1,16 +0,0 @@
-import type Popover from "../../../src/Popover.js";
-import { isPopupOpen } from "./utils/popup-open.js";
-
-Cypress.Commands.add("ui5PopoverOpened", { prevSubject: true }, (subject: JQuery<Popover>) => {
-	isPopupOpen(subject);
-});
-
-declare global {
-	namespace Cypress {
-		interface Chainable {
-			ui5PopoverOpened(
-				this: Chainable<JQuery<Popover>>
-			): Chainable<void>;
-		}
-	}
-}

package/cypress/support/commands/ResponsivePopover.commands.ts

@@ -1,42 +0,0 @@
-import type ResponsivePopover from "../../../src/ResponsivePopover.js";
-import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
-import { isPopupOpen, isPopupClosed } from "./utils/popup-open.js";
-
-Cypress.Commands.add("ui5ResponsivePopoverOpened", { prevSubject: true }, (subject: JQuery<ResponsivePopover>) => {
-	if (isPhone()) {
-		cy.wrap(subject)
-			.shadow()
-			.find("[ui5-dialog]")
-			.then($dialog => {
-				isPopupOpen($dialog);
-			});
-	} else {
-		isPopupOpen(subject);
-	}
-});
-
-Cypress.Commands.add("ui5ResponsivePopoverClosed", { prevSubject: true }, (subject: JQuery<ResponsivePopover>) => {
-	if (isPhone()) {
-		cy.wrap(subject)
-			.shadow()
-			.find("[ui5-dialog]")
-			.then($dialog => {
-				isPopupClosed($dialog);
-			});
-	} else {
-		isPopupClosed(subject);
-	}
-});
-
-declare global {
-	namespace Cypress {
-		interface Chainable {
-			ui5ResponsivePopoverOpened(
-				this: Chainable<JQuery<ResponsivePopover>>
-			): Chainable<void>;
-			ui5ResponsivePopoverClosed(
-				this: Chainable<JQuery<ResponsivePopover>>
-			): Chainable<void>;
-		}
-	}
-}

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

@@ -1,32 +0,0 @@
-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/utils/popup-open.ts

@@ -1,35 +0,0 @@
-const isPopupOpen = (subject: any) => {
-	cy.wrap(subject)
-		.as("popup");
-
-	cy.get("@popup")
-		.should("have.attr", "open");
-
-	cy.get("@popup")
-		.should($rp => {
-			expect($rp.is(":popover-open")).to.be.true;
-			expect($rp.width()).to.not.equal(0);
-			expect($rp.height()).to.not.equal(0);
-		})
-		.and("have.attr", "open");
-};
-
-const isPopupClosed = (subject: any) => {
-	cy.wrap(subject)
-		.as("popup");
-
-	cy.get("@popup")
-		.should("not.have.attr", "open");
-
-	cy.get("@popup")
-		.should($rp => {
-			expect($rp.is(":popover-open")).to.be.false;
-			expect($rp).not.be.visible;
-		})
-		.and("not.have.attr", "open");
-};
-
-export {
-	isPopupOpen,
-	isPopupClosed
-}

package/cypress/support/commands.ts

@@ -1,113 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
-
-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/DateTimePicker.commands.js";
-import "./commands/Dialog.commands.ts";
-import "./commands/Popover.commands.ts";
-import "./commands/ResponsivePopover.commands.js";
-import "./commands/DatePicker.commands.js";
-import "./commands/Menu.commands.js";
-import "./commands/SegmentedButton.commands.js";
-
-type SimulationDevices = "phone"
-
-declare global {
-	namespace Cypress {
-		interface Chainable {
-			ui5SimulateDevice(device?: SimulationDevices): Chainable<void>
-			ui5MenuOpen(options?: { opener?: string }): Chainable<void>
-			ui5MenuOpened(): Chainable<void>
-			ui5MenuItemClick(): Chainable<void>
-			ui5DOMRef(): Chainable<void>
-			ui5MenuItemPress(key: any): Chainable<void>
-			ui5CalendarGetDay(calendarSelector: string, timestamp: string): Chainable<JQuery<HTMLElement>>
-			ui5CalendarGetMonth(calendarSelector: string, timestamp: string): Chainable<JQuery<HTMLElement>>
-			ui5ColorPickerToggleColorMode(): Chainable<void>
-			ui5ColorPickerUpdateInput(name: string, value: string): Chainable<void>
-			ui5ColorPickerValidateInput(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>
-		}
-	}
-}
-
-const deviceFuncForStub: Record<SimulationDevices, keyof typeof internals> = {
-	phone: "_isPhone",
-};
-
-const deviceName: Record<SimulationDevices, Cypress.ViewportPreset> = {
-	phone: "iphone-x",
-};
-
-Cypress.Commands.add("ui5SimulateDevice", (device: SimulationDevices = "phone") => {
-	cy.stub(internals, deviceFuncForStub[device])
-		.callsFake(() => {
-			return true;
-		});
-
-	if (device === "phone") {
-		cy.stub(internals, "windows").value(false);
-	}
-
-	cy.viewport(deviceName[device]);
-
-	cy.wrap({ isPhone })
-		.invoke("isPhone")
-		.should("be.true");
-});

package/cypress/support/component-index.html

@@ -1,12 +0,0 @@
-<!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,20 +0,0 @@
-// ***********************************************************
-// 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 using ES2015 syntax:
-import './commands'
-
-// Example use:
-// cy.mount(MyComponent)