++

tests/client/profile-avatar-loading.test.ts

@@ -0,0 +1,34 @@
+// @vitest-environment jsdom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import ProfileAvatar from '@/components/hermes/profiles/ProfileAvatar.vue'
+import { fetchProfileAvatar } from '@/api/hermes/profiles'
+
+vi.mock('@/api/hermes/profiles', () => ({ fetchProfileAvatar: vi.fn() }))
+
+describe('profile avatar loading', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('fetches an uploaded image only when displayed and ignores old profile responses', async () => {
+    let finish!: (data: any) => void
+    vi.mocked(fetchProfileAvatar).mockReturnValueOnce(new Promise(resolve => { finish = resolve }))
+    vi.mocked(fetchProfileAvatar).mockResolvedValueOnce({ type: 'image', dataUrl: 'data:image/png;base64,Yg==' })
+    const wrapper = mount(ProfileAvatar, { props: { name: 'a', avatar: { type: 'image', updatedAt: 1 } } })
+    expect(fetchProfileAvatar).toHaveBeenCalledWith('a')
+    await wrapper.setProps({ name: 'b', avatar: { type: 'image', updatedAt: 2 } })
+    await flushPromises()
+    expect(wrapper.find('img').attributes('src')).toBe('data:image/png;base64,Yg==')
+    finish({ type: 'image', dataUrl: 'data:image/png;base64,YQ==' })
+    await flushPromises()
+    expect(wrapper.find('img').attributes('src')).toBe('data:image/png;base64,Yg==')
+    wrapper.unmount()
+  })
+
+  it('does not fetch generated or already loaded avatars', async () => {
+    const wrapper = mount(ProfileAvatar, { props: { name: 'a', avatar: { type: 'generated', seed: 'a' } } })
+    await wrapper.setProps({ avatar: { type: 'image', dataUrl: 'data:image/png;base64,YQ==' } })
+    expect(fetchProfileAvatar).not.toHaveBeenCalled()
+    expect(wrapper.find('img').attributes('src')).toBe('data:image/png;base64,YQ==')
+    wrapper.unmount()
+  })
+})