@jmruthers/pace-core 0.2.4

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

@@ -0,0 +1,309 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderWithProviders } from '../../../__tests__/shared';
+import { Footer } from '../Footer';
+
+describe('Footer Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Basic Rendering', () => {
+    it('renders without crashing', () => {
+      renderWithProviders(<Footer />);
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument();
+    });
+
+    it('renders with default company name', () => {
+      renderWithProviders(<Footer />);
+      expect(screen.getByText(/Solvera Solutions Pty Ltd/)).toBeInTheDocument();
+    });
+
+    it('renders with default copyright text', () => {
+      const currentYear = new Date().getFullYear();
+      renderWithProviders(<Footer />);
+      expect(screen.getByText(new RegExp(`© Copyright 2022–${currentYear} all rights reserved, Solvera Solutions Pty Ltd\\.`))).toBeInTheDocument();
+    });
+
+    it('applies custom className', () => {
+      renderWithProviders(<Footer className="custom-footer-class" />);
+      const footer = screen.getByRole('contentinfo');
+      expect(footer).toHaveClass('custom-footer-class');
+    });
+  });
+
+  describe('Props Handling', () => {
+    it('renders with custom company name', () => {
+      renderWithProviders(<Footer companyName="Custom Company Ltd" />);
+      expect(screen.getByText(/Custom Company Ltd/)).toBeInTheDocument();
+    });
+
+    it('renders with custom year', () => {
+      renderWithProviders(<Footer year={2023} />);
+      expect(screen.getByText(/© Copyright 2022–2023 all rights reserved/)).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 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('does not render logo when not provided', () => {
+      renderWithProviders(<Footer />);
+      expect(screen.queryByAltText('Logo')).not.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.getByText('Privacy Policy')).toBeInTheDocument();
+      expect(screen.getByText('Terms of Service')).toBeInTheDocument();
+      expect(screen.getByText('Contact')).toBeInTheDocument();
+      
+      const privacyLink = screen.getByText('Privacy Policy').closest('a');
+      const termsLink = screen.getByText('Terms of Service').closest('a');
+      const contactLink = screen.getByText('Contact').closest('a');
+      
+      expect(privacyLink).toHaveAttribute('href', '/privacy');
+      expect(termsLink).toHaveAttribute('href', '/terms');
+      expect(contactLink).toHaveAttribute('href', '/contact');
+    });
+
+    it('does not render navigation links when not provided', () => {
+      renderWithProviders(<Footer />);
+      expect(screen.queryByRole('list')).not.toBeInTheDocument();
+    });
+
+    it('renders empty navigation list when links array is empty', () => {
+      renderWithProviders(<Footer links={[]} />);
+      expect(screen.queryByRole('list')).not.toBeInTheDocument();
+    });
+
+    it('renders links with proper styling classes', () => {
+      const links = [{ label: 'Test Link', href: '/test' }];
+      renderWithProviders(<Footer links={links} />);
+      
+      const link = screen.getByText('Test Link').closest('a');
+      expect(link).toHaveClass('text-muted-foreground', 'hover:text-foreground');
+    });
+  });
+
+  describe('Children Content', () => {
+    it('renders children content when provided', () => {
+      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();
+    });
+
+    it('renders multiple children elements', () => {
+      renderWithProviders(
+        <Footer>
+          <div data-testid="section1">Section 1</div>
+          <div data-testid="section2">Section 2</div>
+          <div data-testid="section3">Section 3</div>
+        </Footer>
+      );
+      
+      expect(screen.getByTestId('section1')).toBeInTheDocument();
+      expect(screen.getByTestId('section2')).toBeInTheDocument();
+      expect(screen.getByTestId('section3')).toBeInTheDocument();
+    });
+
+    it('renders 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@mycompany.com<br />
+                Phone: (555) 123-4567
+              </p>
+            </div>
+          </div>
+        </Footer>
+      );
+      
+      expect(screen.getByText('About Us')).toBeInTheDocument();
+      expect(screen.getByText('Contact')).toBeInTheDocument();
+      expect(screen.getByText(/We provide innovative solutions/)).toBeInTheDocument();
+      expect(screen.getByText(/Email: info@mycompany\.com/)).toBeInTheDocument();
+    });
+
+    it('does not render children when not provided', () => {
+      renderWithProviders(<Footer />);
+      const footer = screen.getByRole('contentinfo');
+      // Should only contain the copyright text and no children wrapper
+      expect(footer.querySelector('section')).toBeInTheDocument();
+    });
+  });
+
+  describe('Layout and Styling', () => {
+    it('has proper semantic structure', () => {
+      renderWithProviders(<Footer />);
+      
+      const footer = screen.getByRole('contentinfo');
+      const section = footer.querySelector('section');
+      
+      expect(footer).toBeInTheDocument();
+      expect(section).toBeInTheDocument();
+    });
+
+    it('applies default styling classes', () => {
+      renderWithProviders(<Footer />);
+      
+      const footer = screen.getByRole('contentinfo');
+      expect(footer).toHaveClass('mt-8', 'py-6', 'flex', 'justify-center', 'border-t', 'border-border', 'bg-main-100');
+    });
+
+    it('applies section styling classes', () => {
+      renderWithProviders(<Footer />);
+      
+      const section = screen.getByRole('contentinfo').querySelector('section');
+      expect(section).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'text-center');
+    });
+
+    it('applies copyright text styling', () => {
+      renderWithProviders(<Footer />);
+      
+      const copyrightText = screen.getByText(/© Copyright/);
+      expect(copyrightText).toHaveClass('text-muted-foreground');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles null children gracefully', () => {
+      renderWithProviders(<Footer>{null}</Footer>);
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument();
+    });
+
+    it('handles undefined children gracefully', () => {
+      renderWithProviders(<Footer>{undefined}</Footer>);
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument();
+    });
+
+    it('handles empty string children', () => {
+      renderWithProviders(<Footer>{''}</Footer>);
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument();
+    });
+
+    it('handles very long company names', () => {
+      const longCompanyName = 'A'.repeat(100);
+      renderWithProviders(<Footer companyName={longCompanyName} />);
+      expect(screen.getByText(new RegExp(longCompanyName))).toBeInTheDocument();
+    });
+
+    it('handles special characters in company name', () => {
+      const specialCompanyName = 'Company & Sons, Ltd. (Pty)';
+      renderWithProviders(<Footer companyName={specialCompanyName} />);
+      expect(screen.getByText(new RegExp(specialCompanyName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')))).toBeInTheDocument();
+    });
+
+    it('handles links with special characters', () => {
+      const links = [
+        { label: 'Privacy & Policy', href: '/privacy?ref=test' },
+        { label: 'Terms & Conditions', href: '/terms#section1' }
+      ];
+      
+      renderWithProviders(<Footer links={links} />);
+      
+      expect(screen.getByText('Privacy & Policy')).toBeInTheDocument();
+      expect(screen.getByText('Terms & Conditions')).toBeInTheDocument();
+    });
+
+    it('handles very long copyright text', () => {
+      const longCopyright = 'A'.repeat(200);
+      renderWithProviders(<Footer copyright={longCopyright} />);
+      expect(screen.getByText(longCopyright)).toBeInTheDocument();
+    });
+  });
+
+  describe('Integration Scenarios', () => {
+    it('renders with all props combined', () => {
+      const links = [{ label: 'Contact', href: '/contact' }];
+      
+      renderWithProviders(
+        <Footer
+          companyName="Test Company"
+          year={2024}
+          logo="/logo.png"
+          copyright="Custom copyright"
+          links={links}
+          className="custom-class"
+        >
+          <div>Custom content</div>
+        </Footer>
+      );
+      
+      // Check all elements are present
+      expect(screen.getByRole('contentinfo')).toHaveClass('custom-class');
+      expect(screen.getByAltText('Logo')).toHaveAttribute('src', '/logo.png');
+      expect(screen.getByText('Custom copyright')).toBeInTheDocument();
+      expect(screen.getByText('Contact')).toBeInTheDocument();
+      expect(screen.getByText('Custom content')).toBeInTheDocument();
+    });
+
+    it('maintains proper structure with complex children', () => {
+      renderWithProviders(
+        <Footer>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
+            <div>
+              <h3>About</h3>
+              <p>Description</p>
+            </div>
+            <div>
+              <h3>Contact</h3>
+              <p>Contact info</p>
+            </div>
+            <div>
+              <h3>Follow</h3>
+              <div className="flex gap-2">
+                <a href="#">Twitter</a>
+                <a href="#">LinkedIn</a>
+              </div>
+            </div>
+          </div>
+        </Footer>
+      );
+      
+      // Check structure is maintained
+      expect(screen.getByText('About')).toBeInTheDocument();
+      expect(screen.getByText('Contact')).toBeInTheDocument();
+      expect(screen.getByText('Follow')).toBeInTheDocument();
+      expect(screen.getByText('Twitter')).toBeInTheDocument();
+      expect(screen.getByText('LinkedIn')).toBeInTheDocument();
+      
+      // Check copyright is still present
+      expect(screen.getByText(/© Copyright/)).toBeInTheDocument();
+    });
+  });
+}); 

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

@@ -0,0 +1,335 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderWithProviders } from '../../../__tests__/shared';
+import { Footer } from '../Footer';
+
+describe('Footer Visual Regression Tests', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Default Rendering', () => {
+    it('renders default footer with correct structure', () => {
+      const { container } = renderWithProviders(<Footer />);
+      
+      // Check basic structure
+      const footer = container.querySelector('footer');
+      expect(footer).toBeInTheDocument();
+      expect(footer).toHaveClass('mt-8', 'py-6', 'flex', 'justify-center', 'border-t', 'border-border', 'bg-main-100');
+      
+      // Check section structure
+      const section = footer?.querySelector('section');
+      expect(section).toBeInTheDocument();
+      expect(section).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'text-center');
+      
+      // Check copyright text
+      const copyrightText = container.textContent;
+      expect(copyrightText).toMatch(/© Copyright 2022–\d{4} all rights reserved, Solvera Solutions Pty Ltd\./);
+    });
+
+    it('renders with custom styling classes', () => {
+      const { container } = renderWithProviders(<Footer className="custom-footer" />);
+      
+      const footer = container.querySelector('footer');
+      expect(footer).toHaveClass('custom-footer');
+    });
+  });
+
+  describe('Logo Rendering', () => {
+    it('renders logo with correct attributes', () => {
+      const { container } = renderWithProviders(<Footer logo="/test-logo.png" />);
+      
+      const logo = container.querySelector('img[alt="Logo"]');
+      expect(logo).toBeInTheDocument();
+      expect(logo).toHaveAttribute('src', '/test-logo.png');
+      expect(logo).toHaveClass('h-8', 'w-auto');
+    });
+
+    it('does not render logo when not provided', () => {
+      const { container } = renderWithProviders(<Footer />);
+      
+      const logo = container.querySelector('img[alt="Logo"]');
+      expect(logo).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Navigation Links', () => {
+    it('renders navigation links with correct structure', () => {
+      const links = [
+        { label: 'Privacy Policy', href: '/privacy' },
+        { label: 'Terms of Service', href: '/terms' },
+        { label: 'Contact', href: '/contact' }
+      ];
+      
+      const { container } = renderWithProviders(<Footer links={links} />);
+      
+      // Check list structure
+      const list = container.querySelector('ul');
+      expect(list).toBeInTheDocument();
+      expect(list).toHaveClass('flex', 'gap-4', 'mt-2', 'md:mt-0');
+      
+      // Check list items
+      const listItems = container.querySelectorAll('li');
+      expect(listItems).toHaveLength(3);
+      
+      // Check links
+      const linkElements = container.querySelectorAll('a');
+      expect(linkElements).toHaveLength(3);
+      
+      linkElements.forEach((link, index) => {
+        expect(link).toHaveClass('text-muted-foreground', 'hover:text-foreground');
+        expect(link).toHaveAttribute('href', links[index].href);
+        expect(link).toHaveTextContent(links[index].label);
+      });
+    });
+
+    it('does not render navigation when links not provided', () => {
+      const { container } = renderWithProviders(<Footer />);
+      
+      const list = container.querySelector('ul');
+      expect(list).not.toBeInTheDocument();
+    });
+
+    it('does not render navigation when links array is empty', () => {
+      const { container } = renderWithProviders(<Footer links={[]} />);
+      
+      const list = container.querySelector('ul');
+      expect(list).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Children Content', () => {
+    it('renders children content in correct position', () => {
+      const { container } = renderWithProviders(
+        <Footer>
+          <div data-testid="custom-content" className="custom-section">
+            <h3>About Us</h3>
+            <p>Description</p>
+          </div>
+        </Footer>
+      );
+      
+      const customContent = container.querySelector('[data-testid="custom-content"]');
+      expect(customContent).toBeInTheDocument();
+      expect(customContent).toHaveClass('custom-section');
+      
+      // Check children are rendered before copyright
+      const section = container.querySelector('section');
+      const children = section?.children;
+      expect(children?.[0]).toHaveAttribute('data-testid', 'custom-content');
+    });
+
+    it('renders multiple children elements', () => {
+      const { container } = renderWithProviders(
+        <Footer>
+          <div className="section-1">Section 1</div>
+          <div className="section-2">Section 2</div>
+          <div className="section-3">Section 3</div>
+        </Footer>
+      );
+      
+      expect(container.querySelector('.section-1')).toBeInTheDocument();
+      expect(container.querySelector('.section-2')).toBeInTheDocument();
+      expect(container.querySelector('.section-3')).toBeInTheDocument();
+    });
+
+    it('renders complex grid layout children', () => {
+      const { container } = 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@mycompany.com<br />
+                Phone: (555) 123-4567
+              </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>
+      );
+      
+      // Check grid structure
+      const grid = container.querySelector('.grid');
+      expect(grid).toBeInTheDocument();
+      expect(grid).toHaveClass('grid-cols-1', 'md:grid-cols-3', 'gap-8', 'mb-8');
+      
+      // Check headings
+      const headings = container.querySelectorAll('h3');
+      expect(headings).toHaveLength(3);
+      expect(headings[0]).toHaveTextContent('About Us');
+      expect(headings[1]).toHaveTextContent('Contact');
+      expect(headings[2]).toHaveTextContent('Follow Us');
+      
+      // Check links in children
+      const links = container.querySelectorAll('a');
+      expect(links).toHaveLength(2);
+      expect(links[0]).toHaveTextContent('Twitter');
+      expect(links[1]).toHaveTextContent('LinkedIn');
+    });
+  });
+
+  describe('Copyright Text', () => {
+    it('renders default copyright with current year', () => {
+      const currentYear = new Date().getFullYear();
+      const { container } = renderWithProviders(<Footer />);
+      
+      const copyrightText = container.textContent;
+      expect(copyrightText).toMatch(new RegExp(`© Copyright 2022–${currentYear} all rights reserved, Solvera Solutions Pty Ltd\\.`));
+    });
+
+    it('renders custom copyright text', () => {
+      const customCopyright = "© 2024 Custom Company. All rights reserved.";
+      const { container } = renderWithProviders(<Footer copyright={customCopyright} />);
+      
+      expect(container).toHaveTextContent(customCopyright);
+    });
+
+    it('renders copyright with custom company name', () => {
+      const { container } = renderWithProviders(<Footer companyName="Test Company Ltd" />);
+      
+      const copyrightText = container.textContent;
+      expect(copyrightText).toMatch(/Test Company Ltd/);
+    });
+
+    it('renders copyright with custom year', () => {
+      const { container } = renderWithProviders(<Footer year={2023} />);
+      
+      const copyrightText = container.textContent;
+      expect(copyrightText).toMatch(/© Copyright 2022–2023 all rights reserved/);
+    });
+
+    it('applies correct styling to copyright text', () => {
+      const { container } = renderWithProviders(<Footer />);
+      
+      const copyrightSpan = container.querySelector('span.text-muted-foreground');
+      expect(copyrightSpan).toBeInTheDocument();
+      expect(copyrightSpan).toHaveClass('text-muted-foreground');
+    });
+  });
+
+  describe('Combined Scenarios', () => {
+    it('renders complete footer with all elements', () => {
+      const links = [
+        { label: 'Privacy Policy', href: '/privacy' },
+        { label: 'Terms of Service', href: '/terms' }
+      ];
+      
+      const { container } = renderWithProviders(
+        <Footer
+          companyName="Test Company"
+          year={2024}
+          logo="/logo.png"
+          copyright="© 2024 Test Company. All rights reserved."
+          links={links}
+          className="custom-footer"
+        >
+          <div className="custom-content">
+            <h3>About</h3>
+            <p>Description</p>
+          </div>
+        </Footer>
+      );
+      
+      // Check all elements are present
+      const footer = container.querySelector('footer');
+      expect(footer).toHaveClass('custom-footer');
+      
+      const logo = container.querySelector('img[alt="Logo"]');
+      expect(logo).toHaveAttribute('src', '/logo.png');
+      
+      const customContent = container.querySelector('.custom-content');
+      expect(customContent).toBeInTheDocument();
+      
+      const list = container.querySelector('ul');
+      expect(list).toBeInTheDocument();
+      
+      expect(container).toHaveTextContent('© 2024 Test Company. All rights reserved.');
+    });
+
+    it('maintains visual hierarchy with complex content', () => {
+      const { container } = 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@mycompany.com<br />
+                Phone: (555) 123-4567
+              </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>
+      );
+      
+      // Check visual structure is maintained
+      const section = container.querySelector('section');
+      expect(section).toHaveClass('text-center');
+      
+      const grid = container.querySelector('.grid');
+      expect(grid).toBeInTheDocument();
+      
+      // Check copyright is at the bottom
+      const copyrightText = container.textContent;
+      expect(copyrightText).toMatch(/© Copyright/);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles very long content gracefully', () => {
+      const longText = 'A'.repeat(500);
+      const { container } = renderWithProviders(<Footer>{longText}</Footer>);
+      
+      expect(container).toHaveTextContent(longText);
+      expect(container.querySelector('footer')).toBeInTheDocument();
+    });
+
+    it('handles special characters in content', () => {
+      const specialContent = 'Content with & < > " \' characters';
+      const { container } = renderWithProviders(<Footer>{specialContent}</Footer>);
+      
+      expect(container).toHaveTextContent(specialContent);
+    });
+
+    it('handles empty children gracefully', () => {
+      const { container } = renderWithProviders(<Footer>{''}</Footer>);
+      
+      const footer = container.querySelector('footer');
+      expect(footer).toBeInTheDocument();
+      expect(container).toHaveTextContent(/© Copyright/);
+    });
+
+    it('handles null children gracefully', () => {
+      const { container } = renderWithProviders(<Footer>{null}</Footer>);
+      
+      const footer = container.querySelector('footer');
+      expect(footer).toBeInTheDocument();
+      expect(container).toHaveTextContent(/© Copyright/);
+    });
+  });
+}); 

package/src/components/Footer/index.ts

@@ -0,0 +1,17 @@
+/**
+ * @file Public API for Footer component
+ * 
+ * This barrel file exports the Footer component.
+ * 
+ * To use this component:
+ * ```tsx
+ * import { Footer } from '@jmruthers/pace-core/components';
+ * 
+ * // Basic usage
+ * <Footer />
+ * 
+ * // With custom className
+ * <Footer className="mt-12 bg-sec-100" />
+ * ```
+ */
+export * from './Footer';