Feature/dashboard tests (nukeop#910)

* WIP * Hoist dependencies * Fix jest config for hoisted dependencies * Jest config for core * Update typings location
cooldashing24 · Apr 18, 2021 · a9d50cc · a9d50cc
1 parent d41064a
commit a9d50cc
Show file tree

Hide file tree

Showing 31 changed files with 119,492 additions and 65,672 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/nukeop/nuclear#readme",
   "scripts": {
-    "postinstall": "lerna bootstrap --no-ci && electron-builder install-app-deps && electron-rebuild",
+    "postinstall": "lerna bootstrap --hoist --no-ci && electron-builder install-app-deps && electron-rebuild",
     "start": "lerna run start --stream",
     "build": "shx rm -rf dist && lerna run build && npm run pack",
     "test": "lerna run build && lerna run test",
@@ -232,7 +232,6 @@
     }
   },
   "dependencies": {
-    "7zip-bin-mac": "^1.0.1",
     "sqlite3": "^4.2.0"
   }
 }
diff --git a/packages/app/__mocks__/@nuclear/core.ts b/packages/app/__mocks__/@nuclear/core.ts
@@ -36,6 +36,8 @@ module.exports = {
       getTagTracks() {}
       getTagAlbums() {}
       getTagArtists() {}
+      getTopTags = () => Promise.resolve()
+      getTopTracks = () => Promise.resolve()
     }
   },
   settingsConfig: [],

diff --git a/...s/app/app/components/Dashboard/BestNewMusicTab/BestNewMusicMenu/BestNewMusicCard/index.js b/...s/app/app/components/Dashboard/BestNewMusicTab/BestNewMusicMenu/BestNewMusicCard/index.js
@@ -24,12 +24,13 @@ function toFavoriteTrack({ artist, title, thumbnail }) {
   };
 }
 
-const FavoriteIcon = ({ isFavorite, onClick }) =>
+const FavoriteIcon = ({ isFavorite, onClick, dataTestid }) =>
   <Icon
+    data-testid={dataTestid}
     className={styles.card_favorite}
-    name='star'
-    size='large' onClick={onClick}
-    disabled={!isFavorite}
+    name={isFavorite ? 'star' : 'star outline'}
+    size='large'
+    onClick={onClick}
   />;
 
 const BestNewMusicCard = ({
@@ -55,21 +56,24 @@ const BestNewMusicCard = ({
           <div className={styles.card_title}>
             {title}
           </div>
-          {withFavoriteButton && <FavoriteIcon isFavorite={!!favoriteTrack} onClick={e => {
-            e.stopPropagation();
+          {withFavoriteButton && <FavoriteIcon
+            dataTestid={`favorite-icon-${artist}-${title}`}
+            isFavorite={!!favoriteTrack}
+            onClick={e => {
+              e.stopPropagation();
 
-            if (favoriteTrack) {
-              actions.removeFavoriteTrack(favoriteTrack);
-            } else {
-              actions.addFavoriteTrack(toFavoriteTrack(item));
-              actions.info(
-                'Favorite track added',
-                `${artist} - ${title} has been added to favorites.`,
-                <img src={thumbnail} />,
-                settings
-              );
-            }
-          }} />}
+              if (favoriteTrack) {
+                actions.removeFavoriteTrack(favoriteTrack);
+              } else {
+                actions.addFavoriteTrack(toFavoriteTrack(item));
+                actions.info(
+                  'Favorite track added',
+                  `${artist} - ${title} has been added to favorites.`,
+                  <img src={thumbnail} />,
+                  settings
+                );
+              }
+            }} />}
         </div>
         <div className={styles.card_artist}>
           {item.artist}

diff --git a/packages/app/app/components/Dashboard/BestNewMusicTab/index.js b/packages/app/app/components/Dashboard/BestNewMusicTab/index.js
@@ -35,7 +35,7 @@ class BestNewMusicTab extends React.Component {
 
   setActiveItem(activeItem) {
     this.setState({ activeItem });
-    document.getElementsByClassName('best_new_music_content')[0].scrollTo(0, 0);
+    document.getElementsByClassName('best_new_music_content')[0]?.scrollTo(0, 0);
   }
 
   render () {

diff --git a/packages/app/app/components/LibraryView/LibraryFolders/index.js b/packages/app/app/components/LibraryView/LibraryFolders/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import _ from 'lodash';
 import {
   Button,
   Divider,

diff --git a/packages/app/app/containers/AlbumViewContainer/AlbumViewContainer.test.tsx b/packages/app/app/containers/AlbumViewContainer/AlbumViewContainer.test.tsx
@@ -1,9 +1,5 @@
-import { render, waitFor } from '@testing-library/react';
-import React from 'react';
-import { createMemoryHistory } from 'history';
-
-import { AnyProps, configureMockStore, setupI18Next, TestRouterProvider, TestStoreProvider } from '../../../test/testUtils';
-import MainContentContainer from '../MainContentContainer';
+import { waitFor } from '@testing-library/react';
+import { mountedComponentFactory, setupI18Next } from '../../../test/testUtils';
 import { buildStoreState } from '../../../test/storeBuilders';
 
 describe('Album view container', () => {
@@ -210,29 +206,13 @@ describe('Album view container', () => {
     ]);
   });
 
-  const mountComponent = (initialStore?: AnyProps) => {
-    const initialState = initialStore ||
-      buildStoreState()
-        .withAlbumDetails()
-        .withArtistDetails()
-        .withPlugins()
-        .withConnectivity()
-        .build();
-    const history = createMemoryHistory({
-      initialEntries: ['/album/test-album-id']
-    });
-    const store = configureMockStore(initialState);
-    const component = render(
-      <TestRouterProvider
-        history={history}
-      >
-        <TestStoreProvider
-          store={store}
-        >
-          <MainContentContainer />
-        </TestStoreProvider>
-      </TestRouterProvider >
-    );
-    return { component, history, store };
-  };
+  const mountComponent = mountedComponentFactory(
+    ['/album/test-album-id'],
+    buildStoreState()
+      .withAlbumDetails()
+      .withArtistDetails()
+      .withPlugins()
+      .withConnectivity()
+      .build()
+  );
 });
diff --git a/packages/app/app/containers/DashboardContainer/DashboardContainer.test.tsx b/packages/app/app/containers/DashboardContainer/DashboardContainer.test.tsx
@@ -0,0 +1,84 @@
+
+import { waitFor } from '@testing-library/react';
+import { buildStoreState } from '../../../test/storeBuilders';
+import { mountedComponentFactory, setupI18Next } from '../../../test/testUtils';
+
+describe('Dashboard container', () => {
+  beforeAll(() => {
+    setupI18Next();
+  });
+
+  it('should display the best new music page of the dashboard', () => {
+    const { component } = mountComponent();
+    expect(component.asFragment()).toMatchSnapshot();
+  });
+
+  it('should go to best new album review after clicking it', () => {
+    const { component } = mountComponent();
+
+    waitFor(() => component.getByText(/test title 2/i).click());
+
+    expect(component.queryByText(/test review 2/i)).not.toBeNull();
+    expect(component.asFragment()).toMatchSnapshot();
+  });
+
+  it('should go to best new track review after clicking it', () => {
+    const { component } = mountComponent();
+
+    waitFor(() => component.getByText(/test track title 2/i).click());
+
+    expect(component.queryByText(/track review 2/i)).not.toBeNull();
+    expect(component.asFragment()).toMatchSnapshot();
+  });
+
+  it('should add/remove a best new track to favorites after clicking its star', async () => {
+    const { component, store } = mountComponent();
+
+    const addOrRemove = () => waitFor(
+      () => component
+        .getByTestId('favorite-icon-test track artist 1-test track title 1')
+        .click()
+    );
+
+    await addOrRemove();
+
+    const state = store.getState();
+    expect(state.favorites.tracks).toEqual([
+      expect.objectContaining({
+        artist: {
+          name: 'test track artist 1'
+        },
+        name: 'test track title 1'
+      })
+    ]);
+
+    await addOrRemove();
+
+    expect(state.favorites.tracks).toEqual([]);
+  });
+
+  it('should, display top tracks after going to top tracks tab', async () => {
+    const { component } = mountComponent();
+
+    await waitFor(() => component.getByText(/top tracks/i).click());
+
+    expect(component.asFragment()).toMatchSnapshot();
+  });
+
+  it('should, display genres after going to genres tab', async () => {
+    const { component } = mountComponent();
+
+    await waitFor(() => component.getByText(/genres/i).click());
+
+    expect(component.asFragment()).toMatchSnapshot();
+  });
+
+  const mountComponent = mountedComponentFactory(
+    ['/dashboard'],
+    buildStoreState()
+      .withDashboard()
+      .withPlugins()
+      .withConnectivity()
+      .build()
+  );
+});