web/src/routes/page.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
+import { render, screen, within } from '@testing-library/svelte';
 import { readable } from 'svelte/store';
 import { emptyLikesMock } from '../test-utils/mocks/likes';
 import type { Playlist } from '$lib/api/types';
@@ -103,7 +103,11 @@ describe('home Playlists section', () => {
           : readable({ data: emptyPlaylistsResponse, isPending: false, isError: false })
     );
     render(Page);
-    expect(screen.getByText('For You')).toBeInTheDocument();
+    // For-You renders twice: once in the new hero card at the top of
+    // Home and once in the Playlists carousel. Scope the assertion
+    // to the Playlists section to avoid the hero collision.
+    const playlistsSection = screen.getByLabelText('Playlists');
+    expect(within(playlistsSection).getByText('For You')).toBeInTheDocument();
     const placeholders = screen.queryAllByTestId('playlist-placeholder-card');
     // 1 Discover + 3 Songs-like slots = 4 placeholders alongside the
     // real For-You tile.
@@ -143,7 +147,11 @@ describe('home Playlists section', () => {
           : readable({ data: emptyPlaylistsResponse, isPending: false, isError: false })
     );
     render(Page);
-    expect(screen.getByText('For You')).toBeInTheDocument();
+    // For-You also renders in the hero card; scope to the Playlists
+    // section. The secondary kinds aren't featured in the hero, so
+    // their getByText assertions can stay document-scoped.
+    const playlistsSection = screen.getByLabelText('Playlists');
+    expect(within(playlistsSection).getByText('For You')).toBeInTheDocument();
     expect(screen.getByText('Deep cuts')).toBeInTheDocument();
     expect(screen.getByText('New for you')).toBeInTheDocument();
   });