diff --git a/frontend/src/app/demos/page.tsx b/frontend/src/app/demos/page.tsx index 5ce9636..fb7760b 100644 --- a/frontend/src/app/demos/page.tsx +++ b/frontend/src/app/demos/page.tsx @@ -27,7 +27,8 @@ import { Separator } from '@/components/ui/separator'; export const metadata: Metadata = { title: 'Demo Tour | FastNext Template', - description: 'Try all features with demo credentials - comprehensive guide to the FastNext template', + description: + 'Try all features with demo credentials - comprehensive guide to the FastNext template', }; const demoCategories = [ @@ -36,7 +37,12 @@ const demoCategories = [ title: 'Design System Hub', description: 'Browse components, layouts, spacing, and forms with live examples', href: '/dev', - features: ['All UI components', 'Layout patterns', 'Spacing philosophy', 'Form implementations'], + features: [ + 'All UI components', + 'Layout patterns', + 'Spacing philosophy', + 'Form implementations', + ], credentials: null, }, { @@ -260,7 +266,8 @@ export default function DemoTourPage() { {/* CTA */} diff --git a/frontend/src/app/dev/page.tsx b/frontend/src/app/dev/page.tsx index 6fe7837..7224472 100644 --- a/frontend/src/app/dev/page.tsx +++ b/frontend/src/app/dev/page.tsx @@ -14,7 +14,8 @@ import { Separator } from '@/components/ui/separator'; export const metadata: Metadata = { title: 'Design System Hub | FastNext Template', - description: 'Interactive design system demonstrations with live examples - explore components, layouts, spacing, and forms built with shadcn/ui and Tailwind CSS', + description: + 'Interactive design system demonstrations with live examples - explore components, layouts, spacing, and forms built with shadcn/ui and Tailwind CSS', }; const demoPages = [ diff --git a/frontend/src/components/dev/DevLayout.tsx b/frontend/src/components/dev/DevLayout.tsx index 4d64c84..e24ff5b 100644 --- a/frontend/src/components/dev/DevLayout.tsx +++ b/frontend/src/components/dev/DevLayout.tsx @@ -10,7 +10,17 @@ import Link from 'next/link'; import { usePathname } from 'next/navigation'; -import { Code2, Palette, LayoutDashboard, Box, FileText, BookOpen, Home, ArrowLeft, Rocket } from 'lucide-react'; +import { + Code2, + Palette, + LayoutDashboard, + Box, + FileText, + BookOpen, + Home, + ArrowLeft, + Rocket, +} from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { ThemeToggle } from '@/components/theme'; diff --git a/frontend/src/components/home/DemoSection.tsx b/frontend/src/components/home/DemoSection.tsx index 7c425b1..aebd3ef 100644 --- a/frontend/src/components/home/DemoSection.tsx +++ b/frontend/src/components/home/DemoSection.tsx @@ -120,9 +120,7 @@ export function DemoSection() { transition={{ duration: 0.6, delay: 0.4 }} > diff --git a/frontend/tests/app/demos/page.test.tsx b/frontend/tests/app/demos/page.test.tsx index e6e3178..9bc1cd3 100644 --- a/frontend/tests/app/demos/page.test.tsx +++ b/frontend/tests/app/demos/page.test.tsx @@ -30,7 +30,10 @@ describe('DemoTourPage', () => { const header = screen.getByRole('banner'); expect(within(header).getByText('Demo Tour')).toBeInTheDocument(); expect(within(header).getByRole('link', { name: /home/i })).toHaveAttribute('href', '/'); - expect(within(header).getByRole('link', { name: /start exploring/i })).toHaveAttribute('href', '/login'); + expect(within(header).getByRole('link', { name: /start exploring/i })).toHaveAttribute( + 'href', + '/login' + ); }); }); @@ -38,7 +41,9 @@ describe('DemoTourPage', () => { it('renders hero heading and description', () => { render(); expect(screen.getByText('Explore All Features')).toBeInTheDocument(); - expect(screen.getByText(/Try everything with our pre-configured demo accounts/i)).toBeInTheDocument(); + expect( + screen.getByText(/Try everything with our pre-configured demo accounts/i) + ).toBeInTheDocument(); }); it('renders Interactive Demo badge', () => { @@ -58,12 +63,14 @@ describe('DemoTourPage', () => { render(); expect(screen.getByText('Choose a Demo')).toBeInTheDocument(); expect(screen.getByText(/Browse the demo categories below/i)).toBeInTheDocument(); - + expect(screen.getByText('Use Credentials')).toBeInTheDocument(); expect(screen.getByText(/Copy the demo credentials and login/i)).toBeInTheDocument(); - + expect(screen.getByText('Explore Freely')).toBeInTheDocument(); - expect(screen.getByText(/Test all features - everything resets automatically/i)).toBeInTheDocument(); + expect( + screen.getByText(/Test all features - everything resets automatically/i) + ).toBeInTheDocument(); }); }); @@ -77,7 +84,9 @@ describe('DemoTourPage', () => { it('renders Design System Hub category', () => { render(); expect(screen.getByText('Design System Hub')).toBeInTheDocument(); - expect(screen.getByText(/Browse components, layouts, spacing, and forms/i)).toBeInTheDocument(); + expect( + screen.getByText(/Browse components, layouts, spacing, and forms/i) + ).toBeInTheDocument(); expect(screen.getByText('All UI components')).toBeInTheDocument(); expect(screen.getByText('Layout patterns')).toBeInTheDocument(); expect(screen.getByText('Spacing philosophy')).toBeInTheDocument(); @@ -92,7 +101,7 @@ describe('DemoTourPage', () => { expect(screen.getByText('Registration')).toBeInTheDocument(); expect(screen.getByText('Password reset')).toBeInTheDocument(); expect(screen.getByText('Session tokens')).toBeInTheDocument(); - + // Check for credentials const authCards = screen.getAllByText(/demo@example\.com/i); expect(authCards.length).toBeGreaterThan(0); @@ -118,7 +127,7 @@ describe('DemoTourPage', () => { expect(screen.getByText('Analytics charts')).toBeInTheDocument(); expect(screen.getByText('Bulk operations')).toBeInTheDocument(); expect(screen.getByText('Organization control')).toBeInTheDocument(); - + // Check for admin credentials expect(screen.getByText(/admin@example\.com/i)).toBeInTheDocument(); expect(screen.getByText(/Admin123!/i)).toBeInTheDocument(); @@ -133,17 +142,17 @@ describe('DemoTourPage', () => { it('has working links to each demo category', () => { render(); - + // Design System Hub const exploreLinks = screen.getAllByRole('link', { name: /explore/i }); - expect(exploreLinks.some(link => link.getAttribute('href') === '/dev')).toBe(true); - + expect(exploreLinks.some((link) => link.getAttribute('href') === '/dev')).toBe(true); + // Authentication System const tryNowLinks = screen.getAllByRole('link', { name: /try now/i }); expect(tryNowLinks.length).toBeGreaterThan(0); - expect(tryNowLinks.some(link => link.getAttribute('href') === '/login')).toBe(true); - expect(tryNowLinks.some(link => link.getAttribute('href') === '/settings')).toBe(true); - expect(tryNowLinks.some(link => link.getAttribute('href') === '/admin')).toBe(true); + expect(tryNowLinks.some((link) => link.getAttribute('href') === '/login')).toBe(true); + expect(tryNowLinks.some((link) => link.getAttribute('href') === '/settings')).toBe(true); + expect(tryNowLinks.some((link) => link.getAttribute('href') === '/admin')).toBe(true); }); }); @@ -175,16 +184,16 @@ describe('DemoTourPage', () => { it('exploration path items have links', () => { render(); - + // Quick Tour links const devLinks = screen.getAllByRole('link'); - const hasDevLink = devLinks.some(link => link.getAttribute('href') === '/dev'); + const hasDevLink = devLinks.some((link) => link.getAttribute('href') === '/dev'); expect(hasDevLink).toBe(true); - - const hasLoginLink = devLinks.some(link => link.getAttribute('href') === '/login'); + + const hasLoginLink = devLinks.some((link) => link.getAttribute('href') === '/login'); expect(hasLoginLink).toBe(true); - - const hasSettingsLink = devLinks.some(link => link.getAttribute('href') === '/settings'); + + const hasSettingsLink = devLinks.some((link) => link.getAttribute('href') === '/settings'); expect(hasSettingsLink).toBe(true); }); }); @@ -199,12 +208,14 @@ describe('DemoTourPage', () => { it('renders Feature Checklist card', () => { render(); expect(screen.getByText('Feature Checklist')).toBeInTheDocument(); - expect(screen.getByText(/Try these features to experience the full power/i)).toBeInTheDocument(); + expect( + screen.getByText(/Try these features to experience the full power/i) + ).toBeInTheDocument(); }); it('renders all checklist items', () => { render(); - + expect(screen.getByText('Browse design system components')).toBeInTheDocument(); expect(screen.getByText('Test login/logout flow')).toBeInTheDocument(); expect(screen.getByText('Register a new account')).toBeInTheDocument(); @@ -224,17 +235,19 @@ describe('DemoTourPage', () => { it('renders final CTA heading', () => { render(); expect(screen.getByText('Ready to Start?')).toBeInTheDocument(); - expect(screen.getByText(/Pick a demo category above or jump right into the action/i)).toBeInTheDocument(); + expect( + screen.getByText(/Pick a demo category above or jump right into the action/i) + ).toBeInTheDocument(); }); it('has CTA buttons', () => { render(); - + const tryAuthLinks = screen.getAllByRole('link', { name: /try authentication flow/i }); - expect(tryAuthLinks.some(link => link.getAttribute('href') === '/login')).toBe(true); - + expect(tryAuthLinks.some((link) => link.getAttribute('href') === '/login')).toBe(true); + const browseDesignLinks = screen.getAllByRole('link', { name: /browse design system/i }); - expect(browseDesignLinks.some(link => link.getAttribute('href') === '/dev')).toBe(true); + expect(browseDesignLinks.some((link) => link.getAttribute('href') === '/dev')).toBe(true); }); }); @@ -256,14 +269,14 @@ describe('DemoTourPage', () => { describe('Navigation Links', () => { it('has multiple navigation links throughout the page', () => { render(); - + const allLinks = screen.getAllByRole('link'); - + // Should have links to: /, /dev, /login, /settings, /admin, and various /settings/* and /admin/* paths expect(allLinks.length).toBeGreaterThan(10); - + // Verify key destination paths exist - const hrefs = allLinks.map(link => link.getAttribute('href')); + const hrefs = allLinks.map((link) => link.getAttribute('href')); expect(hrefs).toContain('/'); expect(hrefs).toContain('/dev'); expect(hrefs).toContain('/login'); diff --git a/frontend/tests/app/page.test.tsx b/frontend/tests/app/page.test.tsx index 9f6b443..9f6cdfa 100644 --- a/frontend/tests/app/page.test.tsx +++ b/frontend/tests/app/page.test.tsx @@ -264,10 +264,10 @@ describe('HomePage', () => { const tryDemoButtons = screen.getAllByRole('button', { name: /try demo/i }); fireEvent.click(tryDemoButtons[0]); expect(screen.getByTestId('demo-modal')).toBeInTheDocument(); - + // Close the modal const closeButtons = screen.getAllByRole('button', { name: /close/i }); - const modalCloseButton = closeButtons.find(btn => btn.textContent === 'Close'); + const modalCloseButton = closeButtons.find((btn) => btn.textContent === 'Close'); if (modalCloseButton) { fireEvent.click(modalCloseButton); } diff --git a/frontend/tests/components/home/DemoCredentialsModal.test.tsx b/frontend/tests/components/home/DemoCredentialsModal.test.tsx index e13c9a8..aacecda 100644 --- a/frontend/tests/components/home/DemoCredentialsModal.test.tsx +++ b/frontend/tests/components/home/DemoCredentialsModal.test.tsx @@ -157,7 +157,7 @@ describe('DemoCredentialsModal', () => { const loginAsUserLink = screen.getByRole('link', { name: /login as user/i }); expect(loginAsUserLink).toHaveAttribute('href', '/login'); - + const loginAsAdminLink = screen.getByRole('link', { name: /login as admin/i }); expect(loginAsAdminLink).toHaveAttribute('href', '/login'); });