Merge pull request #13 from kelseymorsebrown/fix-redirect

Fix redirect and failing unit tests

.github/workflows/deploy.yml

@@ -0,0 +1,65 @@
+name: Deploy to GitHub Pages
+on:
+  pull_request_target:
+    types:
+      - closed
+    branches:
+      - 'releases/**'
+  workflow_dispatch:
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+jobs:
+  test:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run tests
+        run: npm run test
+
+  build:
+    runs-on: ubuntu-latest
+    needs: test
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Build project
+        env:
+          CI: true
+          REACT_APP_CLIENT_ID: ${{ secrets.API_CLIENT_ID }}
+        run: npx --no-install npm run build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./build
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: https://kelseymorsebrown.github.io/jammming/
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v3

.github/workflows/test.yml

@@ -0,0 +1,29 @@
+name: Run Unit Tests
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+  workflow_dispatch:
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run tests
+        env:
+          REACT_APP_CLIENT_ID: ${{ secrets.API_CLIENT_ID }}
+        run: npm run test

README.md

@@ -44,32 +44,12 @@ Instead, it will copy all the configuration files and the transitive dependencie
 
 You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
 
+### `npm run deploy`
+
+Deploys the site to https://kelseymorsebrown.github.io/jammming/
+
 ## Learn More
 
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
 To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

src/components/Playlist/Playlist.test.tsx

@@ -107,8 +107,7 @@ it('Renders tracks when hasTracks is true', async () => {
     />
   );
 
-  const track = screen.queryByText('Example Track Name');
-
+  const track = screen.queryByText(`"Example Track Name"`);
   expect(track).toBeInTheDocument();
 });
 

src/components/Track/Track.test.tsx

@@ -41,10 +41,10 @@ it('Displays the track name', async () => {
     />
   );
 
-  expect(screen.getByText('Right On')).toBeInTheDocument();
+  expect(screen.getByText(`"Right On"`)).toBeInTheDocument();
 });
 
-it('Displays the album name and artist', async () => {
+it('Displays the artist', async () => {
   render(
     <Track
       track={mockTrack}
@@ -56,7 +56,7 @@ it('Displays the album name and artist', async () => {
     />
   );
 
-  expect(screen.getByText('Bartist, Foolbum')).toBeInTheDocument();
+  expect(screen.getByText('Bartist')).toBeInTheDocument();
 });
 
 it('should call the callback function when clicked', async () => {

src/components/Tracklist/Tracklist.test.tsx

@@ -67,7 +67,7 @@ it('Displays the first track', async () => {
     />
   );
 
-  expect(screen.getByText('Example Track Name')).toBeInTheDocument();
+  expect(screen.getByText(`"Example Track Name"`)).toBeInTheDocument();
 });
 it('Displays the second track', async () => {
   render(
@@ -81,5 +81,5 @@ it('Displays the second track', async () => {
     />
   );
 
-  expect(screen.getByText('Right On')).toBeInTheDocument();
+  expect(screen.getByText(`"Right On"`)).toBeInTheDocument();
 });

src/containers/MainContainer/MainContainer.test.tsx

@@ -114,7 +114,7 @@ describe('MainContainer', () => {
     userEvent.click(button);
 
     await waitFor(() => {
-      expect(screen.getByText('Example Track Name')).toBeInTheDocument();
+      expect(screen.getByText(`"Example Track Name"`)).toBeInTheDocument();
     });
   });
 

src/utils/consts.ts

@@ -1,2 +1,5 @@
 export const CLIENT_ID = process.env.REACT_APP_CLIENT_ID;
-export const REDIRECT_URI = 'http://localhost:3000/callback';
+export const REDIRECT_URI =
+  process.env.NODE_ENV === 'production'
+    ? 'https://kelseymorsebrown.github.io/jammming/callback'
+    : 'http://localhost:3000/callback';