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:
@@ -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', () => {
|
||||
|
||||
Reference in New Issue
Block a user