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

package/cypress/specs/ColorPalette.cy.tsx

@@ -1,213 +0,0 @@
-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.tsx

@@ -1,332 +0,0 @@
-import ColorPicker from "../../src/ColorPicker.js";
-
-describe("Color Picker general interaction tests", () => {
-	it("should not display color channel inputs and alpha slider in simplified mode", () => {
-		cy.mount(<ColorPicker simplified={true}></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.as("colorPicker");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find(".ui5-color-picker-hex-input")
-			.should("exist");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#red")
-			.should("not.exist");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#alpha")
-			.should("not.exist");
-	});
-
-	it("should fire change event when color is changed", () => {
-		cy.mount(<ColorPicker></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.as("colorPicker");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.then($item => {
-				$item.get(0).addEventListener("change", cy.stub().as("valueChanged"));
-			});
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerUpdateInput("#red", "123");
-
-		cy.get("@valueChanged")
-			.should("have.been.calledOnce");
-	});
-
-	it("should correctly parse rgb value to color", () => {
-		cy.mount(<ColorPicker value="rgb(0, 255, 0)"></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "00ff00");
-	});
-
-	it("should correctly parse rgba value color", () => {
-		cy.mount(<ColorPicker value="rgba(255, 0, 255, 0.5)"></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "ff00ff");
-
-		cy.get("[ui5-color-picker]")
-			.ui5ColorPickerValidateInput("#alpha", "0.5");
-	});
-
-	it("should correctly parse HEX value to color", () => {
-		cy.mount(<ColorPicker value="#fafafa"></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "fafafa");
-	});
-
-	it("should correctly parse short form HEX value to color", () => {
-		cy.mount(<ColorPicker value="#123"></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "112233");
-	});
-
-	it("should correctly parse CSS color value to color", () => {
-		cy.mount(<ColorPicker value="gray"></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "808080");
-	});
-
-	it("should toggle display from RGB to HSL when arrow button is selected", () => {
-		cy.mount(<ColorPicker value="rgba(112, 178, 225, 1)"></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.as("colorPicker");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerToggleColorMode();
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerValidateInput("#hue", "205");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerValidateInput("#saturation", "65");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerValidateInput("#light", "66");
-	});
-
-	it("should update value when color is changed via the RGB input fields", () => {
-		cy.mount(<ColorPicker value="rgba(62, 128, 99, 1)"></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.as("colorPicker");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerUpdateInput("#red", "123");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerUpdateInput("#green", "56");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerUpdateInput("#blue", "93");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.should("have.value", "rgba(123, 56, 93, 1)");
-	});
-
-	it("should update value when color is changed via the Hue input field", () => {
-		cy.mount(<ColorPicker value="rgba(112, 178, 225, 1)"></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.as("colorPicker");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerToggleColorMode();
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerUpdateInput("#hue", "130");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.should("have.value", "rgba(112, 225, 131, 1)");
-	});
-
-	it("should update value when color is changed via the Saturation input field", () => {
-		cy.mount(<ColorPicker value="rgba(112, 225, 131, 1)"></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.as("colorPicker");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerToggleColorMode();
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerUpdateInput("#saturation", "44");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.should("have.value", "rgba(130, 206, 143, 1)");
-	});
-
-	it("should update value when color is changed via the Light input field", () => {
-		cy.mount(<ColorPicker value="rgba(130, 206, 143, 1)"></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.as("colorPicker");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerToggleColorMode();
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerUpdateInput("#light", "30");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.should("have.value", "rgba(43, 110, 54, 1)");
-	});
-
-	it("should update value when color is changed via the HEX input field", () => {
-		cy.mount(<ColorPicker value="rgba(123, 56, 93, 1)"></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.as("colorPicker");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerUpdateInput(".ui5-color-picker-hex-input", "7be");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.should("have.value", "rgba(119, 187, 238, 1)");
-	});
-
-	it("should update value when alpha is changed via the Alpha input field", () => {
-		cy.mount(<ColorPicker value="rgba(232, 128, 222, 0.89)"></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.as("colorPicker");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerUpdateInput("#alpha", "0.30");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.should("have.value", "rgba(232, 128, 222, 0.3)");
-	});
-
-	it("should update value when color is changed via the Hue slider", () => {
-		cy.mount(<ColorPicker value="rgba(70, 64, 191, 1)"></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.as("colorPicker");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find(".ui5-color-picker-hue-slider")
-			.realClick({ position: "center" });
-
-		cy.get<ColorPicker>("@colorPicker")
-			.should("have.value", "rgba(64, 191, 189, 1)");
-	});
-
-	it("should update value when alpha is changed via the Alpha slider", () => {
-		cy.mount(<ColorPicker value="rgba(70, 64, 191, 0)"></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.as("colorPicker");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find(".ui5-color-picker-alpha-slider")
-			.realClick({ position: "center" });
-
-		cy.get<ColorPicker>("@colorPicker")
-			.should("have.value", "rgba(70, 64, 191, 0.5)");
-	});
-
-	it("should update Saturation & Light inputs when selecting color from main color grid", () => {
-		cy.mount(<ColorPicker value="rgba(136, 64, 101, 1)"></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.as("colorPicker");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerToggleColorMode();
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerValidateInput("#hue", "329");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerValidateInput("#saturation", "36");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerValidateInput("#light", "39");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find(".ui5-color-picker-main-color")
-			.realClick({ x: 200, y: 50 });
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerValidateInput("#hue", "329");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerValidateInput("#saturation", "81");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerValidateInput("#light", "78");
-	});
-});
-
-describe("Color Picker accessibility tests", () => {
-	it("should show correct accessibility info for RGB inputs", () => {
-		cy.mount(<ColorPicker></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.as("colorPicker");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#red")
-			.should("have.attr", "accessible-name", "Red");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#green")
-			.should("have.attr", "accessible-name", "Green");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#blue")
-			.should("have.attr", "accessible-name", "Blue");
-	});
-
-	it("should show correct accessibility info for HSL inputs", () => {
-		cy.mount(<ColorPicker></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.as("colorPicker");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.ui5ColorPickerToggleColorMode();
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#hue")
-			.should("have.attr", "accessible-name", "Hue");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#saturation")
-			.should("have.attr", "accessible-name", "Saturation");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#light")
-			.should("have.attr", "accessible-name", "Light");
-	});
-
-	it("should show correct accessibility info for sliders and other input", () => {
-		cy.mount(<ColorPicker></ColorPicker>);
-
-		cy.get("[ui5-color-picker]")
-			.as("colorPicker");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#alpha")
-			.should("have.attr", "accessible-name", "Alpha");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find(".ui5-color-picker-hex-input")
-			.should("have.attr", "accessible-name", "Hexadecimal");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find(".ui5-color-picker-hue-slider")
-			.should("have.attr", "accessible-name", "Hue control");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find(".ui5-color-picker-alpha-slider")
-			.should("have.attr", "accessible-name", "Alpha control");
-	});
-});