test(web): PlaylistCard cover-img assertion uses DOM query

The <img alt=""> 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.
This commit is contained in:
2026-05-03 12:28:21 -04:00
parent e0a4d13c45
commit 0ce78035aa
+9 -3
View File
@@ -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 <img> 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', () => {