feat(web): TrackMenu overflow + FlagPopover for the quarantine flow

2026-04-30 20:29:07 -04:00
parent b653e83478
commit 8da4a3f9c0
4 changed files with 310 additions and 0 deletions
@@ -0,0 +1,52 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import TrackMenu from './TrackMenu.svelte';
+import type { TrackRef } from '$lib/api/types';
+
+vi.mock('@tanstack/svelte-query', async (orig) => {
+  const actual = (await orig()) as Record<string, unknown>;
+  return { ...actual, useQueryClient: () => ({ invalidateQueries: vi.fn() }) };
+});
+
+vi.mock('$lib/api/quarantine', () => ({
+  flagTrack: vi.fn().mockResolvedValue({})
+}));
+
+const track: TrackRef = {
+  id: 't1',
+  title: 'Roygbiv',
+  album_id: 'a1',
+  album_title: 'Geogaddi',
+  artist_id: 'ar1',
+  artist_name: 'Boards of Canada',
+  duration_sec: 240,
+  stream_url: '/api/tracks/t1/stream'
+};
+
+afterEach(() => vi.clearAllMocks());
+
+describe('TrackMenu', () => {
+  test('opens menu on kebab click', async () => {
+    render(TrackMenu, { props: { track } });
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    await fireEvent.click(screen.getByRole('button', { name: /track actions for roygbiv/i }));
+    expect(screen.getByRole('menu')).toBeInTheDocument();
+    expect(screen.getByRole('menuitem', { name: /flag this track/i })).toBeInTheDocument();
+  });
+
+  test('Escape key closes menu', async () => {
+    render(TrackMenu, { props: { track } });
+    await fireEvent.click(screen.getByRole('button', { name: /track actions/i }));
+    expect(screen.getByRole('menu')).toBeInTheDocument();
+    await fireEvent.keyDown(window, { key: 'Escape' });
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+  });
+
+  test('clicking "Flag this track…" opens FlagPopover and closes menu', async () => {
+    render(TrackMenu, { props: { track } });
+    await fireEvent.click(screen.getByRole('button', { name: /track actions/i }));
+    await fireEvent.click(screen.getByRole('menuitem', { name: /flag this track/i }));
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    expect(screen.getByRole('dialog', { name: /flag this track as broken/i })).toBeInTheDocument();
+  });
+});