Add test suite

- Auth redirect flow
- Playlist loading (snapshot)
- Single playlist export
- Export all playlists

Author: watsonbox

.travis.yml

@@ -1,23 +1,9 @@
-os: osx
-
-before_install:
-  - brew cask install phantomjs
-  - git clone git://github.com/n1k0/casperjs.git /tmp/casperjs
-  - export PATH=/tmp/casperjs/bin/:$PATH
-
-before_script:
-  - phantomjs --version
-  - casperjs --version
-  - python -m SimpleHTTPServer 8080 &
-  - sleep 10
-
+language: node_js
+node_js:
+  - "stable"
+cache:
+  directories:
+  - node_modules
 script:
-  - casperjs test test/integration
-
-deploy:
-  provider: pages
-  skip_cleanup: true
-  github_token: $GITHUB_TOKEN
-  keep_history: true
-  on:
-    branch: master
+  - yarn build
+  - yarn test

package.json

@@ -51,5 +51,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "msw": "^0.21.3",
+    "react-test-renderer": "^17.0.1"
   }
 }

src/App.test.jsx

@@ -0,0 +1,46 @@
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { rest } from 'msw'
+import App from "./App"
+
+const { location } = window
+
+beforeAll(() => {
+  delete window.location
+})
+
+afterAll(() => {
+  window.location = location
+})
+
+describe("authentication request", () => {
+  beforeAll(() => {
+    window.location = { hash: "" }
+  })
+
+  test("renders get started button and redirects to Spotify with correct scopes", () => {
+    render(<App />)
+
+    const linkElement = screen.getByText(/Get Started/i)
+
+    expect(linkElement).toBeInTheDocument()
+
+    fireEvent.click(linkElement)
+
+    expect(window.location.href).toBe(
+      "https://accounts.spotify.com/authorize?client_id=9950ac751e34487dbbe027c4fd7f8e99&redirect_uri=%2F%2F&scope=playlist-read-private%20playlist-read-collaborative%20user-library-read&response_type=token"
+    )
+  })
+})
+
+describe("authentication return", () => {
+  beforeAll(() => {
+    window.location = { hash: "#access_token=TEST_TOKEN" }
+  })
+
+  test("renders playlist component on return from Spotify with auth token", () => {
+    render(<App />)
+
+    expect(screen.getByTestId('playlistTableSpinner')).toBeInTheDocument()
+  })
+})

src/App.test.tsx

@@ -1,25 +1,20 @@
 import './App.scss'
+import "./icons"
 
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { fab } from '@fortawesome/free-brands-svg-icons'
-import { faCheckCircle, faTimesCircle, faFileArchive, faHeart } from '@fortawesome/free-regular-svg-icons'
-import { faBolt, faMusic } from '@fortawesome/free-solid-svg-icons'
 
 import Login from 'components/Login'
 import PlaylistTable from "components/PlaylistTable"
 import { getQueryParam } from "helpers"
 
-library.add(fab, faCheckCircle, faTimesCircle, faFileArchive, faHeart, faBolt, faMusic)
-
 function App() {
   let view
   let key = new URLSearchParams(window.location.hash.substring(1))
 
   if (getQueryParam('rate_limit_message') !== '') {
     view = <div id="rateLimitMessage" className="lead">
-      <p><FontAwesomeIcon icon={faBolt} style={{ fontSize: "50px", marginBottom: "20px" }} /></p>
+      <p><FontAwesomeIcon icon={['fas', 'bolt']} style={{ fontSize: "50px", marginBottom: "20px" }} /></p>
       <p>Oops, Exportify has encountered a <a target="_blank" rel="noreferrer" href="https://developer.spotify.com/web-api/user-guide/#rate-limiting">rate limiting</a> error while using the Spotify API. This might be because of the number of users currently exporting playlists, or perhaps because you have too many playlists to export all at once. Try <a target="_blank" rel="noreferrer" href="https://github.com/watsonbox/exportify/issues/6#issuecomment-110793132">creating your own</a> Spotify application. If that doesn't work, please add a comment to <a target="_blank" rel="noreferrer" href="https://github.com/watsonbox/exportify/issues/6">this issue</a> where possible resolutions are being discussed.</p>
       <p style={{ marginTop: "50px" }}>It should still be possible to export individual playlists, particularly when using your own Spotify application.</p>
     </div>

src/App.tsx

@@ -11,6 +11,8 @@ class PlaylistTable extends React.Component {
   state = {
     playlists: [],
     playlistCount: 0,
+    likedSongsLimit: 0,
+    likedSongsCount: 0,
     nextURL: null,
     prevURL: null
   }
@@ -68,6 +70,12 @@ class PlaylistTable extends React.Component {
           },
           "uri": "spotify:user:" + userId + ":saved"
         });
+
+        // FIXME: Handle unmounting
+        this.setState({
+          likedSongsLimit: arguments[0][0].limit,
+          likedSongsCount: arguments[0][0].total
+        })
       }
 
       // FIXME: Handle unmounting
@@ -85,7 +93,7 @@ class PlaylistTable extends React.Component {
   }
 
   exportPlaylists() {
-    PlaylistsExporter.export(this.props.access_token, this.state.playlistCount);
+    PlaylistsExporter.export(this.props.access_token, this.state.playlistCount, this.state.likedSongsLimit, this.state.likedSongsCount);
   }
 
   componentDidMount() {
@@ -123,7 +131,7 @@ class PlaylistTable extends React.Component {
         </div>
       );
     } else {
-      return <div className="spinner"></div>
+      return <div className="spinner" data-testid="playlistTableSpinner"></div>
     }
   }
 }

src/components/PlaylistTable.jsx

@@ -0,0 +1,110 @@
+import React from "react"
+import { render, screen, waitFor, fireEvent } from "@testing-library/react"
+import renderer from "react-test-renderer"
+import { setupServer } from "msw/node"
+import FileSaver from "file-saver"
+import JSZip from "jszip"
+
+import PlaylistTable from "./PlaylistTable"
+
+import "../icons"
+import { handlers } from '../mocks/handlers_success'
+
+const server = setupServer(...handlers)
+
+server.listen({
+  onUnhandledRequest: 'warn'
+})
+
+beforeAll(() => {
+  global.Blob = function (content, options) { return  ({content, options}) }
+})
+
+afterEach(() => {
+  jest.restoreAllMocks()
+})
+
+// Use a snapshot test to ensure exact component rendering
+test("playlist loading", async () => {
+  const component = renderer.create(<PlaylistTable />)
+  const instance = component.getInstance()
+
+  await waitFor(() => {
+    expect(instance.state.playlistCount).toEqual(1)
+  })
+
+  expect(component.toJSON()).toMatchSnapshot();
+})
+
+test("single playlist exporting", async () => {
+  const saveAsMock = jest.spyOn(FileSaver, "saveAs")
+  saveAsMock.mockImplementation(jest.fn())
+
+  render(<PlaylistTable />);
+
+  await waitFor(() => {
+    expect(screen.getByText(/Export All/)).toBeInTheDocument()
+  })
+
+  const linkElement = screen.getAllByText("Export")[0]
+
+  expect(linkElement).toBeInTheDocument()
+
+  fireEvent.click(linkElement)
+
+  await waitFor(() => {
+    expect(saveAsMock).toHaveBeenCalledTimes(1)
+    expect(saveAsMock).toHaveBeenCalledWith(
+      {
+        content: [
+          '"Track URI","Track Name","Artist URI","Artist Name","Album URI","Album Name","Disc Number","Track Number","Track Duration (ms)","Added By","Added At"\n' +
+          '"spotify:track:1GrLfs4TEvAZ86HVzXHchS","Crying","spotify:artist:4TXdHyuAOl3rAOFmZ6MeKz","Six by Seven","spotify:album:4iwv7b8gDPKztLkKCbWyhi","Best of Six By Seven","1","3","198093","","2020-07-19T09:24:39Z"\n'
+        ],
+        options: { type: 'text/csv;charset=utf-8' }
+      },
+      'liked.csv',
+      true
+    )
+  })
+})
+
+test("exporting of all playlist", async () => {
+  const saveAsMock = jest.spyOn(FileSaver, "saveAs")
+  saveAsMock.mockImplementation(jest.fn())
+
+  const jsZipFileMock = jest.spyOn(JSZip.prototype, 'file')
+  const jsZipGenerateAsync = jest.spyOn(JSZip.prototype, 'generateAsync')
+  jsZipGenerateAsync.mockResolvedValue("zip_content")
+
+  render(<PlaylistTable />);
+
+  await waitFor(() => {
+    expect(screen.getByText(/Export All/)).toBeInTheDocument()
+  })
+
+  const linkElement = screen.getByText("Export All")
+
+  expect(linkElement).toBeInTheDocument()
+
+  fireEvent.click(linkElement)
+
+  await waitFor(() => {
+    expect(jsZipFileMock).toHaveBeenCalledTimes(2)
+    expect(jsZipFileMock).toHaveBeenCalledWith(
+      "liked.csv",
+      '"Track URI","Track Name","Artist URI","Artist Name","Album URI","Album Name","Disc Number","Track Number","Track Duration (ms)","Added By","Added At"\n' +
+      '"spotify:track:1GrLfs4TEvAZ86HVzXHchS","Crying","spotify:artist:4TXdHyuAOl3rAOFmZ6MeKz","Six by Seven","spotify:album:4iwv7b8gDPKztLkKCbWyhi","Best of Six By Seven","1","3","198093","","2020-07-19T09:24:39Z"\n'
+    )
+    expect(jsZipFileMock).toHaveBeenCalledWith(
+      "ghostpoet_–_peanut_butter_blues_and_melancholy_jam.csv",
+      '"Track URI","Track Name","Artist URI","Artist Name","Album URI","Album Name","Disc Number","Track Number","Track Duration (ms)\",\"Added By\",\"Added At\"\n' +
+      '"spotify:track:7ATyvp3TmYBmGW7YuC8DJ3","One Twos / Run Run Run","spotify:artist:69lEbRQRe29JdyLrewNAvD","Ghostpoet","spotify:album:6jiLkuSnhzDvzsHJlweoGh","Peanut Butter Blues and Melancholy Jam","1","1","241346","spotify:user:watsonbox","2020-11-03T15:19:04Z"\n' +
+      '"spotify:track:0FNanBLvmFEDyD75Whjj52","Us Against Whatever Ever","spotify:artist:69lEbRQRe29JdyLrewNAvD","Ghostpoet","spotify:album:6jiLkuSnhzDvzsHJlweoGh","Peanut Butter Blues and Melancholy Jam","1","2","269346","spotify:user:watsonbox","2020-11-03T15:19:04Z"\n'
+    )
+  })
+
+  await waitFor(() => {
+    expect(saveAsMock).toHaveBeenCalledTimes(1)
+    expect(saveAsMock).toHaveBeenCalledWith("zip_content", "spotify_playlists.zip")
+  })
+})

src/components/PlaylistTable.test.jsx

@@ -1,13 +1,13 @@
 import $ from "jquery" // TODO: Remove jQuery dependency
 import { saveAs } from "file-saver"
-import { JSZip } from "jszip"
+import JSZip from "jszip"
 
 import PlaylistExporter from "./PlaylistExporter"
 import { apiCall } from "helpers"
 
 // Handles exporting all playlist data as a zip file
 let PlaylistsExporter = {
-  export: function(access_token, playlistCount) {
+  export: function(access_token, playlistCount, likedSongsLimit, likedSongsCount) {
     var playlistFileNames = [];
 
     apiCall("https://api.spotify.com/v1/me", access_token).then(function(response) {
@@ -44,12 +44,12 @@ let PlaylistsExporter = {
 
         // Add library of saved tracks
         playlists.unshift({
-          "id": "saved",
-          "name": "Saved",
+          "id": "liked",
+          "name": "Liked",
           "tracks": {
             "href": "https://api.spotify.com/v1/me/tracks",
-            "limit": 50,
-            "total": 2500 // TODO: get rid of hard-coded library size
+            "limit": likedSongsLimit,
+            "total": likedSongsCount
           },
         });
 
@@ -66,8 +66,9 @@ let PlaylistsExporter = {
           zip.file(playlistFileNames[i], response)
         });
 
-        var content = zip.generate({ type: "blob" });
-        saveAs(content, "spotify_playlists.zip");
+        zip.generateAsync({ type: "blob" }).then(function(content) {
+          saveAs(content, "spotify_playlists.zip");
+        })
       });
     });
   }