gridpilot.gg/apps/website/components/app/AppSidebar.test.tsx

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { AppSidebar } from './AppSidebar';

describe('AppSidebar', () => {
  describe('Rendering states', () => {
    it('renders the Sidebar component', () => {
      const { container } = render(<AppSidebar />);
      
      // The component should render a Sidebar
      expect(container.firstChild).toBeDefined();
    });

    it('renders with children', () => {
      const { container } = render(
        <AppSidebar>
          <div data-testid="test-child">Test Content</div>
        </AppSidebar>
      );
      
      // Verify children are rendered
      expect(screen.getByTestId('test-child')).toBeDefined();
      expect(screen.getByText('Test Content')).toBeDefined();
    });

    it('renders with multiple children', () => {
      const { container } = render(
        <AppSidebar>
          <div data-testid="child-1">First Child</div>
          <div data-testid="child-2">Second Child</div>
          <div data-testid="child-3">Third Child</div>
        </AppSidebar>
      );
      
      // Verify all children are rendered
      expect(screen.getByTestId('child-1')).toBeDefined();
      expect(screen.getByTestId('child-2')).toBeDefined();
      expect(screen.getByTestId('child-3')).toBeDefined();
      expect(screen.getByText('First Child')).toBeDefined();
      expect(screen.getByText('Second Child')).toBeDefined();
      expect(screen.getByText('Third Child')).toBeDefined();
    });

    it('renders with complex children components', () => {
      const ComplexChild = () => (
        <div data-testid="complex-child">
          <span>Complex Content</span>
          <button>Click Me</button>
        </div>
      );

      const { container } = render(
        <AppSidebar>
          <ComplexChild />
        </AppSidebar>
      );
      
      // Verify complex children are rendered
      expect(screen.getByTestId('complex-child')).toBeDefined();
      expect(screen.getByText('Complex Content')).toBeDefined();
      expect(screen.getByText('Click Me')).toBeDefined();
    });
  });

  describe('Empty states', () => {
    it('renders without children (empty state)', () => {
      const { container } = render(<AppSidebar />);
      
      // Component should still render even without children
      expect(container.firstChild).toBeDefined();
    });

    it('renders with null children', () => {
      const { container } = render(
        <AppSidebar>
          {null}
        </AppSidebar>
      );
      
      // Component should render without errors
      expect(container.firstChild).toBeDefined();
    });

    it('renders with undefined children', () => {
      const { container } = render(
        <AppSidebar>
          {undefined}
        </AppSidebar>
      );
      
      // Component should render without errors
      expect(container.firstChild).toBeDefined();
    });

    it('renders with empty string children', () => {
      const { container } = render(
        <AppSidebar>
          {''}
        </AppSidebar>
      );
      
      // Component should render without errors
      expect(container.firstChild).toBeDefined();
    });
  });

  describe('Visual presentation', () => {
    it('renders with consistent structure', () => {
      const { container } = render(<AppSidebar />);
      
      // Verify the component has a consistent structure
      expect(container.firstChild).toBeDefined();
      expect(container.firstChild?.nodeName).toBeDefined();
    });

    it('renders children in the correct order', () => {
      const { container } = render(
        <AppSidebar>
          <div data-testid="first">First</div>
          <div data-testid="second">Second</div>
          <div data-testid="third">Third</div>
        </AppSidebar>
      );
      
      // Verify children are rendered in the correct order
      const children = container.querySelectorAll('[data-testid^="child-"], [data-testid="first"], [data-testid="second"], [data-testid="third"]');
      expect(children.length).toBe(3);
      expect(children[0].textContent).toBe('First');
      expect(children[1].textContent).toBe('Second');
      expect(children[2].textContent).toBe('Third');
    });
  });

  describe('Edge cases', () => {
    it('renders with special characters in children', () => {
      const specialChars = 'Special & Characters < > " \'';
      const { container } = render(
        <AppSidebar>
          <div data-testid="special-chars">{specialChars}</div>
        </AppSidebar>
      );
      
      // Verify special characters are handled correctly
      expect(screen.getByTestId('special-chars')).toBeDefined();
      expect(screen.getByText(/Special & Characters/)).toBeDefined();
    });

    it('renders with numeric children', () => {
      const { container } = render(
        <AppSidebar>
          <div data-testid="numeric">12345</div>
        </AppSidebar>
      );
      
      // Verify numeric children are rendered
      expect(screen.getByTestId('numeric')).toBeDefined();
      expect(screen.getByText('12345')).toBeDefined();
    });

    it('renders with boolean children', () => {
      const { container } = render(
        <AppSidebar>
          {true}
          {false}
        </AppSidebar>
      );
      
      // Component should render without errors
      expect(container.firstChild).toBeDefined();
    });

    it('renders with array children', () => {
      const { container } = render(
        <AppSidebar>
          {[1, 2, 3].map((num) => (
            <div key={num} data-testid={`array-${num}`}>
              Item {num}
            </div>
          ))}
        </AppSidebar>
      );
      
      // Verify array children are rendered
      expect(screen.getByTestId('array-1')).toBeDefined();
      expect(screen.getByTestId('array-2')).toBeDefined();
      expect(screen.getByTestId('array-3')).toBeDefined();
      expect(screen.getByText('Item 1')).toBeDefined();
      expect(screen.getByText('Item 2')).toBeDefined();
      expect(screen.getByText('Item 3')).toBeDefined();
    });

    it('renders with nested components', () => {
      const NestedComponent = () => (
        <div data-testid="nested-wrapper">
          <div data-testid="nested-child">
            <span>Nested Content</span>
          </div>
        </div>
      );

      const { container } = render(
        <AppSidebar>
          <NestedComponent />
        </AppSidebar>
      );
      
      // Verify nested components are rendered
      expect(screen.getByTestId('nested-wrapper')).toBeDefined();
      expect(screen.getByTestId('nested-child')).toBeDefined();
      expect(screen.getByText('Nested Content')).toBeDefined();
    });
  });

  describe('Component behavior', () => {
    it('maintains component identity across re-renders', () => {
      const { container, rerender } = render(<AppSidebar />);
      const firstRender = container.firstChild;
      
      rerender(<AppSidebar />);
      const secondRender = container.firstChild;
      
      // Component should maintain its identity
      expect(firstRender).toBe(secondRender);
    });

    it('preserves children identity across re-renders', () => {
      const { container, rerender } = render(
        <AppSidebar>
          <div data-testid="stable-child">Stable Content</div>
        </AppSidebar>
      );
      
      const firstChild = screen.getByTestId('stable-child');
      
      rerender(
        <AppSidebar>
          <div data-testid="stable-child">Stable Content</div>
        </AppSidebar>
      );
      
      const secondChild = screen.getByTestId('stable-child');
      
      // Children should be preserved
      expect(firstChild).toBe(secondChild);
    });
  });
});