Skip to content

fix(ui5-avatar-badge): handle delayed icon collection loading #13405

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

Merged
kgogov merged 1 commit into from
Apr 20, 2026
+113 −39
Merged

fix(ui5-avatar-badge): handle delayed icon collection loading #13405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
137 changes: 101 additions & 36 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 @@ -8,6 +8,7 @@ import "@ui5/webcomponents-icons/dist/accept.js";
import "@ui5/webcomponents-icons/dist/message-error.js";
import "@ui5/webcomponents-icons/dist/information.js";
import "@ui5/webcomponents-icons/dist/ai.js";
import { registerIconLoader } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";

describe("Accessibility", () => {
it("checks if initials of avatar are correctly announced", () => {
Expand All @@ -31,18 +32,18 @@ describe("Accessibility", () => {
const customLabel = "John Doe Avatar";

cy.mount(
<Avatar
id="interactive-info"
initials={INITIALS}
interactive
<Avatar
id="interactive-info"
initials={INITIALS}
interactive
accessibleName={customLabel}
accessibilityAttributes={{hasPopup}}
></Avatar>
);

cy.get("#interactive-info").then($avatar => {
const avatar = $avatar[0] as any;

// Check accessibilityInfo properties
expect(avatar.accessibilityInfo).to.exist;
expect(avatar.accessibilityInfo.role).to.equal("button");
Expand All @@ -53,15 +54,15 @@ describe("Accessibility", () => {

it("should return correct accessibilityInfo object when avatar is not interactive", () => {
cy.mount(
<Avatar
id="non-interactive-info"
<Avatar
id="non-interactive-info"
initials="JD"
></Avatar>
);

cy.get("#non-interactive-info").then($avatar => {
const avatar = $avatar[0] as any;

// Check that accessibilityInfo is undefined
expect(avatar.accessibilityInfo).to.exist;
expect(avatar.accessibilityInfo.role).to.equal("img");
Expand All @@ -72,18 +73,18 @@ describe("Accessibility", () => {

it("should use default label for accessibilityInfo description when no custom label is provided", () => {
const INITIALS = "AB";

cy.mount(
<Avatar
id="default-label-info"
<Avatar
id="default-label-info"
initials={INITIALS}
interactive
></Avatar>
);

cy.get("#default-label-info").then($avatar => {
const avatar = $avatar[0] as any;

// Check that accessibilityInfo uses the default label format that includes initials
expect(avatar.accessibilityInfo).to.exist;
expect(avatar.accessibilityInfo.description).to.equal(`Avatar ${INITIALS}`);
Expand Down Expand Up @@ -135,8 +136,8 @@ describe("Accessibility", () => {

it("mode='Decorative' renders with role='presentation' and aria-hidden", () => {
cy.mount(
<Avatar
id="decorative-avatar"
<Avatar
id="decorative-avatar"
initials="AB"
mode="Decorative"
></Avatar>
Expand All @@ -151,8 +152,8 @@ describe("Accessibility", () => {

it("mode='Interactive' renders with role='button' and is focusable", () => {
cy.mount(
<Avatar
id="interactive-mode-avatar"
<Avatar
id="interactive-mode-avatar"
initials="IJ"
mode="Interactive"
></Avatar>
Expand All @@ -167,10 +168,10 @@ describe("Accessibility", () => {

it("interactive property takes precedence over mode property", () => {
cy.mount(
<Avatar
interactive
mode="Decorative"
initials="PR"
<Avatar
interactive
mode="Decorative"
initials="PR"
id="precedence-avatar"
></Avatar>
);
Expand All @@ -186,10 +187,10 @@ describe("Accessibility", () => {

it("interactive=true with disabled=true renders with role='img' and is not focusable", () => {
cy.mount(
<Avatar
interactive
disabled
initials="DI"
<Avatar
interactive
disabled
initials="DI"
id="disabled-interactive-avatar"
></Avatar>
);
Expand All @@ -203,10 +204,10 @@ describe("Accessibility", () => {

it("mode='Interactive' with disabled=true renders with role='img' and is not focusable", () => {
cy.mount(
<Avatar
<Avatar
mode="Interactive"
disabled
initials="DM"
disabled
initials="DM"
id="disabled-mode-interactive-avatar"
></Avatar>
);
Expand All @@ -231,7 +232,7 @@ describe("Accessibility", () => {
const input = document.getElementById("mode-click-event") as HTMLInputElement;
input.value = "1";
}

cy.get("#disabled-mode-click").realClick();
cy.get("#mode-click-event").should("have.value", "0");
});
Expand Down Expand Up @@ -498,7 +499,7 @@ describe("Avatar Rendering and Interaction", () => {

cy.get("[ui5-avatar]")
.shadow()
.find(".ui5-avatar-root slot:not([name])")
.find(".ui5-avatar-root slot:not([name])")
.should("exist");

cy.get("[ui5-avatar]")
Expand Down Expand Up @@ -607,23 +608,23 @@ describe("Avatar Rendering and Interaction", () => {
.shadow()
.find(".ui5-avatar-root")
.realClick();

cy.get("@clickStub")
.should("have.been.calledOnce");

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

cy.get("@clickStub")
.should("have.been.calledTwice");

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

cy.get("@clickStub")
.should("have.been.calledThrice");
});
Expand All @@ -643,23 +644,23 @@ describe("Avatar Rendering and Interaction", () => {
.shadow()
.find(".ui5-avatar-root")
.realClick();

cy.get("@clickStub")
.should("have.been.calledOnce");

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

cy.get("@clickStub")
.should("have.been.calledOnce");

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

cy.get("@clickStub")
.should("have.been.calledOnce");
});
Expand All @@ -677,7 +678,7 @@ describe("Avatar Rendering and Interaction", () => {

cy.get("@avatar")
.realClick();

cy.get("@clickStub")
.should("have.been.calledOnce");
});
Expand Down Expand Up @@ -879,4 +880,68 @@ describe("Avatar with Badge", () => {
});
});
});

it("does not permanently hide badge when icon collection loads after initial render", () => {
// Controlled deferred: loader resolves only when resolveLoader() is called.
let resolveLoader!: () => void;
const loaderDeferred = new Promise<void>(resolve => {
resolveLoader = resolve;
});

// Register a custom collection loader that stays pending until resolveLoader() fires.
// The collection name "lazy-test-icons" is not a standard SAP collection so it passes
// through getEffectiveIconCollection() unchanged, avoiding any side-effects on other tests.
registerIconLoader("lazy-test-icons", () =>
loaderDeferred.then(() => ({
collection: "lazy-test-icons",
packageName: "test",
data: {
"my-test-icon": {
paths: ["M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z"],
},
},
}))
);

cy.mount(
<Avatar initials="AB" size="M">
<AvatarBadge slot="badge" icon="lazy-test-icons/my-test-icon"></AvatarBadge>
</Avatar>
);

// Wait for the first render to complete AND verify the badge is not hidden.
// .ui5-avatar-badge-icon is only rendered in shadow DOM when !invalid.
// Its presence proves both: (a) _render() has executed, and (b) invalid was never set to true.
// With the broken sync onBeforeRendering: getIconDataSync() → undefined → invalid=true
// → <Icon> is NOT rendered → this assertion FAILS.
// With the async fix: the await suspends before invalid can be touched → render with
// invalid=false → <Icon> IS in shadow DOM → this assertion PASSES.
cy.get("[ui5-avatar-badge]")
.shadow()
.find(".ui5-avatar-badge-icon")
.should("exist");

// Now resolve the loader — icon data becomes available.
cy.then(() => {
resolveLoader();
});

// After resolution the badge remains visible and its inner Icon retains the name attribute.
cy.get("[ui5-avatar-badge]").should("not.have.attr", "invalid");
cy.get("[ui5-avatar-badge]")
.shadow()
.find(".ui5-avatar-badge-icon")
.should("exist")
.and("have.attr", "name", "lazy-test-icons/my-test-icon");

// Cleanup: iconCollectionPromises and registry live on the shared meta DOM element and
// persist across tests in the same Cypress session. Without cleanup, a second run of this
// test would find the resolved promise and icon data already in cache — getIconDataSync()
// would return immediately, bypassing the deferred mechanism and masking a regression.
cy.document().then(doc => {
const meta = doc.querySelector("meta[name=\"ui5-shared-resources\"]") as unknown as Record<string, Record<string, Map<string, unknown>>>;
meta?.["SVGIcons"]?.["promises"]?.delete("lazy-test-icons");
meta?.["SVGIcons"]?.["registry"]?.delete("lazy-test-icons/my-test-icon");
});
});
});
15 changes: 12 additions & 3 deletions packages/main/src/AvatarBadge.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
import { getIconDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
import { getIconData, getIconDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";

// Template
import AvatarBadgeTemplate from "./AvatarBadgeTemplate.js";
Expand All @@ -12,6 +12,8 @@ import AvatarBadgeCss from "./generated/themes/AvatarBadge.css.js";

import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";

const ICON_NOT_FOUND = "ICON_NOT_FOUND";

/**
* @class
* ### Overview
Expand Down Expand Up @@ -83,8 +85,15 @@ class AvatarBadge extends UI5Element {
@property({ type: Boolean })
invalid = false;

onBeforeRendering() {
this.invalid = !this.icon || !getIconDataSync(this.icon);
async onBeforeRendering() {
const icon = this.icon;
if (!icon) {
this.invalid = true;
return;
}

const iconData = getIconDataSync(icon) || await getIconData(icon);
this.invalid = !iconData || iconData === ICON_NOT_FOUND;
}
}

Expand Down
Loading