@ui5/webcomponents 2.7.0-rc.2 → 2.8.0-rc.0

package/cypress/specs/ColorPalette.cy.tsx

@@ -0,0 +1,213 @@
+import ColorPalette from "../../src/ColorPalette.js";
+import ColorPaletteItem from "../../src/ColorPaletteItem.js";
+
+function ColorPaletteSample() {
+	return (
+		<ColorPalette id="cp1">
+			<ColorPaletteItem value="darkblue"></ColorPaletteItem>
+			<ColorPaletteItem value="pink"></ColorPaletteItem>
+			<ColorPaletteItem value="#444444"></ColorPaletteItem>
+			<ColorPaletteItem value="rgb(0,200,0)"></ColorPaletteItem>
+			<ColorPaletteItem value="green"></ColorPaletteItem>
+			<ColorPaletteItem value="darkred"></ColorPaletteItem>
+			<ColorPaletteItem value="yellow"></ColorPaletteItem>
+			<ColorPaletteItem value="blue"></ColorPaletteItem>
+			<ColorPaletteItem value="cyan"></ColorPaletteItem>
+			<ColorPaletteItem value="orange"></ColorPaletteItem>
+			<ColorPaletteItem value="#5480e7"></ColorPaletteItem>
+			<ColorPaletteItem value="#ff6699"></ColorPaletteItem>
+		</ColorPalette>
+	);
+}
+
+describe("Color Palette tests", () => {
+	it("internal color picker should have selected color set on open", () => {
+		cy.mount(
+			<ColorPalette showMoreColors={true} showRecentColors={true}>
+				<ColorPaletteItem id="named" value="red"></ColorPaletteItem>
+				<ColorPaletteItem id="rgba" value="rgba(0, 255, 0, 0.5)"></ColorPaletteItem>
+				<ColorPaletteItem id="rgb" value="rgb(0,0,255)"></ColorPaletteItem>
+				<ColorPaletteItem id="hex" value="#C0FFEE"></ColorPaletteItem>
+			</ColorPalette>
+		);
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#named", {
+				r: "255",
+				g: "0",
+				b: "0",
+				a: "1",
+			});
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#rgba", {
+				r: "0",
+				g: "255",
+				b: "0",
+				a: "0.5",
+			});
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#rgb", {
+				r: "0",
+				g: "0",
+				b: "255",
+				a: "1",
+			});
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#hex", {
+				r: "192",
+				g: "255",
+				b: "238",
+				a: "1",
+			});
+	});
+
+	it("Test if selecting element works", () => {
+		cy.mount(<ColorPaletteSample/>);
+
+		cy.get<ColorPalette>("#cp1")
+			.find("[ui5-color-palette-item]")
+			.first()
+			.realClick();
+
+		cy.get<ColorPalette>("#cp1")
+			.find("ui5-color-palette-item[selected]")
+			.should("have.value", "darkblue");
+	});
+
+	it("Test if keyboard navigation on elements works", () => {
+		cy.mount(<ColorPaletteSample/>);
+
+		cy.get<ColorPalette>("#cp1")
+			.find("[ui5-color-palette-item]")
+			.first()
+			.realClick();
+
+		cy.get<ColorPalette>("#cp1")
+			.find("ui5-color-palette-item[selected]")
+			.should("have.value", "darkblue")
+			.realPress("ArrowRight")
+			.realPress("Space");
+
+		cy.get<ColorPalette>("#cp1")
+			.find("ui5-color-palette-item[selected]")
+			.should("have.value", "pink");
+	});
+
+	it("Test if keyboard navigation on elements works with Arrow keys", () => {
+		cy.mount(<ColorPaletteSample/>);
+
+		cy.ui5ColorPaletteNavigateAndCheckSelectedColor("#cp1", 0, "ArrowRight", "pink");
+		cy.ui5ColorPaletteNavigateAndCheckSelectedColor("#cp1", 0, "ArrowLeft", "#ff6699");
+		cy.ui5ColorPaletteNavigateAndCheckSelectedColor("#cp1", 0, "ArrowUp", "orange");
+		cy.ui5ColorPaletteNavigateAndCheckSelectedColor("#cp1", 9, "ArrowDown", "darkblue");
+	});
+
+	it("Tests show-recent-colors functionality", () => {
+		cy.mount(
+			<ColorPalette id="cp4" showMoreColors={true} showRecentColors={true}>
+				<ColorPaletteItem value="pink"></ColorPaletteItem>
+				<ColorPaletteItem value="darkblue"></ColorPaletteItem>
+				<ColorPaletteItem value="#444444"></ColorPaletteItem>
+				<ColorPaletteItem value="rgb(0,200,0)"></ColorPaletteItem>
+				<ColorPaletteItem value="green"></ColorPaletteItem>
+				<ColorPaletteItem value="darkred"></ColorPaletteItem>
+				<ColorPaletteItem value="yellow"></ColorPaletteItem>
+				<ColorPaletteItem value="blue"></ColorPaletteItem>
+				<ColorPaletteItem value="cyan"></ColorPaletteItem>
+				<ColorPaletteItem value="orange"></ColorPaletteItem>
+				<ColorPaletteItem value="#5480e7"></ColorPaletteItem>
+				<ColorPaletteItem value="#ff6699"></ColorPaletteItem>
+			</ColorPalette>
+		);
+
+		// click on first 5 color palette items
+		cy.get("#cp4")
+			.find("[ui5-color-palette-item]")
+			.then(items => {
+				for (let i = 0; i < 5; i++) {
+					cy.wrap(items[i]).realClick();
+				}
+			});
+
+		// check recent colors
+		cy.get("#cp4")
+			.shadow()
+			.find(".ui5-cp-recent-colors-wrapper [ui5-color-palette-item]")
+			.should("have.length", 5)
+			.then(items => {
+				cy.wrap(items[0]).should("have.value", "green");
+				cy.wrap(items[1]).should("have.value", "rgb(0,200,0)");
+				cy.wrap(items[2]).should("have.value", "#444444");
+				cy.wrap(items[3]).should("have.value", "darkblue");
+				cy.wrap(items[4]).should("have.value", "pink");
+			});
+	});
+
+	it("Tests if only one item is selected at a time in the color palette", () => {
+		cy.mount(
+			<ColorPalette id="cp1SelectedTest">
+				<ColorPaletteItem value="darkblue" selected={true}></ColorPaletteItem>
+				<ColorPaletteItem value="pink" selected={true}></ColorPaletteItem>
+				<ColorPaletteItem value="#444444" selected={true}></ColorPaletteItem>
+				<ColorPaletteItem value="rgb(0,200,0)" selected={true}></ColorPaletteItem>
+				<ColorPaletteItem value="green"></ColorPaletteItem>
+				<ColorPaletteItem value="darkred"></ColorPaletteItem>
+				<ColorPaletteItem value="yellow"></ColorPaletteItem>
+				<ColorPaletteItem value="blue"></ColorPaletteItem>
+				<ColorPaletteItem value="cyan"></ColorPaletteItem>
+				<ColorPaletteItem value="orange"></ColorPaletteItem>
+				<ColorPaletteItem value="#5480e7"></ColorPaletteItem>
+				<ColorPaletteItem value="#ff6699"></ColorPaletteItem>
+			</ColorPalette>
+		);
+
+		cy.get("#cp1SelectedTest")
+			.find("[ui5-color-palette-item]")
+			.eq(0)
+			.realClick();
+
+		cy.get("#cp1SelectedTest")
+			.find("[ui5-color-palette-item]")
+			.eq(1)
+			.realClick();
+
+		cy.get("#cp1SelectedTest")
+			.find("[ui5-color-palette-item]")
+			.eq(0)
+			.should("not.have.attr", "selected");
+
+		cy.get("#cp1SelectedTest")
+			.find("[ui5-color-palette-item]")
+			.eq(1)
+			.should("have.attr", "selected");
+	});
+
+	it("Tests if clicking on selected item, does not deselect it", () => {
+		cy.mount(
+			<ColorPalette id="cp1SelectedTest">
+				<ColorPaletteItem value="darkblue" selected={true}></ColorPaletteItem>
+				<ColorPaletteItem value="pink" selected={true}></ColorPaletteItem>
+				<ColorPaletteItem value="#444444" selected={true}></ColorPaletteItem>
+				<ColorPaletteItem value="rgb(0,200,0)" selected={true}></ColorPaletteItem>
+				<ColorPaletteItem value="green"></ColorPaletteItem>
+				<ColorPaletteItem value="darkred"></ColorPaletteItem>
+				<ColorPaletteItem value="yellow"></ColorPaletteItem>
+				<ColorPaletteItem value="blue"></ColorPaletteItem>
+				<ColorPaletteItem value="cyan"></ColorPaletteItem>
+				<ColorPaletteItem value="orange"></ColorPaletteItem>
+				<ColorPaletteItem value="#5480e7"></ColorPaletteItem>
+				<ColorPaletteItem value="#ff6699"></ColorPaletteItem>
+			</ColorPalette>
+		);
+
+		cy.get("#cp1SelectedTest")
+			.find("[ui5-color-palette-item]")
+			.first()
+			.realClick()
+			.realClick()
+			.should("have.attr", "selected");
+	});
+});

package/cypress/specs/{ColorPicker.cy.ts → ColorPicker.cy.tsx}

@@ -1,10 +1,8 @@
-import { html } from "lit";
-import "../../src/ColorPicker.js";
-import type ColorPicker from "../../src/ColorPicker.js";
+import ColorPicker from "../../src/ColorPicker.js";
 
 describe("Color Picker tests", () => {
 	it("should not display color channel inputs and alpha slider in simplified mode", () => {
-		cy.mount(html`<ui5-color-picker simplified></ui5-color-picker>`);
+		cy.mount(<ColorPicker simplified={true}></ColorPicker>);
 
 		cy.get("ui5-color-picker")
 			.as("colorPicker");
@@ -26,7 +24,7 @@ describe("Color Picker tests", () => {
 	});
 
 	it("should toggle display to RGB or HSL when button is selected", () => {
-		cy.mount(html`<ui5-color-picker value="rgba(112, 178, 225, 1)"></ui5-color-picker>`);
+		cy.mount(<ColorPicker value="rgba(112, 178, 225, 1)"></ColorPicker>);
 
 		cy.get("ui5-color-picker")
 			.as("colorPicker");
@@ -51,7 +49,7 @@ describe("Color Picker tests", () => {
 	});
 
 	it("should update value when hue is changed via the input field", () => {
-		cy.mount(html`<ui5-color-picker value="rgba(112, 178, 225, 1)"></ui5-color-picker>`);
+		cy.mount(<ColorPicker value="rgba(112, 178, 225, 1)"></ColorPicker>);
 
 		cy.get("ui5-color-picker")
 			.as("colorPicker");
@@ -67,7 +65,7 @@ describe("Color Picker tests", () => {
 	});
 
 	it("should update value when saturation is changed via the input field", () => {
-		cy.mount(html`<ui5-color-picker value="rgba(112, 225, 131, 1)"></ui5-color-picker>`);
+		cy.mount(<ColorPicker value="rgba(112, 225, 131, 1)"></ColorPicker>);
 
 		cy.get("ui5-color-picker")
 			.as("colorPicker");
@@ -83,7 +81,7 @@ describe("Color Picker tests", () => {
 	});
 
 	it("should update value when light is changed via the input field", () => {
-		cy.mount(html`<ui5-color-picker value="rgba(130, 206, 143, 1)"></ui5-color-picker>`);
+		cy.mount(<ColorPicker value="rgba(130, 206, 143, 1)"></ColorPicker>);
 
 		cy.get("ui5-color-picker")
 			.as("colorPicker");
@@ -99,7 +97,7 @@ describe("Color Picker tests", () => {
 	});
 
 	it("should show correct accessibility info for HSL inputs", () => {
-		cy.mount(html`<ui5-color-picker></ui5-color-picker>`);
+		cy.mount(<ColorPicker></ColorPicker>);
 
 		cy.get("ui5-color-picker")
 			.as("colorPicker");

package/cypress/specs/{ComboBox.cy.ts → ComboBox.cy.tsx}

@@ -1,16 +1,15 @@
-import { html } from "lit";
-import "../../src/ComboBox.js";
-import "../../src/ComboBoxItem.js";
+import ComboBox from "../../src/ComboBox.js";
+import ComboBoxItem from "../../src/ComboBoxItem.js";
 
 describe("Security", () => {
 	it("tests setting malicious text to items", () => {
-		cy.mount(html`
-			<ui5-combobox>
-				<ui5-cb-item text="<script>alert('XSS')</script>"></ui5-cb-item>
-				<ui5-cb-item text="<b onmouseover=alert('XSS')></b>"></ui5-cb-item>
-				<ui5-cb-item text="Albania<button onClick='alert(1)'>alert</button>"></ui5-cb-item>
-			</ui5-combobox>
-		`);
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text="<script>alert('XSS')</script>"></ComboBoxItem>
+				<ComboBoxItem text="<b onmouseover=alert('XSS')></b>"></ComboBoxItem>
+				<ComboBoxItem text="Albania<button onClick='alert(1)'>alert</button>"></ComboBoxItem>
+			</ComboBox>
+		);
 
 		cy.get("ui5-cb-item").eq(0).shadow().find(".ui5-li-title")
 			.should("have.text", "<script>alert('XSS')</script>");

package/cypress/specs/{Dialog.cy.ts → Dialog.cy.tsx}

@@ -1,20 +1,22 @@
-import { html } from "lit";
 import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
-import "../../src/Dialog.js";
+import Dialog from "../../src/Dialog.js";
 
 describe("Keyboard", () => {
 	it("F6 navigation", () => {
-		cy.mount(html`
-	<button data-sap-ui-fastnavgroup="true" id="test"></button>
-	<ui5-dialog open>
-			<div data-sap-ui-fastnavgroup="true">
-				<button id="first">First group focusable</button>
-			</div>
-			<div data-sap-ui-fastnavgroup="true">
-				<button id="second">Second group focusable</button>
-			</div>
-	</ui5-dialog>
-	<button data-sap-ui-fastnavgroup="true"></button>`);
+		cy.mount(
+			<>
+				<button data-sap-ui-fastnavgroup="true" id="test"></button>
+				<Dialog open={true}>
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="first">First group focusable</button>
+					</div>
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="second">Second group focusable</button>
+					</div>
+				</Dialog>
+				<button data-sap-ui-fastnavgroup="true"></button>
+			</>
+		);
 
 		cy.get("#first")
 			.should("be.focused");

package/cypress/specs/{ExpandableText.cy.ts → ExpandableText.cy.tsx}

@@ -1,5 +1,4 @@
-import { html } from "lit";
-import "../../src/ExpandableText.js";
+import ExpandableText from "../../src/ExpandableText.js";
 import {
 	EXPANDABLE_TEXT_SHOW_MORE,
 	EXPANDABLE_TEXT_SHOW_LESS,
@@ -11,7 +10,7 @@ describe("ExpandableText", () => {
 		it("Should display only 100 characters by default", () => {
 			const text = "This is a very long text that should be displayed. This is a very long text that should be displayed. This is a very long text that should be displayed.";
 
-			cy.mount(html`<ui5-expandable-text text=${text}></ui5-expandable-text>`);
+			cy.mount(<ExpandableText text={text}></ExpandableText>);
 
 			expect(text.length).to.be.greaterThan(100);
 
@@ -25,7 +24,7 @@ describe("ExpandableText", () => {
 		it("Should display full text if maxCharacters are set, but not exceeded", () => {
 			const text = "This is a very long text that should be displayed";
 
-			cy.mount(html`<ui5-expandable-text text=${text} max-characters="9999"></ui5-expandable-text>`);
+			cy.mount(<ExpandableText text={text} maxCharacters={9999}></ExpandableText>);
 
 			cy.get("[ui5-expandable-text]")
 				.shadow()
@@ -38,7 +37,7 @@ describe("ExpandableText", () => {
 			const text = "This is a very long text that should be displayed";
 			const maxCharacters = 5;
 
-			cy.mount(html`<ui5-expandable-text text=${text} max-characters="${maxCharacters}"></ui5-expandable-text>`);
+			cy.mount(<ExpandableText text={text} maxCharacters={maxCharacters}></ExpandableText>);
 
 			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
 
@@ -62,7 +61,7 @@ describe("ExpandableText", () => {
 		it("Should display 'Show More' if maxCharacters are exceeded, set to 0", () => {
 			const text = "This is a very long text that should be displayed";
 
-			cy.mount(html`<ui5-expandable-text text=${text} max-characters="0"></ui5-expandable-text>`);
+			cy.mount(<ExpandableText text={text} maxCharacters={0}></ExpandableText>);
 
 			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
 
@@ -82,7 +81,7 @@ describe("ExpandableText", () => {
 		});
 
 		it("Should NOT display 'Show More' if maxCharacters are 0, but text is empty", () => {
-			cy.mount(html`<ui5-expandable-text max-characters="0"></ui5-expandable-text>`);
+			cy.mount(<ExpandableText maxCharacters={0}></ExpandableText>);
 
 			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
 
@@ -104,7 +103,7 @@ describe("ExpandableText", () => {
 			const text = "This is a very long text that should be displayed";
 			const maxCharacters = 5;
 
-			cy.mount(html`<ui5-expandable-text text=${text} max-characters="${maxCharacters}"></ui5-expandable-text>`);
+			cy.mount(<ExpandableText text={text} maxCharacters={maxCharacters}></ExpandableText>);
 
 			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
 			cy.get("@expTextShadow").find(".ui5-exp-text-toggle").as("toggle");
@@ -136,10 +135,12 @@ describe("ExpandableText", () => {
 			const text = "This is a very long text that should be displayed";
 			const maxCharacters = 5;
 
-			cy.mount(html`
-				<button id="before">before</button>
-				<ui5-expandable-text text=${text} max-characters="${maxCharacters}"></ui5-expandable-text>
-			`);
+			cy.mount(
+				<>
+					<button id="before">before</button>
+					<ExpandableText text={text} maxCharacters={maxCharacters}></ExpandableText>
+				</>
+			);
 
 			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
 			cy.get("@expTextShadow").find(".ui5-exp-text-toggle").as("toggle");
@@ -175,7 +176,7 @@ describe("ExpandableText", () => {
 		it("ARIA attributes", () => {
 			const text = "This is a very long text that should be displayed";
 
-			cy.mount(html`<ui5-expandable-text text=${text} max-characters="5"></ui5-expandable-text>`);
+			cy.mount(<ExpandableText text={text} maxCharacters={5}></ExpandableText>);
 
 			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
 			cy.get("@expTextShadow").find(".ui5-exp-text-toggle").as("toggle");
@@ -202,7 +203,7 @@ describe("ExpandableText", () => {
 
 	describe("Empty Indicator", () => {
 		it("Should display empty indicator if text is empty and emptyIndicatorMode=On", () => {
-			cy.mount(html`<ui5-expandable-text text="" empty-indicator-mode="On"></ui5-expandable-text>`);
+			cy.mount(<ExpandableText text="" emptyIndicatorMode="On"></ExpandableText>);
 
 			cy.get("[ui5-expandable-text]")
 				.shadow()
@@ -211,7 +212,7 @@ describe("ExpandableText", () => {
 		});
 
 		it("Should NOT display empty indicator if text is empty and emptyIndicatorMode=Off", () => {
-			cy.mount(html`<ui5-expandable-text text="" empty-indicator-mode="Off"></ui5-expandable-text>`);
+			cy.mount(<ExpandableText text="" emptyIndicatorMode="Off"></ExpandableText>);
 
 			cy.get("[ui5-expandable-text]")
 				.shadow()
@@ -225,7 +226,7 @@ describe("ExpandableText", () => {
 			const text = "This is a very long text that should be displayed";
 			const maxCharacters = 5;
 
-			cy.mount(html`<ui5-expandable-text text=${text} max-characters="${maxCharacters}" overflow-mode="Popover"></ui5-expandable-text>`);
+			cy.mount(<ExpandableText text={text} maxCharacters={maxCharacters} overflowMode="Popover"></ExpandableText>);
 
 			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
 			cy.get("@expTextShadow").find(".ui5-exp-text-toggle").as("toggle");
@@ -277,7 +278,7 @@ describe("ExpandableText", () => {
 		it("ARIA attributes", () => {
 			const text = "This is a very long text that should be displayed";
 
-			cy.mount(html`<ui5-expandable-text text=${text} max-characters="5" overflow-mode="Popover"></ui5-expandable-text>`);
+			cy.mount(<ExpandableText text={text} maxCharacters={5} overflowMode="Popover"></ExpandableText>);
 
 			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
 			cy.get("@expTextShadow").find(".ui5-exp-text-toggle").as("toggle");
@@ -311,10 +312,12 @@ describe("ExpandableText", () => {
 			const text = "This is a very long text that should be displayed";
 			const maxCharacters = 5;
 
-			cy.mount(html`
-				<button id="before">before</button>
-				<ui5-expandable-text text=${text} max-characters="${maxCharacters}" overflow-mode="Popover"></ui5-expandable-text>
-			`);
+			cy.mount(
+				<>
+					<button id="before">before</button>
+					<ExpandableText text={text} maxCharacters={maxCharacters} overflowMode="Popover"></ExpandableText>
+				</>
+			);
 
 			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
 			cy.get("@expTextShadow").find(".ui5-exp-text-toggle").as("toggle");
@@ -354,7 +357,7 @@ describe("ExpandableText", () => {
 			const text = "This is a very long text that should be displayed";
 			const maxCharacters = 5;
 
-			cy.mount(html`<ui5-expandable-text text=${text} max-characters="${maxCharacters}" overflow-mode="Popover"></ui5-expandable-text>`);
+			cy.mount(<ExpandableText text={text} maxCharacters={maxCharacters} overflowMode="Popover"></ExpandableText>);
 			cy.ui5SimulateDevice("phone");
 
 			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");