From afe31f45b240815a94f01ad30a116025158242c9 Mon Sep 17 00:00:00 2001 From: Robert Dargavel Smith Date: Sat, 4 Sep 2021 23:37:32 +0100 Subject: [PATCH] added front end unit tests --- .env | 1 + backend/main.py | 15 +- package.json | 7 +- run_tests.sh | 3 +- src/App.js | 5 +- src/App.test.js | 18 + src/__snapshots__/App.test.js.snap | 1745 +++++++++++++++++ src/components/About.js | 4 +- src/components/Banner.js | 13 +- src/components/CreatePlaylist.js | 11 +- src/components/CreatePlaylist.test.js | 24 + src/components/Settings.js | 14 +- src/components/Settings.test.js | 26 + src/components/Spotify.js | 2 +- src/components/Track.js | 15 +- src/components/Track.test.js | 12 + src/components/TrackSelector.js | 7 +- src/components/TrackSelector.test.js | 13 + .../__snapshots__/CreatePlaylist.test.js.snap | 59 + .../__snapshots__/Track.test.js.snap | 164 ++ .../__snapshots__/TrackSelector.test.js.snap | 192 ++ yarn.lock | 69 +- 22 files changed, 2369 insertions(+), 50 deletions(-) create mode 100644 .env create mode 100644 src/App.test.js create mode 100644 src/__snapshots__/App.test.js.snap create mode 100644 src/components/CreatePlaylist.test.js create mode 100644 src/components/Settings.test.js create mode 100644 src/components/Track.test.js create mode 100644 src/components/TrackSelector.test.js create mode 100644 src/components/__snapshots__/CreatePlaylist.test.js.snap create mode 100644 src/components/__snapshots__/Track.test.js.snap create mode 100644 src/components/__snapshots__/TrackSelector.test.js.snap diff --git a/.env b/.env new file mode 100644 index 0000000..d4ffd51 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +REACT_APP_API_URL='http://localhost:8001/api/v1' diff --git a/backend/main.py b/backend/main.py index 342ba55..379caeb 100644 --- a/backend/main.py +++ b/backend/main.py @@ -58,6 +58,7 @@ def receive_before_update(mapper, connection, target): "http://localhost:8000", "http://localhost:3000", "http://127.0.0.1:8080", + "http://localhost", ] app.add_middleware( @@ -262,15 +263,21 @@ def update_playlist_id(playlist: schemas.PlaylistId, @app.get("/api/v1/latest_playlists") def get_latest_playlists(top_n: int, db: Session = Depends(get_db)): - db_items = db.query(models.Playlist).order_by(desc( - models.Playlist.created)).limit(top_n).all() + try: + db_items = db.query(models.Playlist).order_by(desc( + models.Playlist.created)).limit(top_n).all() + except: + return [] return db_items @app.get("/api/v1/top_playlists") def get_top_playlists(top_n: int, db: Session = Depends(get_db)): - db_items = db.query(models.Playlist).order_by( - desc(models.Playlist.av_rating)).limit(top_n).all() + try: + db_items = db.query(models.Playlist).order_by( + desc(models.Playlist.av_rating)).limit(top_n).all() + except: + return [] return db_items diff --git a/package.json b/package.json index df75772..657d20a 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.4", - "@testing-library/react": "^11.1.0", + "@testing-library/react": "^12.0.0", "@testing-library/user-event": "^12.1.10", "bootstrap": "5.0.2", "bootswatch": "^5.1.0", @@ -56,5 +56,8 @@ "last 1 safari version" ] }, - "proxy": "http://localhost:8000" + "proxy": "http://localhost:8000", + "devDependencies": { + "react-test-renderer": "^17.0.2" + } } diff --git a/run_tests.sh b/run_tests.sh index e304d67..45a96c2 100755 --- a/run_tests.sh +++ b/run_tests.sh @@ -1,5 +1,6 @@ #!/bin/sh -yarn build export SQLALCHEMY_DATABASE_URL=sqlite:///:memory: export CUDA_VISIBLE_DEVICES="" pipenv run "pytest backend" +export CI=true +yarn test \ No newline at end of file diff --git a/src/App.js b/src/App.js index 34badfb..af40820 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,10 @@ // TODO // // frontend: -// unit tests // ico file -// fix warnings for unique key -// fix warning about combining h2 and a in Banner +// fix warnings in test // // backend: -// handle exceptions in db (e.g., no playlists) // set seed in noise // bug in join the dots? diff --git a/src/App.test.js b/src/App.test.js new file mode 100644 index 0000000..b3bc47c --- /dev/null +++ b/src/App.test.js @@ -0,0 +1,18 @@ +import { render, screen, fireEvent } from "@testing-library/react"; +import React from "react"; +import { MemoryRouter } from "react-router-dom"; +import App from "./App"; + +test("Test app routing", async () => { + const { asFragment } = render(, { wrapper: MemoryRouter }); + fireEvent.click(screen.getByText("Create playlist")); + expect(asFragment()).toMatchSnapshot(); + fireEvent.click(screen.getByText("Top rated playlists")); + expect(asFragment()).toMatchSnapshot(); + fireEvent.click(screen.getByText("Latest playlists")); + expect(asFragment()).toMatchSnapshot(); + fireEvent.click(screen.getByText("Search playlists")); + expect(asFragment()).toMatchSnapshot(); + fireEvent.click(screen.getByText("About")); + expect(asFragment()).toMatchSnapshot(); +}); diff --git a/src/__snapshots__/App.test.js.snap b/src/__snapshots__/App.test.js.snap new file mode 100644 index 0000000..e4c3da3 --- /dev/null +++ b/src/__snapshots__/App.test.js.snap @@ -0,0 +1,1745 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Test app routing 1`] = ` + +
+
+ +

+ Choose the waypoints for your musical journey +

+
+
+
+
+ +
+ +
+
+ + + +
+
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+ +`; + +exports[`Test app routing 2`] = ` + +
+
+ +
+

+ Top rated playlists +

+ +
+ Load more... +
+ +
+
+
+
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+ +`; + +exports[`Test app routing 3`] = ` + +
+
+ +
+

+ Latest playlists +

+ +
+ Load more... +
+ +
+
+
+
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+ +`; + +exports[`Test app routing 4`] = ` + +
+
+ +

+ Search playlists +

+
+
+
+ + + +
+ +
+
+
+
+
+
+
+
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+ +`; + +exports[`Test app routing 5`] = ` + +
+
+ +
+ + Deej-A.I. + + uses artificial intelligence to automatically generate playlists of tracks that go well together. It was trained using hundreds of thousands of Spotify tracks and user playlists. +
+
+
+ Create a playlist by adding + + + + any tracks that you would like to include. Pressing + + + + will then generate a playlist that smoothly " + + joins the dots + + " between them. This is a great way to create playlists that start off with chill out, for example, and build up to dance music as the party picks up! +
+
+
+ Don't forget to rate the playlists! This will help other people find the best ones. +
+
+
+ If you have a Spotify + + + + account and you log in, you will see the current track if one is playing when creating a playlist. By clicking on this, Deej-A.I. will search for similar sounding tracks in its database. You will also be able to save + + + + playlists to your account. +
+
+
+ In the settings screen + + + + , you can control the number of tracks that are added to the playlists as well as a couple of aspects of how they are generated. If + + creativity + + is set to 100%, then tracks are chosen with similar sound, energy, mood and instrumentation. It does this by simply "listening" and not using any information about the tracks themselves. If creativity is set to 0%, then tracks are selected based on similar artists ("Spotify users also included in their playlists..."). You can use the + + noise + + setting to add a bit of randomness. +
+
+
+ This was my Masters in Deep Learning project at + + MBIT School + + . If you want to learn about it works, check out this + + article + + . +
+
+
+
+
+ + Get it on Google Play + +
+
+
+
+ + Get it on iTunes + +
+
+
+
+
+
+
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+ +`; diff --git a/src/components/About.js b/src/components/About.js index ea0f16a..9974920 100644 --- a/src/components/About.js +++ b/src/components/About.js @@ -6,7 +6,7 @@ import { VerticalSpacer } from "../lib"; export default function About() { return ( <> -
+
Deej-A.I. uses artificial intelligence to automatically generate playlists of tracks that go well together. It was trained using hundreds of thousands of Spotify tracks and user playlists.
@@ -65,7 +65,7 @@ export default function About() {
-
+
f }) { > -
+ diff --git a/src/components/CreatePlaylist.js b/src/components/CreatePlaylist.js index f44d80b..a8f6bb1 100644 --- a/src/components/CreatePlaylist.js +++ b/src/components/CreatePlaylist.js @@ -15,7 +15,8 @@ export default function CreatePlaylist({ noise = 0, onCreate = f => f, onSettings = f => f, - spotify = null + spotify = null, + savePlaylist = true }) { const [_waypoints, setWaypoints] = useState(waypoints); const [spinner, setSpinner] = useState(false); @@ -43,14 +44,17 @@ export default function CreatePlaylist({ :
{ setSpinner(true); generatePlaylist(_waypoints, size, creativity, noise) .then(playlist => { - SavePlaylist(playlist, creativity, noise) - .then(id => playlist.id = id); + if (savePlaylist) { + SavePlaylist(playlist, creativity, noise) + .then(id => playlist.id = id); + } return playlist; }) .then(playlist => onCreate(playlist, _waypoints)) @@ -58,6 +62,7 @@ export default function CreatePlaylist({ }} /> onSettings(_waypoints)} diff --git a/src/components/CreatePlaylist.test.js b/src/components/CreatePlaylist.test.js new file mode 100644 index 0000000..a7dccfd --- /dev/null +++ b/src/components/CreatePlaylist.test.js @@ -0,0 +1,24 @@ +import { render, fireEvent, screen, waitFor } from "@testing-library/react"; +import CreatePlaylist from "./CreatePlaylist"; + +jest.setTimeout(20000); + +test("Test playlist creation", async () => { + const onCreate = jest.fn(); + + render( + + ); + fireEvent.click(screen.getByTestId("create-playlist")); + await waitFor(() => expect(onCreate).toHaveBeenCalledTimes(1)); + expect(onCreate).toMatchSnapshot(); +}); diff --git a/src/components/Settings.js b/src/components/Settings.js index cd0efe7..1d8d0d7 100644 --- a/src/components/Settings.js +++ b/src/components/Settings.js @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import { FaBackward } from "react-icons/fa"; import { HorizontalSpacer } from "../lib"; import Card from 'react-bootstrap/Card'; @@ -11,13 +11,16 @@ export default function Settings({ size, creativity, noise, onChange = f => f, o const setValidSize = (size) => setSize(Math.max(Math.min(size, 100), 1)) const update = () => onChange(_size, _creativity, _noise); + useEffect(() => () => update()); + return ( <> - Size + Size
Controls the number of tracks in the playlist, or the number to be generated between waypoints.
f, o }} />
- Creativity + Creativity
A value of 0% will select tracks based on how likely they are to appear together in a Spotify user's playlist. A value of 100% will select tracks based purely on how they sound.
{Math.round(_creativity * 100)}%
f, o />
- Noise + Noise
Controls the amount of randomness to apply.
{Math.round(_noise * 100)}%
f, o
{ diff --git a/src/components/Settings.test.js b/src/components/Settings.test.js new file mode 100644 index 0000000..de74310 --- /dev/null +++ b/src/components/Settings.test.js @@ -0,0 +1,26 @@ +import { render, fireEvent, screen } from "@testing-library/react"; +import Settings from "./Settings"; + +test("Test settings", async () => { + const onChange = jest.fn(); + + render(); + fireEvent.change(screen.getByLabelText("Size"), { + target: { value: 25 }, + }); + fireEvent.change(screen.getByLabelText("Creativity"), { + target: { value: "0.75" }, + }); + fireEvent.change(screen.getByLabelText("Noise"), { + target: { value: "0.15" }, + }); + fireEvent.click(screen.getByTestId("close")); + expect(onChange).toHaveBeenCalledWith(25, "0.5", "0"); + expect(onChange).toHaveBeenCalledWith(25, "0.75", "0"); + expect(onChange).toHaveBeenCalledWith(25, "0.75", "0.15"); +}); diff --git a/src/components/Spotify.js b/src/components/Spotify.js index 6a3c544..9b67351 100644 --- a/src/components/Spotify.js +++ b/src/components/Spotify.js @@ -71,7 +71,7 @@ export default class Spotify extends SpotifyWebApi { } else { playlist = await this.createPlaylist(user.id, { name: name, - description: 'Created by Deej-A.I. http://deej-ai.online' + description: 'Created by Deej-A.I. https://deej-ai.online' }); } await this.replaceTracksInPlaylist( diff --git a/src/components/Track.js b/src/components/Track.js index 241008f..198aafd 100644 --- a/src/components/Track.js +++ b/src/components/Track.js @@ -19,17 +19,17 @@ function createResource(pending) { // avoid unncessary re-renders class SpotifyTrackWidget extends PureComponent { render() { - const { track_id, highlight, resource } = this.props; + const { track_id, highlight, resource, testing } = this.props; const iframe = (resource) ? resource.read() : null; return ( - + {({ isVisible }) =>