From cfef2ecf0e78b8414b080a6d6a104f59ab021861 Mon Sep 17 00:00:00 2001 From: anum1608 Date: Tue, 30 Jul 2024 12:02:01 +0100 Subject: [PATCH 01/13] MM-005: Add header with hamburger button --- src/App.tsx | 8 ++++++-- src/Hamburgerbutton.scss | 18 ++++++++++++++++++ src/Hamburgerbutton.tsx | 24 ++++++++++++++++++++++++ src/header.tsx | 16 ++++++++++++++++ 4 files changed, 64 insertions(+), 2 deletions(-) create mode 100644 src/Hamburgerbutton.scss create mode 100644 src/Hamburgerbutton.tsx create mode 100644 src/header.tsx diff --git a/src/App.tsx b/src/App.tsx index 5bedb7f..783e1d5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,13 @@ import React from 'react'; import logo from './logo.svg'; import './App.scss'; +import Header from './header'; function App() { return (
- logo + {/* logo

Edit src/App.tsx and save to reload.

@@ -17,7 +18,10 @@ function App() { rel="noopener noreferrer" > Learn React - + */} + +
+
); diff --git a/src/Hamburgerbutton.scss b/src/Hamburgerbutton.scss new file mode 100644 index 0000000..5595bd3 --- /dev/null +++ b/src/Hamburgerbutton.scss @@ -0,0 +1,18 @@ +.hamburger { + display: flex; + flex-direction: column; + justify-content: space-around; + width: 30px; + height: 30px; + background: transparent; + border: none; + cursor: pointer; + } + + .line { + width: 100%; + height: 3px; + background-color: black; + transition: all 0.3s ease; + } + \ No newline at end of file diff --git a/src/Hamburgerbutton.tsx b/src/Hamburgerbutton.tsx new file mode 100644 index 0000000..0dbcefa --- /dev/null +++ b/src/Hamburgerbutton.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import './Hamburgerbutton.scss'; // styling for the hmauburger button icon + +interface HamburgerProps { + onClick: () => void; +} + +const Hamburger: React.FC = ({ onClick }) => { + + const handleClick = () => { + onClick(); + }; + + return ( + + ); +}; + +export default Hamburger; \ No newline at end of file diff --git a/src/header.tsx b/src/header.tsx new file mode 100644 index 0000000..3008bce --- /dev/null +++ b/src/header.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import Hamburger from './Hamburgerbutton'; + +const Header: React.FC = () => { + const handleHamburgerClick = () => { + console.log('Hamburger menu clicked!'); + }; + + return ( +
+ +
+ ); +}; + +export default Header; \ No newline at end of file From 333fd033d9db7406fa50933106fbb4f74c22b758 Mon Sep 17 00:00:00 2001 From: anum1608 Date: Tue, 30 Jul 2024 12:39:32 +0100 Subject: [PATCH 02/13] MM-005: Add test for hamburger button --- src/App.test.tsx | 20 +++++++++++++++++--- src/Hamburgerbutton.tsx | 5 ++++- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/App.test.tsx b/src/App.test.tsx index 2a68616..bf57826 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,9 +1,23 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen, fireEvent } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import App from './App'; +import Hamburger from './Hamburgerbutton'; -test('renders learn react link', () => { +/* test('renders learn react link', () => { render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); -}); +}); */ + + + +test('calls onClick when Hamburger button is clicked', () => { + const handleClick = jest.fn(); + render(); + + const button = screen.getByText('Click Me'); + fireEvent.click(button); + + expect(handleClick).toHaveBeenCalledTimes(1); + }); diff --git a/src/Hamburgerbutton.tsx b/src/Hamburgerbutton.tsx index 0dbcefa..505bff2 100644 --- a/src/Hamburgerbutton.tsx +++ b/src/Hamburgerbutton.tsx @@ -3,9 +3,11 @@ import './Hamburgerbutton.scss'; // styling for the hmauburger button icon interface HamburgerProps { onClick: () => void; + label: string; + } -const Hamburger: React.FC = ({ onClick }) => { +const Hamburger: React.FC = ({ onClick , label}) => { const handleClick = () => { onClick(); @@ -14,6 +16,7 @@ const Hamburger: React.FC = ({ onClick }) => { return ( + ); +}; + +export default Hamburger; \ No newline at end of file diff --git a/src/header.tsx b/src/header.tsx new file mode 100644 index 0000000..3008bce --- /dev/null +++ b/src/header.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import Hamburger from './Hamburgerbutton'; + +const Header: React.FC = () => { + const handleHamburgerClick = () => { + console.log('Hamburger menu clicked!'); + }; + + return ( +
+ +
+ ); +}; + +export default Header; \ No newline at end of file From 154dea0204bc9d86097eb79893c38b80bff84a5e Mon Sep 17 00:00:00 2001 From: anum1608 Date: Tue, 30 Jul 2024 12:39:32 +0100 Subject: [PATCH 06/13] MM-005: Add test for hamburger button --- src/App.test.tsx | 23 +++++++++++++++++++++-- src/Hamburgerbutton.tsx | 5 ++++- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/App.test.tsx b/src/App.test.tsx index 7028ea9..3dbc12a 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,10 +1,29 @@ -import { render, screen } from '@testing-library/react'; +import { render, screen, fireEvent } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import App from './App'; import "@testing-library/jest-dom"; +import Hamburger from './Hamburgerbutton'; // remove this test when real tests are added test('renders header', () => { render(); const header = screen.getByText(/MarsioKart/i); expect(header).toBeInTheDocument(); - }); \ No newline at end of file + }); +/* test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); */ + + + +test('calls onClick when Hamburger button is clicked', () => { + const handleClick = jest.fn(); + render(); + + const button = screen.getByText('Click Me'); + fireEvent.click(button); + + expect(handleClick).toHaveBeenCalledTimes(1); + }); diff --git a/src/Hamburgerbutton.tsx b/src/Hamburgerbutton.tsx index 0dbcefa..505bff2 100644 --- a/src/Hamburgerbutton.tsx +++ b/src/Hamburgerbutton.tsx @@ -3,9 +3,11 @@ import './Hamburgerbutton.scss'; // styling for the hmauburger button icon interface HamburgerProps { onClick: () => void; + label: string; + } -const Hamburger: React.FC = ({ onClick }) => { +const Hamburger: React.FC = ({ onClick , label}) => { const handleClick = () => { onClick(); @@ -14,6 +16,7 @@ const Hamburger: React.FC = ({ onClick }) => { return ( + ); +}; + +export default Hamburger; \ No newline at end of file diff --git a/src/header.tsx b/src/header.tsx new file mode 100644 index 0000000..3008bce --- /dev/null +++ b/src/header.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import Hamburger from './Hamburgerbutton'; + +const Header: React.FC = () => { + const handleHamburgerClick = () => { + console.log('Hamburger menu clicked!'); + }; + + return ( +
+ +
+ ); +}; + +export default Header; \ No newline at end of file From 6f2a0c782b4f70731f971684cbc25116f885a628 Mon Sep 17 00:00:00 2001 From: anum1608 Date: Tue, 30 Jul 2024 12:39:32 +0100 Subject: [PATCH 09/13] MM-005: Add test for hamburger button --- src/App.test.tsx | 27 +++++++++++++++++++++++---- src/Hamburgerbutton.tsx | 5 ++++- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/src/App.test.tsx b/src/App.test.tsx index 9c4da8e..3dbc12a 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,10 +1,29 @@ -import { render, screen } from '@testing-library/react'; +import { render, screen, fireEvent } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import App from './App'; import "@testing-library/jest-dom"; +import Hamburger from './Hamburgerbutton'; // remove this test when real tests are added test('renders header', () => { render(); - const header = screen.getAllByText(/MarsioKart/i); - expect(header[0]).toBeInTheDocument(); - }); \ No newline at end of file + const header = screen.getByText(/MarsioKart/i); + expect(header).toBeInTheDocument(); + }); +/* test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); */ + + + +test('calls onClick when Hamburger button is clicked', () => { + const handleClick = jest.fn(); + render(); + + const button = screen.getByText('Click Me'); + fireEvent.click(button); + + expect(handleClick).toHaveBeenCalledTimes(1); + }); diff --git a/src/Hamburgerbutton.tsx b/src/Hamburgerbutton.tsx index 0dbcefa..505bff2 100644 --- a/src/Hamburgerbutton.tsx +++ b/src/Hamburgerbutton.tsx @@ -3,9 +3,11 @@ import './Hamburgerbutton.scss'; // styling for the hmauburger button icon interface HamburgerProps { onClick: () => void; + label: string; + } -const Hamburger: React.FC = ({ onClick }) => { +const Hamburger: React.FC = ({ onClick , label}) => { const handleClick = () => { onClick(); @@ -14,6 +16,7 @@ const Hamburger: React.FC = ({ onClick }) => { return (