archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(avatar): broken fallbacks (#5519)

Browse Source
This commit is contained in:
WK 2025-07-29 00:53:28 +08:00 committed by GitHub
parent 5eb686843b
commit 2cb6ecff93
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 71 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/tiny-ducks-think.md Normal file
View File

@ -0,0 +1,5 @@
---
"@heroui/avatar": patch
---
fix broken fallbacks in avatar (#5506)

65
packages/components/avatar/__tests__/avatar.test.tsx
View File

@ -104,4 +104,69 @@ describe("Avatar - fallback + loading strategy", () => {
expect(container.querySelector("svg")).toBeInTheDocument();
});
test("should render name initials fallback when image fails to load and showFallback is true", async () => {
const mock = mocks.image();
mock.simulate("error");
const src = "https://avatars.githubusercontent.com/u/30373425";
const name = "Junior Garcia";
const {container} = render(<Avatar showFallback name={name} src={src} />);
act(() => {
jest.runAllTimers();
});
expect(container.querySelector("span")).toHaveTextContent("Jun");
});
test("should render default avatar fallback when image fails to load with no name and showFallback is true", async () => {
const mock = mocks.image();
mock.simulate("error");
const src = "https://avatars.githubusercontent.com/u/30373425";
const {container} = render(<Avatar showFallback src={src} />);
act(() => {
jest.runAllTimers();
});
expect(container.querySelector("svg")).toBeInTheDocument();
});
test("should not render fallback when image fails to load and showFallback is false", async () => {
const mock = mocks.image();
mock.simulate("error");
const src = "https://avatars.githubusercontent.com/u/30373425";
const name = "Junior Garcia";
const {container} = render(<Avatar name={name} showFallback={false} src={src} />);
act(() => {
jest.runAllTimers();
});
expect(container.querySelector("span")).not.toHaveTextContent("Jun");
expect(container.querySelector("svg")).not.toBeInTheDocument();
});
test("should not render fallback when image fails to load and showFallback is not passed", async () => {
const mock = mocks.image();
mock.simulate("error");
const src = "https://avatars.githubusercontent.com/u/30373425";
const name = "Junior Garcia";
const {container} = render(<Avatar name={name} src={src} />);
act(() => {
jest.runAllTimers();
});
expect(container.querySelector("span")).not.toHaveTextContent("Jun");
expect(container.querySelector("svg")).not.toBeInTheDocument();
});
});

2
packages/components/avatar/src/use-avatar.ts
View File

@ -145,7 +145,7 @@ export function useAvatar(originalProps: UseAvatarProps = {}) {
src,
onError,
ignoreFallback,
shouldBypassImageLoad: as !== undefined || !isHeroImage,
shouldBypassImageLoad: as !== undefined || (ImgComponent !== "img" && !isHeroImage),
});
const isImgLoaded = imageStatus === "loaded";