Skip to content

Commit

Permalink
chore(ui5-color-palette): migrate tests to cypress (#10733)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hinzzx
hinzzx authored Feb 3, 2025
1 parent 4ed9811 commit 07a1baf
Show file tree
Hide file tree
Showing 4 changed files with 188 additions and 145 deletions.
166 changes: 166 additions & 0 deletions packages/main/cypress/specs/ColorPalette.cy.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,25 @@
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(
Expand Down Expand Up @@ -44,4 +63,151 @@ describe("Color Palette tests", () => {
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");
});
});
1 change: 1 addition & 0 deletions packages/main/cypress/support/commands.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ declare global {
ui5ColorPickerToggleColorMode(): Chainable<void>
ui5ColorPickerUpdateInput(name: string, value: 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>
}
}
}
Expand Down
24 changes: 21 additions & 3 deletions packages/main/cypress/support/commands/ColorPalette.commands.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },

cy.get("@colorPalette")
.shadow()
.find("ui5-color-picker")
.find("[ui5-color-picker]")
.as("colorPicker");

cy.get("@colorPicker")
Expand All @@ -41,7 +41,7 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },

cy.get("@colorPalette")
.shadow()
.find("ui5-dialog")
.find("[ui5-dialog]")
.find("ui5-button[design=Emphasized]") // The OK button is Emphasized (the Cancel button is Transparent)
.as("okButton");

Expand All @@ -63,6 +63,24 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },

cy.get("@colorPalette")
.shadow()
.find("ui5-dialog")
.find("[ui5-dialog]")
.should("not.be.visible"); // Make sure the dialog is closed at the end of the command (otherwise the next command will sometimes assert against the old dialog values)
});

Cypress.Commands.add("ui5ColorPaletteNavigateAndCheckSelectedColor", (subject: string, startIndex: number, key: string, expectedValue: string) => {
cy.get(subject)
.as("colorPalette");

cy.get("@colorPalette")
.find("[ui5-color-palette-item]")
.eq(startIndex)
.realClick();

// @ts-ignore
cy.realPress(key)
.realPress("Space");

cy.get("@colorPalette")
.find("ui5-color-palette-item[selected]")
.should("have.value", expectedValue);
});
142 changes: 0 additions & 142 deletions packages/main/test/specs/ColorPalette.spec.js
View file

This file was deleted.

0 comments on commit 07a1baf

Please sign in to comment.