From d5166a062ce3aa70913746f7be9f50257670bec6 Mon Sep 17 00:00:00 2001
From: Subagent 5 <subagent@example.com>
Date: Wed, 28 Jan 2026 21:44:52 -0800
Subject: [PATCH] test: refactor LogoOverlay tests to focus on behavior

Remove tests that assert Tailwind utility classes and inline styles.
Focus on semantic attributes (src, alt, draggable) and behavioral
outputs (filtering, rendering counts) per testing guidelines.

Amp-Thread-ID: https://ampcode.com/threads/T-019c083e-8ba0-7699-a5ff-63fd03e24391
Co-authored-by: Amp <amp@ampcode.com>
---
 .../templates/thumbnails/LogoOverlay.test.ts  | 64 ++++++-------------
 1 file changed, 21 insertions(+), 43 deletions(-)

diff --git a/src/components/templates/thumbnails/LogoOverlay.test.ts b/src/components/templates/thumbnails/LogoOverlay.test.ts
index 8cf9921a9..0d45d7128 100644
--- a/src/components/templates/thumbnails/LogoOverlay.test.ts
+++ b/src/components/templates/thumbnails/LogoOverlay.test.ts
@@ -38,58 +38,36 @@ describe('LogoOverlay', () => {
     expect(wrapper.findAll('img')).toHaveLength(3)
   })
 
-  it('applies default position when not specified', () => {
-    const wrapper = mountOverlay([{ provider: 'Google' }])
-    const container = wrapper.find('div')
-    expect(container.classes()).toContain('top-2')
-    expect(container.classes()).toContain('left-2')
-  })
-
-  it('applies custom position from logo config', () => {
-    const wrapper = mountOverlay([
-      { provider: 'Google', position: 'top-2 left-2' }
-    ])
-    const container = wrapper.find('div')
-    expect(container.classes()).toContain('top-2')
-    expect(container.classes()).toContain('left-2')
-  })
-
-  it('renders logo with fixed size and circular shape', () => {
-    const wrapper = mountOverlay([{ provider: 'Google' }])
-    const img = wrapper.find('img')
-    expect(img.classes()).toContain('h-5')
-    expect(img.classes()).toContain('w-5')
-    expect(img.classes()).toContain('rounded-[50%]')
-  })
-
-  it('renders pill container with correct styling', () => {
-    const wrapper = mountOverlay([{ provider: 'Google' }])
-    const pill = wrapper.find('.rounded-full')
-    expect(pill.exists()).toBe(true)
-    expect(pill.classes()).toContain('bg-black/20')
-  })
-
   it('displays provider name in pill', () => {
     const wrapper = mountOverlay([{ provider: 'Google' }])
     const span = wrapper.find('span')
     expect(span.text()).toBe('Google')
   })
 
-  it('applies default opacity of 1', () => {
-    const wrapper = mountOverlay([{ provider: 'Google' }])
-    const pill = wrapper.find('.rounded-full')
-    expect(pill.attributes('style')).toContain('opacity: 1')
-  })
-
-  it('applies custom opacity', () => {
-    const wrapper = mountOverlay([{ provider: 'Google', opacity: 0.5 }])
-    const pill = wrapper.find('.rounded-full')
-    expect(pill.attributes('style')).toContain('opacity: 0.5')
-  })
-
   it('images are not draggable', () => {
     const wrapper = mountOverlay([{ provider: 'Google' }])
     const img = wrapper.find('img')
     expect(img.attributes('draggable')).toBe('false')
   })
+
+  it('filters out logos with empty URLs', () => {
+    const getLogoUrl = (provider: string) =>
+      provider === 'Google' ? '/logos/Google.png' : ''
+    const wrapper = mount(LogoOverlay, {
+      props: {
+        logos: [{ provider: 'Google' }, { provider: 'Unknown' }],
+        getLogoUrl
+      }
+    })
+    expect(wrapper.findAll('img')).toHaveLength(1)
+  })
+
+  it('uses provider as unique key for each logo', () => {
+    const wrapper = mountOverlay([
+      { provider: 'Google' },
+      { provider: 'OpenAI' }
+    ])
+    const containers = wrapper.findAll('[class*="absolute"]')
+    expect(containers).toHaveLength(2)
+  })
 })