fix(web): restore album-page back link; loosen test matchers

The initial Task 13 pass dropped the back-chevron link above the hero
to satisfy a strict getByRole('link', {name: /Miles Davis/}) matcher
that was finding both the back link and the inline hero-artist link.

Better fix: keep the back affordance users expect, and use matchers
that accept ambiguity — getAllByRole for the hero check, and a
strict '^← …' regex for the back-link assertion.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-04-23 20:52:28 -04:00
parent 9d28c9d9de
commit 9b67bb7521
2 changed files with 15 additions and 2 deletions
+7
View File
@@ -35,6 +35,13 @@
<LibrarySkeleton variant="album" />
{:else if query.data}
{@const album = query.data}
<a
href={`/artists/${album.artist_id}`}
class="text-sm text-text-secondary hover:text-text-primary"
>
{album.artist_name}
</a>
<header class="flex flex-col gap-4 md:flex-row md:items-end">
<img
src={album.cover_url}
+8 -2
View File
@@ -50,7 +50,11 @@ describe('album detail page', () => {
render(AlbumPage);
expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Kind of Blue');
expect(screen.getByRole('link', { name: /Miles Davis/ })).toHaveAttribute('href', '/artists/md');
// Two links point at /artists/md: the back chevron and the inline hero link.
// getAllByRole returns both; both should target the artist page.
const artistLinks = screen.getAllByRole('link', { name: /Miles Davis/ });
expect(artistLinks.length).toBeGreaterThanOrEqual(1);
artistLinks.forEach((l) => expect(l).toHaveAttribute('href', '/artists/md'));
expect(screen.getByText(/1959/)).toBeInTheDocument();
expect(screen.getByText(/2 tracks/i)).toBeInTheDocument();
@@ -71,7 +75,9 @@ describe('album detail page', () => {
};
(createAlbumQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: detail }));
render(AlbumPage);
const back = screen.getByRole('link', { name: /Miles Davis/ });
// Back chevron specifically (disambiguated from the inline artist link by
// the leading arrow character).
const back = screen.getByRole('link', { name: /^← Miles Davis/ });
expect(back).toHaveAttribute('href', '/artists/md');
});