fix(Avatar): 修复空src时未正确显示fallback (ant-design#6935)

* fix: 修复在next.js环境下的报错

* refactor(deps): 从 ahooks 的 useIsomorphicLayoutEffect 迁移到 rc-util 的 useLayoutEffect

* fix(Avatar): 修复空src时未正确显示fallback

* refactor: 修复变量名以提高代码可读性

* test: 补充src空值测试用例

* fix(Avatar): 增加对空src的处理，确保正确显示fallback内容

* feat(Avatar): 增加onClick事件处理，支持点击头像和fallback内容

* fix: 由Image组件处理fallback，职责划分

* fix: 增加空值判断

* test: 修正单测错误

* fix: 优化渲染逻辑，合并失败和空src的处理

Author: Passing-of-A-Dream

src/components/avatar/avatar.tsx

@@ -1,17 +1,20 @@
-import React from 'react'
 import type { FC, ReactNode } from 'react'
+import React from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
-import { Fallback } from './fallback'
 import Image, { ImageProps } from '../image'
+import { Fallback } from './fallback'
 
 const classPrefix = 'adm-avatar'
 
 export type AvatarProps = {
   src: string
   fallback?: ReactNode
   fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
-} & Pick<ImageProps, 'alt' | 'lazy' | 'onClick' | 'onError' | 'onLoad'> &
+  onClick?: (
+    event: React.MouseEvent<HTMLDivElement | HTMLImageElement, Event>
+  ) => void
+} & Pick<ImageProps, 'alt' | 'lazy' | 'onError' | 'onLoad'> &
   NativeProps<'--size' | '--border-radius'>
 
 const defaultProps = {
@@ -21,11 +24,13 @@ const defaultProps = {
 
 export const Avatar: FC<AvatarProps> = p => {
   const props = mergeProps(defaultProps, p)
+  const mergedSrc = props.src?.trim() || undefined
+
   return withNativeProps(
     props,
     <Image
       className={classPrefix}
-      src={props.src}
+      src={mergedSrc}
       fallback={props.fallback}
       placeholder={props.fallback}
       alt={props.alt}

src/components/avatar/tests/avatar.test.tsx

@@ -14,4 +14,18 @@ describe('Avatar', () => {
     render(<Avatar src='/404' />)
     expect(document.querySelectorAll('.adm-avatar-fallback')[0]).toBeVisible()
   })
+
+  test('empty src should show fallback', () => {
+    render(<Avatar src='' />)
+    const avatar = document.querySelector('.adm-avatar')
+    expect(avatar).toBeVisible()
+    const img = avatar?.querySelector('img')
+    expect(img?.getAttribute('src')).toBeFalsy()
+    expect(document.querySelectorAll('.adm-avatar-fallback')[0]).toBeVisible()
+  })
+
+  test('whitespace src should show fallback', () => {
+    render(<Avatar src={'   '} />)
+    expect(document.querySelectorAll('.adm-avatar-fallback')[0]).toBeVisible()
+  })
 })

src/components/image-viewer/tests/image-viewer.test.tsx

@@ -176,7 +176,7 @@ describe('ImageViewer.Multi', () => {
     })
     const onIndexChange = jest.fn()
 
-    const { getByText } = render(
+    render(
       <ImageViewer.Multi
         visible
         defaultIndex={3}
@@ -195,9 +195,18 @@ describe('ImageViewer.Multi', () => {
     // need to wait image render.
     await act(() => new Promise(resolve => setTimeout(resolve, 2500)))
 
+    // 等待动画完成并确保指示器已更新
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 100))
+    })
+
     const slides = document.querySelectorAll(`.${classPrefix}-control`)[3]
 
-    expect(getByText('4 / 4')).toBeInTheDocument()
+    // 使用查询所有包含数字和斜杠的元素来查找指示器
+    const indicatorElements = screen.getAllByText(/\d+\s*\/\s*\d+/)
+    expect(
+      indicatorElements.some(el => el.textContent?.includes('4 / 4'))
+    ).toBe(true)
 
     mockDrag(slides as HTMLElement, [
       {
@@ -210,7 +219,17 @@ describe('ImageViewer.Multi', () => {
         clientX: 300,
       },
     ])
-    expect(getByText('3 / 4')).toBeInTheDocument()
+
+    // 等待拖拽完成并确保指示器已更新
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 100))
+    })
+
+    const indicatorElementsAfterDrag = screen.getAllByText(/\d+\s*\/\s*\d+/)
+    expect(
+      indicatorElementsAfterDrag.some(el => el.textContent?.includes('3 / 4'))
+    ).toBe(true)
+
     await waitFor(() => expect(onIndexChange).toBeCalledTimes(1))
     await waitFor(() => expect(onIndexChange).toBeCalledWith(2))
 
@@ -226,7 +245,18 @@ describe('ImageViewer.Multi', () => {
       },
     ])
 
-    expect(screen.getByText('4 / 4')).toBeInTheDocument()
+    // 等待拖拽完成并确保指示器已更新
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 100))
+    })
+
+    const indicatorElementsAfterDragBack = screen.getAllByText(/\d+\s*\/\s*\d+/)
+    expect(
+      indicatorElementsAfterDragBack.some(el =>
+        el.textContent?.includes('4 / 4')
+      )
+    ).toBe(true)
+
     await waitFor(() => expect(onIndexChange).toBeCalledTimes(2))
     await waitFor(() => expect(onIndexChange).toBeCalledWith(3))
   })

src/components/image/image.tsx

@@ -1,13 +1,13 @@
-import { mergeProps } from '../../utils/with-default-props'
-import React, { useState, useRef, useEffect } from 'react'
 import type { ReactNode } from 'react'
-import { NativeProps, withNativeProps } from '../../utils/native-props'
+import React, { useEffect, useRef, useState } from 'react'
 import { staged } from 'staged-components'
+import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { toCSSLength } from '../../utils/to-css-length'
-import { LazyDetector } from './lazy-detector'
 import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect'
-import { ImageIcon } from './image-icon'
+import { mergeProps } from '../../utils/with-default-props'
 import { BrokenImageIcon } from './broken-image-icon'
+import { ImageIcon } from './image-icon'
+import { LazyDetector } from './lazy-detector'
 
 const classPrefix = `adm-image`
 
@@ -84,7 +84,7 @@ export const Image = staged<ImageProps>(p => {
   }, [])
 
   function renderInner() {
-    if (failed) {
+    if (failed || (src === undefined && !srcSet)) {
       return <>{props.fallback}</>
     }
     const img = (

src/components/image/tests/image.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { fireEvent, render, act } from 'testing'
+import { act, fireEvent, render } from 'testing'
 import Image from '../index'
 
 const classPrefix = `adm-image`
@@ -48,8 +48,9 @@ describe('Image', () => {
     window.IntersectionObserver = mockIntersectionObserver
 
     render(<Image src={demoSrc} lazy />)
-    const img = document.querySelectorAll(`.${classPrefix}-img`)[0]
-    expect(img).not.toHaveAttribute('src')
+    // 初始状态下，由于懒加载，img 元素不应该存在
+    let img = document.querySelectorAll(`.${classPrefix}-img`)[0]
+    expect(img).toBeUndefined()
 
     const calls = mockIntersectionObserver.mock.calls
     const [onChange] = calls[calls.length - 1]
@@ -60,6 +61,7 @@ describe('Image', () => {
         },
       ])
     })
+    img = document.querySelectorAll(`.${classPrefix}-img`)[0]
     expect(img).toHaveAttribute('src', demoSrc)
   })