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

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

@@ -1,301 +0,0 @@
-import "../../../src/features/InputSuggestions.js";
-import Dialog from "../../../src/Dialog.js";
-import Input from "../../../src/Input.js";
-import SuggestionItem from "../../../src/SuggestionItem.js";
-import MessageStrip from "../../../src/MessageStrip.js";
-import Panel from "../../../src/Panel.js";
-import Label from "../../../src/Label.js";
-import Select from "../../../src/Select.js";
-import Option from "../../../src/Option.js";
-import Button from "../../../src/Button.js";
-import MenuItem from "../../../src/MenuItem.js";
-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";
-import type ResponsivePopover from "../../../src/ResponsivePopover.js";
-
-describe("Event bubbling", () => {
-	before(() => {
-		cy.wrap({ setAnimationMode })
-			.invoke("setAnimationMode", AnimationMode.None);
-	})
-
-	it("test bubbling events", () => {
-		cy.mount(
-			<div id="app">
-				<Dialog id="myDialog" headerText="Dialog">
-					<Input id="myInput" showSuggestions={true}>
-						<SuggestionItem text="Cozy"></SuggestionItem>
-						<SuggestionItem text="Compact"></SuggestionItem>
-						<SuggestionItem text="Condensed"></SuggestionItem>
-					</Input>
-
-					<MessageStrip id="myMsgStrip">(Information) with default icon and close button:</MessageStrip>
-
-					<Panel id="panel" headerText="Panel">
-						<Label>
-							Lorem ipsum dolor sit amet, tamquam invidunt cu sed, unum regione mel ea, quo ea alia novum. Ne qui illud zril
-							nostrum, vel ea sint dicant postea.
-						</Label>
-					</Panel>
-				</Dialog>
-			</div>
-		);
-
-		cy.get("#app")
-			.as("app");
-		cy.get("[ui5-dialog]")
-			.as("dialog");
-		cy.get("[ui5-panel]")
-			.as("panel");
-		cy.get("[ui5-message-strip]")
-			.as("messageStrip");
-		cy.get("[ui5-input]")
-			.as("input");
-
-		cy.get("@app")
-			.then(app => {
-				app.get(0).addEventListener("close", cy.stub().as("appClosed"));
-				app.get(0).addEventListener("toggle", cy.stub().as("appToggled"));
-			});
-
-		cy.get("@dialog")
-			.then(dialog => {
-				dialog.get(0).addEventListener("close", cy.stub().as("dialogClosed"));
-			});
-
-		cy.get("@input")
-			.then(input => {
-				input.get(0).addEventListener("close", cy.stub().as("inpClosed"));
-			});
-
-		cy.get("@messageStrip")
-			.then(messageStrip => {
-				messageStrip.get(0).addEventListener("close", cy.stub().as("msgClosed"));
-			});
-
-		cy.get("@panel")
-			.then(panel => {
-				panel.get(0).addEventListener("toggle", cy.stub().as("panelToggled"));
-			});
-
-		cy.get("@dialog").invoke("attr", "open", true);
-
-		cy.get<Dialog>("@dialog")
-			.ui5DialogOpened()
-
-		// act - toggle Input suggestions
-		cy.get("@input")
-			.realClick();
-
-		cy.get("@input")
-			.should("be.focused");
-
-		cy.realType("a");
-
-		cy.get("@input")
-			.shadow()
-			.find<ResponsivePopover>("[ui5-responsive-popover]")
-			.ui5ResponsivePopoverOpened();
-
-		cy.get("@input")
-			.find("[ui5-suggestion-item]")
-			.eq(1)
-			.realClick();
-
-		cy.get("@inpClosed")
-			.should("have.been.calledOnce");
-
-		// act - close MessageStrip
-		cy.get("@messageStrip")
-			.shadow()
-			.find(".ui5-message-strip-close-button")
-			.realClick();
-
-		// assert
-		// - the close event of the Dialog is not triggered because MessageStrip and Input do not bubble
-		cy.get("@inpClosed")
-			.should("have.been.calledOnce");
-		cy.get("@msgClosed")
-			.should("have.been.calledOnce");
-		cy.get("@dialogClosed")
-			.should("have.been.not.called");
-		cy.get("@appClosed")
-			.should("have.been.not.called");
-
-		// act - toggle Panel
-		cy.get("@panel")
-			.shadow()
-			.find(".ui5-panel-header")
-			.realClick();
-
-		// assert - the toggle event of the Panel bubbles: Panel -> App
-		cy.get("@panelToggled")
-			.should("have.been.calledOnce");
-		cy.get("@appToggled")
-			.should("have.been.calledOnce");
-	});
-
-	it("test non-bubbling events", () => {
-		cy.mount(
-			<div id="app">
-				<Dialog id="myDialog" headerText="Dialog">
-					<Select id="mySelect">
-						<Option>Hello</Option>
-						<Option>World</Option>
-						<Option>Hello</Option>
-					</Select>
-
-					<Button id="btnOpen">Open Menu</Button>
-					<Menu id="myMenu" headerText="Menu" opener="btnOpen">
-						<MenuItem text="New File"></MenuItem>
-						<MenuItem text="New Folder"></MenuItem>
-					</Menu>
-
-					<MultiComboBox id="myMCB">
-						<MultiComboBoxItem text="Cosy"></MultiComboBoxItem>
-						<MultiComboBoxItem selected text="Compact"></MultiComboBoxItem>
-					</MultiComboBox>
-				</Dialog>
-			</div>
-		);
-
-		cy.get("#app")
-			.as("app");
-
-		cy.get("[ui5-dialog]")
-			.as("dialog");
-
-		cy.get("[ui5-select]")
-			.as("select");
-
-		cy.get("[ui5-menu]")
-			.as("menu");
-
-		cy.get("[ui5-multi-combobox]")
-			.as("multiCombobox");
-
-		cy.get("[ui5-multi-combobox]")
-			.shadow()
-			.find(".inputIcon")
-			.as("multiComboboxIcon");
-
-		cy.get("@app")
-			.then(app => {
-				app.get(0).addEventListener("ui5-close", cy.stub().as("appClosed"));
-			});
-
-		cy.get("@dialog")
-			.then(dialog => {
-				dialog.get(0).addEventListener("ui5-close", cy.stub().as("dialogClosed"));
-			});
-
-		cy.get("@dialog")
-			.then(dialog => {
-				dialog.get(0).addEventListener("ui5-open", cy.stub().as("dialogOpened"));
-			});
-
-		cy.get("@select")
-			.then(select => {
-				select.get(0).addEventListener("ui5-close", cy.stub().as("selClosed"));
-			});
-
-		cy.get("@menu")
-			.then(menu => {
-				menu.get(0).addEventListener("ui5-close", cy.stub().as("menuClosed"));
-			});
-
-		cy.get("@multiCombobox")
-			.then(multiCombobox => {
-				multiCombobox.get(0).addEventListener("ui5-close", cy.stub().as("mcbClosed"));
-			});
-
-		cy.get("@multiCombobox")
-			.then(multiCombobox => {
-				multiCombobox.get(0).addEventListener("open", cy.stub().as("mcbOpened"));
-			});
-
-		cy.get("@dialog").invoke("attr", "open", true);
-
-		// act - open and close Select
-		cy.get("@select")
-			.realClick();
-
-		cy.get("@select")
-			.find("[ui5-option]")
-			.eq(1)
-			.realClick();
-
-		// act - open/close the  MultiComboBox
-		cy.get("@multiComboboxIcon")
-			.realClick();
-
-		cy.get("@multiCombobox")
-			.find("[ui5-mcb-item]")
-			.should("be.visible");
-
-		// assert - the open event of the MultiComboBox do not bubble
-		cy.get("@mcbOpened").should("have.been.calledOnce");
-		cy.get("@dialogOpened").should("have.been.calledOnce");
-
-		cy.get("@multiComboboxIcon")
-			.realClick();
-
-		// act - open/close Menu
-		cy.get("@menu")
-			.ui5MenuOpen();
-
-		cy.get("[ui5-menu-item]")
-			.first()
-			.ui5MenuItemClick();
-
-		// assert - the close events of the Select and MultiComboBox do not bubble
-		cy.get("@selClosed")
-			.should("have.been.calledOnce");
-		cy.get("@mcbClosed")
-			.should("have.been.calledOnce");
-		cy.get("@menuClosed")
-			.should("have.been.calledOnce");
-		cy.get("@dialogClosed")
-			.should("not.be.called");
-		cy.get("@appClosed")
-			.should("not.be.called");
-	});
-
-	it("test cancelable events", () => {
-		cy.mount(
-			<div id="app">
-				<CheckBox id="cb"></CheckBox>
-				<CheckBox id="cb2"></CheckBox>
-			</div>
-		);
-
-		cy.get("#cb")
-			.as("checkbox");
-		cy.get("#cb2")
-			.as("checkbox2");
-
-		cy.get("@checkbox")
-			.then(checkbox => {
-				checkbox.get(0).addEventListener("ui5-change", e => e.preventDefault());
-			});
-
-		// act
-		cy.get("@checkbox")
-			.realClick();
-
-		cy.get("@checkbox2")
-			.realClick();
-
-		// assert
-		cy.get("@checkbox")
-			.invoke("prop", "checked")
-			.should("be.equal", false);
-		cy.get("@checkbox2")
-			.invoke("prop", "checked")
-			.should("be.equal", true);
-	});
-});

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

@@ -1,58 +0,0 @@
-import "./css/redfish.custom.theme.css";
-import getEffectiveIconCollection from "@ui5/webcomponents-base/dist/asset-registries/util/getIconCollectionByTheme.js";
-import { setTheme, isLegacyThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
-import "../../../src/Assets.js";
-import Icon from "../../../src/Icon.js";
-import home from "@ui5/webcomponents-icons/dist/home.js";
-
-describe("Icon collection", () => {
-	before(() => {
-		cy.wrap({ setTheme })
-			.invoke("setTheme", "sap_fiori_3_dark");
-	});
-
-	it("tests the icon collection in built-in themes", () => {
-		cy.mount(<Icon name={home}></Icon>);
-
-		cy.wrap({ getEffectiveIconCollection })
-			.invoke("getEffectiveIconCollection")
-			.should("equal", "SAP-icons-v4");
-
-		cy.wrap({ isLegacyThemeFamily })
-			.invoke("isLegacyThemeFamily")
-			.should("be.true");
-
-		// act
-		cy.wrap({ setTheme })
-			.invoke("setTheme", "sap_horizon");
-
-		// assert
-		cy.wrap({ getEffectiveIconCollection })
-			.invoke("getEffectiveIconCollection")
-			.should("equal", "SAP-icons-v5");
-
-		cy.wrap({ isLegacyThemeFamily })
-			.invoke("isLegacyThemeFamily")
-			.should("be.false");
-	});
-
-	it("tests the icon collection in built-in themes", () => {
-		cy.mount(<Icon name={home}></Icon>);
-
-		// act
-		cy.wrap({ setTheme })
-			.invoke("setTheme", "redfish");
-
-		// assert
-		// The 'SAP-icons-v5' collection is correctly used in 'redfish' - extending 'sap_horizon'
-		cy.wrap({ getEffectiveIconCollection })
-			.invoke("getEffectiveIconCollection")
-			.should("equal", "SAP-icons-v5");
-
-		// assert
-		// "The 'redfish' custom theme is not part of legacy theme family, as it's extending 'sap_horizon'.
-		cy.wrap({ isLegacyThemeFamily })
-			.invoke("isLegacyThemeFamily")
-			.should("be.false");
-	});
-});

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

@@ -1,38 +0,0 @@
-import Card from "../../../src/Card.js";
-import CardHeader from "../../../src/CardHeader.js";
-
-import { ignoreCustomElements, shouldIgnoreCustomElement } from "@ui5/webcomponents-base/dist/IgnoreCustomElements.js";
-
-ignoreCustomElements("app-");
-ignoreCustomElements("my-");
-
-describe("Ignore Custom Elements", () => {
-	it("tests shouldIgnoreCustomElement method", () => {
-		cy.mount(
-			<Card>
-				<CardHeader
-					slot="header"
-					subtitleText="4 of 10"
-					titleText="Product">
-				</CardHeader>
-
-				{/* @ts-expect-error */}
-				<app-trip-calendar class="myCard-trip-calendar"></app-trip-calendar>
-				{/* @ts-expect-error */}
-				<my-trip-calendar class="myCard-trip-calendar"></my-trip-calendar>
-			</Card>
-		);
-
-		cy.wrap({ shouldIgnoreCustomElement })
-			.invoke("shouldIgnoreCustomElement", "app-trip-calendar")
-			.should("be.true");
-
-		cy.wrap({ shouldIgnoreCustomElement })
-			.invoke("shouldIgnoreCustomElement", "my-trip-calendar")
-			.should("be.true");
-
-		cy.wrap({ shouldIgnoreCustomElement })
-			.invoke("shouldIgnoreCustomElement", "ui5-card-header")
-			.should("be.false");
-	});
-});

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

@@ -1,31 +0,0 @@
-import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
-import "../../../src/Button.js";
-
-describe("InvisibleMessage", () => {
-	it("Initial rendering", () => {
-		cy.get(".ui5-invisiblemessage-polite")
-			.should("exist");
-
-		cy.get(".ui5-invisiblemessage-assertive")
-			.should("exist");
-	});
-
-	it("String annoucement", () => {
-		cy.wrap({ announce })
-			.invoke("announce", "announcement", "Polite");
-		cy.wrap({ announce })
-			.invoke("announce", "announcement", "Assertive");
-
-		// assert
-		cy.get(".ui5-invisiblemessage-polite")
-			.should("contain", "announcement");
-		cy.get(".ui5-invisiblemessage-assertive")
-			.should("contain", "announcement");
-
-		// assert - announcement is cleared
-		cy.get(".ui5-invisiblemessage-polite")
-			.should("not.contain", "announcement");
-		cy.get(".ui5-invisiblemessage-assertive")
-			.should("not.contain", "announcement");
-	});
-});

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

@@ -1,64 +0,0 @@
-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";
-import SegmentedButtonItem from "../../../src/SegmentedButtonItem.js";
-import SegmentedButton from "../../../src/SegmentedButton.js";
-import Icon from "../../../src/Icon.js";
-
-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";
-
-describe("Default Tooltips", () => {
-	before(() => {
-		cy.wrap({ setEnableDefaultTooltips })
-			.invoke("setEnableDefaultTooltips", false);
-	})
-
-	it("tests navigation", () => {
-		cy.mount(
-			<>
-				<Icon id="ic" name={settings}></Icon>
-				<Button id="btn" icon={settings}></Button>
-				<RatingIndicator id="rt"></RatingIndicator>
-				<ToggleButton id="togglebtn" icon={settings}></ToggleButton>
-				<SegmentedButton id="segBtn">
-					<SegmentedButtonItem id="segBtnItem" icon={add}></SegmentedButtonItem>
-					<SegmentedButtonItem id="segBtnItem2" icon={settings}></SegmentedButtonItem>
-					<SegmentedButtonItem id="segBtnItem3" icon={activate}></SegmentedButtonItem>
-				</SegmentedButton>
-			</>
-		);
-
-		cy.get("#ic")
-			.shadow()
-			.find("title")
-			.should("not.exist");
-
-		cy.get("#btn")
-			.shadow()
-			.find(".ui5-button-icon")
-			.should("not.have.attr", "title");
-
-		cy.get("#togglebtn")
-			.shadow()
-			.find(".ui5-button-icon")
-			.should("not.have.attr", "title");
-
-		cy.get("#rt")
-			.shadow()
-			.find(".ui5-rating-indicator-root")
-			.should("not.have.attr", "title");
-
-		cy.get("#segBtnItem")
-			.shadow()
-			.find(".ui5-segmented-button-item-root")
-			.should("not.have.attr", "title");
-
-		cy.get("#segBtnItem")
-			.shadow()
-			.find(".ui5-segmented-button-item-icon")
-			.should("not.have.attr", "title");
-	});
-});

package/cypress/specs/base/css/redfish.custom.theme.css

@@ -1,13 +0,0 @@
-/**
-* Copyright (c) 2012-2020 SAP SE or an SAP affiliate company. All rights reserved.
-*
-* Theming Engine 1.60.0
-* data:{"Path": "Base.baseLib.redfish.css_variables", "PathPattern": "/%frameworkId%/%libId%/%themeId%/%fileId%.css", "Extends": ["sap_horizon","sap_base_fiori","baseTheme"], "Tags": ["Horizon","LightColorScheme"], "Version": { "Build":"11.1.27.20210312160011", "Source": "11.1.27", "Engine": "1.60.0"}}
-*/
-.sapThemeMetaData-Base-baseLib{background-image: url('data:text/plain;utf-8,{"Path": "Base.baseLib.redfish.css_variables", "PathPattern": "/%frameworkId%/%libId%/%themeId%/%fileId%.css", "Extends": ["sap_horizon","sap_base_fiori","baseTheme"], "Tags": ["Horizon","LightColorScheme"], "Version": { "Build":"11.1.27.20210312160011", "Source": "11.1.27", "Engine": "1.60.0"}}');}
-:root {
-  --sapBrandColor: #f42015;
-  --sapBaseColor: #fff;
-  --sapBackgroundColor: #f7f7f7;
-  --sapTextColor: #000;
-}

package/cypress/support/commands/Calendar.commands.ts

@@ -1,21 +0,0 @@
-Cypress.Commands.add("ui5CalendarGetDay", (calendarSelector, timestamp) => {
-	cy.get(calendarSelector)
-		.as("calendar");
-	
-	cy.get("@calendar")
-		.shadow()
-		.find("[ui5-daypicker]")
-		.as("daypicker");
-	
-	return cy.get("@daypicker")
-			.shadow()
-			.find(`div[data-sap-timestamp=${timestamp}]`);
-});
-
-Cypress.Commands.add("ui5CalendarGetMonth", (calendarSelector, timestamp) => {
-	return cy.get(calendarSelector)
-		.shadow()
-		.find("[ui5-monthpicker]")
-		.shadow()
-		.find(`div[data-sap-timestamp=${timestamp}]`);
-});

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

@@ -1,86 +0,0 @@
-Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true }, (subject, colorPaletteItem, values) => {
-	cy.get(subject)
-		.as("colorPalette");
-
-	cy.get("ui5-color-palette")
-		.shadow()
-		.find(".ui5-cp-more-colors")
-		.as("moreColors");
-
-	cy.get("@colorPalette")
-		.find(colorPaletteItem)
-		.realClick();
-
-	cy.get("@moreColors")
-		.realClick();
-
-	cy.get("@colorPalette")
-		.shadow()
-		.find("[ui5-color-picker]")
-		.as("colorPicker");
-
-	cy.get("@colorPicker")
-		.shadow()
-		.find("#red")
-		.as("redColor");
-
-	cy.get("@colorPicker")
-		.shadow()
-		.find("#green")
-		.as("greenColor");
-
-	cy.get("@colorPicker")
-		.shadow()
-		.find("#blue")
-		.as("blueColor");
-
-	cy.get("@colorPicker")
-		.shadow()
-		.find("#alpha")
-		.as("alpha");
-
-	cy.get("@colorPalette")
-		.shadow()
-		.find("[ui5-dialog]")
-		.find("ui5-button[design=Emphasized]") // The OK button is Emphasized (the Cancel button is Transparent)
-		.as("okButton");
-
-	cy.get("@redColor")
-		.should("have.attr", "value", values.r);
-
-	cy.get("@greenColor")
-		.should("have.attr", "value", values.g);
-
-	cy.get("@blueColor")
-		.should("have.attr", "value", values.b);
-
-	cy.get("@alpha")
-		.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)
-});
-
-Cypress.Commands.add("ui5ColorPaletteNavigateAndCheckSelectedColor", (subject: string, startIndex: number, key: string, expectedValue: string) => {
-	cy.get(subject)
-		.as("colorPalette");
-
-	cy.get("@colorPalette")
-		.find("[ui5-color-palette-item]")
-		.eq(startIndex)
-		.realClick();
-
-	// @ts-ignore
-	cy.realPress(key)
-		.realPress("Space");
-
-	cy.get("@colorPalette")
-		.find("ui5-color-palette-item[selected]")
-		.should("have.value", expectedValue);
-});

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

@@ -1,38 +0,0 @@
-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");
-});
-
-Cypress.Commands.add("ui5ColorPickerValidateInput", { prevSubject: true }, (subject, name, value) => {
-	cy.wrap(subject)
-		.as("colorPicker")
-		.should("be.visible");
-
-	cy.get("@colorPicker")
-		.shadow()
-		.find(name)
-		.as("input");
-
-	cy.get("@input")
-		.should("have.value", value);
-});