cardosofelipe/syndarix
1
0
Fork 0
forked from cardosofelipe/fast-next-template
Code Issues 18 Pull Requests Wiki Activity

Refactor useAuth hook, settings components, and docs for formatting and readability improvements

Browse Source 
- Consolidated multi-line arguments into single lines where appropriate in `useAuth`.
- Improved spacing and readability in data processing across components (`ProfileSettingsForm`, `PasswordChangeForm`, `SessionCard`).
- Applied consistent table and markdown formatting in design system docs (e.g., `README.md`, `08-ai-guidelines.md`, `00-quick-start.md`).
- Updated code snippets to ensure adherence to Prettier rules and streamlined JSX structures.
This commit is contained in:
Felipe Cardoso
2025-11-10 11:03:45 +01:00
parent 464a6140c4
commit 96df7edf88
208 changed files with 4056 additions and 4556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/tests/components/home/CTASection.test.tsx
View File

@@ -26,36 +26,49 @@ jest.mock('next/link', () => ({
// Mock DemoCredentialsModal
jest.mock('@/components/home/DemoCredentialsModal', () => ({
DemoCredentialsModal: ({ open, onClose }: any) => (
open ? <div data-testid="demo-modal">
<button onClick={onClose}>Close Modal</button>
</div> : null
),
DemoCredentialsModal: ({ open, onClose }: any) =>
open ? (
<div data-testid="demo-modal">
<button onClick={onClose}>Close Modal</button>
</div>
) : null,
}));
describe('CTASection', () => {
it('renders main headline', () => {
render(<CTASection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<CTASection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
expect(screen.getByText(/Start Building,/i)).toBeInTheDocument();
expect(screen.getByText(/Not Boilerplating/i)).toBeInTheDocument();
});
it('renders subtext with key messaging', () => {
render(<CTASection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<CTASection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
expect(screen.getByText(/Clone the repository, read the docs/i)).toBeInTheDocument();
expect(screen.getByText(/Free forever, MIT licensed/i)).toBeInTheDocument();
});
it('renders GitHub CTA button', () => {
render(<CTASection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<CTASection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const githubLink = screen.getByRole('link', { name: /get started on github/i });
expect(githubLink).toHaveAttribute('href', 'https://github.com/your-org/fast-next-template');
@@ -64,29 +77,44 @@ describe('CTASection', () => {
});
it('renders Try Live Demo button', () => {
render(<CTASection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<CTASection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const demoButton = screen.getByRole('button', { name: /try live demo/i });
expect(demoButton).toBeInTheDocument();
});
it('renders Read Documentation link', () => {
render(<CTASection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<CTASection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const docsLink = screen.getByRole('link', { name: /read documentation/i });
expect(docsLink).toHaveAttribute('href', 'https://github.com/your-org/fast-next-template#documentation');
expect(docsLink).toHaveAttribute(
'href',
'https://github.com/your-org/fast-next-template#documentation'
);
expect(docsLink).toHaveAttribute('target', '_blank');
expect(docsLink).toHaveAttribute('rel', 'noopener noreferrer');
});
it('renders help text with internal links', () => {
render(<CTASection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<CTASection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
expect(screen.getByText(/Need help getting started\?/i)).toBeInTheDocument();
@@ -109,25 +137,33 @@ describe('CTASection', () => {
describe('Accessibility', () => {
it('has proper external link attributes', () => {
render(<CTASection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<CTASection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const externalLinks = [
screen.getByRole('link', { name: /get started on github/i }),
screen.getByRole('link', { name: /read documentation/i }),
];
externalLinks.forEach(link => {
externalLinks.forEach((link) => {
expect(link).toHaveAttribute('target', '_blank');
expect(link).toHaveAttribute('rel', 'noopener noreferrer');
});
});
it('has descriptive button text', () => {
render(<CTASection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<CTASection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
expect(screen.getByRole('button', { name: /try live demo/i })).toBeInTheDocument();
});

20
frontend/tests/components/home/DemoCredentialsModal.test.tsx
View File

@@ -65,14 +65,14 @@ describe('DemoCredentialsModal', () => {
render(<DemoCredentialsModal open={true} onClose={mockOnClose} />);
const copyButtons = screen.getAllByRole('button');
const regularCopyButton = copyButtons.find(btn => btn.textContent?.includes('Copy'));
const regularCopyButton = copyButtons.find((btn) => btn.textContent?.includes('Copy'));
fireEvent.click(regularCopyButton!);
await waitFor(() => {
expect(navigator.clipboard.writeText).toHaveBeenCalledWith('demo@example.com\nDemo123!');
const copiedButtons = screen.getAllByRole('button');
const copiedButton = copiedButtons.find(btn => btn.textContent?.includes('Copied!'));
const copiedButton = copiedButtons.find((btn) => btn.textContent?.includes('Copied!'));
expect(copiedButton).toBeInTheDocument();
});
});
@@ -81,14 +81,14 @@ describe('DemoCredentialsModal', () => {
render(<DemoCredentialsModal open={true} onClose={mockOnClose} />);
const copyButtons = screen.getAllByRole('button');
const adminCopyButton = copyButtons.filter(btn => btn.textContent?.includes('Copy'))[1];
const adminCopyButton = copyButtons.filter((btn) => btn.textContent?.includes('Copy'))[1];
fireEvent.click(adminCopyButton!);
await waitFor(() => {
expect(navigator.clipboard.writeText).toHaveBeenCalledWith('admin@example.com\nAdmin123!');
const copiedButtons = screen.getAllByRole('button');
const copiedButton = copiedButtons.find(btn => btn.textContent?.includes('Copied!'));
const copiedButton = copiedButtons.find((btn) => btn.textContent?.includes('Copied!'));
expect(copiedButton).toBeInTheDocument();
});
});
@@ -98,12 +98,12 @@ describe('DemoCredentialsModal', () => {
render(<DemoCredentialsModal open={true} onClose={mockOnClose} />);
const copyButtons = screen.getAllByRole('button');
const copyButton = copyButtons.find(btn => btn.textContent?.includes('Copy'));
const copyButton = copyButtons.find((btn) => btn.textContent?.includes('Copy'));
fireEvent.click(copyButton!);
await waitFor(() => {
const copiedButtons = screen.getAllByRole('button');
const copiedButton = copiedButtons.find(btn => btn.textContent?.includes('Copied!'));
const copiedButton = copiedButtons.find((btn) => btn.textContent?.includes('Copied!'));
expect(copiedButton).toBeInTheDocument();
});
@@ -111,7 +111,7 @@ describe('DemoCredentialsModal', () => {
await waitFor(() => {
const buttons = screen.getAllByRole('button');
const copiedButton = buttons.find(btn => btn.textContent?.includes('Copied!'));
const copiedButton = buttons.find((btn) => btn.textContent?.includes('Copied!'));
expect(copiedButton).toBeUndefined();
});
@@ -129,7 +129,7 @@ describe('DemoCredentialsModal', () => {
render(<DemoCredentialsModal open={true} onClose={mockOnClose} />);
const copyButtons = screen.getAllByRole('button');
const copyButton = copyButtons.find(btn => btn.textContent?.includes('Copy'));
const copyButton = copyButtons.find((btn) => btn.textContent?.includes('Copy'));
fireEvent.click(copyButton!);
await waitFor(() => {
@@ -144,8 +144,8 @@ describe('DemoCredentialsModal', () => {
// Find the "Close" button (filter to get the one that's visible and is the footer button)
const closeButtons = screen.getAllByRole('button', { name: 'Close' });
const footerCloseButton = closeButtons.find(btn =>
btn.textContent === 'Close' && !btn.querySelector('.sr-only')
const footerCloseButton = closeButtons.find(
(btn) => btn.textContent === 'Close' && !btn.querySelector('.sr-only')
);
fireEvent.click(footerCloseButton!);

131
frontend/tests/components/home/Header.test.tsx
View File

@@ -19,27 +19,36 @@ jest.mock('next/link', () => ({
// Mock DemoCredentialsModal
jest.mock('@/components/home/DemoCredentialsModal', () => ({
DemoCredentialsModal: ({ open, onClose }: any) => (
open ? <div data-testid="demo-modal">
<button onClick={onClose}>Close Modal</button>
</div> : null
),
DemoCredentialsModal: ({ open, onClose }: any) =>
open ? (
<div data-testid="demo-modal">
<button onClick={onClose}>Close Modal</button>
</div>
) : null,
}));
describe('Header', () => {
it('renders logo', () => {
render(<Header onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<Header
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
expect(screen.getByText('FastNext')).toBeInTheDocument();
expect(screen.getByText('Template')).toBeInTheDocument();
});
it('logo links to homepage', () => {
render(<Header onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<Header
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const logoLink = screen.getByRole('link', { name: /fastnext template/i });
expect(logoLink).toHaveAttribute('href', '/');
@@ -47,42 +56,61 @@ describe('Header', () => {
describe('Desktop Navigation', () => {
it('renders navigation links', () => {
render(<Header onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<Header
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
expect(screen.getByRole('link', { name: 'Components' })).toHaveAttribute('href', '/dev');
expect(screen.getByRole('link', { name: 'Admin Demo' })).toHaveAttribute('href', '/admin');
});
it('renders GitHub link with star badge', () => {
render(<Header onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<Header
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const githubLinks = screen.getAllByRole('link', { name: /github/i });
const desktopGithubLink = githubLinks.find(link =>
const desktopGithubLink = githubLinks.find((link) =>
link.getAttribute('href')?.includes('github.com')
);
expect(desktopGithubLink).toHaveAttribute('href', 'https://github.com/your-org/fast-next-template');
expect(desktopGithubLink).toHaveAttribute(
'href',
'https://github.com/your-org/fast-next-template'
);
expect(desktopGithubLink).toHaveAttribute('target', '_blank');
expect(desktopGithubLink).toHaveAttribute('rel', 'noopener noreferrer');
});
it('renders Try Demo button', () => {
render(<Header onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<Header
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const demoButton = screen.getByRole('button', { name: /try demo/i });
expect(demoButton).toBeInTheDocument();
});
it('renders Login button', () => {
render(<Header onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<Header
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const loginLinks = screen.getAllByRole('link', { name: /login/i });
expect(loginLinks.length).toBeGreaterThan(0);
@@ -102,9 +130,13 @@ describe('Header', () => {
describe('Mobile Menu', () => {
it('renders mobile menu toggle button', () => {
render(<Header onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<Header
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
// SheetTrigger wraps the button, so we need to find it by aria-label
const menuButton = screen.getByRole('button', { name: /toggle menu/i });
@@ -112,9 +144,13 @@ describe('Header', () => {
});
it('mobile menu contains navigation links', () => {
render(<Header onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<Header
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
// Note: SheetContent is hidden by default in tests, but we can verify the links exist
// The actual mobile menu behavior is tested in E2E tests
@@ -123,33 +159,44 @@ describe('Header', () => {
});
it('mobile menu contains GitHub link', () => {
render(<Header onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<Header
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const githubLinks = screen.getAllByRole('link', { name: /github/i });
expect(githubLinks.length).toBeGreaterThan(0);
});
});
describe('Accessibility', () => {
it('has proper ARIA labels for icon buttons', () => {
render(<Header onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<Header
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const menuButton = screen.getByRole('button', { name: /toggle menu/i });
expect(menuButton).toHaveAccessibleName();
});
it('has proper external link attributes', () => {
render(<Header onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<Header
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const githubLinks = screen.getAllByRole('link', { name: /github/i });
const externalLink = githubLinks.find(link =>
const externalLink = githubLinks.find((link) =>
link.getAttribute('href')?.includes('github.com')
);

101
frontend/tests/components/home/HeroSection.test.tsx
View File

@@ -28,18 +28,23 @@ jest.mock('next/link', () => ({
// Mock DemoCredentialsModal
jest.mock('@/components/home/DemoCredentialsModal', () => ({
DemoCredentialsModal: ({ open, onClose }: any) => (
open ? <div data-testid="demo-modal">
<button onClick={onClose}>Close Modal</button>
</div> : null
),
DemoCredentialsModal: ({ open, onClose }: any) =>
open ? (
<div data-testid="demo-modal">
<button onClick={onClose}>Close Modal</button>
</div>
) : null,
}));
describe('HeroSection', () => {
it('renders badge with key highlights', () => {
render(<HeroSection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<HeroSection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
expect(screen.getByText('MIT Licensed')).toBeInTheDocument();
expect(screen.getAllByText('97% Test Coverage')[0]).toBeInTheDocument();
@@ -47,36 +52,52 @@ describe('HeroSection', () => {
});
it('renders main headline', () => {
render(<HeroSection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<HeroSection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
expect(screen.getAllByText(/Everything You Need to Build/i)[0]).toBeInTheDocument();
expect(screen.getAllByText(/Modern Web Applications/i)[0]).toBeInTheDocument();
});
it('renders subheadline with key messaging', () => {
render(<HeroSection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<HeroSection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
expect(screen.getByText(/Production-ready FastAPI \+ Next.js template/i)).toBeInTheDocument();
expect(screen.getByText(/Start building features on day one/i)).toBeInTheDocument();
});
it('renders Try Live Demo button', () => {
render(<HeroSection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<HeroSection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const demoButton = screen.getByRole('button', { name: /try live demo/i });
expect(demoButton).toBeInTheDocument();
});
it('renders View on GitHub link', () => {
render(<HeroSection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<HeroSection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const githubLink = screen.getByRole('link', { name: /view on github/i });
expect(githubLink).toHaveAttribute('href', 'https://github.com/your-org/fast-next-template');
@@ -85,18 +106,26 @@ describe('HeroSection', () => {
});
it('renders Explore Components link', () => {
render(<HeroSection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<HeroSection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const componentsLink = screen.getByRole('link', { name: /explore components/i });
expect(componentsLink).toHaveAttribute('href', '/dev');
});
it('displays test coverage stats', () => {
render(<HeroSection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<HeroSection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const coverageTexts = screen.getAllByText('97%');
expect(coverageTexts.length).toBeGreaterThan(0);
@@ -121,18 +150,26 @@ describe('HeroSection', () => {
describe('Accessibility', () => {
it('has proper heading hierarchy', () => {
render(<HeroSection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<HeroSection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const heading = screen.getAllByRole('heading', { level: 1 })[0];
expect(heading).toBeInTheDocument();
});
it('has proper external link attributes', () => {
render(<HeroSection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
render(
<HeroSection
onOpenDemoModal={function (): void {
throw new Error('Function not implemented.');
}}
/>
);
const githubLink = screen.getByRole('link', { name: /view on github/i });
expect(githubLink).toHaveAttribute('target', '_blank');

13
frontend/tests/components/home/StatsSection.test.tsx
View File

@@ -44,7 +44,9 @@ describe('StatsSection', () => {
it('displays stat descriptions', () => {
render(<StatsSection />);
expect(screen.getByText(/Comprehensive testing across backend and frontend/i)).toBeInTheDocument();
expect(
screen.getByText(/Comprehensive testing across backend and frontend/i)
).toBeInTheDocument();
expect(screen.getByText(/Backend, frontend unit, and E2E tests/i)).toBeInTheDocument();
expect(screen.getByText(/Production-stable test suite/i)).toBeInTheDocument();
expect(screen.getByText(/Fully documented with OpenAPI/i)).toBeInTheDocument();
@@ -100,14 +102,9 @@ describe('StatsSection', () => {
it('has descriptive labels for stats', () => {
render(<StatsSection />);
const statLabels = [
'Test Coverage',
'Passing Tests',
'Flaky Tests',
'API Endpoints',
];
const statLabels = ['Test Coverage', 'Passing Tests', 'Flaky Tests', 'API Endpoints'];
statLabels.forEach(label => {
statLabels.forEach((label) => {
expect(screen.getByText(label)).toBeInTheDocument();
});
});