@jmruthers/pace-core 0.5.1 → 0.5.4

package/src/components/Footer/Footer.test.tsx

@@ -0,0 +1,482 @@
+/**
+ * @file Footer Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/Footer
+ * @since 0.1.0
+ *
+ * Comprehensive test suite for the Footer component.
+ * Tests rendering, props handling, navigation links, and accessibility.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Footer, FooterProps } from './Footer';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+// Mock the current year for consistent testing
+const mockCurrentYear = 2024;
+vi.mock('../../utils/cn', () => ({
+  cn: (...classes: (string | undefined)[]) => classes.filter(Boolean).join(' ')
+}));
+
+// Mock Date for consistent year testing
+const mockDate = new Date('2024-01-01');
+vi.spyOn(global, 'Date').mockImplementation(() => mockDate as any);
+
+describe('Footer Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      renderWithProviders(<Footer />);
+      
+      const footer = screen.getByRole('contentinfo');
+      expect(footer).toBeInTheDocument();
+      expect(footer).toHaveClass('mt-8', 'py-6', 'flex', 'justify-center', 'border-t', 'border-border', 'bg-main-100');
+    });
+
+    it('renders with custom className', () => {
+      renderWithProviders(<Footer className="custom-footer-class" />);
+      
+      const footer = screen.getByRole('contentinfo');
+      expect(footer).toHaveClass('custom-footer-class');
+    });
+
+    it('renders with default company name and year', () => {
+      renderWithProviders(<Footer />);
+      
+      expect(screen.getByText(/© Copyright 2022–2024 all rights reserved, Solvera Solutions Pty Ltd\./)).toBeInTheDocument();
+    });
+
+    it('renders with custom company name', () => {
+      renderWithProviders(<Footer companyName="Test Company Inc." />);
+      
+      expect(screen.getByText(/© Copyright 2022–2024 all rights reserved, Test Company Inc\./)).toBeInTheDocument();
+    });
+
+    it('renders with custom year', () => {
+      renderWithProviders(<Footer year={2025} />);
+      
+      expect(screen.getByText(/© Copyright 2022–2025 all rights reserved, Solvera Solutions Pty Ltd\./)).toBeInTheDocument();
+    });
+
+    it('renders with custom copyright text', () => {
+      const customCopyright = '© 2024 Custom Company. All rights reserved.';
+      renderWithProviders(<Footer copyright={customCopyright} />);
+      
+      expect(screen.getByText(customCopyright)).toBeInTheDocument();
+    });
+
+    it('renders with logo when provided', () => {
+      renderWithProviders(<Footer logo="/test-logo.png" />);
+      
+      const logo = screen.getByAltText('Logo');
+      expect(logo).toBeInTheDocument();
+      expect(logo).toHaveAttribute('src', '/test-logo.png');
+      expect(logo).toHaveClass('h-8', 'w-auto');
+    });
+
+    it('renders with children content', () => {
+      renderWithProviders(
+        <Footer>
+          <div data-testid="custom-content">Custom footer content</div>
+        </Footer>
+      );
+      
+      expect(screen.getByTestId('custom-content')).toBeInTheDocument();
+      expect(screen.getByText('Custom footer content')).toBeInTheDocument();
+    });
+  });
+
+  describe('Navigation Links', () => {
+    it('renders navigation links when provided', () => {
+      const links = [
+        { label: 'Privacy Policy', href: '/privacy' },
+        { label: 'Terms of Service', href: '/terms' },
+        { label: 'Contact', href: '/contact' }
+      ];
+      
+      renderWithProviders(<Footer links={links} />);
+      
+      expect(screen.getByRole('link', { name: 'Privacy Policy' })).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'Terms of Service' })).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'Contact' })).toBeInTheDocument();
+    });
+
+    it('renders links with correct href attributes', () => {
+      const links = [
+        { label: 'Privacy Policy', href: '/privacy' },
+        { label: 'Contact', href: '/contact' }
+      ];
+      
+      renderWithProviders(<Footer links={links} />);
+      
+      const privacyLink = screen.getByRole('link', { name: 'Privacy Policy' });
+      const contactLink = screen.getByRole('link', { name: 'Contact' });
+      
+      expect(privacyLink).toHaveAttribute('href', '/privacy');
+      expect(contactLink).toHaveAttribute('href', '/contact');
+    });
+
+    it('renders links with correct styling classes', () => {
+      const links = [{ label: 'Test Link', href: '/test' }];
+      
+      renderWithProviders(<Footer links={links} />);
+      
+      const link = screen.getByRole('link', { name: 'Test Link' });
+      expect(link).toHaveClass('text-muted-foreground', 'hover:text-foreground');
+    });
+
+    it('renders links in a list with correct structure', () => {
+      const links = [
+        { label: 'Link 1', href: '/link1' },
+        { label: 'Link 2', href: '/link2' }
+      ];
+      
+      renderWithProviders(<Footer links={links} />);
+      
+      const list = screen.getByRole('list');
+      expect(list).toBeInTheDocument();
+      expect(list).toHaveClass('flex', 'gap-4', 'mt-2', 'md:mt-0');
+      
+      const listItems = screen.getAllByRole('listitem');
+      expect(listItems).toHaveLength(2);
+    });
+
+    it('does not render navigation section when no links provided', () => {
+      renderWithProviders(<Footer />);
+      
+      expect(screen.queryByRole('list')).not.toBeInTheDocument();
+    });
+
+    it('does not render navigation section when empty links array provided', () => {
+      renderWithProviders(<Footer links={[]} />);
+      
+      expect(screen.queryByRole('list')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Content Layout', () => {
+    it('renders content in proper semantic structure', () => {
+      renderWithProviders(
+        <Footer>
+          <div>Custom content</div>
+        </Footer>
+      );
+      
+      const section = document.querySelector('section');
+      expect(section).toBeInTheDocument();
+      expect(section).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'text-center');
+    });
+
+    it('renders logo before children content', () => {
+      renderWithProviders(
+        <Footer logo="/logo.png">
+          <div data-testid="children">Children content</div>
+        </Footer>
+      );
+      
+      const logo = screen.getByAltText('Logo');
+      const children = screen.getByTestId('children');
+      
+      // Logo should appear before children in the DOM
+      expect(logo.compareDocumentPosition(children) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    });
+
+    it('renders copyright text after children content', () => {
+      renderWithProviders(
+        <Footer>
+          <div data-testid="children">Children content</div>
+        </Footer>
+      );
+      
+      const children = screen.getByTestId('children');
+      const copyright = screen.getByText(/© Copyright/);
+      
+      // Copyright should appear after children in the DOM
+      expect(copyright.compareDocumentPosition(children) & Node.DOCUMENT_POSITION_PRECEDING).toBeTruthy();
+    });
+
+    it('renders navigation links after copyright text', () => {
+      const links = [{ label: 'Test Link', href: '/test' }];
+      
+      renderWithProviders(<Footer links={links} />);
+      
+      const copyright = screen.getByText(/© Copyright/);
+      const link = screen.getByRole('link', { name: 'Test Link' });
+      
+      // Both elements should be present
+      expect(copyright).toBeInTheDocument();
+      expect(link).toBeInTheDocument();
+      
+      // The link should be in a ul element
+      const linkUl = link.closest('ul');
+      expect(linkUl).toBeInTheDocument();
+      expect(linkUl).toHaveClass('flex', 'gap-4', 'mt-2', 'md:mt-0');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper semantic role', () => {
+      renderWithProviders(<Footer />);
+      
+      const footer = screen.getByRole('contentinfo');
+      expect(footer).toBeInTheDocument();
+    });
+
+    it('has proper heading structure when children contain headings', () => {
+      renderWithProviders(
+        <Footer>
+          <h3>About Us</h3>
+          <p>Company description</p>
+        </Footer>
+      );
+      
+      const heading = screen.getByRole('heading', { level: 3, name: 'About Us' });
+      expect(heading).toBeInTheDocument();
+    });
+
+    it('provides accessible navigation links', () => {
+      const links = [
+        { label: 'Privacy Policy', href: '/privacy' },
+        { label: 'Terms of Service', href: '/terms' }
+      ];
+      
+      renderWithProviders(<Footer links={links} />);
+      
+      const privacyLink = screen.getByRole('link', { name: 'Privacy Policy' });
+      const termsLink = screen.getByRole('link', { name: 'Terms of Service' });
+      
+      expect(privacyLink).toBeInTheDocument();
+      expect(termsLink).toBeInTheDocument();
+    });
+
+    it('has proper alt text for logo', () => {
+      renderWithProviders(<Footer logo="/logo.png" />);
+      
+      const logo = screen.getByAltText('Logo');
+      expect(logo).toBeInTheDocument();
+    });
+
+    it('supports keyboard navigation for links', () => {
+      const links = [{ label: 'Test Link', href: '/test' }];
+      
+      renderWithProviders(<Footer links={links} />);
+      
+      const link = screen.getByRole('link', { name: 'Test Link' });
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute('href', '/test');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty string company name', () => {
+      renderWithProviders(<Footer companyName="" />);
+      
+      expect(screen.getByText(/© Copyright 2022–2024 all rights reserved, \./)).toBeInTheDocument();
+    });
+
+    it('handles zero year', () => {
+      renderWithProviders(<Footer year={0} />);
+      
+      expect(screen.getByText(/© Copyright 2022–0 all rights reserved, Solvera Solutions Pty Ltd\./)).toBeInTheDocument();
+    });
+
+    it('handles negative year', () => {
+      renderWithProviders(<Footer year={-1} />);
+      
+      expect(screen.getByText(/© Copyright 2022–-1 all rights reserved, Solvera Solutions Pty Ltd\./)).toBeInTheDocument();
+    });
+
+    it('handles very large year', () => {
+      renderWithProviders(<Footer year={9999} />);
+      
+      expect(screen.getByText(/© Copyright 2022–9999 all rights reserved, Solvera Solutions Pty Ltd\./)).toBeInTheDocument();
+    });
+
+    it('handles empty copyright text', () => {
+      renderWithProviders(<Footer copyright="" />);
+      
+      // When copyright is empty string, it falls back to default copyright
+      expect(screen.getByText(/© Copyright 2022–2024 all rights reserved, Solvera Solutions Pty Ltd\./)).toBeInTheDocument();
+    });
+
+    it('handles special characters in company name', () => {
+      renderWithProviders(<Footer companyName="Company & Co. (Ltd.)" />);
+      
+      expect(screen.getByText(/© Copyright 2022–2024 all rights reserved, Company & Co\. \(Ltd\.\)\./)).toBeInTheDocument();
+    });
+
+    it('handles very long company name', () => {
+      const longName = 'A'.repeat(100);
+      renderWithProviders(<Footer companyName={longName} />);
+      
+      expect(screen.getByText(new RegExp(`© Copyright 2022–2024 all rights reserved, ${longName}\\.`))).toBeInTheDocument();
+    });
+
+    it('handles links with special characters', () => {
+      const links = [
+        { label: 'Privacy & Terms', href: '/privacy?ref=footer&utm_source=web' },
+        { label: 'Contact Us', href: '/contact#support' }
+      ];
+      
+      renderWithProviders(<Footer links={links} />);
+      
+      expect(screen.getByRole('link', { name: 'Privacy & Terms' })).toHaveAttribute('href', '/privacy?ref=footer&utm_source=web');
+      expect(screen.getByRole('link', { name: 'Contact Us' })).toHaveAttribute('href', '/contact#support');
+    });
+
+    it('handles empty logo URL', () => {
+      renderWithProviders(<Footer logo="" />);
+      
+      // Should not render logo when URL is empty
+      expect(screen.queryByAltText('Logo')).not.toBeInTheDocument();
+    });
+
+    it('handles undefined logo URL', () => {
+      renderWithProviders(<Footer logo={undefined} />);
+      
+      // Should not render logo when URL is undefined
+      expect(screen.queryByAltText('Logo')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Props Validation', () => {
+    it('uses default values when props are not provided', () => {
+      renderWithProviders(<Footer />);
+      
+      expect(screen.getByText(/Solvera Solutions Pty Ltd/)).toBeInTheDocument();
+      expect(screen.getByText(/2024/)).toBeInTheDocument();
+    });
+
+    it('overrides default values when props are provided', () => {
+      renderWithProviders(
+        <Footer 
+          companyName="Custom Company"
+          year={2025}
+          className="custom-class"
+        />
+      );
+      
+      expect(screen.getByText(/Custom Company/)).toBeInTheDocument();
+      expect(screen.getByText(/2025/)).toBeInTheDocument();
+      
+      const footer = screen.getByRole('contentinfo');
+      expect(footer).toHaveClass('custom-class');
+    });
+
+    it('handles all props being provided', () => {
+      const links = [{ label: 'Test', href: '/test' }];
+      
+      renderWithProviders(
+        <Footer
+          companyName="Test Company"
+          year={2023}
+          links={links}
+          className="test-class"
+          logo="/test-logo.png"
+          copyright="Custom copyright text"
+        >
+          <div>Test children</div>
+        </Footer>
+      );
+      
+      expect(screen.getByText('Custom copyright text')).toBeInTheDocument();
+      expect(screen.getByText('Test children')).toBeInTheDocument();
+      expect(screen.getByAltText('Logo')).toHaveAttribute('src', '/test-logo.png');
+      expect(screen.getByRole('link', { name: 'Test' })).toBeInTheDocument();
+      
+      const footer = screen.getByRole('contentinfo');
+      expect(footer).toHaveClass('test-class');
+    });
+  });
+
+  describe('Integration', () => {
+    it('works with complex children content', () => {
+      renderWithProviders(
+        <Footer>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
+            <div>
+              <h3 className="font-semibold mb-2">About Us</h3>
+              <p className="text-sm text-muted-foreground">
+                We provide innovative solutions for modern businesses.
+              </p>
+            </div>
+            <div>
+              <h3 className="font-semibold mb-2">Contact</h3>
+              <p className="text-sm text-muted-foreground">
+                Email: info@company.com
+              </p>
+            </div>
+            <div>
+              <h3 className="font-semibold mb-2">Follow Us</h3>
+              <div className="flex gap-2">
+                <a href="#" className="text-muted-foreground hover:text-foreground">Twitter</a>
+                <a href="#" className="text-muted-foreground hover:text-foreground">LinkedIn</a>
+              </div>
+            </div>
+          </div>
+        </Footer>
+      );
+      
+      expect(screen.getByRole('heading', { name: 'About Us' })).toBeInTheDocument();
+      expect(screen.getByRole('heading', { name: 'Contact' })).toBeInTheDocument();
+      expect(screen.getByRole('heading', { name: 'Follow Us' })).toBeInTheDocument();
+      expect(screen.getByText('We provide innovative solutions for modern businesses.')).toBeInTheDocument();
+      expect(screen.getByText('Email: info@company.com')).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'Twitter' })).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'LinkedIn' })).toBeInTheDocument();
+    });
+
+    it('works with multiple navigation links', () => {
+      const links = [
+        { label: 'Home', href: '/' },
+        { label: 'About', href: '/about' },
+        { label: 'Services', href: '/services' },
+        { label: 'Portfolio', href: '/portfolio' },
+        { label: 'Blog', href: '/blog' },
+        { label: 'Contact', href: '/contact' }
+      ];
+      
+      renderWithProviders(<Footer links={links} />);
+      
+      links.forEach(link => {
+        expect(screen.getByRole('link', { name: link.label })).toBeInTheDocument();
+        expect(screen.getByRole('link', { name: link.label })).toHaveAttribute('href', link.href);
+      });
+    });
+
+    it('maintains proper structure with all features combined', () => {
+      const links = [
+        { label: 'Privacy', href: '/privacy' },
+        { label: 'Terms', href: '/terms' }
+      ];
+      
+      renderWithProviders(
+        <Footer
+          companyName="Test Company"
+          year={2024}
+          links={links}
+          logo="/logo.png"
+          className="custom-footer"
+        >
+          <div data-testid="custom-content">Custom footer content</div>
+        </Footer>
+      );
+      
+      // Check all elements are present
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument();
+      expect(screen.getByAltText('Logo')).toBeInTheDocument();
+      expect(screen.getByTestId('custom-content')).toBeInTheDocument();
+      expect(screen.getByText(/Test Company/)).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'Privacy' })).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'Terms' })).toBeInTheDocument();
+      
+      // Check styling
+      const footer = screen.getByRole('contentinfo');
+      expect(footer).toHaveClass('custom-footer');
+    });
+  });
+});