Skip to content

Commit 538523b

Browse files
greedy-wudpeckrgreedy-wudpeckr
authored
fix : prevent navbar logo from redirecting to landing page when logged in (#446)
* fix : navbar-redirect Signed-off-by: greedy-wudpeckr <mudituiet@gmail.com> * fix: footer-redirect Signed-off-by: greedy-wudpeckr <mudituiet@gmail.com> * added handleLogoClick in utils Signed-off-by: greedy-wudpeckr <mudituiet@gmail.com> * added tests for handlelogoClick Signed-off-by: greedy-wudpeckr <mudituiet@gmail.com> * updated snapshots Signed-off-by: greedy-wudpeckr <mudituiet@gmail.com> --------- Signed-off-by: greedy-wudpeckr <mudituiet@gmail.com>
1 parent 967ebfa commit 538523b

8 files changed

Lines changed: 108 additions & 10 deletions

File tree

‎frontend/src/components/HomeComponents/Footer/Footer.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { HighlightLink } from '@/components/ui/link-highlight';
22
import logo from '../../../assets/logo.png';
33
import logoLight from '../../../assets/logo_light.png';
44
import { url } from '@/components/utils/URLs';
5+
import { handleLogoClick } from '@/components/utils/utils';
56

67
export const Footer = () => {
78
return (
@@ -12,7 +13,8 @@ export const Footer = () => {
1213
<div className="col-span-full xl:col-span-2">
1314
<a
1415
rel="noreferrer noopener"
15-
href="/"
16+
href="#"
17+
onClick={handleLogoClick}
1618
className="ml-2 font-bold text-xl flex items-center dark:hidden"
1719
>
1820
<img
@@ -23,7 +25,8 @@ export const Footer = () => {
2325
</a>
2426
<a
2527
rel="noreferrer noopener"
26-
href="/"
28+
href="#"
29+
onClick={handleLogoClick}
2730
className="ml-2 font-bold text-xl hidden dark:flex items-center"
2831
>
2932
<img

‎frontend/src/components/HomeComponents/Footer/__tests__/Footer.test.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { render, screen } from '@testing-library/react';
1+
import { render, screen, fireEvent } from '@testing-library/react';
22
import '@testing-library/jest-dom';
33
import { Footer } from '../Footer';
4+
import * as utils from '@/components/utils/utils';
45

56
jest.mock('../../../../assets/logo.png', () => 'logo-path');
67
jest.mock('../../../../assets/logo_light.png', () => 'logo-light-path');
@@ -29,3 +30,21 @@ describe('Footer component using Snapshot', () => {
2930
expect(asFragment()).toMatchSnapshot();
3031
});
3132
});
33+
34+
describe('Footer logo click handler', () => {
35+
test('should call handleLogoClick when logo link is clicked', () => {
36+
const handleLogoClickSpy = jest.spyOn(utils, 'handleLogoClick');
37+
render(<Footer />);
38+
39+
const logoLinks = screen.getAllByRole('link');
40+
const logoLink = logoLinks.find(
41+
(link) => link.getAttribute('href') === '#'
42+
);
43+
44+
expect(logoLink).toBeDefined();
45+
fireEvent.click(logoLink!);
46+
expect(handleLogoClickSpy).toHaveBeenCalledTimes(1);
47+
48+
handleLogoClickSpy.mockRestore();
49+
});
50+
});

‎frontend/src/components/HomeComponents/Footer/__tests__/__snapshots__/Footer.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ exports[`Footer component using Snapshot renders correctly 1`] = `
1616
>
1717
<a
1818
class="ml-2 font-bold text-xl flex items-center dark:hidden"
19-
href="/"
19+
href="#"
2020
rel="noreferrer noopener"
2121
>
2222
<img
@@ -27,7 +27,7 @@ exports[`Footer component using Snapshot renders correctly 1`] = `
2727
</a>
2828
<a
2929
class="ml-2 font-bold text-xl hidden dark:flex items-center"
30-
href="/"
30+
href="#"
3131
rel="noreferrer noopener"
3232
>
3333
<img

‎frontend/src/components/HomeComponents/Navbar/Navbar.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import logoLight from '../../../assets/logo_light.png';
99
import { NavbarMobile } from './NavbarMobile';
1010
import { NavbarDesktop } from './NavbarDesktop';
1111
import { Props } from './navbar-utils';
12+
import { handleLogoClick } from '@/components/utils/utils';
1213

1314
export const Navbar = (
1415
props: Props & {
@@ -25,7 +26,8 @@ export const Navbar = (
2526
<NavigationMenuItem className="font-bold flex">
2627
<a
2728
rel="noreferrer noopener"
28-
href="/"
29+
href="#"
30+
onClick={handleLogoClick}
2931
className="ml-2 font-bold text-xl flex items-center dark:hidden"
3032
>
3133
<img
@@ -36,7 +38,8 @@ export const Navbar = (
3638
</a>
3739
<a
3840
rel="noreferrer noopener"
39-
href="/"
41+
href="#"
42+
onClick={handleLogoClick}
4043
className="ml-2 font-bold text-xl hidden dark:flex items-center"
4144
>
4245
<img

‎frontend/src/components/HomeComponents/Navbar/__tests__/Navbar.test.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { render, screen } from '@testing-library/react';
1+
import { render, screen, fireEvent } from '@testing-library/react';
22
import { Navbar } from '../Navbar';
33
import { Props } from '../navbar-utils';
4+
import * as utils from '@/components/utils/utils';
45

56
// Mocking the NavbarMobile and NavbarDesktop components
67
jest.mock('../NavbarMobile', () => ({
@@ -65,3 +66,21 @@ describe('Navbar component using snapshot', () => {
6566
expect(asFragment()).toMatchSnapshot();
6667
});
6768
});
69+
70+
describe('Navbar logo click handler', () => {
71+
test('should call handleLogoClick when logo link is clicked', () => {
72+
const handleLogoClickSpy = jest.spyOn(utils, 'handleLogoClick');
73+
render(<Navbar {...props} />);
74+
75+
const logoLinks = screen.getAllByRole('link');
76+
const logoLink = logoLinks.find(
77+
(link) => link.getAttribute('href') === '#'
78+
);
79+
80+
expect(logoLink).toBeDefined();
81+
fireEvent.click(logoLink!);
82+
expect(handleLogoClickSpy).toHaveBeenCalledTimes(1);
83+
84+
handleLogoClickSpy.mockRestore();
85+
});
86+
});

‎frontend/src/components/HomeComponents/Navbar/__tests__/__snapshots__/Navbar.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ exports[`Navbar component using snapshot renders correctly 1`] = `
2424
>
2525
<a
2626
class="ml-2 font-bold text-xl flex items-center dark:hidden"
27-
href="/"
27+
href="#"
2828
rel="noreferrer noopener"
2929
>
3030
<img
@@ -35,7 +35,7 @@ exports[`Navbar component using snapshot renders correctly 1`] = `
3535
</a>
3636
<a
3737
class="ml-2 font-bold text-xl hidden dark:flex items-center"
38-
href="/"
38+
href="#"
3939
rel="noreferrer noopener"
4040
>
4141
<img

‎frontend/src/components/utils/__tests__/utils.test.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { MouseEvent } from 'react';
2+
import { handleLogoClick } from '../utils';
3+
4+
describe('handleLogoClick', () => {
5+
let mockEvent: Partial<MouseEvent<HTMLAnchorElement>>;
6+
let reloadMock: jest.Mock;
7+
8+
beforeEach(() => {
9+
mockEvent = {
10+
preventDefault: jest.fn(),
11+
};
12+
13+
// Mock reload using Object.defineProperty
14+
reloadMock = jest.fn();
15+
Object.defineProperty(window, 'location', {
16+
value: { reload: reloadMock },
17+
writable: true,
18+
});
19+
});
20+
21+
it('should call preventDefault on the event', () => {
22+
handleLogoClick(mockEvent as MouseEvent<HTMLAnchorElement>);
23+
24+
expect(mockEvent.preventDefault).toHaveBeenCalledTimes(1);
25+
});
26+
27+
it('should reload the page', () => {
28+
handleLogoClick(mockEvent as MouseEvent<HTMLAnchorElement>);
29+
30+
expect(reloadMock).toHaveBeenCalledTimes(1);
31+
});
32+
33+
it('should call preventDefault before reloading', () => {
34+
const callOrder: string[] = [];
35+
36+
mockEvent.preventDefault = jest.fn(() => {
37+
callOrder.push('preventDefault');
38+
});
39+
40+
reloadMock.mockImplementation(() => {
41+
callOrder.push('reload');
42+
});
43+
44+
handleLogoClick(mockEvent as MouseEvent<HTMLAnchorElement>);
45+
46+
expect(callOrder).toEqual(['preventDefault', 'reload']);
47+
});
48+
});

‎frontend/src/components/utils/utils.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { type ClassValue, clsx } from 'clsx';
2+
import type { MouseEvent } from 'react';
23
import { twMerge } from 'tailwind-merge';
34

45
export function cn(...inputs: ClassValue[]) {
@@ -19,3 +20,8 @@ export function debounce<T extends (...args: any[]) => void>(
1920
export const getStartOfDay = (date: Date) => {
2021
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
2122
};
23+
24+
export const handleLogoClick = (e: MouseEvent<HTMLAnchorElement>) => {
25+
e.preventDefault();
26+
window.location.reload();
27+
};

0 commit comments

Comments
 (0)