Playlists E2E tests

Author: martpie

src/__tests__/library.test-e2e.tsx

@@ -1,15 +1,13 @@
 import { expect, test } from 'vite-plus/test';
 import { page, userEvent } from 'vite-plus/test/browser';
 
-import { beforeEachSetup } from './test-helpers';
+import { beforeEachSetup, goToLibrary, scanLibrary } from './test-helpers';
 
 beforeEachSetup();
 
 test('The library tab should display all tracks', async () => {
-  // Fake the import of tracks
-  await page.getByTestId('footer-settings-link').click();
-  await page.getByTestId('scan-library-button').click();
-  await page.getByTestId('footer-library-link').click();
+  await scanLibrary();
+  await goToLibrary();
 
   // Ensure we have the 3 test-tracks, but no more
   await expect.element(page.getByTestId('track-row-0')).toBeInTheDocument();
@@ -29,10 +27,8 @@ test('The library tab should display all tracks', async () => {
 });
 
 test('Tracks should selectable via click + modifiers', async () => {
-  // Fake the import of tracks
-  await page.getByTestId('footer-settings-link').click();
-  await page.getByTestId('scan-library-button').click();
-  await page.getByTestId('footer-library-link').click();
+  await scanLibrary();
+  await goToLibrary();
 
   const firstTrack = page.getByTestId(/track-row-/).first();
   const secondTrack = page.getByTestId(/track-row-/).nth(1);
@@ -72,10 +68,8 @@ test('Tracks should selectable via click + modifiers', async () => {
 });
 
 test('Tracks should be selectable via keyboard only (after a single selection)', async () => {
-  // Fake the import of tracks
-  await page.getByTestId('footer-settings-link').click();
-  await page.getByTestId('scan-library-button').click();
-  await page.getByTestId('footer-library-link').click();
+  await scanLibrary();
+  await goToLibrary();
 
   const firstTrack = page.getByTestId(/track-row-/).first();
   const secondTrack = page.getByTestId(/track-row-/).nth(1);
@@ -131,10 +125,8 @@ test('Tracks should be selectable via keyboard only (after a single selection)',
 });
 
 test('Search should filter tracks in the library', async () => {
-  // Fake the import of tracks
-  await page.getByTestId('footer-settings-link').click();
-  await page.getByTestId('scan-library-button').click();
-  await page.getByTestId('footer-library-link').click();
+  await scanLibrary();
+  await goToLibrary();
 
   const search = page.getByTestId('library-search');
   const searchClear = page.getByTestId('library-search-clear');
@@ -174,10 +166,8 @@ test('Search should filter tracks in the library', async () => {
 });
 
 test('Column headers should sort tracks in the library', async () => {
-  // Fake the import of tracks
-  await page.getByTestId('footer-settings-link').click();
-  await page.getByTestId('scan-library-button').click();
-  await page.getByTestId('footer-library-link').click();
+  await scanLibrary();
+  await goToLibrary();
 
   const firstTrack = page.getByTestId(/track-row-/).first();
   const secondTrack = page.getByTestId(/track-row-/).nth(1);

src/__tests__/player.test-e2e.tsx

@@ -1,7 +1,7 @@
 import { expect, test } from 'vite-plus/test';
 import { page } from 'vite-plus/test/browser';
 
-import { beforeEachSetup } from './test-helpers';
+import { beforeEachSetup, goToLibrary, scanLibrary } from './test-helpers';
 
 beforeEachSetup();
 
@@ -14,10 +14,8 @@ test('Double click on a track should play it and display its metadata', async ()
     .element(page.getByTestId('playercontrol-pause'))
     .not.toBeInTheDocument();
 
-  // Fake the import of tracks
-  await page.getByTestId('footer-settings-link').click();
-  await page.getByTestId('scan-library-button').click();
-  await page.getByTestId('footer-library-link').click();
+  await scanLibrary();
+  await goToLibrary();
 
   // Double-clicking on a track should start the player
   await page.getByTestId('track-row-0').dblClick();

src/__tests__/playlists.test-e2e.tsx

@@ -0,0 +1,77 @@
+import { expect, test } from 'vite-plus/test';
+import { page, userEvent } from 'vite-plus/test/browser';
+
+import { beforeEachSetup, goToPlaylists } from './test-helpers';
+
+beforeEachSetup();
+
+async function createPlaylist() {
+  await page.getByTestId('playlist-new-button').click();
+}
+
+async function renamePlaylist(currentName: string, newName: string) {
+  await page.getByRole('link', { name: currentName }).dblClick();
+  const input = page.getByTestId('playlist-rename-input');
+  await input.clear();
+  await input.fill(newName);
+  await userEvent.keyboard('[Enter]');
+}
+
+test('Playlists', async () => {
+  await goToPlaylists();
+
+  // Empty state when no playlists exist
+  await expect
+    .element(page.getByTestId('view-message'))
+    .toHaveTextContent("You haven't created any playlist yet");
+
+  // Clicking "create one now" creates a playlist and shows the empty playlist view
+  await page.getByTestId('create-playlist-call-to-action').click();
+  await expect
+    .element(page.getByTestId('view-message'))
+    .toHaveTextContent('Empty playlist');
+
+  // Creating more playlists via the + button shows them all in the sidebar
+  await createPlaylist();
+  await createPlaylist();
+  const playlistLinks = page.getByRole('link', { name: 'New playlist' });
+  await expect.element(playlistLinks.nth(0)).toBeInTheDocument();
+  await expect.element(playlistLinks.nth(1)).toBeInTheDocument();
+  await expect.element(playlistLinks.nth(2)).toBeInTheDocument();
+  await expect.element(playlistLinks.nth(3)).not.toBeInTheDocument();
+
+  // Rename via Escape cancels the rename
+  await page.getByRole('link', { name: 'New playlist' }).first().dblClick();
+  const input = page.getByTestId('playlist-rename-input');
+  await input.clear();
+  await input.fill('Cancelled Name');
+  await userEvent.keyboard('[Escape]');
+  await expect
+    .element(page.getByRole('link', { name: 'Cancelled Name' }))
+    .not.toBeInTheDocument();
+
+  // Rename via Enter commits the new name
+  await renamePlaylist('New playlist', 'Alpha');
+  await expect
+    .element(page.getByRole('link', { name: 'Alpha' }))
+    .toBeInTheDocument();
+
+  await renamePlaylist('New playlist', 'Another Blues');
+  await renamePlaylist('New playlist', 'Best Of');
+
+  // Playlists are grouped by first letter
+  const letterGroups = page.getByTestId('sidenav-letter-group');
+  await expect.element(letterGroups.nth(0)).toHaveTextContent('A');
+  await expect.element(letterGroups.nth(1)).toHaveTextContent('B');
+  await expect.element(letterGroups.nth(2)).not.toBeInTheDocument();
+
+  await expect
+    .element(page.getByRole('link', { name: 'Alpha' }))
+    .toBeInTheDocument();
+  await expect
+    .element(page.getByRole('link', { name: 'Another Blues' }))
+    .toBeInTheDocument();
+  await expect
+    .element(page.getByRole('link', { name: 'Best Of' }))
+    .toBeInTheDocument();
+});

src/__tests__/test-helpers.tsx

@@ -1,5 +1,33 @@
 import { i18n } from '@lingui/core';
 import { beforeEach, vi } from 'vite-plus/test';
+import { page } from 'vite-plus/test/browser';
+
+// ---------------------------------------------------------------------------
+// Navigation helpers
+// ---------------------------------------------------------------------------
+
+export async function goToLibrary() {
+  await page.getByTestId('footer-library-link').click();
+}
+
+export async function goToPlaylists() {
+  await page.getByTestId('footer-playlists-link').click();
+}
+
+export async function goToSettings() {
+  await page.getByTestId('footer-settings-link').click();
+}
+
+// ---------------------------------------------------------------------------
+// Library helpers
+// ---------------------------------------------------------------------------
+
+/** Triggers a library scan using the mock tracks */
+export async function scanLibrary() {
+  await goToSettings();
+  await page.getByTestId('scan-library-button').click();
+}
+
 import { render } from 'vitest-browser-react';
 
 import { MOCK_CONFIG } from '../lib/__mocks__/bridge-config.ts';

src/components/SideNav.tsx

@@ -39,7 +39,12 @@ export default function SideNav(props: Props) {
           {Object.entries(groupedChildren).map(([letter, children]) => {
             return (
               <React.Fragment key={letter}>
-                <div {...stylex.props(styles.letter)}>{letter}</div>
+                <div
+                  {...stylex.props(styles.letter)}
+                  data-testid="sidenav-letter-group"
+                >
+                  {letter}
+                </div>
                 <div {...stylex.props(styles.items)}>{children}</div>
               </React.Fragment>
             );

src/components/SideNavLink.tsx

@@ -126,18 +126,30 @@ export default function SideNavLink(props: Props): React.ReactNode {
         onBlur={onBlur}
         onFocus={onFocus}
         ref={(ref) => ref?.focus()}
+        data-testid="playlist-rename-input"
         {...stylex.props(styles.sideNavLink, styles.sideNavLinkInput)}
       />
     );
   }
 
+  const onDoubleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (onRename) {
+        e.preventDefault();
+        setRenamed(true);
+      }
+    },
+    [onRename],
+  );
+
   return (
     <NavigationMenu.Item>
       <NavigationMenu.Link
         render={(renderProps) => (
           <Link
             {...renderProps}
             onContextMenu={onContextMenu}
+            onDoubleClick={onDoubleClick}
             draggable={false}
             {...linkOptions}
             {...stylex.props(styles.sideNavLink)}

src/elements/ButtonIcon.tsx

@@ -8,16 +8,27 @@ type Props = React.ComponentPropsWithRef<'button'> & {
   iconSize?: IconSize;
   isActive?: boolean;
   xstyle?: stylex.CompiledStyles;
+  'data-testid'?: string;
 };
 
 export default function ButtonIcon(props: Props) {
-  const { onClick, icon, iconSize, isActive, ref, xstyle, ...rest } = props;
+  const {
+    onClick,
+    icon,
+    iconSize,
+    isActive,
+    ref,
+    xstyle,
+    'data-testid': testId,
+    ...rest
+  } = props;
   return (
     <button
       ref={ref}
       type="button"
       onClick={onClick}
       data-museeks-action
+      data-testid={testId}
       {...rest}
       {...stylex.props(styles.button, xstyle)}
     >

src/lib/__mocks__/bridge-database.ts

@@ -61,6 +61,9 @@ const MOCK_TRACKS: Array<Track> = [
 // Weirdly, when using a class property, accessing it is extremely slow. No idea why. May be a webkit issue.
 let tracks: Array<Track> = [];
 
+let playlists: Array<Playlist> = [];
+let nextPlaylistId = 0;
+
 class DatabaseBridge implements DatabaseBridgeInterface {
   async getAllTracks(): Promise<Array<Track>> {
     return tracks;
@@ -83,6 +86,8 @@ class DatabaseBridge implements DatabaseBridgeInterface {
     _refresh = false,
   ): Promise<ScanResult> {
     tracks = MOCK_TRACKS;
+    playlists = [];
+    nextPlaylistId = 0;
 
     return {
       playlist_count: 0,
@@ -109,39 +114,49 @@ class DatabaseBridge implements DatabaseBridgeInterface {
   }
 
   async getAllPlaylists(): Promise<Array<Playlist>> {
-    return [];
+    return playlists;
   }
 
-  async getPlaylist(_id: string): Promise<Playlist> {
-    return {
-      id: '0',
-      name: 'test playlist',
-      tracks: [],
-      import_path: null,
-    };
+  async getPlaylist(id: string): Promise<Playlist> {
+    const playlist = playlists.find((p) => p.id === id);
+    if (!playlist) throw 'Playlist not found';
+    return playlist;
   }
 
-  async createPlaylist(_name: string, _ids: Array<string>): Promise<Playlist> {
-    return this.getPlaylist('0');
+  async createPlaylist(name: string, ids: Array<string>): Promise<Playlist> {
+    const playlist: Playlist = {
+      id: String(nextPlaylistId++),
+      name,
+      tracks: ids,
+      import_path: null,
+    };
+    playlists.push(playlist);
+    return playlist;
   }
 
-  async renamePlaylist(_id: string, _name: string): Promise<Playlist> {
-    return this.getPlaylist('0');
+  async renamePlaylist(id: string, name: string): Promise<Playlist> {
+    const playlist = playlists.find((p) => p.id === id);
+    if (!playlist) throw 'Playlist not found';
+    playlist.name = name;
+    return playlist;
   }
 
   async setPlaylistTracks(
-    _id: string,
-    _tracks: Array<string>,
+    id: string,
+    trackIDs: Array<string>,
   ): Promise<Playlist> {
-    return this.getPlaylist('0');
+    const playlist = playlists.find((p) => p.id === id);
+    if (!playlist) throw 'Playlist not found';
+    playlist.tracks = trackIDs;
+    return playlist;
   }
 
   async exportPlaylist(_id: string): Promise<void> {
     return;
   }
 
-  async deletePlaylist(_id: string): Promise<void> {
-    return;
+  async deletePlaylist(id: string): Promise<void> {
+    playlists = playlists.filter((p) => p.id !== id);
   }
 
   async reset(): Promise<string | null> {

src/routes/playlists.tsx

@@ -140,7 +140,10 @@ function ViewPlaylists() {
           <Trans>You haven{"'"}t created any playlist yet</Trans>
         </p>
         <ViewMessage.Sub>
-          <Link onClick={createPlaylist}>
+          <Link
+            onClick={createPlaylist}
+            data-testid="create-playlist-call-to-action"
+          >
             <Trans>create one now</Trans>
           </Link>
         </ViewMessage.Sub>
@@ -168,6 +171,7 @@ function ViewPlaylists() {
               icon="plus"
               onClick={createPlaylist}
               title={t`New Playlist`}
+              data-testid="playlist-new-button"
             />
           }
         >