From 0ce78035aa7cbb24bb5d7b257f36ca0a2b58fc4b Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Sun, 3 May 2026 12:28:21 -0400 Subject: [PATCH] test(web): PlaylistCard cover-img assertion uses DOM query MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The production element renders as role="presentation" (decorative — playlist name is in sibling text). screen.getByRole('img') doesn't match presentation-role elements. Switch to container.querySelector('img') so the test doesn't fight the correct a11y choice. Production code unchanged. --- web/src/lib/components/PlaylistCard.test.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/web/src/lib/components/PlaylistCard.test.ts b/web/src/lib/components/PlaylistCard.test.ts index 95258924..cd33c451 100644 --- a/web/src/lib/components/PlaylistCard.test.ts +++ b/web/src/lib/components/PlaylistCard.test.ts @@ -32,9 +32,15 @@ describe('PlaylistCard', () => { }); test('renders cover image when cover_url is set', () => { - render(PlaylistCard, { props: { playlist: { ...base, cover_url: '/api/playlists/p-1/cover' } } }); - const img = screen.getByRole('img'); - expect(img.getAttribute('src')).toBe('/api/playlists/p-1/cover'); + // The has alt="" (decorative — the playlist name is in the + // sibling text below, so duplicating it for screen readers would be + // noise). Empty alt makes Testing Library expose role="presentation" + // instead of role="img"; query the DOM directly so the assertion + // doesn't fight the (correct) a11y choice. + const { container } = render(PlaylistCard, { props: { playlist: { ...base, cover_url: '/api/playlists/p-1/cover' } } }); + const img = container.querySelector('img'); + expect(img).not.toBeNull(); + expect(img!.getAttribute('src')).toBe('/api/playlists/p-1/cover'); }); test('renders glyph fallback when cover_url is empty', () => {