From b4a49ed3ab187cbb291c8115e753a8ae8189cdc9 Mon Sep 17 00:00:00 2001 From: Stoyan Date: Wed, 29 Oct 2025 16:13:22 +0200 Subject: [PATCH 1/3] test(ui5-color-palette-popover): stabilise unstable tests [WIP] --- .../cypress/specs/ColorPalettePopover.cy.tsx | 72 +++++++++++++++---- 1 file changed, 57 insertions(+), 15 deletions(-) diff --git a/packages/main/cypress/specs/ColorPalettePopover.cy.tsx b/packages/main/cypress/specs/ColorPalettePopover.cy.tsx index c38adfbdd2f2..bce651ea13a4 100644 --- a/packages/main/cypress/specs/ColorPalettePopover.cy.tsx +++ b/packages/main/cypress/specs/ColorPalettePopover.cy.tsx @@ -372,10 +372,22 @@ describe("Color Popover Palette arrow keys navigation", () => { cy.get("[ui5-color-palette-popover]") .ui5ColorPalettePopoverOpen({ opener: "btnPalette" }); - cy.focused() + cy.get("[ui5-color-palette-popover]") + .should("have.focus"); + + cy.get("[ui5-color-palette-popover]") .realPress("ArrowRight"); - cy.focused() + cy.get("[ui5-color-palette-popover]") + .find("ui5-color-palette-item") + .shadow() + .find("[tabindex='0']") + .should("have.focus"); + + cy.get("[ui5-color-palette-popover]") + .find("ui5-color-palette-item") + .shadow() + .find("[tabindex='0']") .should("have.attr", "aria-label") .and("include", "cyan"); @@ -509,7 +521,7 @@ describe("Color Popover Palette arrow keys navigation", () => { }); describe("Color Popover Palette Home and End keyboard navigation", () => { - it.skip("should navigate with Home/End when showDefaultColor is set", () => { + it("should navigate with Home/End when showDefaultColor is set", () => { cy.mount( ); @@ -517,10 +529,29 @@ describe("Color Popover Palette Home and End keyboard navigation", () => { cy.get("[ui5-color-palette-popover]") .ui5ColorPalettePopoverOpen({ opener: "btnPalette" }); - cy.focused() + cy.get("[ui5-color-palette-popover]") + .ui5GetColorPaletteInPopover() + .as("colorPalette"); + + cy.get("@colorPalette") + .ui5GetColorPaletteDefaultButton() + .shadow() + .find("[tabindex='0']") + .should("have.focus"); + + cy.get("[ui5-color-palette-popover]") .realPress("End"); - cy.focused() + cy.get("[ui5-color-palette-popover]") + .ui5GetColorPaletteItem(3) + .shadow() + .find("[tabindex='0']") + .should("have.focus"); + + cy.get("[ui5-color-palette-popover]") + .ui5GetColorPaletteItem(3) + .shadow() + .find("[tabindex='0']") .should("have.attr", "aria-label") .and("include", "red"); @@ -564,28 +595,39 @@ describe("Color Popover Palette Home and End keyboard navigation", () => { .should("have.attr", "aria-label", "More Colors..."); }); - it.skip("should navigate with Home/End when showDefaultColor & showMoreColors are set", () => { + it("should navigate with Home/End when showDefaultColor & showMoreColors are set", () => { cy.mount( ); - cy.get("[ui5-color-palette-popover]") + cy.get("[ui5-color-palette-popover]") + .as("colorPalettePopover") .ui5ColorPalettePopoverOpen({ opener: "btnPalette" }); - cy.focused() - .should("have.attr", "aria-label", "Default Color"); + cy.get("@colorPalettePopover") + .ui5GetColorPaletteInPopover() + .as("colorPalette"); - cy.focused() + cy.get("@colorPalette") + .ui5GetColorPaletteDefaultButton() + .as("defaultColorButton"); + + cy.get("@defaultColorButton") + .should("have.focus") .realPress("End"); - cy.focused() - .should("have.attr", "aria-label", "More Colors..."); + cy.get("@colorPalette") + .ui5GetColorPaletteMoreColorsButton() + .as("moreColorsButton"); + + cy.get("@moreColorsButton") + .should("have.focus"); - cy.focused() + cy.get("@moreColorsButton") .realPress("Home"); - cy.focused() - .should("have.attr", "aria-label", "Default Color"); + cy.get("@defaultColorButton") + .should("have.focus"); }); it("should navigate with End key", () => { From c26c53052fe4912cdcb5bbf74f931e71fa661320 Mon Sep 17 00:00:00 2001 From: Stoyan Date: Mon, 10 Nov 2025 09:28:17 +0200 Subject: [PATCH 2/3] test(ui5-color-palette-popover): stabilise tests --- .../cypress/specs/ColorPalettePopover.cy.tsx | 87 ++++++++++++++----- 1 file changed, 65 insertions(+), 22 deletions(-) diff --git a/packages/main/cypress/specs/ColorPalettePopover.cy.tsx b/packages/main/cypress/specs/ColorPalettePopover.cy.tsx index bce651ea13a4..3ac855c246ff 100644 --- a/packages/main/cypress/specs/ColorPalettePopover.cy.tsx +++ b/packages/main/cypress/specs/ColorPalettePopover.cy.tsx @@ -373,22 +373,39 @@ describe("Color Popover Palette arrow keys navigation", () => { .ui5ColorPalettePopoverOpen({ opener: "btnPalette" }); cy.get("[ui5-color-palette-popover]") - .should("have.focus"); + .should("have.attr", "open"); cy.get("[ui5-color-palette-popover]") - .realPress("ArrowRight"); + .ui5GetColorPaletteInPopover() + .as("colorPalette"); - cy.get("[ui5-color-palette-popover]") - .find("ui5-color-palette-item") - .shadow() - .find("[tabindex='0']") + cy.get("@colorPalette") + .ui5GetColorPaletteDefaultButton() + .as("defaultColorButton") + .should("be.visible"); + + cy.get("@defaultColorButton") .should("have.focus"); - + + // Navigate right to first color item + cy.get("@defaultColorButton") + .realPress("ArrowRight"); + cy.get("[ui5-color-palette-popover]") - .find("ui5-color-palette-item") + .ui5GetColorPaletteItem(0) + .as("firstColorItem") + .should("be.visible") + .and("have.attr", "value", "cyan"); + + cy.get("@firstColorItem") + .should("have.attr", "value", "cyan"); + + cy.get("@firstColorItem") + .should("have.focus") .shadow() - .find("[tabindex='0']") - .should("have.attr", "aria-label") + .find(".ui5-cp-item") + .should("have.attr", "tabindex", "0") + .and("have.attr", "aria-label") .and("include", "cyan"); cy.focused() @@ -396,6 +413,9 @@ describe("Color Popover Palette arrow keys navigation", () => { cy.focused() .should("have.attr", "aria-label", "Default Color"); + + cy.get("@defaultColorButton") + .should("have.focus"); }); it("should cycle through colors horizontally with left/right arrows", () => { @@ -529,37 +549,57 @@ describe("Color Popover Palette Home and End keyboard navigation", () => { cy.get("[ui5-color-palette-popover]") .ui5ColorPalettePopoverOpen({ opener: "btnPalette" }); + cy.get("[ui5-color-palette-popover]") + .should("have.attr", "open"); + cy.get("[ui5-color-palette-popover]") .ui5GetColorPaletteInPopover() .as("colorPalette"); cy.get("@colorPalette") .ui5GetColorPaletteDefaultButton() + .as("defaultColorButton") + .should("be.visible") + .and("have.focus"); + + cy.get("@defaultColorButton") + .should("have.focus") .shadow() - .find("[tabindex='0']") + .find("button[data-sap-focus-ref]") .should("have.focus"); - cy.get("[ui5-color-palette-popover]") + cy.get("@defaultColorButton") .realPress("End"); cy.get("[ui5-color-palette-popover]") .ui5GetColorPaletteItem(3) + .as("lastColorPaletteItem") + .should("be.visible") + .and("have.attr", "value", "red"); + + cy.get("@lastColorPaletteItem") + .should("have.focus") .shadow() - .find("[tabindex='0']") - .should("have.focus"); - - cy.get("[ui5-color-palette-popover]") - .ui5GetColorPaletteItem(3) - .shadow() - .find("[tabindex='0']") - .should("have.attr", "aria-label") + .find(".ui5-cp-item") + .should("have.attr", "tabindex", "0") + .and("have.attr", "aria-label") .and("include", "red"); cy.focused() .realPress("Home"); - cy.focused() - .should("have.attr", "aria-label") + cy.get("[ui5-color-palette-popover]") + .ui5GetColorPaletteItem(0) + .as("firstColorPaletteItem") + .should("be.visible") + .and("have.attr", "value", "cyan"); + + cy.get("@firstColorPaletteItem") + .should("have.focus") + .shadow() + .find(".ui5-cp-item") + .should("have.attr", "tabindex", "0") + .and("have.attr", "aria-label") .and("include", "cyan"); cy.focused() @@ -567,6 +607,9 @@ describe("Color Popover Palette Home and End keyboard navigation", () => { cy.focused() .should("have.attr", "aria-label", "Default Color"); + + cy.get("@defaultColorButton") + .should("have.focus"); }); it("should navigate with Home/End keys when showMoreColors is set", () => { From 67e76e4b3ed7d3623427f41de672c352d0a12086 Mon Sep 17 00:00:00 2001 From: Stoyan Date: Mon, 10 Nov 2025 09:39:40 +0200 Subject: [PATCH 3/3] test(ui5-color-palette-popover): stabilise tests --- packages/main/cypress/specs/ColorPalettePopover.cy.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/main/cypress/specs/ColorPalettePopover.cy.tsx b/packages/main/cypress/specs/ColorPalettePopover.cy.tsx index 3ac855c246ff..ba96491180a3 100644 --- a/packages/main/cypress/specs/ColorPalettePopover.cy.tsx +++ b/packages/main/cypress/specs/ColorPalettePopover.cy.tsx @@ -661,10 +661,13 @@ describe("Color Popover Palette Home and End keyboard navigation", () => { cy.get("@colorPalette") .ui5GetColorPaletteMoreColorsButton() - .as("moreColorsButton"); - + .as("moreColorsButton") + .should("be.visible"); + cy.get("@moreColorsButton") - .should("have.focus"); + .should("exist") + .and("be.visible") + .and("have.focus"); cy.get("@moreColorsButton") .realPress("Home");