Skip to content

chore(ui5-avatar): migrate wdio tests to cypress #11817

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

chore(ui5-avatar): migrate wdio tests to cypress #11817

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f816dbc
chore(ui5-avatar): migrate wdio tests to cypress
NakataCode Jun 30, 2025
be6a471
refactor: change the slot we need to find
NakataCode Jun 30, 2025
f1d3730
chore: migrate avatarGroup tests
NakataCode Jun 30, 2025
5ffbfcf
refactor: add prefix for failing tests
NakataCode Jun 30, 2025
52af4ec
refactor: change the image src
NakataCode Jun 30, 2025
86095af
Merge branch 'main' into avatar-cypress-migration
NakataCode Jul 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
186 changes: 183 additions & 3 deletions packages/main/cypress/specs/Avatar.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@ describe("Accessibility", () => {
cy.mount(
<div>
<Avatar interactive disabled initials="JD" id="diabled-avatar" onClick={increment}>
<Tag slot="badge">
<Icon slot="icon" name="accelerated"></Icon>
</Tag>
<Tag slot="badge">
<Icon slot="icon" name="accelerated"></Icon>
</Tag>
</Avatar>
<input value="0" id="click-event" />
</div>
Expand Down Expand Up @@ -306,3 +306,183 @@ describe("Fallback Logic", () => {
.should("have.class", "ui5-avatar-fallback-icon-hidden");
});
});

describe("Avatar", () => {
let sharedInputValue = 0;
let sharedInputValue2 = 0;

beforeEach(() => {
cy.mount(
<div>
<Avatar id="myAvatar1">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==" alt="Woman image" />
</Avatar>
<Avatar id="myAvatar2" icon="filter"></Avatar>
<Avatar id="myAvatar3" icon="filter" initials="SF">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==" alt="Woman image" />
</Avatar>
<Avatar id="myAvatar4" initials="SF" shape="Square" size="M"></Avatar>
<Avatar id="myAvatar5" initials="WWW" shape="Square" size="M"></Avatar>
<Avatar id="myAvatar6" initials="IOU" colorScheme="Accent1"></Avatar>
<Avatar id="myAvatar7" fallbackIcon="alert" initials="WWW" shape="Circle" size="L"></Avatar>
<Avatar id="interactive-avatar" interactive initials="XS" size="XS"></Avatar>
<Avatar id="non-interactive-avatar" initials="S" size="S"></Avatar>
<Avatar id="myInteractiveAvatar" interactive initials="L" size="L"></Avatar>
<input id="click-event" defaultValue={sharedInputValue.toString()} />
<input id="click-event-2" defaultValue={sharedInputValue2.toString()} />
</div>
);

cy.get("#interactive-avatar").then(($avatar) => {
$avatar[0].addEventListener("ui5-click", function() {
const input = document.getElementById("click-event") as HTMLInputElement;
input.value = `${++sharedInputValue}`;
});
});

cy.get("#non-interactive-avatar").then(($avatar) => {
$avatar[0].addEventListener("ui5-click", function() {
const input = document.getElementById("click-event") as HTMLInputElement;
input.value = `${++sharedInputValue}`;
});
});

cy.get("#myInteractiveAvatar").then(($avatar) => {
$avatar[0].addEventListener("ui5-click", function() {
const input = document.getElementById("click-event-2") as HTMLInputElement;
input.value = `${++sharedInputValue2}`;
});
});
});

it("tests rendering of image", () => {
cy.get("#myAvatar1")
.shadow()
.find(".ui5-avatar-root slot:not([name])")
.should("exist");

cy.get("#myAvatar1")
.shadow()
.find("ui5-avatar-icon")
.should("not.exist");
});

it("tests rendering of icon", () => {
cy.get("#myAvatar2")
.shadow()
.find(".ui5-avatar-icon")
.should("exist");

cy.get("#myAvatar2")
.shadow()
.find("slot:not([name])")
.should("not.exist");
});

it("tests rendering of image, when all set", () => {
cy.get("#myAvatar3")
.shadow()
.find(".ui5-avatar-root slot:not([name])")
.should("exist");

cy.get("#myAvatar3")
.shadow()
.find(".ui5-avatar-icon")
.should("not.exist");

cy.get("#myAvatar3")
.shadow()
.find(".ui5-avatar-initials")
.should("not.exist");
});

it("tests rendering of initials", () => {
cy.get("#myAvatar4")
.shadow()
.find(".ui5-avatar-initials")
.should("exist");
});

it("tests rendering of accented characters", () => {
cy.get("#myAvatar6")
.shadow()
.find(".ui5-avatar-initials")
.should("exist");
});

it("tests rendering of default fallback icon when initials are overflowing", () => {
cy.get("#myAvatar5")
.shadow()
.find(".ui5-avatar-icon")
.should("exist")
.should("have.attr", "name", "employee");
});

it("tests rendering of custom fallback icon when initials are overflowing", () => {
cy.get("#myAvatar7")
.shadow()
.find(".ui5-avatar-icon-fallback")
.should("exist")
.should("have.attr", "name", "alert");
});

it("Tests noConflict 'ui5-click' event for interactive avatars", () => {
cy.get("#interactive-avatar")
.shadow()
.find(".ui5-avatar-root")
.realClick();

cy.get("#click-event")
.should("have.value", "1");

cy.get("#interactive-avatar")
.shadow()
.find(".ui5-avatar-root")
.realPress("Enter");

cy.get("#click-event")
.should("have.value", "2");

cy.get("#interactive-avatar")
.shadow()
.find(".ui5-avatar-root")
.realPress("Space");

cy.get("#click-event")
.should("have.value", "3");
});

it("Tests noConflict 'ui5-click' event for non interactive avatars", () => {
cy.get("#non-interactive-avatar")
.shadow()
.find(".ui5-avatar-root")
.realClick();

cy.get("#click-event")
.should("have.value", "4");

cy.get("#non-interactive-avatar")
.shadow()
.find(".ui5-avatar-root")
.realPress("Enter");

cy.get("#click-event")
.should("have.value", "4");

cy.get("#non-interactive-avatar")
.shadow()
.find(".ui5-avatar-root")
.realPress("Space");

cy.get("#click-event")
.should("have.value", "4");
});

it("Tests native 'click' event thrown", () => {
cy.get("#myInteractiveAvatar")
.realClick();

cy.get("#click-event-2")
.should("have.value", "1");
});
});
Loading
Loading