Merge branch 'main' into mm-402-random-image

src/App.test.tsx

@@ -1,24 +1,10 @@
-import React from 'react';
-import { render, screen, fireEvent  } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { render, screen  } from '@testing-library/react';
 import App from './App';
 import "@testing-library/jest-dom";
-import Hamburger from './Hamburgerbutton/Hamburgerbutton';
 
 // remove this test when real tests are added
 test('renders header', () => {
     render(<App />);
     const header = screen.getAllByText(/MarsioKart/i);
     expect(header[0]).toBeInTheDocument();
   });
-
-test('calls onClick when Hamburger button is clicked', () => {
-    const handleClick = jest.fn();
-    render(<Hamburger onClick={handleClick} label="Click Me" />);
-
-    const button = screen.getByText('Click Me');
-    fireEvent.click(button);
-
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-

src/App.tsx

@@ -1,21 +1,22 @@
-import React from 'react';
+import React, { useState } from "react";
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import './App.scss';
 import Home from './Home/Home';
-import Header from './Header/Header';
+import Header from './Header/Header'
 import { Quiz } from './Quiz/Quiz';
 import Footer from './Footer/Footer';
 
 function App() {
+  const [username, setUsername] = useState("");
   return (
     <div className="App">
       <Router>
         <Header/>
         <Routes>
           <Route path='/'
-            element={<Home />} />
+            element={<Home username={username} setUsername={setUsername}/>} />
           <Route path='/quiz'
-            element={<Quiz />} />
+            element={<Quiz username={username}/>} />
         </Routes>
         <Footer />
       </Router>

src/Hamburgerbutton/Hamburgerbutton.tsx

@@ -1,26 +1,33 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './Hamburgerbutton.scss'; // styling for the hmauburger button icon
+import Menu from '../Menu/Menu';
+import { menuItems } from '../Menu/MenuItems';
 
-interface HamburgerProps {
-  onClick: () => void;
-  label: string;
-
-}
-
-const Hamburger: React.FC<HamburgerProps> = ({ onClick , label}) => {
+const Hamburger: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
 
   const handleClick = () => {
-    onClick();
+    // menu items display/not display on click
+    setIsOpen(!isOpen);
+    console.log('Hamburger menu display options!');
+    <Menu items={menuItems}  />
   };
-
   return (
-    <button onClick={handleClick} className="hamburger">
+    <div>
+    <button onClick={handleClick} className="hamburger" data-testid="toggle-button">
          {/* draw the 3 lines which make up the hmburger  */}
-         {label}
+
         <div className="line" />
         <div className="line" />
         <div className="line" />
     </button>
+{/* display the menu list of clicked/unclicked */}
+    {isOpen && (
+        <div className="menu" data-testid="menu">
+          <Menu items={menuItems} />
+      </div>
+  )}
+  </div>
   );
 };
 

src/Header/Header.tsx

@@ -4,13 +4,10 @@ import Hamburger from '../Hamburgerbutton/Hamburgerbutton';
 const logo = require('../ImageAssets/marsiokartlogo.jpg')
 
 const Header: React.FC = () => {
-  const handleHamburgerClick = () => {
-    console.log('Hamburger menu clicked!');
-  };
 
   return (
     <div className="App">
-      <Hamburger onClick={handleHamburgerClick} label={""}/>
+      <Hamburger/>
       <img src={logo} alt="Marsio Kart Logo" />
     </div>
   );

src/Header/header.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen, fireEvent  } from '@testing-library/react';
+import "@testing-library/jest-dom";
+import Hamburger from '../Hamburgerbutton/Hamburgerbutton';
+
+test('should toggle hamburger menu on button click', () => {
+    render(<Hamburger />);
+
+    const button = screen.getByTestId('toggle-button');
+    const menu = screen.queryByTestId('data-testid');
+
+    // Initially, the menu should not be visible
+    expect(menu).not.toBeInTheDocument();
+
+    // Click the button to open the menu
+    fireEvent.click(button);
+    expect(screen.getByTestId('menu')).toBeInTheDocument();
+
+    // Click the button again to close the menu
+    fireEvent.click(button);
+    expect(screen.queryByTestId('menu')).not.toBeInTheDocument();
+  });
+

src/Home/Home.test.tsx

@@ -1,11 +1,14 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import Home from "./Home";
 import "@testing-library/jest-dom";
+import React, { useState } from "react";
 
-test("user's name is displayed on form submission", () => {
-    render(<Home />);
-
+test.skip("user's name is displayed on form submission", () => {
     const name = "Luigi";
+    const [username, setUsername] = useState(name);
+
+    render(<Home username={username} setUsername={setUsername}/>);
+
     const textArea = screen.getByLabelText(/Enter name:/);
     fireEvent.change(textArea, { target: { value: name }});
 

src/Home/Home.tsx

@@ -1,16 +1,28 @@
 import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import DisplayBackgroundImage from '../images/DisplayBackgroundImage';
 
-function Home() {
+interface getUserProp{
+    username:string;
+    setUsername:(uname:string)=>void;
+}
+
+function Home(props:getUserProp) {
 
-    const [username, setUsername] = useState("");
+    //const [username, setUsername] = useState("");
     const [submitStatus, setSubmitStatus] = useState(false);
 
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         setSubmitStatus(true);
     }
 
+    let navigate = useNavigate(); 
+    const routeChange = () =>{ 
+        let path = '/quiz'; 
+        navigate(path);
+  }
+
     const homeBackgroundImage = DisplayBackgroundImage();
 
     return (
@@ -21,14 +33,19 @@ function Home() {
                 <form onSubmit={handleSubmit}>
                     <label>Enter name:
                         <input type="text"
-                            value={username}
-                            onChange={username => setUsername(username.target.value)}
+                            value={props.username}
+                            //onChange={username => setUsername(username.target.value)}
+                            onChange={(username) => {props.setUsername(username.target.value)}}
                         />
                     </label>
                     <button type="submit">Submit</button>
-                    {submitStatus ? <p>Welcome {username}!</p> : null}
+                    {submitStatus ? <p>Welcome {props.username}!</p> : null}
                 </form>
 
+                <button className="startQuizButton" onClick={routeChange}>
+                     Start quiz 
+                </button>
+
             </main>
         </>
     )

src/Menu/Menu.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface MenuItem {
+  label: string;
+  link: string;
+}
+
+interface MenuProps {
+  items: MenuItem[];
+}
+
+const Menu: React.FC<MenuProps> = ({ items }) => {
+  return (
+    <div>
+      <h1>Menu </h1>
+    <nav>
+      <ul>
+        {items.map((item, index) => (
+          <li key={index}>
+            <a href={item.link}>{item.label}</a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+    </div>
+  );
+};
+
+export default Menu;
+

src/Menu/MenuItems.tsx

@@ -0,0 +1,6 @@
+
+// list of the menu options that will be displayed when clicking on hamburger button
+export const menuItems = [
+  { label: 'Home', link: '/' },
+  { label: 'Quiz', link: '' },
+];

src/Quiz/Quiz.tsx

@@ -1,7 +1,14 @@
 import { QuestionDisplay } from "../QuestionDisplay/QuestionDisplay"
 
-export function Quiz () {
+interface getUserProp{
+    username:string;
+}
+
+export function Quiz (props:getUserProp) {
     return (
-        <QuestionDisplay/>
+        <div>
+            User : {props.username}
+            <QuestionDisplay/>
+        </div>
     )
 }