test(dify-ui): remove brittle primitive assertions (#38529)

packages/dify-ui/src/avatar/__tests__/index.spec.tsx

@@ -1,6 +1,30 @@
 import { render } from 'vitest-browser-react'
 import { Avatar, AvatarFallback, AvatarImage, AvatarRoot } from '..'
 
+function stubImageLoader() {
+  const originalImage = window.Image
+  const images: HTMLImageElement[] = []
+
+  function TestImage(_width?: number, _height?: number): HTMLImageElement {
+    const image = document.createElement('img')
+    images.push(image)
+    return image
+  }
+
+  Object.defineProperty(window, 'Image', {
+    configurable: true,
+    value: TestImage,
+    writable: true,
+  })
+
+  return {
+    images,
+    restore: () => {
+      window.Image = originalImage
+    },
+  }
+}
+
 describe('Avatar', () => {
   describe('Rendering', () => {
     it('should keep the fallback visible when avatar URL is provided before image load', async () => {
@@ -69,7 +93,7 @@ describe('Avatar', () => {
     })
 
     it('should handle empty string avatar as falsy value', async () => {
-      const screen = await render(<Avatar name="Test" avatar={'' as string | null} />)
+      const screen = await render(<Avatar name="Test" avatar="" />)
 
       expect(screen.container.querySelector('img')).not.toBeInTheDocument()
       await expect.element(screen.getByText('T')).toBeInTheDocument()
@@ -77,25 +101,32 @@ describe('Avatar', () => {
   })
 
   describe('onLoadingStatusChange', () => {
-    it('should render the fallback when avatar and onLoadingStatusChange are provided', async () => {
-      const screen = await render(
-        <Avatar
-          name="John"
-          avatar="https://example.com/avatar.jpg"
-          onLoadingStatusChange={vi.fn()}
-        />,
-      )
-
-      await expect.element(screen.getByText('J')).toBeInTheDocument()
-    })
-
-    it('should not render image when avatar is null even with onLoadingStatusChange', async () => {
+    it('should forward image loading status changes', async () => {
+      const { images, restore } = stubImageLoader()
       const onStatusChange = vi.fn()
-      const screen = await render(
-        <Avatar name="John" avatar={null} onLoadingStatusChange={onStatusChange} />,
-      )
 
-      expect(screen.container.querySelector('img')).not.toBeInTheDocument()
+      try {
+        await render(
+          <Avatar
+            name="John"
+            avatar="https://example.com/avatar.jpg"
+            onLoadingStatusChange={onStatusChange}
+          />,
+        )
+
+        await vi.waitFor(() => {
+          expect(onStatusChange).toHaveBeenCalledWith('loading')
+        })
+
+        images[0]?.onload?.(new Event('load'))
+
+        await vi.waitFor(() => {
+          expect(onStatusChange).toHaveBeenCalledWith('loaded')
+        })
+      }
+      finally {
+        restore()
+      }
     })
   })
 })

packages/dify-ui/src/progress/__tests__/index.spec.tsx

@@ -24,34 +24,11 @@ describe('ProgressCircle', () => {
   })
 
   it('renders indeterminate state when value is null', async () => {
-    const screen = await render(<ProgressCircle value={null} aria-label="Processing" data-testid="progress" />)
+    const screen = await render(<ProgressCircle value={null} aria-label="Processing" />)
+    const progress = screen.getByLabelText('Processing')
 
-    await expect.element(screen.getByTestId('progress')).toHaveAttribute('data-indeterminate')
-    await expect.element(screen.getByTestId('progress')).not.toHaveAttribute('aria-valuenow')
-    expect(screen.getByTestId('progress').element().querySelector('path')).toBeNull()
-  })
-
-  it('does not render a progress sector for zero progress', async () => {
-    const screen = await render(<ProgressCircle value={0} aria-label="Uploading" data-testid="progress" />)
-
-    expect(screen.getByTestId('progress').element().querySelector('path')).toBeNull()
-  })
-
-  it('renders a deterministic progress sector', async () => {
-    const screen = await render(<ProgressCircle value={75} aria-label="Uploading" data-testid="progress" />)
-
-    const path = screen.getByTestId('progress').element().querySelector('path')!
-
-    expect(path.getAttribute('d')).toContain('A 6,6 0 1 1')
-  })
-
-  it('renders a closed circle sector for complete progress', async () => {
-    const screen = await render(<ProgressCircle value={100} aria-label="Uploading" data-testid="progress" />)
-
-    const path = screen.getByTestId('progress').element().querySelector('path')!
-    const pathData = path.getAttribute('d')!
-
-    expect(pathData).toContain('A 6,6 0 1 1 6,12')
-    expect(pathData).toContain('A 6,6 0 1 1 6,0')
+    await expect.element(progress).toHaveAttribute('role', 'progressbar')
+    await expect.element(progress).toHaveAttribute('data-indeterminate')
+    await expect.element(progress).not.toHaveAttribute('aria-valuenow')
   })
 })