From 682d7a5ec486c3da0d9d46c14be9389ee1f8f617 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 1 Jun 2026 20:12:59 -0400
Subject: [PATCH] test(web): scope home For-You assertions to Playlists section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The new hero card on Home renders the For-You playlist twice — once
at the top in the featured row and once in the Playlists carousel.
The two existing assertions that did screen.getByText('For You')
now match both and fail. Wrap each in within(playlistsSection) so
the test targets the carousel render specifically.
---
 web/src/routes/page.test.ts | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/src/routes/page.test.ts b/web/src/routes/page.test.ts
index 51df7407..70fbff51 100644
--- a/web/src/routes/page.test.ts
+++ b/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();
   });