test: improve footer accessibility and responsive coverage

Author: Apurva-Lakhe

app/components/Footer.test.tsx

@@ -1,72 +1,82 @@
-import { describe, it, expect } from 'vitest';
+import '@testing-library/jest-dom/vitest';
 import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
 import { Footer } from './Footer';
 
 describe('Footer Component', () => {
   it('renders community text', () => {
     render(<Footer />);
 
-    const text = screen.getByText(/Designed for the elite builder community/i);
-
-    expect(text).toBeTruthy();
+    expect(screen.getByText(/Designed for the elite builder community/i)).toBeInTheDocument();
   });
 
-  it('renders Documentation link', () => {
+  it('renders Documentation link with the correct destination', () => {
     render(<Footer />);
 
-    const docLink = screen.getByText(/Documentation/i);
-
-    expect(docLink).toBeTruthy();
+    const documentationLink = screen.getByRole('link', {
+      name: /Documentation/i,
+    });
 
-    expect(docLink.closest('a')?.getAttribute('href')).toBe(
+    expect(documentationLink).toHaveAttribute(
+      'href',
       'https://github.com/JhaSourav07/commitpulse/blob/main/README.md'
     );
   });
 
-  it('opens documentation in new tab', () => {
+  it('opens Documentation link in a new tab securely', () => {
     render(<Footer />);
 
-    const docLink = screen.getByText(/Documentation/i);
+    const documentationLink = screen.getByRole('link', {
+      name: /Documentation/i,
+    });
 
-    expect(docLink.closest('a')?.getAttribute('target')).toBe('_blank');
+    expect(documentationLink).toHaveAttribute('target', '_blank');
+    expect(documentationLink).toHaveAttribute('rel', expect.stringContaining('noopener'));
+    expect(documentationLink).toHaveAttribute('rel', expect.stringContaining('noreferrer'));
   });
 
   it('renders Contributors link', () => {
     render(<Footer />);
 
-    const contributorsLink = screen.getByText(/Contributors/i);
-
-    expect(contributorsLink).toBeTruthy();
+    expect(
+      screen.getByRole('link', {
+        name: /Contributors/i,
+      })
+    ).toBeInTheDocument();
   });
-  // Verify accessibility by looking for the explicit landmark role screen readers look for
-  it('supports screen reader operations by using semantic HTML landmark structures', () => {
+
+  it('exposes the footer as a semantic contentinfo landmark for screen readers', () => {
     render(<Footer />);
 
-    // Footers are exposed to assistive tech via the 'contentinfo' role
-    const footerElement = screen.getByRole('contentinfo');
-    expect(footerElement).not.toBeNull();
-    expect(footerElement.tagName.toLowerCase()).toBe('footer');
+    // A semantic <footer> is exposed to assistive technology as the contentinfo landmark.
+    const footer = screen.getByRole('contentinfo');
+
+    expect(footer).toBeInTheDocument();
+    expect(footer.tagName).toBe('FOOTER');
   });
 
-  // Verify layout adaptation by making sure responsive structural classes are applied
-  it('adapts layouts correctly across mobile and desktop viewports', () => {
-    const { container } = render(<Footer />);
-
-    const footerElement = container.querySelector('footer');
-    expect(footerElement).not.toBeNull();
-
-    // Directly grab the text content or class attributes to check for responsive utility markers safely
-    const hasResponsiveClasses = footerElement?.className
-      .split(' ')
-      .some(
-        (cls) =>
-          cls.includes('md:') ||
-          cls.includes('sm:') ||
-          cls.includes('lg:') ||
-          cls.includes('flex') ||
-          cls.includes('grid')
-      );
-
-    expect(hasResponsiveClasses).toBe(true);
+  it('includes responsive layout classes for mobile and desktop breakpoints', () => {
+    render(<Footer />);
+
+    const footer = screen.getByRole('contentinfo');
+
+    // JSDOM cannot calculate Tailwind media queries, so this verifies the actual
+    // responsive utility classes that switch the footer layout at the md breakpoint.
+    const responsiveLayout = footer.querySelector('.flex.flex-col.md\\:flex-row.md\\:items-start');
+
+    expect(responsiveLayout).toBeInTheDocument();
+    expect(responsiveLayout).toHaveClass(
+      'mx-auto',
+      'flex',
+      'max-w-6xl',
+      'flex-col',
+      'items-center',
+      'justify-between',
+      'gap-6',
+      'text-sm',
+      'md:flex-row',
+      'md:items-start',
+      'md:gap-0'
+    );
   });
 });

app/page.tsx

@@ -14,6 +14,7 @@ import { Footer } from '@/app/components/Footer';
 
 import { FeatureCard, FeatureCardsSection } from '@/components/FeatureCards';
 import { DiscordButton } from '@/components/DiscordButton';
+
 import { WallOfLove } from '@/components/WallOfLove';
 
 const Icons = {

components/WallOfLove.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useRef, useState, useEffect, type ReactNode } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { motion } from 'framer-motion';