@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,353 +0,0 @@
-import React from 'react';
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { Footer } from '../Footer';
-import { renderWithProviders } from '../../../__tests__/shared';
-
-describe('Footer Integration Tests', () => {
-  const user = userEvent.setup();
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Real-world Usage Scenarios', () => {
-    it('renders in a typical application layout', () => {
-      renderWithProviders(
-        <div className="min-h-screen flex flex-col">
-          <header className="bg-main-50 border-b">
-            <h1>Application Header</h1>
-          </header>
-          <main className="flex-1 p-4">
-            <h2>Main Content</h2>
-            <p>This is the main content area.</p>
-          </main>
-          <Footer />
-        </div>
-      );
-      
-      // Check that footer is properly positioned at bottom
-      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');
-      
-      // Check that main content is still accessible
-      expect(screen.getByText('Main Content')).toBeInTheDocument();
-      expect(screen.getByText('Application Header')).toBeInTheDocument();
-    });
-
-    it('works with navigation links in a real application', async () => {
-      const mockNavigate = vi.fn();
-      
-      // Mock router context
-      const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-        <div className="app">
-          {children}
-        </div>
-      );
-      
-      const links = [
-        { label: 'Privacy Policy', href: '/privacy' },
-        { label: 'Terms of Service', href: '/terms' },
-        { label: 'Contact', href: '/contact' }
-      ];
-      
-      renderWithProviders(
-        <TestWrapper>
-          <Footer links={links} />
-        </TestWrapper>
-      );
-      
-      // Test navigation links
-      const privacyLink = screen.getByRole('link', { name: 'Privacy Policy' });
-      const termsLink = screen.getByRole('link', { name: 'Terms of Service' });
-      const contactLink = screen.getByRole('link', { name: 'Contact' });
-      
-      expect(privacyLink).toHaveAttribute('href', '/privacy');
-      expect(termsLink).toHaveAttribute('href', '/terms');
-      expect(contactLink).toHaveAttribute('href', '/contact');
-      
-      // Test keyboard navigation
-      privacyLink.focus();
-      expect(privacyLink).toHaveFocus();
-      
-      await user.tab();
-      expect(termsLink).toHaveFocus();
-      
-      await user.tab();
-      expect(contactLink).toHaveFocus();
-    });
-
-    it('integrates with theme system', () => {
-      renderWithProviders(
-        <div className="dark">
-          <Footer className="dark:bg-sec-900 dark:text-main-50" />
-        </div>
-      );
-      
-      const footer = screen.getByRole('contentinfo');
-      expect(footer).toBeInTheDocument();
-      expect(footer).toHaveClass('dark:bg-sec-900', 'dark:text-main-50');
-    });
-  });
-
-  describe('Complex Content Integration', () => {
-    it('handles complex footer content with multiple sections', () => {
-      renderWithProviders(
-        <Footer>
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
-            <div>
-              <h3 className="font-semibold mb-2">Company</h3>
-              <ul className="space-y-2 text-sm">
-                <li><a href="/about" className="text-muted-foreground hover:text-foreground">About Us</a></li>
-                <li><a href="/careers" className="text-muted-foreground hover:text-foreground">Careers</a></li>
-                <li><a href="/press" className="text-muted-foreground hover:text-foreground">Press</a></li>
-              </ul>
-            </div>
-            <div>
-              <h3 className="font-semibold mb-2">Product</h3>
-              <ul className="space-y-2 text-sm">
-                <li><a href="/features" className="text-muted-foreground hover:text-foreground">Features</a></li>
-                <li><a href="/pricing" className="text-muted-foreground hover:text-foreground">Pricing</a></li>
-                <li><a href="/docs" className="text-muted-foreground hover:text-foreground">Documentation</a></li>
-              </ul>
-            </div>
-            <div>
-              <h3 className="font-semibold mb-2">Support</h3>
-              <ul className="space-y-2 text-sm">
-                <li><a href="/help" className="text-muted-foreground hover:text-foreground">Help Center</a></li>
-                <li><a href="/contact" className="text-muted-foreground hover:text-foreground">Contact</a></li>
-                <li><a href="/status" className="text-muted-foreground hover:text-foreground">Status</a></li>
-              </ul>
-            </div>
-            <div>
-              <h3 className="font-semibold mb-2">Legal</h3>
-              <ul className="space-y-2 text-sm">
-                <li><a href="/privacy" className="text-muted-foreground hover:text-foreground">Privacy</a></li>
-                <li><a href="/terms" className="text-muted-foreground hover:text-foreground">Terms</a></li>
-                <li><a href="/cookies" className="text-muted-foreground hover:text-foreground">Cookies</a></li>
-              </ul>
-            </div>
-          </div>
-        </Footer>
-      );
-      
-      // Check all sections are rendered
-      expect(screen.getByText('Company')).toBeInTheDocument();
-      expect(screen.getByText('Product')).toBeInTheDocument();
-      expect(screen.getByText('Support')).toBeInTheDocument();
-      expect(screen.getByText('Legal')).toBeInTheDocument();
-      
-      // Check links are accessible
-      expect(screen.getByRole('link', { name: 'About Us' })).toBeInTheDocument();
-      expect(screen.getByRole('link', { name: 'Features' })).toBeInTheDocument();
-      expect(screen.getByRole('link', { name: 'Help Center' })).toBeInTheDocument();
-      expect(screen.getByRole('link', { name: 'Privacy' })).toBeInTheDocument();
-      
-      // Check copyright is still present
-      expect(screen.getByText(/© Copyright/)).toBeInTheDocument();
-    });
-
-    it('handles dynamic content updates', () => {
-      const { rerender } = renderWithProviders(
-        <Footer>
-          <div>Initial content</div>
-        </Footer>
-      );
-      
-      expect(screen.getByText('Initial content')).toBeInTheDocument();
-      
-      rerender(
-        <Footer>
-          <div>Updated content</div>
-        </Footer>
-      );
-      
-      expect(screen.getByText('Updated content')).toBeInTheDocument();
-      expect(screen.queryByText('Initial content')).not.toBeInTheDocument();
-    });
-
-    it('integrates with form elements in children', () => {
-      renderWithProviders(
-        <Footer>
-          <div className="mb-8">
-            <h3 className="font-semibold mb-2">Newsletter</h3>
-            <form className="flex gap-2">
-              <label htmlFor="email-input" className="sr-only">Email address</label>
-              <input 
-                id="email-input"
-                type="email" 
-                placeholder="Enter your email"
-                className="flex-1 px-3 py-2 border rounded"
-              />
-              <button 
-                type="submit"
-                className="px-4 py-2 bg-primary text-primary-foreground rounded"
-              >
-                Subscribe
-              </button>
-            </form>
-          </div>
-        </Footer>
-      );
-      
-      // Check form elements are accessible
-      const emailInput = screen.getByRole('textbox', { name: 'Email address' });
-      const subscribeButton = screen.getByRole('button', { name: 'Subscribe' });
-      
-      expect(emailInput).toBeInTheDocument();
-      expect(subscribeButton).toBeInTheDocument();
-      expect(emailInput).toHaveAttribute('type', 'email');
-      expect(subscribeButton).toHaveAttribute('type', 'submit');
-    });
-  });
-
-  describe('Performance and Memory', () => {
-    it('handles large numbers of links efficiently', () => {
-      const manyLinks = Array.from({ length: 50 }, (_, i) => ({
-        label: `Link ${i + 1}`,
-        href: `/link-${i + 1}`
-      }));
-      
-      renderWithProviders(<Footer links={manyLinks} />);
-      
-      // Check all links are rendered
-      expect(screen.getByRole('link', { name: 'Link 1' })).toBeInTheDocument();
-      expect(screen.getByRole('link', { name: 'Link 50' })).toBeInTheDocument();
-      
-      // Check list structure is maintained
-      const list = screen.getByRole('list');
-      const listItems = screen.getAllByRole('listitem');
-      expect(listItems).toHaveLength(50);
-    });
-
-    it('handles complex nested children efficiently', () => {
-      const complexChildren = (
-        <div>
-          {Array.from({ length: 10 }, (_, i) => (
-            <div key={i} className="mb-4">
-              <h3>Section {i + 1}</h3>
-              <p>Content for section {i + 1}</p>
-              <ul>
-                {Array.from({ length: 5 }, (_, j) => (
-                  <li key={j}>
-                    <a href={`/section-${i + 1}-link-${j + 1}`}>
-                      Link {j + 1} in Section {i + 1}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
-        </div>
-      );
-      
-      renderWithProviders(<Footer>{complexChildren}</Footer>);
-      
-      // Check structure is maintained
-      expect(screen.getByText('Section 1')).toBeInTheDocument();
-      expect(screen.getByText('Section 10')).toBeInTheDocument();
-      expect(screen.getByText('Link 1 in Section 1')).toBeInTheDocument();
-      expect(screen.getByText('Link 5 in Section 10')).toBeInTheDocument();
-    });
-  });
-
-  describe('Error Handling and Resilience', () => {
-    it('handles malformed link data gracefully', () => {
-      const malformedLinks = [
-        { label: 'Valid Link', href: '/valid' },
-        { label: '', href: '/empty-label' }, // Empty label
-        { label: 'No Href' }, // Missing href
-        { label: 'Valid Again', href: '/valid-again' }
-      ];
-      
-      renderWithProviders(<Footer links={malformedLinks} />);
-      
-      // Should render valid links
-      expect(screen.getByRole('link', { name: 'Valid Link' })).toBeInTheDocument();
-      expect(screen.getByRole('link', { name: 'Valid Again' })).toBeInTheDocument();
-      
-      // Should not crash the component
-      expect(screen.getByRole('contentinfo')).toBeInTheDocument();
-    });
-
-    it('handles invalid children gracefully', () => {
-      const invalidChildren = [
-        null,
-        undefined,
-        <div key="valid">Valid content</div>,
-        false,
-        0
-      ];
-      
-      renderWithProviders(<Footer>{invalidChildren}</Footer>);
-      
-      // Should render valid children
-      expect(screen.getByText('Valid content')).toBeInTheDocument();
-      
-      // Should not crash
-      expect(screen.getByRole('contentinfo')).toBeInTheDocument();
-    });
-
-    it('handles rapid prop changes', () => {
-      const { rerender } = renderWithProviders(<Footer />);
-      
-      // Rapidly change props
-      for (let i = 0; i < 10; i++) {
-        rerender(
-          <Footer 
-            companyName={`Company ${i}`}
-            year={2020 + i}
-            links={[{ label: `Link ${i}`, href: `/link-${i}` }]}
-          />
-        );
-      }
-      
-      // Should render final state correctly
-      expect(screen.getByText(/Company 9/)).toBeInTheDocument();
-      expect(screen.getByRole('link', { name: 'Link 9' })).toBeInTheDocument();
-    });
-  });
-
-  describe('Accessibility Integration', () => {
-    it('maintains accessibility with complex interactions', async () => {
-      renderWithProviders(
-        <Footer>
-          <div>
-            <button aria-label="Toggle menu">Menu</button>
-            <div role="menu" aria-hidden="false">
-              <a href="/item1" role="menuitem">Item 1</a>
-              <a href="/item2" role="menuitem">Item 2</a>
-            </div>
-          </div>
-        </Footer>
-      );
-      
-      const menuButton = screen.getByRole('button', { name: 'Toggle menu' });
-      const menu = screen.getByRole('menu');
-      
-      expect(menuButton).toBeInTheDocument();
-      expect(menu).toBeInTheDocument();
-      expect(menu).toHaveAttribute('aria-hidden', 'false');
-      
-      // Test keyboard interaction
-      menuButton.focus();
-      expect(menuButton).toHaveFocus();
-    });
-
-    it('supports screen reader announcements', () => {
-      renderWithProviders(
-        <Footer>
-          <div aria-live="polite" aria-atomic="true">
-            <span>Important announcement</span>
-          </div>
-        </Footer>
-      );
-      
-      const liveRegion = screen.getByText('Important announcement').closest('[aria-live]');
-      expect(liveRegion).toHaveAttribute('aria-live', 'polite');
-      expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
-    });
-  });
-}); 

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

@@ -1,309 +0,0 @@
-import React from 'react';
-import { renderWithProviders } from '../../../__tests__/shared';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { Footer } from '../Footer';
-
-describe('Footer Performance Tests', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Rendering Performance', () => {
-    it('renders quickly with minimal props', () => {
-      const startTime = performance.now();
-      
-      renderWithProviders(<Footer />);
-      
-      const endTime = performance.now();
-      const renderTime = endTime - startTime;
-      
-      // Should render in under 200ms (adjusted for test environment overhead)
-      expect(renderTime).toBeLessThan(200);
-    });
-
-    it('renders efficiently with many links', () => {
-      const manyLinks = Array.from({ length: 100 }, (_, i) => ({
-        label: `Link ${i + 1}`,
-        href: `/link-${i + 1}`
-      }));
-      
-      const startTime = performance.now();
-      
-      renderWithProviders(<Footer links={manyLinks} />);
-      
-      const endTime = performance.now();
-      const renderTime = endTime - startTime;
-      
-      // Should render 100 links in under 100ms
-      expect(renderTime).toBeLessThan(100);
-    });
-
-    it('renders efficiently with complex children', () => {
-      const complexChildren = (
-        <div>
-          {Array.from({ length: 20 }, (_, i) => (
-            <div key={i} className="mb-4">
-              <h3>Section {i + 1}</h3>
-              <p>Content for section {i + 1}</p>
-              <ul>
-                {Array.from({ length: 10 }, (_, j) => (
-                  <li key={j}>
-                    <a href={`/section-${i + 1}-link-${j + 1}`}>
-                      Link {j + 1} in Section {i + 1}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
-        </div>
-      );
-      
-      const startTime = performance.now();
-      
-      renderWithProviders(<Footer>{complexChildren}</Footer>);
-      
-      const endTime = performance.now();
-      const renderTime = endTime - startTime;
-      
-      // Should render complex children in under 500ms (adjusted for test environment with 200 elements)
-      expect(renderTime).toBeLessThan(500);
-    });
-
-    it('handles rapid re-renders efficiently', () => {
-      const { rerender } = renderWithProviders(<Footer />);
-      
-      const startTime = performance.now();
-      
-      // Perform 50 rapid re-renders
-      for (let i = 0; i < 50; i++) {
-        rerender(
-          <Footer 
-            companyName={`Company ${i}`}
-            year={2020 + i}
-            links={[{ label: `Link ${i}`, href: `/link-${i}` }]}
-          />
-        );
-      }
-      
-      const endTime = performance.now();
-      const totalTime = endTime - startTime;
-      
-      // Should handle 50 re-renders in under 1000ms (adjusted for test environment)
-      expect(totalTime).toBeLessThan(1000);
-    });
-  });
-
-  describe('Memory Usage', () => {
-    it('does not leak memory with repeated renders', () => {
-      const initialMemory = (performance as any).memory?.usedJSHeapSize || 0;
-      
-      // Perform multiple renders
-      for (let i = 0; i < 100; i++) {
-        const { unmount } = renderWithProviders(
-          <Footer 
-            companyName={`Company ${i}`}
-            links={Array.from({ length: 10 }, (_, j) => ({
-              label: `Link ${j}`,
-              href: `/link-${j}`
-            }))}
-          >
-            <div>Content {i}</div>
-          </Footer>
-        );
-        unmount();
-      }
-      
-      const finalMemory = (performance as any).memory?.usedJSHeapSize || 0;
-      const memoryIncrease = finalMemory - initialMemory;
-      
-      // Memory increase should be reasonable (less than 10MB)
-      expect(memoryIncrease).toBeLessThan(10 * 1024 * 1024);
-    });
-
-    it('handles large content without memory issues', () => {
-      const largeContent = (
-        <div>
-          {Array.from({ length: 1000 }, (_, i) => (
-            <div key={i}>
-              <h3>Large Section {i}</h3>
-              <p>This is a large content section with lots of text to test memory usage.</p>
-              <p>Additional content to make it larger and more realistic.</p>
-            </div>
-          ))}
-        </div>
-      );
-      
-      const startTime = performance.now();
-      
-      renderWithProviders(<Footer>{largeContent}</Footer>);
-      
-      const endTime = performance.now();
-      const renderTime = endTime - startTime;
-      
-      // Should render large content efficiently (adjusted for test environment overhead)
-      expect(renderTime).toBeLessThan(2500); // 2.5 seconds - realistic for 1000 complex elements in test environment
-    });
-  });
-
-  describe('Optimization Scenarios', () => {
-    it('optimizes rendering with memoized children', () => {
-      const MemoizedChild = React.memo(() => (
-        <div>
-          <h3>Memoized Content</h3>
-          <p>This content is memoized for performance.</p>
-        </div>
-      ));
-      
-      const startTime = performance.now();
-      
-      renderWithProviders(
-        <Footer>
-          <MemoizedChild />
-        </Footer>
-      );
-      
-      const endTime = performance.now();
-      const renderTime = endTime - startTime;
-      
-      // Should render memoized content quickly
-      expect(renderTime).toBeLessThan(50);
-    });
-
-    it('handles conditional rendering efficiently', () => {
-      const ConditionalFooter = ({ showLinks, showLogo }: { showLinks: boolean; showLogo: boolean }) => (
-        <Footer
-          logo={showLogo ? '/logo.png' : undefined}
-          links={showLinks ? [
-            { label: 'Link 1', href: '/link1' },
-            { label: 'Link 2', href: '/link2' }
-          ] : undefined}
-        />
-      );
-      
-      const startTime = performance.now();
-      
-      // Render with different combinations
-      renderWithProviders(<ConditionalFooter showLinks={true} showLogo={true} />);
-      renderWithProviders(<ConditionalFooter showLinks={false} showLogo={true} />);
-      renderWithProviders(<ConditionalFooter showLinks={true} showLogo={false} />);
-      renderWithProviders(<ConditionalFooter showLinks={false} showLogo={false} />);
-      
-      const endTime = performance.now();
-      const totalTime = endTime - startTime;
-      
-      // Should handle conditional rendering efficiently
-      expect(totalTime).toBeLessThan(150);
-    });
-
-    it('optimizes class name concatenation', () => {
-      const customClasses = 'custom-class-1 custom-class-2 custom-class-3';
-      
-      const startTime = performance.now();
-      
-      renderWithProviders(<Footer className={customClasses} />);
-      
-      const endTime = performance.now();
-      const renderTime = endTime - startTime;
-      
-      // Should handle custom classes efficiently
-      expect(renderTime).toBeLessThan(50);
-    });
-  });
-
-  describe('Bundle Size Impact', () => {
-    it('has minimal bundle impact', () => {
-      // Test that the component is lightweight
-      expect(typeof Footer).toBe('object');
-      
-      // Check that it's a React component
-      expect(Footer.displayName || Footer.name).toBeTruthy();
-      
-      // Test that it renders without issues
-      const { container } = renderWithProviders(<Footer />);
-      expect(container.querySelector('footer')).toBeInTheDocument();
-    });
-
-    it('uses efficient imports', () => {
-      // Test that the component can be imported and used
-      expect(Footer).toBeDefined();
-      
-      // Test that it renders correctly
-      const { container } = renderWithProviders(<Footer />);
-      expect(container.querySelector('footer')).toBeInTheDocument();
-      
-      // Test that it accepts props
-      const { container: container2 } = renderWithProviders(<Footer companyName="Test" />);
-      expect(container2.querySelector('footer')).toBeInTheDocument();
-    });
-  });
-
-  describe('Real-world Performance', () => {
-    it('performs well in typical application scenarios', () => {
-      const typicalFooter = (
-        <Footer
-          companyName="Test Company"
-          links={[
-            { label: 'Privacy', href: '/privacy' },
-            { label: 'Terms', href: '/terms' },
-            { label: 'Contact', href: '/contact' }
-          ]}
-        >
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
-            <div>
-              <h3>About</h3>
-              <p>Company description</p>
-            </div>
-            <div>
-              <h3>Contact</h3>
-              <p>Contact information</p>
-            </div>
-            <div>
-              <h3>Follow</h3>
-              <div className="flex gap-2">
-                <a href="#">Twitter</a>
-                <a href="#">LinkedIn</a>
-              </div>
-            </div>
-          </div>
-        </Footer>
-      );
-      
-      const startTime = performance.now();
-      
-      renderWithProviders(typicalFooter);
-      
-      const endTime = performance.now();
-      const renderTime = endTime - startTime;
-      
-      // Should render typical footer quickly
-      expect(renderTime).toBeLessThan(50);
-    });
-
-    it('handles concurrent renders efficiently', () => {
-      const renderPromises = Array.from({ length: 10 }, (_, i) => {
-        return new Promise<void>((resolve) => {
-          setTimeout(() => {
-            renderWithProviders(
-              <Footer
-                companyName={`Company ${i}`}
-                links={[{ label: `Link ${i}`, href: `/link-${i}` }]}
-              />
-            );
-            resolve();
-          }, i * 10); // Stagger renders
-        });
-      });
-      
-      const startTime = performance.now();
-      
-      return Promise.all(renderPromises).then(() => {
-        const endTime = performance.now();
-        const totalTime = endTime - startTime;
-        
-        // Should handle concurrent renders efficiently
-        expect(totalTime).toBeLessThan(1000); // Adjusted for test environment
-      });
-    });
-  });
-});