Skip to content

Commit e8baacc

Browse files
hinzzxhinzzx
authored
test(ui5-color-palette-popover): stabilise unstable tests [WIP] (#12583)
* test(ui5-color-palette-popover): stabilise unstable tests [WIP] * test(ui5-color-palette-popover): stabilise tests * test(ui5-color-palette-popover): stabilise tests
1 parent ba10757 commit e8baacc

File tree

1 file changed

+107
-19
lines changed

1 file changed

+107
-19
lines changed

‎packages/main/cypress/specs/ColorPalettePopover.cy.tsx‎

Lines changed: 107 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -372,18 +372,50 @@ describe("Color Popover Palette arrow keys navigation", () => {
372372
cy.get("[ui5-color-palette-popover]")
373373
.ui5ColorPalettePopoverOpen({ opener: "btnPalette" });
374374

375-
cy.focused()
375+
cy.get("[ui5-color-palette-popover]")
376+
.should("have.attr", "open");
377+
378+
cy.get("[ui5-color-palette-popover]")
379+
.ui5GetColorPaletteInPopover()
380+
.as("colorPalette");
381+
382+
cy.get("@colorPalette")
383+
.ui5GetColorPaletteDefaultButton()
384+
.as("defaultColorButton")
385+
.should("be.visible");
386+
387+
cy.get("@defaultColorButton")
388+
.should("have.focus");
389+
390+
// Navigate right to first color item
391+
cy.get("@defaultColorButton")
376392
.realPress("ArrowRight");
377393

378-
cy.focused()
379-
.should("have.attr", "aria-label")
394+
cy.get("[ui5-color-palette-popover]")
395+
.ui5GetColorPaletteItem(0)
396+
.as("firstColorItem")
397+
.should("be.visible")
398+
.and("have.attr", "value", "cyan");
399+
400+
cy.get("@firstColorItem")
401+
.should("have.attr", "value", "cyan");
402+
403+
cy.get("@firstColorItem")
404+
.should("have.focus")
405+
.shadow()
406+
.find(".ui5-cp-item")
407+
.should("have.attr", "tabindex", "0")
408+
.and("have.attr", "aria-label")
380409
.and("include", "cyan");
381410

382411
cy.focused()
383412
.realPress("ArrowLeft");
384413

385414
cy.focused()
386415
.should("have.attr", "aria-label", "Default Color");
416+
417+
cy.get("@defaultColorButton")
418+
.should("have.focus");
387419
});
388420

389421
it("should cycle through colors horizontally with left/right arrows", () => {
@@ -509,33 +541,75 @@ describe("Color Popover Palette arrow keys navigation", () => {
509541
});
510542

511543
describe("Color Popover Palette Home and End keyboard navigation", () => {
512-
it.skip("should navigate with Home/End when showDefaultColor is set", () => {
544+
it("should navigate with Home/End when showDefaultColor is set", () => {
513545
cy.mount(
514546
<SimplePalettePopover showDefaultColor={true} />
515547
);
516548

517549
cy.get("[ui5-color-palette-popover]")
518550
.ui5ColorPalettePopoverOpen({ opener: "btnPalette" });
519551

520-
cy.focused()
552+
cy.get("[ui5-color-palette-popover]")
553+
.should("have.attr", "open");
554+
555+
cy.get("[ui5-color-palette-popover]")
556+
.ui5GetColorPaletteInPopover()
557+
.as("colorPalette");
558+
559+
cy.get("@colorPalette")
560+
.ui5GetColorPaletteDefaultButton()
561+
.as("defaultColorButton")
562+
.should("be.visible")
563+
.and("have.focus");
564+
565+
cy.get("@defaultColorButton")
566+
.should("have.focus")
567+
.shadow()
568+
.find("button[data-sap-focus-ref]")
569+
.should("have.focus");
570+
571+
cy.get("@defaultColorButton")
521572
.realPress("End");
522573

523-
cy.focused()
524-
.should("have.attr", "aria-label")
574+
cy.get("[ui5-color-palette-popover]")
575+
.ui5GetColorPaletteItem(3)
576+
.as("lastColorPaletteItem")
577+
.should("be.visible")
578+
.and("have.attr", "value", "red");
579+
580+
cy.get("@lastColorPaletteItem")
581+
.should("have.focus")
582+
.shadow()
583+
.find(".ui5-cp-item")
584+
.should("have.attr", "tabindex", "0")
585+
.and("have.attr", "aria-label")
525586
.and("include", "red");
526587

527588
cy.focused()
528589
.realPress("Home");
529590

530-
cy.focused()
531-
.should("have.attr", "aria-label")
591+
cy.get("[ui5-color-palette-popover]")
592+
.ui5GetColorPaletteItem(0)
593+
.as("firstColorPaletteItem")
594+
.should("be.visible")
595+
.and("have.attr", "value", "cyan");
596+
597+
cy.get("@firstColorPaletteItem")
598+
.should("have.focus")
599+
.shadow()
600+
.find(".ui5-cp-item")
601+
.should("have.attr", "tabindex", "0")
602+
.and("have.attr", "aria-label")
532603
.and("include", "cyan");
533604

534605
cy.focused()
535606
.realPress("Home");
536607

537608
cy.focused()
538609
.should("have.attr", "aria-label", "Default Color");
610+
611+
cy.get("@defaultColorButton")
612+
.should("have.focus");
539613
});
540614

541615
it("should navigate with Home/End keys when showMoreColors is set", () => {
@@ -564,28 +638,42 @@ describe("Color Popover Palette Home and End keyboard navigation", () => {
564638
.should("have.attr", "aria-label", "More Colors...");
565639
});
566640

567-
it.skip("should navigate with Home/End when showDefaultColor & showMoreColors are set", () => {
641+
it("should navigate with Home/End when showDefaultColor & showMoreColors are set", () => {
568642
cy.mount(
569643
<SimplePalettePopover showDefaultColor={true} showMoreColors={true} />
570644
);
571645

572-
cy.get("[ui5-color-palette-popover]")
646+
cy.get<ColorPalettePopover>("[ui5-color-palette-popover]")
647+
.as("colorPalettePopover")
573648
.ui5ColorPalettePopoverOpen({ opener: "btnPalette" });
574649

575-
cy.focused()
576-
.should("have.attr", "aria-label", "Default Color");
650+
cy.get<ColorPalette>("@colorPalettePopover")
651+
.ui5GetColorPaletteInPopover()
652+
.as("colorPalette");
577653

578-
cy.focused()
654+
cy.get("@colorPalette")
655+
.ui5GetColorPaletteDefaultButton()
656+
.as("defaultColorButton");
657+
658+
cy.get("@defaultColorButton")
659+
.should("have.focus")
579660
.realPress("End");
580661

581-
cy.focused()
582-
.should("have.attr", "aria-label", "More Colors...");
662+
cy.get("@colorPalette")
663+
.ui5GetColorPaletteMoreColorsButton()
664+
.as("moreColorsButton")
665+
.should("be.visible");
583666

584-
cy.focused()
667+
cy.get("@moreColorsButton")
668+
.should("exist")
669+
.and("be.visible")
670+
.and("have.focus");
671+
672+
cy.get("@moreColorsButton")
585673
.realPress("Home");
586674

587-
cy.focused()
588-
.should("have.attr", "aria-label", "Default Color");
675+
cy.get("@defaultColorButton")
676+
.should("have.focus");
589677
});
590678

591679
it("should navigate with End key", () => {

0 commit comments

Comments
 (0)