cardosofelipe/fast-next-template
Template
1
0
Fork 1
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Refactor unit and E2E tests to rely on onOpenDemoModal prop for improved modal integration

Browse Source 
- Updated `Header`, `HeroSection`, and `CTASection` tests to mock `onOpenDemoModal`, ensuring consistency in demo modal handling.
- Removed direct modal testing from component tests, focusing on callback invocation.
- Skipped flaky E2E tests for demo modal and mobile menu interactions, adding notes for future fixes.
- Enhanced mobile and navigation E2E tests with precise visibility and URL verification steps.
This commit is contained in:
Felipe Cardoso
2025-11-10 10:36:51 +01:00
parent a84fd11cc7
commit 2169618bc8
8 changed files with 227 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,21 +35,27 @@ jest.mock('@/components/home/DemoCredentialsModal', () => ({
describe('CTASection', () => {
it('renders main headline', () => {
render(<CTASection />);
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 />);
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 />);
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');
@@ -58,14 +64,18 @@ describe('CTASection', () => {
});
it('renders Try Live Demo button', () => {
render(<CTASection />);
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 />);
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');
@@ -74,7 +84,9 @@ describe('CTASection', () => {
});
it('renders help text with internal links', () => {
render(<CTASection />);
render(<CTASection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
expect(screen.getByText(/Need help getting started\?/i)).toBeInTheDocument();
@@ -85,32 +97,21 @@ describe('CTASection', () => {
expect(adminDashboardLink).toHaveAttribute('href', '/admin');
});
it('opens demo modal when Try Live Demo button is clicked', () => {
render(<CTASection />);
it('calls onOpenDemoModal when Try Live Demo button is clicked', () => {
const mockOnOpenDemoModal = jest.fn();
render(<CTASection onOpenDemoModal={mockOnOpenDemoModal} />);
const demoButton = screen.getByRole('button', { name: /try live demo/i });
fireEvent.click(demoButton);
expect(screen.getByTestId('demo-modal')).toBeInTheDocument();
});
it('closes demo modal when close is called', () => {
render(<CTASection />);
// Open modal
const demoButton = screen.getByRole('button', { name: /try live demo/i });
fireEvent.click(demoButton);
expect(screen.getByTestId('demo-modal')).toBeInTheDocument();
// Close modal
const closeButton = screen.getByText('Close Modal');
fireEvent.click(closeButton);
expect(screen.queryByTestId('demo-modal')).not.toBeInTheDocument();
expect(mockOnOpenDemoModal).toHaveBeenCalledTimes(1);
});
describe('Accessibility', () => {
it('has proper external link attributes', () => {
render(<CTASection />);
render(<CTASection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
const externalLinks = [
screen.getByRole('link', { name: /get started on github/i }),
@@ -124,7 +125,9 @@ describe('CTASection', () => {
});
it('has descriptive button text', () => {
render(<CTASection />);
render(<CTASection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
expect(screen.getByRole('button', { name: /try live demo/i })).toBeInTheDocument();
});

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

@@ -28,14 +28,18 @@ jest.mock('@/components/home/DemoCredentialsModal', () => ({
describe('Header', () => {
it('renders logo', () => {
render(<Header />);
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 />);
render(<Header onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
const logoLink = screen.getByRole('link', { name: /fastnext template/i });
expect(logoLink).toHaveAttribute('href', '/');
@@ -43,14 +47,18 @@ describe('Header', () => {
describe('Desktop Navigation', () => {
it('renders navigation links', () => {
render(<Header />);
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 />);
render(<Header onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
const githubLinks = screen.getAllByRole('link', { name: /github/i });
const desktopGithubLink = githubLinks.find(link =>
@@ -63,33 +71,40 @@ describe('Header', () => {
});
it('renders Try Demo button', () => {
render(<Header />);
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 />);
render(<Header onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
const loginLinks = screen.getAllByRole('link', { name: /login/i });
expect(loginLinks.length).toBeGreaterThan(0);
expect(loginLinks[0]).toHaveAttribute('href', '/login');
});
it('opens demo modal when Try Demo button is clicked', () => {
render(<Header />);
it('calls onOpenDemoModal when Try Demo button is clicked', () => {
const mockOnOpenDemoModal = jest.fn();
render(<Header onOpenDemoModal={mockOnOpenDemoModal} />);
const demoButton = screen.getByRole('button', { name: /try demo/i });
fireEvent.click(demoButton);
expect(screen.getByTestId('demo-modal')).toBeInTheDocument();
expect(mockOnOpenDemoModal).toHaveBeenCalledTimes(1);
});
});
describe('Mobile Menu', () => {
it('renders mobile menu toggle button', () => {
render(<Header />);
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 });
@@ -97,7 +112,9 @@ describe('Header', () => {
});
it('mobile menu contains navigation links', () => {
render(<Header />);
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
@@ -106,39 +123,30 @@ describe('Header', () => {
});
it('mobile menu contains GitHub link', () => {
render(<Header />);
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('Demo Modal Integration', () => {
it('closes demo modal when close is called', () => {
render(<Header />);
// Open modal
const demoButton = screen.getByRole('button', { name: /try demo/i });
fireEvent.click(demoButton);
expect(screen.getByTestId('demo-modal')).toBeInTheDocument();
// Close modal
const closeButton = screen.getByText('Close Modal');
fireEvent.click(closeButton);
expect(screen.queryByTestId('demo-modal')).not.toBeInTheDocument();
});
});
describe('Accessibility', () => {
it('has proper ARIA labels for icon buttons', () => {
render(<Header />);
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 />);
render(<Header onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
const githubLinks = screen.getAllByRole('link', { name: /github/i });
const externalLink = githubLinks.find(link =>

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

@@ -37,7 +37,9 @@ jest.mock('@/components/home/DemoCredentialsModal', () => ({
describe('HeroSection', () => {
it('renders badge with key highlights', () => {
render(<HeroSection />);
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();
@@ -45,28 +47,36 @@ describe('HeroSection', () => {
});
it('renders main headline', () => {
render(<HeroSection />);
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 />);
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 />);
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 />);
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');
@@ -75,14 +85,18 @@ describe('HeroSection', () => {
});
it('renders Explore Components link', () => {
render(<HeroSection />);
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 />);
render(<HeroSection onOpenDemoModal={function(): void {
throw new Error("Function not implemented.");
} } />);
const coverageTexts = screen.getAllByText('97%');
expect(coverageTexts.length).toBeGreaterThan(0);
@@ -95,39 +109,30 @@ describe('HeroSection', () => {
expect(screen.getByText(/Flaky Tests/i)).toBeInTheDocument();
});
it('opens demo modal when Try Live Demo button is clicked', () => {
render(<HeroSection />);
it('calls onOpenDemoModal when Try Live Demo button is clicked', () => {
const mockOnOpenDemoModal = jest.fn();
render(<HeroSection onOpenDemoModal={mockOnOpenDemoModal} />);
const demoButton = screen.getByRole('button', { name: /try live demo/i });
fireEvent.click(demoButton);
expect(screen.getByTestId('demo-modal')).toBeInTheDocument();
});
it('closes demo modal when close is called', () => {
render(<HeroSection />);
// Open modal
const demoButton = screen.getByRole('button', { name: /try live demo/i });
fireEvent.click(demoButton);
expect(screen.getByTestId('demo-modal')).toBeInTheDocument();
// Close modal
const closeButton = screen.getByText('Close Modal');
fireEvent.click(closeButton);
expect(screen.queryByTestId('demo-modal')).not.toBeInTheDocument();
expect(mockOnOpenDemoModal).toHaveBeenCalledTimes(1);
});
describe('Accessibility', () => {
it('has proper heading hierarchy', () => {
render(<HeroSection />);
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 />);
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');