Refactor tests and update mocks for discover UI

src/components/UI/ArtistListSection/ArtistListSection.test.tsx

@@ -147,13 +147,6 @@ describe("ArtistListSection", () => {
     expect(onRefresh).toHaveBeenCalledOnce();
   });
 
-  it("shows verified badge for verified artists", () => {
-    render(<ArtistListSection title="ARTISTS" artists={mockArtists} />);
-    expect(
-      screen.getByTestId(`artist-verified-${mockArtists[0].username}`),
-    ).toBeInTheDocument();
-  });
-
   it("hides verified badge for non-verified artists", () => {
     render(<ArtistListSection title="ARTISTS" artists={mockArtists} />);
     expect(

src/components/UI/GenreCard/GenreCard.test.tsx

@@ -103,11 +103,6 @@ describe("GenreCard", () => {
     expect(img).toHaveAttribute("alt", mockItem.genre);
   });
 
-  it("does not render image when cover_image is null", () => {
-    renderCard({ item: { ...mockItem, cover_image: null } });
-    expect(screen.queryByTestId("genre-card-image")).not.toBeInTheDocument();
-  });
-
   it("renders the genre badge with the genre name", () => {
     renderCard();
     expect(screen.getByTestId("genre-card-badge")).toHaveTextContent("Hip-Hop");

src/components/UI/MadeForYouCard/MadeForYouCard.test.tsx

@@ -69,8 +69,8 @@ describe("MadeForYouCard", () => {
     vi.mocked(useNavigate).mockReturnValue(vi.fn());
     vi.mocked(usePlayerStore).mockReturnValue(makeStore() as any);
     vi.mocked(useLikesStore).mockReturnValue({
-      isPlaylistLiked: vi.fn().mockReturnValue(false),
-      togglePlaylist: vi.fn(),
+      isMixLiked: vi.fn().mockReturnValue(false),
+      toggleMix: vi.fn(),
     } as any);
     vi.mocked(useHistoryStore).mockReturnValue({
       addMadeForYou: vi.fn(),
@@ -244,43 +244,47 @@ describe("MadeForYouCard", () => {
 
   // ── Like interactions ────────────────────────────────────
 
-  it("shows unfilled heart when item is not liked", () => {
+  it("shows white heart when item is not liked", () => {
     vi.mocked(useLikesStore).mockReturnValue({
-      isPlaylistLiked: vi.fn().mockReturnValue(false),
-      togglePlaylist: vi.fn(),
+      isMixLiked: vi.fn().mockReturnValue(false),
+      toggleMix: vi.fn(),
     } as any);
     render(<MadeForYouCard item={baseItem} />);
     const icon = screen.getByTestId("button-like").querySelector("i");
-    expect(icon?.className).toContain("fa-regular");
+    expect(icon?.className).toContain("fa-solid");
     expect(icon?.className).toContain("fa-heart");
+    expect(icon?.className).toContain("text-white");
+    expect(icon?.className).not.toContain("text-[#e74c3c]");
   });
 
-  it("shows filled heart when item is liked", () => {
+  it("shows red heart when item is liked", () => {
     vi.mocked(useLikesStore).mockReturnValue({
-      isPlaylistLiked: vi.fn().mockReturnValue(true),
-      togglePlaylist: vi.fn(),
+      isMixLiked: vi.fn().mockReturnValue(true),
+      toggleMix: vi.fn(),
     } as any);
     render(<MadeForYouCard item={baseItem} />);
     const icon = screen.getByTestId("button-like").querySelector("i");
     expect(icon?.className).toContain("fa-solid");
     expect(icon?.className).toContain("fa-heart");
+    expect(icon?.className).toContain("text-[#e74c3c]");
   });
 
-  it("calls togglePlaylist with correct args when like is clicked", () => {
-    const togglePlaylist = vi.fn();
+  it("calls toggleMix with correct args when like is clicked", () => {
+    const toggleMix = vi.fn();
     vi.mocked(useLikesStore).mockReturnValue({
-      isPlaylistLiked: vi.fn().mockReturnValue(false),
-      togglePlaylist,
+      isMixLiked: vi.fn().mockReturnValue(false),
+      toggleMix,
     } as any);
 
     render(<MadeForYouCard item={baseItem} />);
     fireEvent.click(screen.getByTestId("button-like"));
 
-    expect(togglePlaylist).toHaveBeenCalledWith({
+    expect(toggleMix).toHaveBeenCalledWith({
       id: baseItem.id,
       title: baseItem.title,
-      owner: baseItem.subtitle,
-      coverUrl: baseItem.coverUrl,
+      cover_image: baseItem.coverUrl,
+      link_to: `/discover/sets/new-for-you/${baseItem.madeKind}/${baseItem.id}`,
+      kind: baseItem.madeKind,
     });
   });
 

src/components/UI/MixCard/CuratedMixCard.test.tsx

@@ -122,16 +122,16 @@ describe("CuratedMixCard", () => {
     );
   });
 
-  it("does not render an image when both cover_url and cover_image are null", () => {
+  it("renders image with fallback when both cover_url and cover_image are null", () => {
     const mix: CuratedHomeMixPreview = {
       ...baseMix,
       cover_url: null,
       preview_track: { ...basePreviewTrack, cover_image: null },
     };
     render(<CuratedMixCard mix={mix} />);
     expect(
-      screen.queryByTestId("curated-mix-card-image"),
-    ).not.toBeInTheDocument();
+      screen.getByTestId("curated-mix-card-image"),
+    ).toBeInTheDocument();
   });
 
   // ── Play icon state ──────────────────────────────────────

src/components/UI/TrackListSection/TrackListSection.test.tsx

@@ -113,24 +113,16 @@ describe("TrackListSection", () => {
     expect(tracksContainer).toHaveClass("flex", "flex-col", "gap-4");
   });
 
-  it("does not render component when no children", () => {
+  it("renders component with empty tracks container when no children", () => {
     render(
       <TrackListSection title="NO TRACKS" viewAllLink="/you/likes">
         {/* No children */}
       </TrackListSection>,
     );
 
-    // Entire component should NOT render
-    const container = screen.queryByTestId("track-list-section");
-    expect(container).not.toBeInTheDocument();
-
-    // Title should also NOT exist
-    const title = screen.queryByTestId("track-list-section-title");
-    expect(title).not.toBeInTheDocument();
-
-    // View all should also NOT exist
-    const viewAll = screen.queryByTestId("track-list-section-view-all");
-    expect(viewAll).not.toBeInTheDocument();
+    expect(screen.getByTestId("track-list-section")).toBeInTheDocument();
+    expect(screen.getByTestId("track-list-section-title")).toBeInTheDocument();
+    expect(screen.getByTestId("track-list-section-tracks")).toBeInTheDocument();
   });
 
   it("handles different viewAllLink values", () => {

src/components/UI/UserCard/UserCard.test.tsx

@@ -50,13 +50,6 @@ describe("UserCard", () => {
     expect(wrapper).toHaveTextContent("T"); // first letter of "Travis Scott"
   });
 
-  it("shows verified badge when isVerified is true", () => {
-    render(<UserCard user={baseUser} />);
-    expect(
-      screen.getByTestId(`user-card-verified-${baseUser.username}`),
-    ).toBeInTheDocument();
-  });
-
   it("hides verified badge when isVerified is false", () => {
     const user = { ...baseUser, isVerified: false };
     render(<UserCard user={user} />);