Jackie/rentall-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Navbar UX consistency

Browse Source
This commit is contained in:
jackiettran
2025-12-23 19:39:23 -05:00
parent 426f974ed3
commit 5ec22c2a5b
2 changed files with 119 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/__tests__/components/Navbar.test.tsx
View File

@@ -86,12 +86,6 @@ describe('Navbar', () => {
expect(screen.getByPlaceholderText('Search items...')).toBeInTheDocument();
});
it('should render location input', () => {
renderWithRouter(<Navbar />);
expect(screen.getByPlaceholderText('City or ZIP')).toBeInTheDocument();
});
it('should render search button', () => {
renderWithRouter(<Navbar />);
@@ -122,36 +116,6 @@ describe('Navbar', () => {
expect(mockNavigate).toHaveBeenCalledWith('/items?search=tent');
});
it('should append city to search URL', () => {
renderWithRouter(<Navbar />);
const searchInput = screen.getByPlaceholderText('Search items...');
const locationInput = screen.getByPlaceholderText('City or ZIP');
fireEvent.change(searchInput, { target: { value: 'kayak' } });
fireEvent.change(locationInput, { target: { value: 'Seattle' } });
const searchButton = document.querySelector('button.btn-outline-secondary') as HTMLButtonElement;
fireEvent.click(searchButton);
expect(mockNavigate).toHaveBeenCalledWith('/items?search=kayak&city=Seattle');
});
it('should append zipCode when location is a zip code', () => {
renderWithRouter(<Navbar />);
const searchInput = screen.getByPlaceholderText('Search items...');
const locationInput = screen.getByPlaceholderText('City or ZIP');
fireEvent.change(searchInput, { target: { value: 'bike' } });
fireEvent.change(locationInput, { target: { value: '98101' } });
const searchButton = document.querySelector('button.btn-outline-secondary') as HTMLButtonElement;
fireEvent.click(searchButton);
expect(mockNavigate).toHaveBeenCalledWith('/items?search=bike&zipCode=98101');
});
it('should clear search fields after search', () => {
renderWithRouter(<Navbar />);
@@ -169,16 +133,38 @@ describe('Navbar', () => {
it('should show login button when user is not logged in', () => {
renderWithRouter(<Navbar />);
expect(screen.getByRole('button', { name: 'Login or Sign Up' })).toBeInTheDocument();
// There are two login buttons (mobile + desktop)
const loginButtons = screen.getAllByRole('button', { name: 'Login or Sign Up' });
expect(loginButtons.length).toBeGreaterThan(0);
});
it('should call openAuthModal when login button is clicked', () => {
renderWithRouter(<Navbar />);
fireEvent.click(screen.getByRole('button', { name: 'Login or Sign Up' }));
// Click the first login button (either mobile or desktop)
const loginButtons = screen.getAllByRole('button', { name: 'Login or Sign Up' });
fireEvent.click(loginButtons[0]);
expect(mockOpenAuthModal).toHaveBeenCalledWith('login');
});
it('should show Forum link when logged out', () => {
renderWithRouter(<Navbar />);
// There are two Forum links (mobile + desktop), both should link to /forum
const forumLinks = screen.getAllByRole('link', { name: /Forum/i });
expect(forumLinks.length).toBeGreaterThan(0);
forumLinks.forEach(link => {
expect(link).toHaveAttribute('href', '/forum');
});
});
it('should show hamburger icon for mobile toggle when logged out', () => {
renderWithRouter(<Navbar />);
const hamburgerIcon = document.querySelector('.bi-list');
expect(hamburgerIcon).toBeInTheDocument();
});
});
describe('Logged In State', () => {
@@ -191,10 +177,11 @@ describe('Navbar', () => {
};
});
it('should show user name when logged in', () => {
it('should show user avatar when logged in', () => {
renderWithRouter(<Navbar />);
expect(screen.getByText('John')).toBeInTheDocument();
// Avatar displays user initials (JD for John Doe) - may appear multiple times (mobile + desktop)
expect(screen.getAllByText('JD').length).toBeGreaterThan(0);
});
it('should not show login button when logged in', () => {
@@ -250,19 +237,26 @@ describe('Navbar', () => {
});
});
describe('Start Earning Link', () => {
it('should show Start Earning link', () => {
renderWithRouter(<Navbar />);
expect(screen.getByRole('link', { name: 'Start Earning' })).toHaveAttribute('href', '/create-item');
});
});
describe('Mobile Navigation', () => {
it('should render mobile toggle button', () => {
renderWithRouter(<Navbar />);
expect(screen.getByLabelText('Toggle navigation')).toBeInTheDocument();
});
it('should show avatar in mobile toggle when logged in', () => {
mockUser = {
id: 'user-123',
firstName: 'John',
lastName: 'Doe',
email: 'john@example.com',
};
renderWithRouter(<Navbar />);
// Should have avatar with initials, not hamburger icon
expect(screen.getAllByText('JD').length).toBeGreaterThan(0);
expect(document.querySelector('.bi-list')).not.toBeInTheDocument();
});
});
});

56
frontend/src/components/Navbar.tsx
View File

@@ -3,6 +3,7 @@ import { Link, useNavigate } from "react-router-dom";
import { useAuth } from "../contexts/AuthContext";
import { useSocket } from "../contexts/SocketContext";
import { rentalAPI, messageAPI } from "../services/api";
import Avatar from "./Avatar";
const Navbar: React.FC = () => {
const { user, logout, openAuthModal } = useAuth();
@@ -137,7 +138,7 @@ const Navbar: React.FC = () => {
</div>
</div>
{/* Mobile avatar toggle */}
{/* Mobile menu toggle */}
<button
className="navbar-toggler border-0 p-0"
type="button"
@@ -147,6 +148,7 @@ const Navbar: React.FC = () => {
aria-expanded="false"
aria-label="Toggle navigation"
>
{user ? (
<span
style={{
display: "flex",
@@ -178,15 +180,18 @@ const Navbar: React.FC = () => {
{pendingRequestsCount + unreadMessagesCount}
</span>
)}
<Avatar user={user} size="sm" />
</span>
) : (
<i
className="bi bi-person-circle"
className="bi bi-list"
style={{ fontSize: "1.5rem", color: "#333" }}
></i>
</span>
)}
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<div className="d-flex align-items-center ms-auto">
<ul className="navbar-nav flex-row">
<div className="d-flex align-items-center justify-content-center justify-content-lg-end w-100">
<ul className="navbar-nav flex-column flex-lg-row">
{user ? (
<>
<li className="nav-item dropdown">
@@ -210,29 +215,26 @@ const Navbar: React.FC = () => {
<span
style={{
position: "absolute",
left: "-0.9em",
top: "50%",
transform: "translateY(-50%)",
right: "-5px",
top: "-5px",
backgroundColor: "#dc3545",
color: "white",
borderRadius: "50%",
width: "1.5em",
height: "1.5em",
width: "1.2em",
height: "1.2em",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "0.85em",
fontSize: "0.7em",
fontWeight: "bold",
border: "2px solid white",
opacity: 1,
zIndex: 1,
}}
>
{pendingRequestsCount + unreadMessagesCount}
</span>
)}
<i className="bi bi-person-circle me-1"></i>
{user.firstName}
<Avatar user={user} size="sm" />
</span>
</a>
<ul
@@ -298,14 +300,36 @@ const Navbar: React.FC = () => {
</li>
</>
) : (
<li className="nav-item">
<>
<li className="nav-item text-center text-lg-end">
<Link
className="nav-link d-lg-none"
to="/forum"
>
Forum
</Link>
<Link
className="btn btn-outline-primary btn-sm text-nowrap d-none d-lg-inline-block me-2"
to="/forum"
>
Forum
</Link>
</li>
<li className="nav-item text-center text-lg-end">
<button
className="btn btn-primary btn-sm text-nowrap"
className="nav-link d-lg-none w-100 border-0 bg-transparent"
onClick={() => openAuthModal("login")}
>
Login or Sign Up
</button>
<button
className="btn btn-primary btn-sm text-nowrap d-none d-lg-inline-block"
onClick={() => openAuthModal("login")}
>
Login or Sign Up
</button>
</li>
</>
)}
</ul>
</div>