test: add HeroSection responsive rendering tests

Author: pari7maheshwari

app/components/HeroSection.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
 import { describe, expect, it, vi } from 'vitest';
 import { HeroSection } from './HeroSection';
 
@@ -12,39 +13,51 @@ vi.mock('framer-motion', () => ({
 }));
 
 describe('HeroSection', () => {
-  it('renders the h1 heading', () => {
+  it('renders the hero heading and content', () => {
     render(<HeroSection />);
 
-    const heading = screen.getByRole('heading', {
-      level: 1,
-    });
-
-    expect(heading).toBeDefined();
-  });
-
-  it("heading contains 'Elevate Your'", () => {
-    render(<HeroSection />);
-
-    expect(screen.getByText(/Elevate Your/i)).toBeDefined();
-  });
-
-  it("heading contains 'Contribution Story'", () => {
-    render(<HeroSection />);
-
-    expect(screen.getByText(/Contribution Story/i)).toBeDefined();
+    expect(
+      screen.getByRole('heading', {
+        level: 1,
+        name: /elevate your contribution story/i,
+      })
+    ).toBeInTheDocument();
+    expect(screen.getByText(/isometric/i).textContent).toMatch(/isometric/i);
   });
+});
 
-  it('renders the descriptive paragraph', () => {
-    render(<HeroSection />);
+describe('HeroSection responsive breakpoints', () => {
+  const renderAtViewport = (width: number) => {
+    window.innerWidth = width;
+    window.dispatchEvent(new Event('resize'));
 
-    const paragraph = screen.getByText(/isometric/i);
+    return render(<HeroSection />);
+  };
 
-    expect(paragraph).toBeDefined();
-  });
+  it.each([
+    { width: 375, label: 'mobile' },
+    { width: 768, label: 'tablet' },
+    { width: 1280, label: 'desktop' },
+  ])('renders full typography and high contrast background values at $label width', ({ width }) => {
+    const { container } = renderAtViewport(width);
 
-  it("paragraph mentions 'isometric'", () => {
-    render(<HeroSection />);
+    const hero = container.firstElementChild;
+    const heading = screen.getByRole('heading', {
+      level: 1,
+      name: /elevate your contribution story/i,
+    });
 
-    expect(screen.getByText(/isometric/i).textContent).toMatch(/isometric/i);
+    expect(hero?.className).toContain('bg-[radial-gradient');
+    expect(heading.tagName).toBe('H1');
+    expect(heading.className).toContain('text-5xl');
+    expect(heading.className).toContain('md:text-8xl');
+    expect(heading.className).toContain('from-green-500');
+    expect(heading.className).toContain('to-purple-600');
+    expect(screen.getByText(/generate high-fidelity, 3d isometric monoliths/i).className).toContain(
+      'text-gray-600'
+    );
+    expect(screen.getByPlaceholderText(/enter github username/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /copy link/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /watch dashboard/i })).toBeInTheDocument();
   });
 });