Dashboard entity search test

Author: nukeop

packages/player/src/views/Dashboard/Dashboard.test-wrapper.tsx

@@ -1,5 +1,7 @@
+import { QueryClient } from '@tanstack/react-query';
 import { createMemoryHistory, createRouter } from '@tanstack/react-router';
 import { render, RenderResult, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import App from '../../App';
 import { routeTree } from '../../routeTree.gen';
@@ -14,6 +16,19 @@ import {
 } from '../../test/fixtures/dashboard';
 import { resetInMemoryTauriStore } from '../../test/utils/inMemoryTauriStore';
 
+type MountResult = RenderResult & {
+  router: ReturnType<typeof createRouter<typeof routeTree>>;
+};
+
+const findCard = (section: HTMLElement, text: string, label: string) => {
+  const cards = within(section).getAllByTestId('card');
+  const card = cards.find((card) => within(card).queryByText(text));
+  if (!card) {
+    throw new Error(`${label} "${text}" not found`);
+  }
+  return card;
+};
+
 export const DashboardWrapper = {
   reset() {
     providersHost.clear();
@@ -24,12 +39,17 @@ export const DashboardWrapper = {
     providersHost.register(builder.build());
   },
 
-  async mount(): Promise<RenderResult> {
+  async mount(): Promise<MountResult> {
     const history = createMemoryHistory({ initialEntries: ['/dashboard'] });
     const router = createRouter({ routeTree, history });
-    const component = render(<App routerProp={router} />);
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    const component = render(
+      <App routerProp={router} queryClientProp={queryClient} />,
+    );
     await screen.findByTestId('dashboard-view');
-    return component;
+    return { ...component, router };
   },
 
   get emptyState() {
@@ -43,13 +63,6 @@ export const DashboardWrapper = {
     get table() {
       return screen.queryByTestId('dashboard-top-tracks');
     },
-    async findTable() {
-      return screen.findByTestId('dashboard-top-tracks');
-    },
-    track(title: string) {
-      const table = screen.getByTestId('dashboard-top-tracks');
-      return within(table).queryByText(title);
-    },
     async findTrack(title: string) {
       const table = await screen.findByTestId('dashboard-top-tracks');
       return within(table).findByText(title);
@@ -61,53 +74,74 @@ export const DashboardWrapper = {
       return screen.queryByRole('heading', { name: /top artists/i });
     },
     artist(name: string) {
-      const section = screen.getByTestId('dashboard-top-artists');
-      return within(section).queryByText(name);
-    },
-    async findArtist(name: string) {
-      const section = await screen.findByTestId('dashboard-top-artists');
-      return within(section).findByText(name);
+      return {
+        async find() {
+          const section = await screen.findByTestId('dashboard-top-artists');
+          return within(section).findByText(name);
+        },
+        async click() {
+          const section = await screen.findByTestId('dashboard-top-artists');
+          await userEvent.click(findCard(section, name, 'Artist card'));
+        },
+      };
     },
   },
 
   topAlbums: {
-    get section() {
-      return screen.queryByTestId('dashboard-top-albums');
-    },
     get heading() {
       return screen.queryByRole('heading', { name: /top albums/i });
     },
-    async findAlbum(title: string) {
-      const section = await screen.findByTestId('dashboard-top-albums');
-      return within(section).findByText(title);
+    album(title: string) {
+      return {
+        async find() {
+          const section = await screen.findByTestId('dashboard-top-albums');
+          return within(section).findByText(title);
+        },
+        async click() {
+          const section = await screen.findByTestId('dashboard-top-albums');
+          await userEvent.click(findCard(section, title, 'Album card'));
+        },
+      };
     },
   },
 
   editorialPlaylists: {
-    get section() {
-      return screen.queryByTestId('dashboard-editorial-playlists');
-    },
     get heading() {
       return screen.queryByRole('heading', { name: /top playlists/i });
     },
-    async findPlaylist(name: string) {
-      const section = await screen.findByTestId(
-        'dashboard-editorial-playlists',
-      );
-      return within(section).findByText(name);
+    playlist(name: string) {
+      return {
+        async find() {
+          const section = await screen.findByTestId(
+            'dashboard-editorial-playlists',
+          );
+          return within(section).findByText(name);
+        },
+        async click() {
+          const section = await screen.findByTestId(
+            'dashboard-editorial-playlists',
+          );
+          await userEvent.click(findCard(section, name, 'Playlist card'));
+        },
+      };
     },
   },
 
   newReleases: {
-    get section() {
-      return screen.queryByTestId('dashboard-new-releases');
-    },
     get heading() {
       return screen.queryByRole('heading', { name: /new releases/i });
     },
-    async findRelease(title: string) {
-      const section = await screen.findByTestId('dashboard-new-releases');
-      return within(section).findByText(title);
+    release(title: string) {
+      return {
+        async find() {
+          const section = await screen.findByTestId('dashboard-new-releases');
+          return within(section).findByText(title);
+        },
+        async click() {
+          const section = await screen.findByTestId('dashboard-new-releases');
+          await userEvent.click(findCard(section, title, 'Release card'));
+        },
+      };
     },
   },
 
@@ -148,5 +182,13 @@ export const DashboardWrapper = {
         .withCapabilities('newReleases')
         .withFetchNewReleases(async () => NEW_RELEASES_DASHBOARD);
     },
+    topArtistsProviderWithoutMetadata() {
+      return new DashboardProviderBuilder()
+        .withId('discovery-dashboard')
+        .withName('Discovery')
+        .withMetadataProviderId(undefined)
+        .withCapabilities('topArtists')
+        .withFetchTopArtists(async () => TOP_ARTISTS_DASHBOARD);
+    },
   },
 };

packages/player/src/views/Dashboard/Dashboard.test.tsx

@@ -49,10 +49,10 @@ describe('Dashboard view', () => {
 
     expect(DashboardWrapper.topArtists.heading).toBeInTheDocument();
     expect(
-      await DashboardWrapper.topArtists.findArtist('Radiohead'),
+      await DashboardWrapper.topArtists.artist('Radiohead').find(),
     ).toBeInTheDocument();
     expect(
-      await DashboardWrapper.topArtists.findArtist('Björk'),
+      await DashboardWrapper.topArtists.artist('Björk').find(),
     ).toBeInTheDocument();
   });
 
@@ -64,7 +64,7 @@ describe('Dashboard view', () => {
     await DashboardWrapper.mount();
 
     expect(
-      await DashboardWrapper.topAlbums.findAlbum('Kid A'),
+      await DashboardWrapper.topAlbums.album('Kid A').find(),
     ).toBeInTheDocument();
     expect(DashboardWrapper.topAlbums.heading).toBeInTheDocument();
   });
@@ -77,9 +77,9 @@ describe('Dashboard view', () => {
     await DashboardWrapper.mount();
 
     expect(
-      await DashboardWrapper.editorialPlaylists.findPlaylist(
-        'Art Rock Essentials',
-      ),
+      await DashboardWrapper.editorialPlaylists
+        .playlist('Art Rock Essentials')
+        .find(),
     ).toBeInTheDocument();
     expect(DashboardWrapper.editorialPlaylists.heading).toBeInTheDocument();
   });
@@ -92,11 +92,24 @@ describe('Dashboard view', () => {
     await DashboardWrapper.mount();
 
     expect(
-      await DashboardWrapper.newReleases.findRelease('In Rainbows'),
+      await DashboardWrapper.newReleases.release('In Rainbows').find(),
     ).toBeInTheDocument();
     expect(DashboardWrapper.newReleases.heading).toBeInTheDocument();
   });
 
+  it('navigates to search when clicking an artist card without metadataProviderId', async () => {
+    DashboardWrapper.seedProvider(
+      DashboardWrapper.fixtures.topArtistsProviderWithoutMetadata(),
+    );
+
+    const { router } = await DashboardWrapper.mount();
+
+    await DashboardWrapper.topArtists.artist('Radiohead').click();
+
+    expect(router.state.location.pathname).toBe('/search');
+    expect(router.state.location.search).toEqual({ q: 'Radiohead' });
+  });
+
   it('shows tracks from multiple providers', async () => {
     DashboardWrapper.seedProvider(
       new DashboardProviderBuilder()