Add comprehensive E2E tests for homepage and refactor demo modal logic

- Implemented E2E tests for homepage sections: `HeroSection`, `Header`, `CTASection`, `AnimatedTerminal`, `FeatureSections`, and `Footer`, ensuring proper functionality, navigation, and accessibility.
- Introduced tests for mobile menu interactions, demo credentials modal, and terminal animations.
- Refactored demo modal logic to use a shared state managed in `page.tsx` for consistency across sections (`Header`, `HeroSection`, `CTASection`).
- Updated `Header`, `HeroSection`, and `CTASection` to receive `onOpenDemoModal` as props for triggering the modal.
This commit is contained in:
2025-11-08 18:22:58 +01:00
parent b630559e0b
commit 214d0b1765
6 changed files with 497 additions and 39 deletions

View File

@@ -9,11 +9,13 @@ import { useState } from 'react';
import Link from 'next/link';
import { Menu, X, Github, Star } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { DemoCredentialsModal } from './DemoCredentialsModal';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
export function Header() {
const [demoModalOpen, setDemoModalOpen] = useState(false);
interface HeaderProps {
onOpenDemoModal: () => void;
}
export function Header({ onOpenDemoModal }: HeaderProps) {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const navLinks = [
@@ -63,7 +65,7 @@ export function Header() {
{/* CTAs */}
<Button
onClick={() => setDemoModalOpen(true)}
onClick={onOpenDemoModal}
variant="default"
size="sm"
>
@@ -98,7 +100,7 @@ export function Header() {
onClick={() => setMobileMenuOpen(false)}
className="text-lg font-medium hover:text-primary transition-colors"
>
{link.href}
{link.label}
</Link>
))}
@@ -122,7 +124,7 @@ export function Header() {
<Button
onClick={() => {
setMobileMenuOpen(false);
setDemoModalOpen(true);
onOpenDemoModal();
}}
variant="default"
className="w-full"
@@ -144,12 +146,6 @@ export function Header() {
</Sheet>
</div>
</header>
{/* Demo Credentials Modal */}
<DemoCredentialsModal
open={demoModalOpen}
onClose={() => setDemoModalOpen(false)}
/>
</>
);
}