add tests

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

@@ -0,0 +1,247 @@
+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);
+    });
+  });
+});