+
-
- person
-
-
+
groups
+
Group Rides
+
- {userMenuOpen && (
-
+
-
setUserMenuOpen(false)}
- role="menuitem"
- className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-on-surface hover:text-primary-container hover:bg-surface-container transition-colors text-xs font-semibold"
+ {userMenuOpen && (
+
-
- person
-
-
Rider Account
-
+
+
+ Rider Account
+
+
+ {isAdmin ? 'Staff / Administrator' : 'Telemetry Connected'}
+
+
-
setUserMenuOpen(false)}
- role="menuitem"
- className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-on-surface hover:text-secondary hover:bg-surface-container transition-colors text-xs font-semibold"
- >
-
- shield
-
-
Founder Portal
-
+
setUserMenuOpen(false)}
+ role="menuitem"
+ className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-on-surface hover:text-primary-container hover:bg-surface-container transition-colors text-xs font-semibold"
+ >
+
+ person
+
+
Rider Account
+
+
+
setUserMenuOpen(false)}
+ role="menuitem"
+ className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-on-surface hover:text-primary-container hover:bg-surface-container transition-colors text-xs font-semibold"
+ >
+
+ groups
+
+
Group Rides
+
+
+
setUserMenuOpen(false)}
+ role="menuitem"
+ className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-on-surface hover:text-secondary hover:bg-surface-container transition-colors text-xs font-semibold"
+ >
+
+ shield
+
+
Founder Portal
+
{isAdmin && (
)}
+
) : (
person
Rider Account
+ setMobileMenuOpen(false)}
+ className="px-space-md py-2.5 rounded-xl font-label-md text-label-md transition-colors min-h-[44px] flex items-center gap-2 text-on-surface hover:bg-surface-container"
+ >
+ groups
+ Group Rides
+
setMobileMenuOpen(false)}
diff --git a/website/tests/group-rides-page.test.tsx b/website/tests/group-rides-page.test.tsx
index bca6090..c78243a 100644
--- a/website/tests/group-rides-page.test.tsx
+++ b/website/tests/group-rides-page.test.tsx
@@ -7,6 +7,12 @@ import { JoinRideModal } from '../components/group-rides/join-ride-modal';
import { CreateRideModal } from '../components/group-rides/create-ride-modal';
import { GroupRidesDirectory } from '../components/group-rides/group-rides-directory';
import { INITIAL_GROUP_RIDES } from '../components/group-rides/fixtures';
+import { SiteHeaderClient } from '../components/site-header-client';
+
+vi.mock('next/navigation', () => ({
+ usePathname: () => '/',
+ useRouter: () => ({ push: vi.fn(), replace: vi.fn(), back: vi.fn() }),
+}));
describe('Group Rides Interactive Page & Components', () => {
beforeEach(() => {
@@ -303,4 +309,39 @@ describe('Group Rides Interactive Page & Components', () => {
});
});
});
+
+ // ============================================================
+ // 6. Authenticated Navigation to Group Rides
+ // ============================================================
+ describe('Authenticated Navigation to Group Rides', () => {
+ it('renders Group Rides quick button and user dropdown link for signed-in users', () => {
+ render();
+
+ // Quick header button for signed-in users
+ const quickGroupRidesBtn = screen.getByTitle('Group Rides Hub');
+ expect(quickGroupRidesBtn).toBeDefined();
+ expect(quickGroupRidesBtn.getAttribute('href')).toBe('/group-rides');
+
+ // Open Rider Menu dropdown
+ const riderMenuBtn = screen.getByRole('button', { name: /open rider menu/i });
+ fireEvent.click(riderMenuBtn);
+
+ // Verify Group Rides link exists inside dropdown menu
+ const groupRidesLinks = screen.getAllByRole('menuitem', { name: /group rides/i });
+ expect(groupRidesLinks.length).toBeGreaterThan(0);
+ expect(groupRidesLinks[0].getAttribute('href')).toBe('/group-rides');
+ });
+
+ it('renders Group Rides in mobile navigation drawer for signed-in users', () => {
+ render();
+
+ const hamburgerBtn = screen.getByRole('button', { name: /open navigation menu/i });
+ fireEvent.click(hamburgerBtn);
+
+ const groupRidesNavLinks = screen.getAllByRole('link', { name: /group rides/i });
+ const mobileDrawerLink = groupRidesNavLinks.find(link => link.getAttribute('href') === '/group-rides');
+ expect(mobileDrawerLink).toBeDefined();
+ });
+ });
});
+