added front end unit tests

.env

@@ -0,0 +1 @@
+REACT_APP_API_URL='http://localhost:8001/api/v1'

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
 
 

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"
+  }
 }

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

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?
 

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(<App />, { 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();
+});