diff --git a/app/page.test.tsx b/app/page.test.tsx index f7091dae..e2aabe4f 100644 --- a/app/page.test.tsx +++ b/app/page.test.tsx @@ -120,6 +120,23 @@ describe('LandingPage', () => { expect(input.value).toBe('octocat'); }); + + it('disables the Watch Dashboard link when username is empty', () => { + render(); + const input = screen.getByPlaceholderText('Enter GitHub Username') as HTMLInputElement; + const dashboardLink = screen.getByRole('link', { name: 'Watch Dashboard' }); + + expect(dashboardLink.getAttribute('aria-disabled')).toBe('true'); + expect(dashboardLink.getAttribute('tabindex')).toBe('-1'); + expect(dashboardLink.getAttribute('href')).toBe('#'); + + fireEvent.change(input, { target: { value: 'octocat' } }); + + expect(dashboardLink.getAttribute('aria-disabled')).toBeNull(); + expect(dashboardLink.getAttribute('tabindex')).toBeNull(); + expect(dashboardLink.getAttribute('href')).toBe('/dashboard/octocat'); + }); + it('renders an empty state before a username is entered', () => { render(); diff --git a/app/page.tsx b/app/page.tsx index 79e5f375..101f902a 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -261,8 +261,14 @@ export default function LandingPage() { { if (!hasUsername) { e.preventDefault(); @@ -274,7 +280,7 @@ export default function LandingPage() { className={`relative flex min-w-[160px] items-center justify-center gap-2 overflow-hidden rounded-xl border px-6 py-3.5 text-sm font-semibold transition-all duration-200 active:scale-[0.98] ${ hasUsername ? 'border-black/10 bg-gray-100 text-black hover:bg-gray-200 dark:border-[rgba(255,255,255,0.15)] dark:bg-white/[0.04] dark:text-white dark:hover:bg-white/10' - : 'border-black/10 bg-gray-100 text-gray-500 dark:border-[rgba(255,255,255,0.08)] dark:bg-white/[0.02] dark:text-white/35' + : 'pointer-events-none cursor-not-allowed border-black/10 bg-gray-100 text-gray-500 dark:border-[rgba(255,255,255,0.08)] dark:bg-white/[0.02] dark:text-white/35' }`} > Watch Dashboard