complete tests for the homepage

Author: igbominadeveloper

package.json

@@ -52,6 +52,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-redux": "^7.1.16",
-    "@types/react-router-dom": "^5.1.7"
+    "@types/react-router-dom": "^5.1.7",
+    "axios-mock-adapter": "^1.19.0"
   }
 }

src/App.test.tsx

@@ -1,10 +1,125 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import MockAdapter from 'axios-mock-adapter';
+
+import AxiosInstance from './services/generalAxiosInstance';
 
 import App from './App';
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+import reducer, { initialState } from './store/reducer';
+
+import * as Actions from './store/actions';
+
+import { transformSearchResult } from './utils';
+
+import NewReleases from './tests/NewReleases.json';
+import SearchResults from './tests/SearchResults.json';
+
+jest.mock('./services');
+
+const spotifyUrl = process.env.REACT_APP_SPOTIFY_API_URL;
+
+describe('All tests', () => {
+  const store = createStore(reducer, initialState);
+  const mock = new MockAdapter(AxiosInstance);
+
+  const appWrapper = () => {
+    const history = createMemoryHistory();
+
+    return render(
+      <Provider store={store}>
+        <Router history={history}>
+          <App />
+        </Router>
+      </Provider>
+    );
+  };
+
+  test('renders the App component without crashing', () => {
+    const wrapper = appWrapper();
+
+    expect(wrapper).toBeDefined();
+  });
+
+  test('renders the login page on initial render', async () => {
+    const wrapper = appWrapper();
+
+    const loginButton = await wrapper.findByTestId('login-button');
+
+    expect(loginButton).toBeDefined();
+  });
+
+  describe('Authenticated User tests', () => {
+    beforeEach(() => {
+      window.localStorage.setItem('token', '9090hjut-0-40-jhh');
+      window.localStorage.setItem(
+        'auth-user',
+        JSON.stringify({
+          country: 'NG',
+          display_name: 'John Doe',
+          email: 'john.doe@example.com',
+          explicit_content: { filter_enabled: false, filter_locked: false },
+          external_urls: {
+            spotify: 'lll',
+          },
+          followers: { href: null, total: 0 },
+          href: 'jkjjkf',
+          id: 'jjkfkjfi904h',
+          images: [],
+          product: 'open',
+          type: 'user',
+          uri: 'spotify:user:jjkfkjfi904h',
+        })
+      );
+
+      mock
+        .onGet(`${spotifyUrl}/browse/new-releases?limit=5`)
+        .reply(200, { response: { data: NewReleases } });
+    });
+
+    test('renders the home page when user token is set', async () => {
+      const wrapper = appWrapper();
+
+      const newReleasesHeading = await wrapper.findByTestId(
+        'new-release-heading'
+      );
+      const searchResultsHeading = await wrapper.findByTestId(
+        'search-results-heading'
+      );
+
+      expect(newReleasesHeading).toHaveTextContent('New Releases');
+      expect(searchResultsHeading).toHaveTextContent('Search Results');
+    });
+
+    test('renders the homepage with new released albums when album items are in the store', async () => {
+      store.dispatch(Actions.getNewReleasesSuccess(NewReleases.albums.items));
+
+      const wrapper = appWrapper();
+
+      const allNewlyReleasedAlbums = await wrapper.findAllByTestId(
+        'song-portrait'
+      );
+
+      expect(allNewlyReleasedAlbums.length).toEqual(10);
+    });
+
+    test(`renders all the search items from the user's previous searches`, async () => {
+      store.dispatch(
+        Actions.getUserLastSearchResultSuccess({
+          searchQuery: 'ojuelegba',
+          searchResult: transformSearchResult(SearchResults.tracks.items),
+        })
+      );
+
+      const wrapper = appWrapper();
+
+      const searchResults = await wrapper.findAllByTestId('song-landscape');
+
+      expect(searchResults.length).toEqual(10);
+    });
+  });
 });

src/components/NavBar/NavBar.tsx

@@ -130,7 +130,7 @@ const NavBar = () => {
   };
 
   return (
-    <nav>
+    <nav data-testid="navbar">
       <ul className="nav-bar">
         <li className="nav-bar__user-profile pointer" role="link">
           <div className="nav-bar__user-profile pointer" onClick={goToHomePage}>

src/components/Song/Song.tsx

@@ -98,7 +98,7 @@ const Song: React.FunctionComponent<SongProps> = ({
   );
 
   return layout === SongLayout.PORTRAIT ? (
-    <div className="song-portrait">
+    <div className="song-portrait" data-testid="song-portrait">
       <div className="song-portrait__thumbnail">
         <img src={song.thumbnail} alt={`${song.title}`} loading="lazy" />
       </div>
@@ -121,7 +121,7 @@ const Song: React.FunctionComponent<SongProps> = ({
       )}
     </div>
   ) : (
-    <div className="song-landscape">
+    <div className="song-landscape" data-testid="song-landscape">
       <div className="song-landscape__art-and-title">
         <div className="song-landscape__thumbnail">
           <img src={song.thumbnail} alt={`${song.title}`} loading="lazy" />

src/pages/Home/Home.tsx

@@ -68,52 +68,55 @@ const Home: FunctionComponent = () => {
     }
   }, [dispatch]);
 
-  useEffect(() => {
-    const getUserLibrary = async () => {
-      try {
-        dispatch(getUserLibraryRequestLoading());
-        const response = await Services.getUserLibrary();
-
-        dispatch(getUserLibrarySuccess(response));
-      } catch (error) {
-        toast.error(errorHandler(error.message));
-        dispatch(getUserLibraryError(error.message));
-      }
-    };
-
-    const getUserLastSearchResult = async () => {
-      try {
-        dispatch(getUserLastSearchResultRequestLoading());
-        const response = await Services.getUserLastSearchResult();
-
-        dispatch(
-          getUserLastSearchResultSuccess({
-            searchQuery: response.searchQuery,
-            searchResult: response.searchResult,
-          })
-        );
-      } catch (error) {
-        toast.error(errorHandler(error.message));
-        dispatch(getUserLastSearchResultError(error.message));
-      }
-    };
+  const getUserLibrary = useCallback(async () => {
+    try {
+      dispatch(getUserLibraryRequestLoading());
+      const response = await Services.getUserLibrary();
+
+      dispatch(getUserLibrarySuccess(response));
+    } catch (error) {
+      toast.error(errorHandler(error.message));
+      dispatch(getUserLibraryError(error.message));
+    }
+  }, [dispatch]);
+
+  const getUserLastSearchResult = useCallback(async () => {
+    try {
+      dispatch(getUserLastSearchResultRequestLoading());
+      const response = await Services.getUserLastSearchResult();
+
+      dispatch(
+        getUserLastSearchResultSuccess({
+          searchQuery: response.searchQuery,
+          searchResult: response.searchResult,
+        })
+      );
+    } catch (error) {
+      toast.error(errorHandler(error.message));
+      dispatch(getUserLastSearchResultError(error.message));
+    }
+  }, [dispatch]);
 
+  useEffect(() => {
     getUserLibrary();
     getNewReleases();
     getUserLastSearchResult();
-
-    return () => {};
-  }, [getNewReleases, dispatch]);
+  }, [getNewReleases, dispatch, getUserLastSearchResult, getUserLibrary]);
 
   return (
     <div className="home page">
       <section className="new-release">
-        <div className="page-title">New Releases</div>
+        <div className="page-title" data-testid="new-release-heading">
+          New Releases
+        </div>
 
         {newReleasesAreBeingLoaded ? (
           <Loader width={8} />
         ) : (
-          <div className={`songs-${SongLayout.PORTRAIT.toLowerCase()}`}>
+          <div
+            className={`songs-${SongLayout.PORTRAIT.toLowerCase()}`}
+            data-testid="new-releases"
+          >
             {newReleases.map((album: Album) => (
               <Song
                 key={album.id}
@@ -170,16 +173,21 @@ const Home: FunctionComponent = () => {
         )}
       </section>
 
-      <section className="search-results">
-        <div className="page-title">Search Results</div>
+      <section
+        className="search-results"
+        data-testid="search-results-container"
+      >
+        <div className="page-title" data-testid="search-results-heading">
+          Search Results
+        </div>
 
         <div className={`songs-${SongLayout.LANDSCAPE.toLowerCase()}`}>
           <div className="search-results__headings">
             <div className="search-results__headings--title">Title</div>
             <div className="search-results__headings--album">Album</div>
             <div className="search-results__headings--duration">Duration</div>
           </div>
-          {/* {searchIsBeingProcessed && <p>Loading...</p>} */}
+
           {searchCameBackEmpty ? (
             <p>No Match Found</p>
           ) : (

src/pages/Login/Login.tsx

@@ -13,6 +13,7 @@ const Login: FunctionComponent = () => {
           redirecUri
         )}&response_type=token&scope=playlist-modify-private,user-read-private,user-read-email,playlist-modify-public`}
         className="login-button"
+        data-testid="login-button"
       >
         Login
       </a>

src/setupTests.ts

@@ -3,3 +3,22 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+
+Object.defineProperty(window, 'localStorage', {
+  value: {
+    data: {},
+    length: 0,
+    setItem(name: string, value: string) {
+      this.data[name] = value.toString();
+      this.length = Object.keys(this.data).length;
+    },
+    getItem(name: string) {
+      return this.data[name];
+    },
+    removeItem(name: string) {
+      delete this.data[name];
+      this.length = Object.keys(this.data).length;
+    },
+  },
+  writable: true,
+});

src/tests/mocks.json renamed to src/tests/SearchResults.json

@@ -2601,6 +2601,14 @@ axe-core@^4.0.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.2.tgz#7cf783331320098bfbef620df3b3c770147bc224"
   integrity sha512-V+Nq70NxKhYt89ArVcaNL9FDryB3vQOd+BFXZIfO3RP6rwtj+2yqqqdHEkacutglPaZLkJeuXKCjCJDMGPtPqg==
 
+axios-mock-adapter@^1.19.0:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/axios-mock-adapter/-/axios-mock-adapter-1.19.0.tgz#9d72e321a6c5418e1eff067aa99761a86c5188a4"
+  integrity sha512-D+0U4LNPr7WroiBDvWilzTMYPYTuZlbo6BI8YHZtj7wYQS8NkARlP9KBt8IWWHTQJ0q/8oZ0ClPBtKCCkx8cQg==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    is-buffer "^2.0.3"
+
 axios@^0.21.1:
   version "0.21.1"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
@@ -4987,7 +4995,7 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
-fast-deep-equal@^3.1.1:
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@@ -6056,6 +6064,11 @@ is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
+is-buffer@^2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
+  integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
+
 is-callable@^1.1.4, is-callable@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.3.tgz#8b1e0500b73a1d76c70487636f368e519de8db8e"