Merge Placeholder into develop

lvlgg_frontend/__mocks__/axios.js

@@ -0,0 +1,5 @@
+// __mocks__/axios.js
+export default {
+    post: jest.fn()
+  };
+

lvlgg_frontend/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    presets: ['@babel/preset-env', '@babel/preset-react'],
+};
+
+

lvlgg_frontend/package.json

@@ -41,18 +41,22 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.16.0",
     "@babel/plugin-transform-modules-commonjs": "^7.23.3",
-    "@babel/preset-env": "^7.17.0",
-    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
     "@testing-library/react": "^14.2.1",
-    "babel-jest": "^27.4.6",
+    "babel-jest": "^27.5.1",
     "file-loader": "^6.2.0",
-    "jest": "^27.5.1",
+    "jest": "^29.7.0",
     "nth-check": ">=2.0.1",
     "react-test-renderer": "^18.2.0"
   },
   "jest": {
     "transform": {
       "^.+\\.jsx?$": "babel-jest"
+    },
+    "moduleNameMapper": {
+      "^axios$": "<rootDir>/__mocks__/axios.js"
     }
+
   }
 }

lvlgg_frontend/src/Components/ExplorePage.js

@@ -6,7 +6,7 @@ import './ExplorePage.css'
 function ExplorePage() {
   return (
     <div className='explore-container'>
-      <video src="/videos/video-6.mp4" autoPlay loop muted />    
+      <video data-testid="video-element" src="/videos/video-6.mp4" autoPlay loop muted />    
     </div>
   )
 }

lvlgg_frontend/src/Components/Navbar.js

@@ -21,13 +21,15 @@ const closeDropdown = () => {
 };
 
 const handleSignOut = () => {  
+    //localStorage.removeItem('token');
     setIsSignedIn(false); 
+    closeDropdown();
 };
 
     return (
     <>
         <nav className='navbar'>
-            <div className='navbar-container'>
+            <div data-testid="Navbar-1" className='navbar-container'>
                 <Link to="/" className="navbar-logo">
                     LVLUP  <i className="fa-solid fa-arrow-up"></i>
                 </Link>
@@ -60,7 +62,7 @@ const handleSignOut = () => {
                         </button>
                         {isDropdownOpen && (
                             <div className="dropdown-content">
-                                <button onClick={() => { handleSignOut(); closeDropdown(); }}>Sign Out</button>
+                                <button onClick={() => { handleSignOut(); }}>Sign Out</button>
                             </div>
                         )}
                     </div>

lvlgg_frontend/src/Components/Pages/SignIn.js

@@ -1,8 +1,10 @@
-import React, { useState } from "react";
+import React, {useContext, useState} from 'react';
 import { Link, useHistory } from "react-router-dom";
 import axios from "axios";
+import { AuthContext } from '../../Contexts/AuthContext'
 
 const SignIn = () => {
+  const {setIsSignedIn} = useContext(AuthContext);
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const history = useHistory();
@@ -15,16 +17,20 @@ const SignIn = () => {
         username,
         password,
       })
-      .then((response) => {
+      .then(response => {
         if (response.status === 200) {
-          console.log("Account created successfully:", response.data);
-          history.push("/");
+          console.log('Successful login:', response.data);
+          setIsSignedIn(true);
+          history.push('/')
         } else {
-          console.error("Unexpected response status:", response.status);
+          console.error('Unexpected response status:', response.status);
         }
       })
-      .catch((error) => {
-        console.error("Error:", error);
+      .catch(error => {
+        if (error.response.status === 401) {
+          console.error('error:', error.response.data);
+          alert(JSON.stringify(error.response.data));
+        } 
       });
   };
 

lvlgg_frontend/src/Components/Pages/SignUp.js

@@ -22,15 +22,19 @@ const SignUp = () => {
     .then(response => {
       if (response.status === 200) {
         console.log('Account created successfully:', response.data);
-        history.push('/')
+        alert('account created successfully');
+        history.push('/signin')
       } else {
         console.error('Unexpected response status:', response.status);
       }
 
       // Redirect or perform other actions upon successful account creation
     })
     .catch(error => {
-      console.error('Error:', error);
+      if (error.response && error.response.status === 400) {
+        console.error('error:', error.response.data);
+        alert(JSON.stringify(error.response.data));
+      }
     });
   };
 

lvlgg_frontend/src/Components/__tests__/Button.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { BrowserRouter as Router } from 'react-router-dom'
+import { MemoryRouter } from 'react-router-dom';
+import { Button } from '../../Components/Button.js';
+
+test('renders button component', () => {
+    const { getByText } = render(
+        <MemoryRouter>
+            <Button>Click me</Button>
+        </MemoryRouter>
+    );
+    const buttonElement = getByText('Click me');
+    expect(buttonElement).toBeInTheDocument();
+});
+
+test('renders button component with correct style and size', () => {
+    const { container } = render(
+        <Router>
+            <Button buttonStyle="btn--primary" buttonSize="btn--medium">Click me</Button>
+        </Router>
+    );
+    const buttonElement = container.querySelector('button');
+    expect(buttonElement).toHaveClass('btn');
+    expect(buttonElement).toHaveClass('btn--primary');
+});

lvlgg_frontend/src/Components/__tests__/ExplorePage.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect'; // import the extend-expect library
+import ExplorePage from '../../Components/ExplorePage.js';
+
+test('renders ExplorePage component', () => {
+    const { getByTestId } = render(<ExplorePage />);
+    const videoElement = getByTestId('video-element');
+    expect(videoElement).toBeInTheDocument();
+});
+
+
+test('renders video element with correct attributes', () => {
+    const { getByTestId } = render(<ExplorePage />);
+    const videoElement = getByTestId('video-element');
+    expect(videoElement).toBeInTheDocument();
+    expect(videoElement).toHaveAttribute('src', '/videos/video-6.mp4');
+    expect(videoElement).toHaveAttribute('autoplay');
+    expect(videoElement).toHaveAttribute('loop');
+});
+

lvlgg_frontend/src/Components/__tests__/SignIn.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { BrowserRouter as Router } from 'react-router-dom';
+import SignIn from '../../Components/Pages/SignIn';
+import axios from 'axios';
+import { AuthProvider } from '../../Contexts/AuthContext';
+
+jest.mock('axios');
+
+test('allows user to sign in', async () => {
+    render(
+        <Router> {/* Wrap your component tree with Router */}
+          <AuthProvider>
+            <SignIn />
+          </AuthProvider>
+        </Router>
+    );
+  const usernameInput = screen.getByLabelText('Username:');
+  const passwordInput = screen.getByLabelText('Password:');
+  const button = screen.getByText('Sign In');
+
+  fireEvent.change(usernameInput, { target: { value: 'testuser' } });
+  fireEvent.change(passwordInput, { target: { value: 'testpassword' } });
+
+  axios.post.mockResolvedValueOnce({ status: 200, data: { message: 'Successful login' } });
+
+  fireEvent.click(button);
+
+  await waitFor(() => {
+    expect(axios.post).toHaveBeenCalledWith('http://localhost:8000/account/signin/', {
+      username: 'testuser',
+      password: 'testpassword',
+    });
+  });
+});

lvlgg_frontend/src/Components/__tests__/SignUp.test.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import SignUp from '../../Components/Pages/SignUp.js';
+import axios from 'axios';
+
+jest.mock('axios');
+
+test('renders SignUp component', () => {
+  render(<SignUp />);
+  const usernameInput = screen.getByLabelText('Username:');
+  const emailInput = screen.getByLabelText('Email:');
+  const passwordInput = screen.getByLabelText('Password:');
+  const firstNameInput = screen.getByLabelText('First:');
+  const lastNameInput = screen.getByLabelText('Last:');
+  const button = screen.getByText('Create Account');
+
+  expect(usernameInput).toBeInTheDocument();
+  expect(emailInput).toBeInTheDocument();
+  expect(passwordInput).toBeInTheDocument();
+  expect(firstNameInput).toBeInTheDocument();
+  expect(lastNameInput).toBeInTheDocument();
+  expect(button).toBeInTheDocument();
+});
+
+test('allows user to sign up', async () => {
+  render(<SignUp />);
+  const usernameInput = screen.getByLabelText('Username:');
+  const emailInput = screen.getByLabelText('Email:');
+  const passwordInput = screen.getByLabelText('Password:');
+  const firstNameInput = screen.getByLabelText('First:');
+  const lastNameInput = screen.getByLabelText('Last:');
+  const button = screen.getByText('Create Account');
+
+  fireEvent.change(usernameInput, { target: { value: 'testuser' } });
+  fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
+  fireEvent.change(passwordInput, { target: { value: 'testpassword' } });
+  fireEvent.change(firstNameInput, { target: { value: 'Test' } });
+  fireEvent.change(lastNameInput, { target: { value: 'User' } });
+
+  axios.post.mockResolvedValueOnce({ status: 200, data: { message: 'Account created successfully' } });
+
+  fireEvent.click(button);
+
+  await waitFor(() => {
+    expect(axios.post).toHaveBeenCalledWith('http://localhost:8000/account/signup/', {
+      username: 'testuser',
+      email: 'test@example.com',
+      password: 'testpassword',
+      firstname: 'Test',
+      lastname: 'User'
+    });
+  });
+});