Filtering test for artist albums

nukeop · Aug 14, 2024 · 1e1e1e7 · 1e1e1e7
1 parent d459c2a
commit 1e1e1e7
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 14 deletions.
diff --git a/packages/app/app/containers/ArtistViewContainer/ArtistViewContainer.test.tsx b/packages/app/app/containers/ArtistViewContainer/ArtistViewContainer.test.tsx
@@ -6,6 +6,8 @@ import { store as electronStore } from '@nuclear/core';
 import { AnyProps, configureMockStore, setupI18Next, TestRouterProvider, TestStoreProvider } from '../../../test/testUtils';
 import MainContentContainer from '../MainContentContainer';
 import { buildElectronStoreState, buildStoreState } from '../../../test/storeBuilders';
+import userEvent from '@testing-library/user-event';
+import { SearchResultsSource } from '@nuclear/core/src/plugins/plugins.types';
 
 describe('Artist view container', () => {
   beforeAll(() => {
@@ -242,12 +244,74 @@ describe('Artist view container', () => {
   });
 
   it('should filter artist\'s albums', async () => {
-    const { component } = mountComponent();
-    await waitFor(() => component.getByPlaceholderText(/filter/i).focus());
-    await waitFor(() => component.getByPlaceholderText(/filter/i).type('album 1'));
-    const albumCells = await component.findAllByRole('cell');
+    const protoState = buildStoreState()
+      .withPlugins().build();
+
+    const mockFetchArtistAlbums = jest.fn().mockResolvedValue([
+      {
+        id: 'test-album-1',
+        title: ' Test album 1',
+        artist: 'test artist 1',
+        genres: ['genre 1', 'genre 2'],
+        images: ['image 1'],
+        thumb: 'image 1',
+        coverImage: 'image 1',
+        tracklist: [
+          {
+            uuid: 'track-1',
+            artist: 'test artist 1',                      
+            title: 'test track 1',
+            duration: 10
+          }
+        ],
+        year: '2019',
+        source: SearchResultsSource.Discogs
+      },
+      {
+        id: 'test-album-2',
+        title: ' Test album 2',
+        artist: 'test artist 2',
+        genres: ['genre 2', 'genre 3'],
+        images: ['image 2'],
+        thumb: 'image 2',
+        coverImage: 'image 2',
+        tracklist: [
+          {
+            uuid: 'track-2',
+            artist: 'test artist 2',
+            title: 'test track 2',
+            duration: 40
+          }
+        ],
+        year: '2021',
+        source: SearchResultsSource.Discogs
+      }
+    ]);
+
+    const { component, store } = mountComponent(
+      buildStoreState()
+        .withArtistDetails()
+        .withPlaylists([{
+          id: 'test-playlist-id',
+          name: 'test playlist',
+          tracks: []
+        }])
+        .withPlugins({
+          metaProviders: [{
+            ...protoState.plugin.plugins.metaProviders[0],
+            fetchArtistAlbums: mockFetchArtistAlbums
+          }]
+        })
+        .withConnectivity()
+        .build()
+    );
+
+    await waitFor(() => expect(store.getState().search.artistDetails['test-artist-id'].releases).toHaveLength(2));
+
+    await userEvent.type(component.getByPlaceholderText('Filter...'), 'album 1');
+    const albumCells = await component.findAllByTestId('album-card');
     expect(albumCells).toHaveLength(1);
-    expect(albumCells[0]).toHaveTextContent('album 1');
+    expect(albumCells[0]).toHaveTextContent('Test album 1');
   });
 
 

diff --git a/packages/app/test/storeBuilders.ts b/packages/app/test/storeBuilders.ts
@@ -248,13 +248,13 @@ export const buildStoreState = () => {
       };
       return this as StoreStateBuilder;
     },
-    withPlugins(data?: { streamProviders: any[] }) {
+    withPlugins(data?: { streamProviders?: any[], metaProviders?: any[] }) {
       state = {
         ...state,
         plugin: {
           userPlugins: {},
           plugins: {
-            streamProviders: data?.streamProviders || [
+            streamProviders: data?.streamProviders ?? [
               {
                 name: 'Test Stream Provider',
                 sourceName: 'Test Stream Provider',
@@ -288,7 +288,7 @@ export const buildStoreState = () => {
                 }) as TrackStream)
               }
             ],
-            metaProviders: [
+            metaProviders: data?.metaProviders ?? [
               {
                 name: 'Test Meta Provider',
                 description: 'Metadata provider for testing.',

diff --git a/packages/ui/lib/components/AlbumGrid/index.tsx b/packages/ui/lib/components/AlbumGrid/index.tsx
@@ -64,6 +64,7 @@ const AlbumGrid: React.FC<AlbumGridProps> = ({
             albums.map((album, i) => (
               <Card
                 key={i}
+                data-testid='album-card'
                 header={album.title}
                 content={withArtistNames && _.get(album, 'artist.name')}
                 image={getThumbnail(album)}

diff --git a/packages/ui/lib/components/Card/index.tsx b/packages/ui/lib/components/Card/index.tsx
@@ -21,6 +21,7 @@ type CardProps = {
   animated?: boolean;
   menuEntries?: CardMenuEntry[];
   className?: string;
+  'data-testid'?: string;
 };
 
 const Card: React.FC<CardProps> = ({
@@ -31,13 +32,17 @@ const Card: React.FC<CardProps> = ({
   withMenu = false,
   animated = true,
   menuEntries,
-  className
+  className,
+  'data-testid': dataTestId
 }) => (
-  <div className={cx(
-    common.nuclear,
-    styles.card_container,
-    className
-  )}>
+  <div 
+    className={cx(
+      common.nuclear,
+      styles.card_container,
+      className
+    )}
+    data-testid={dataTestId}
+  >
     <div
       className={cx(
         styles.card,