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(); });