@ui5/webcomponents 2.9.0 → 2.9.1-rc.0

package/cypress/specs/TableSelections.cy.tsx

@@ -180,10 +180,18 @@ function checkSelection(expectedSelected: string) {
 	});
 }
 
+function checkSelectionChangeSpy(expectedCalls: number) {
+	cy.get("@selectionChangeSpy").should("have.callCount", expectedCalls);
+}
+
 Object.entries(testConfig).forEach(([mode, testConfigEntry]) => {
 	describe(`Mode - ${mode}`, () => {
 		beforeEach(() => {
 			mountTestpage(testConfigEntry.config.mode);
+			cy.get("#selection").as("selection");
+			cy.get("@selection").then($selection => {
+				$selection.get(0)?.addEventListener("change", cy.stub().as("selectionChangeSpy"));
+			});
 		});
 
 		it("Correct boxes are shown", () => {
@@ -202,58 +210,86 @@ Object.entries(testConfig).forEach(([mode, testConfigEntry]) => {
 			cy.get("@row0").realClick({ position: "left" });
 			cy.get("@row0").realPress("Space");
 			checkSelection(testConfigEntry.cases.SPACE.space_0);
+			checkSelectionChangeSpy(1);
 
 			cy.get("@row4").realClick();
 			cy.get("@row4").realPress("Space");
 			checkSelection(testConfigEntry.cases.SPACE.space_4);
+			checkSelectionChangeSpy(2);
 		});
 
 		it("select row via arrows (radio focus)", () => {
 			cy.get("@row0").shadow().find("#selection-component").realClick();
 			checkSelection(testConfigEntry.cases.ARROWS_BOX.arrow_initial);
+			checkSelectionChangeSpy(1);
 
 			cy.realPress("ArrowDown");
 			checkSelection(testConfigEntry.cases.ARROWS_BOX.arrow_down);
+			let callCount = mode === "Single" ? 2 : 1;
+			checkSelectionChangeSpy(callCount);
 
 			cy.realPress("ArrowUp");
 			checkSelection(testConfigEntry.cases.ARROWS_BOX.arrow_up);
+			callCount = mode === "Single" ? 3 : 1;
+			checkSelectionChangeSpy(callCount);
 		});
 
 		it("select row via mouse", () => {
 			cy.get("@row0").shadow().find("#selection-component").realClick();
 			checkSelection(testConfigEntry.cases.MOUSE.mouse_0);
+			checkSelectionChangeSpy(1);
 
 			cy.get("@row4").shadow().find("#selection-component").realClick();
 			checkSelection(testConfigEntry.cases.MOUSE.mouse_4);
+			checkSelectionChangeSpy(2);
 		});
 
 		it("range selection with mouse", () => {
 			cy.get("@row0").shadow().find("#selection-component").realClick();
 			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_initial);
+			checkSelectionChangeSpy(1);
 
-			// Need to simulate keydown with SHIFT key to set range selection flag shiftKeyPressed
-			// Cypress does not trigger keydown when just calling realClick with shiftKey: true
-			// That is why selection of the row is not supressed, and we end up with 0 4 1 2 3
-			cy.get("@row4").trigger("keydown", { bubbles: true, key: "Shift", shiftKey: true });
 			cy.get("@row4").shadow().find("#selection-component").realClick({ shiftKey: true });
 			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_final);
+			checkSelectionChangeSpy(2);
 
-			cy.get("@row4").trigger("keydown", { bubbles: true, key: "Shift", shiftKey: true });
-			cy.get("@row0").shadow().find("#selection-component").realClick();
+			cy.get("@row0").shadow().find("#selection-component").realClick({ shiftKey: true });
+			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_edge);
+			let callCount = mode === "Single" ? 3 : 2;
+			checkSelectionChangeSpy(callCount);
+		});
+
+		it("range selection with mouse with SHIFT constantly pressed", () => {
+			cy.get("@row0").shadow().find("#selection-component").realClick({ shiftKey: true });
+			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_initial);
+			checkSelectionChangeSpy(1);
+
+			cy.get("@row4").shadow().find("#selection-component").realClick({ shiftKey: true });
+			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_final);
+			checkSelectionChangeSpy(2);
+
+			cy.get("@row0").shadow().find("#selection-component").realClick({ shiftKey: true });
 			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_edge);
+			let callCount = mode === "Single" ? 3 : 2;
+			checkSelectionChangeSpy(callCount);
 		});
 
 		it("range selection with keyboard", () => {
 			cy.get("@row0").realClick({ position: "center" });
 			cy.get("@row0").realPress("Space");
 			checkSelection(testConfigEntry.cases.RANGE_KEYBOARD.initial);
+			checkSelectionChangeSpy(1);
 
 			cy.realPress(["Shift", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowUp", "ArrowUp"]);
 			checkSelection(testConfigEntry.cases.RANGE_KEYBOARD.block_1);
+			let callCount = mode === "Single" ? 1 : 6;
+			checkSelectionChangeSpy(callCount);
 
 			cy.realPress(["ArrowDown", "ArrowDown", "Space"]);
 			cy.realPress(["Shift", "ArrowDown"]);
 			checkSelection(testConfigEntry.cases.RANGE_KEYBOARD.block_2);
+			callCount = mode === "Single" ? 2 : 8;
+			checkSelectionChangeSpy(callCount);
 		});
 	});
 });

package/cypress/specs/TextArea.cy.tsx

@@ -182,7 +182,7 @@ describe("TextArea general interaction", () => {
 
 	describe("when enabled", () => {
 		it("shows value state message", () => {
-			cy.mount(<TextArea value-state="Negative"></TextArea>);
+			cy.mount(<TextArea valueState="Negative"></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -201,7 +201,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("does not show value state msg when valueState='None'", () => {
-			cy.mount(<TextArea value-state="None"></TextArea>);
+			cy.mount(<TextArea valueState="None"></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -219,7 +219,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("Should not open value state message when textarea is in readonly state", () => {
-			cy.mount(<TextArea readonly value-state="Negative"></TextArea>);
+			cy.mount(<TextArea readonly valueState="Negative"></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");

package/cypress/specs/Toolbar.cy.tsx

@@ -178,7 +178,7 @@ describe("Accessibility", () => {
 				<ToolbarButton text="Button 1"></ToolbarButton>
 				<ToolbarButton text="Button 2"></ToolbarButton>
 				<ToolbarButton text="Button 3"></ToolbarButton>
-				<ToolbarSelect accessible-name="Select">
+				<ToolbarSelect accessibleName="Select">
 					<ToolbarSelectOption>1</ToolbarSelectOption>
 					<ToolbarSelectOption>2</ToolbarSelectOption>
 					<ToolbarSelectOption>3</ToolbarSelectOption>

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

@@ -15,6 +15,7 @@ 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(() => {
@@ -83,6 +84,9 @@ describe("Event bubbling", () => {
 
 		cy.get("@dialog").invoke("attr", "open", true);
 
+		cy.get<Dialog>("@dialog")
+			.ui5DialogOpened()
+
 		// act - toggle Input suggestions
 		cy.get("@input")
 			.realClick();
@@ -92,6 +96,11 @@ describe("Event bubbling", () => {
 
 		cy.realType("a");
 
+		cy.get("@input")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverOpened();
+
 		cy.get("@input")
 			.find("[ui5-suggestion-item]")
 			.eq(1)
@@ -141,7 +150,7 @@ describe("Event bubbling", () => {
 					</Select>
 
 					<Button id="btnOpen">Open Menu</Button>
-					<Menu id="myMenu" header-text="Menu" opener="btnOpen">
+					<Menu id="myMenu" headerText="Menu" opener="btnOpen">
 						<MenuItem text="New File"></MenuItem>
 						<MenuItem text="New Folder"></MenuItem>
 					</Menu>

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

@@ -0,0 +1,16 @@
+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/Popover.commands.ts

@@ -0,0 +1,16 @@
+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

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

package/cypress/support/commands/utils/popup-open.ts

@@ -0,0 +1,19 @@
+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");
+};
+
+export {
+	isPopupOpen
+}

package/cypress/support/commands.ts

@@ -44,6 +44,9 @@ 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";
@@ -64,7 +67,7 @@ declare global {
 			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>
+			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>>

package/cypress/support/component.ts

@@ -16,21 +16,5 @@
 // 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

@@ -1,13 +1,18 @@
 {
-	"extends": "@ui5/webcomponents-tools/tsconfig.json",
 	"include": [
 		"./**/*"
 	],
 	"compilerOptions": {
 		"composite": true,
-		"tsBuildInfoFile": "dist/.tsbuildinfobuild",
+		"jsx": "react-jsx",
+		"jsxImportSource": "@ui5/webcomponents-base",
 		"module": "NodeNext",
 		"moduleResolution": "nodenext",
+		"types": [
+			"cypress",
+			"cypress-real-events",
+			"cypress-axe",
+		],
 		"paths": {
 			"@ui5/webcomponents-base/dist/*": [
 				"../../base/src/*"