@moontra/moonui 2.0.8 → 2.0.9

package/src/components/ui/__tests__/popover.test.tsx

@@ -0,0 +1,637 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverSeparator,
+  PopoverHeader,
+  PopoverFooter,
+  popoverContentVariants,
+} from '../popover'
+
+// Mock Radix UI Popover components
+jest.mock('@radix-ui/react-popover', () => {
+  const mockForwardRef = (component: any) => {
+    const forwardedComponent = (props: any) => component(props, null)
+    forwardedComponent.displayName = component.displayName || component.name
+    return forwardedComponent
+  }
+
+  return {
+    Root: ({ children, ...props }: any) => <div data-testid="popover-root" {...props}>{children}</div>,
+    Trigger: mockForwardRef(({ children, ...props }: any, ref: any) => (
+      <button ref={ref} data-testid="popover-trigger" {...props}>{children}</button>
+    )),
+    Content: mockForwardRef(({ children, className, onInteractOutside, ...props }: any, ref: any) => (
+      <div 
+        ref={ref} 
+        data-testid="popover-content" 
+        className={className}
+        onClick={(e) => onInteractOutside?.(e)}
+        {...props}
+      >
+        {children}
+      </div>
+    )),
+    Anchor: mockForwardRef(({ children, ...props }: any, ref: any) => (
+      <div ref={ref} data-testid="popover-anchor" {...props}>{children}</div>
+    )),
+    Close: mockForwardRef(({ children, ...props }: any, ref: any) => (
+      <button ref={ref} data-testid="popover-close" {...props}>{children}</button>
+    )),
+  }
+})
+
+describe('Popover Components', () => {
+  describe('Popover Component', () => {
+    it('renders correctly with default props', () => {
+      render(
+        <Popover>
+          <PopoverTrigger>Open</PopoverTrigger>
+          <PopoverContent>Content</PopoverContent>
+        </Popover>
+      )
+      
+      // Popover Root doesn't render a DOM element, just manages state
+      expect(screen.getByTestId('popover-trigger')).toBeInTheDocument()
+      expect(screen.getByTestId('popover-content')).toBeInTheDocument()
+    })
+
+    it('passes through HTML attributes', () => {
+      render(
+        <Popover data-custom="test" aria-label="Custom popover">
+          <PopoverTrigger>Open</PopoverTrigger>
+        </Popover>
+      )
+      
+      const popover = screen.getByTestId('popover-root')
+      expect(popover).toHaveAttribute('data-custom', 'test')
+      expect(popover).toHaveAttribute('aria-label', 'Custom popover')
+    })
+  })
+
+  describe('PopoverTrigger Component', () => {
+    it('renders correctly with default props', () => {
+      render(
+        <Popover>
+          <PopoverTrigger>Open Popover</PopoverTrigger>
+        </Popover>
+      )
+      
+      const trigger = screen.getByTestId('popover-trigger')
+      expect(trigger).toBeInTheDocument()
+      expect(trigger).toHaveTextContent('Open Popover')
+    })
+
+    it('handles click events', () => {
+      const onClick = jest.fn()
+      render(
+        <Popover>
+          <PopoverTrigger onClick={onClick}>Open</PopoverTrigger>
+        </Popover>
+      )
+      
+      const trigger = screen.getByTestId('popover-trigger')
+      fireEvent.click(trigger)
+      
+      expect(onClick).toHaveBeenCalled()
+    })
+
+    it('passes through HTML attributes', () => {
+      render(
+        <Popover>
+          <PopoverTrigger data-custom="test" aria-label="Open popover">
+            Open
+          </PopoverTrigger>
+        </Popover>
+      )
+      
+      const trigger = screen.getByTestId('popover-trigger')
+      expect(trigger).toHaveAttribute('data-custom', 'test')
+      expect(trigger).toHaveAttribute('aria-label', 'Open popover')
+    })
+  })
+
+  describe('PopoverContent Component', () => {
+    it('renders correctly with default props', () => {
+      render(
+        <Popover>
+          <PopoverContent>Popover content</PopoverContent>
+        </Popover>
+      )
+      
+      const content = screen.getByTestId('popover-content')
+      expect(content).toBeInTheDocument()
+      expect(content).toHaveTextContent('Popover content')
+    })
+
+    it('applies custom className', () => {
+      render(
+        <Popover>
+          <PopoverContent className="custom-class">Content</PopoverContent>
+        </Popover>
+      )
+      
+      const content = screen.getByTestId('popover-content')
+      expect(content).toHaveClass('custom-class')
+    })
+
+    it('renders default variant correctly', () => {
+      render(
+        <Popover>
+          <PopoverContent variant="default">Content</PopoverContent>
+        </Popover>
+      )
+      
+      const content = screen.getByTestId('popover-content')
+      expect(content).toBeInTheDocument()
+    })
+
+    it('renders destructive variant correctly', () => {
+      render(
+        <Popover>
+          <PopoverContent variant="destructive">Content</PopoverContent>
+        </Popover>
+      )
+      
+      const content = screen.getByTestId('popover-content')
+      expect(content).toBeInTheDocument()
+    })
+
+    it('renders outline variant correctly', () => {
+      render(
+        <Popover>
+          <PopoverContent variant="outline">Content</PopoverContent>
+        </Popover>
+      )
+      
+      const content = screen.getByTestId('popover-content')
+      expect(content).toBeInTheDocument()
+    })
+
+    it('renders subtle variant correctly', () => {
+      render(
+        <Popover>
+          <PopoverContent variant="subtle">Content</PopoverContent>
+        </Popover>
+      )
+      
+      const content = screen.getByTestId('popover-content')
+      expect(content).toBeInTheDocument()
+    })
+
+    it('renders sm size correctly', () => {
+      render(
+        <Popover>
+          <PopoverContent size="sm">Content</PopoverContent>
+        </Popover>
+      )
+      
+      const content = screen.getByTestId('popover-content')
+      expect(content).toBeInTheDocument()
+    })
+
+    it('renders default size correctly', () => {
+      render(
+        <Popover>
+          <PopoverContent size="default">Content</PopoverContent>
+        </Popover>
+      )
+      
+      const content = screen.getByTestId('popover-content')
+      expect(content).toBeInTheDocument()
+    })
+
+    it('renders lg size correctly', () => {
+      render(
+        <Popover>
+          <PopoverContent size="lg">Content</PopoverContent>
+        </Popover>
+      )
+      
+      const content = screen.getByTestId('popover-content')
+      expect(content).toBeInTheDocument()
+    })
+
+    it('renders different radius options correctly', () => {
+      const radiusOptions = ['none', 'sm', 'default', 'lg', 'full'] as const
+      
+      radiusOptions.forEach((radius) => {
+        render(
+          <Popover>
+            <PopoverContent radius={radius} data-testid={`content-${radius}`}>
+              Content
+            </PopoverContent>
+          </Popover>
+        )
+        
+        expect(screen.getByTestId(`content-${radius}`)).toBeInTheDocument()
+      })
+    })
+
+    it('renders different shadow options correctly', () => {
+      const shadowOptions = ['none', 'sm', 'default', 'md', 'lg', 'xl'] as const
+      
+      shadowOptions.forEach((shadow) => {
+        render(
+          <Popover>
+            <PopoverContent shadow={shadow} data-testid={`content-${shadow}`}>
+              Content
+            </PopoverContent>
+          </Popover>
+        )
+        
+        expect(screen.getByTestId(`content-${shadow}`)).toBeInTheDocument()
+      })
+    })
+
+    it('handles backdrop prop', () => {
+      render(
+        <Popover>
+          <PopoverContent backdrop={true}>Content</PopoverContent>
+        </Popover>
+      )
+      
+      const content = screen.getByTestId('popover-content')
+      expect(content).toBeInTheDocument()
+    })
+
+    it('handles overlayBackdrop prop', () => {
+      render(
+        <Popover>
+          <PopoverContent overlayBackdrop={true}>Content</PopoverContent>
+        </Popover>
+      )
+      
+      const content = screen.getByTestId('popover-content')
+      expect(content).toBeInTheDocument()
+      // Overlay backdrop creates a div with fixed positioning
+      expect(document.querySelector('.fixed.inset-0')).toBeInTheDocument()
+    })
+
+    it('handles closeOnInteractOutside prop', () => {
+      const onInteractOutside = jest.fn()
+      render(
+        <Popover>
+          <PopoverContent closeOnInteractOutside={false}>
+            Content
+          </PopoverContent>
+        </Popover>
+      )
+      
+      const content = screen.getByTestId('popover-content')
+      fireEvent.click(content)
+      
+      // Should prevent default when closeOnInteractOutside is false
+      expect(content).toBeInTheDocument()
+    })
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLDivElement>()
+      render(
+        <Popover>
+          <PopoverContent ref={ref}>Content</PopoverContent>
+        </Popover>
+      )
+      
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('maintains displayName', () => {
+      expect(PopoverContent.displayName).toBeDefined()
+    })
+
+    it('passes through HTML attributes', () => {
+      render(
+        <Popover>
+          <PopoverContent data-custom="test" aria-label="Popover content">
+            Content
+          </PopoverContent>
+        </Popover>
+      )
+      
+      const content = screen.getByTestId('popover-content')
+      expect(content).toHaveAttribute('data-custom', 'test')
+      expect(content).toHaveAttribute('aria-label', 'Popover content')
+    })
+  })
+
+  describe('PopoverAnchor Component', () => {
+    it('renders correctly with default props', () => {
+      render(
+        <Popover>
+          <PopoverAnchor>Anchor</PopoverAnchor>
+        </Popover>
+      )
+      
+      const anchor = screen.getByTestId('popover-anchor')
+      expect(anchor).toBeInTheDocument()
+      expect(anchor).toHaveTextContent('Anchor')
+    })
+
+    it('passes through HTML attributes', () => {
+      render(
+        <Popover>
+          <PopoverAnchor data-custom="test">Anchor</PopoverAnchor>
+        </Popover>
+      )
+      
+      const anchor = screen.getByTestId('popover-anchor')
+      expect(anchor).toHaveAttribute('data-custom', 'test')
+    })
+  })
+
+  describe('PopoverClose Component', () => {
+    it('renders correctly with default props', () => {
+      render(
+        <Popover>
+          <PopoverClose>Close</PopoverClose>
+        </Popover>
+      )
+      
+      const close = screen.getByTestId('popover-close')
+      expect(close).toBeInTheDocument()
+      expect(close).toHaveTextContent('Close')
+    })
+
+    it('handles click events', () => {
+      const onClick = jest.fn()
+      render(
+        <Popover>
+          <PopoverClose onClick={onClick}>Close</PopoverClose>
+        </Popover>
+      )
+      
+      const close = screen.getByTestId('popover-close')
+      fireEvent.click(close)
+      
+      expect(onClick).toHaveBeenCalled()
+    })
+
+    it('passes through HTML attributes', () => {
+      render(
+        <Popover>
+          <PopoverClose data-custom="test" aria-label="Close popover">
+            Close
+          </PopoverClose>
+        </Popover>
+      )
+      
+      const close = screen.getByTestId('popover-close')
+      expect(close).toHaveAttribute('data-custom', 'test')
+      expect(close).toHaveAttribute('aria-label', 'Close popover')
+    })
+  })
+
+  describe('PopoverSeparator Component', () => {
+    it('renders correctly with default props', () => {
+      render(<PopoverSeparator data-testid="popover-separator" />)
+      
+      const separator = screen.getByTestId('popover-separator')
+      expect(separator).toBeInTheDocument()
+      expect(separator).toHaveClass('my-2', 'h-px', 'bg-border')
+    })
+
+    it('applies custom className', () => {
+      render(<PopoverSeparator className="custom-separator" data-testid="separator" />)
+      
+      const separator = screen.getByTestId('separator')
+      expect(separator).toHaveClass('custom-separator')
+      expect(separator).toHaveClass('my-2', 'h-px', 'bg-border')
+    })
+
+    it('maintains displayName', () => {
+      expect(PopoverSeparator.displayName).toBe('PopoverSeparator')
+    })
+
+    it('passes through HTML attributes', () => {
+      render(<PopoverSeparator data-custom="test" data-testid="separator" />)
+      
+      const separator = screen.getByTestId('separator')
+      expect(separator).toHaveAttribute('data-custom', 'test')
+    })
+  })
+
+  describe('PopoverHeader Component', () => {
+    it('renders correctly with default props', () => {
+      render(<PopoverHeader data-testid="popover-header">Header</PopoverHeader>)
+      
+      const header = screen.getByTestId('popover-header')
+      expect(header).toBeInTheDocument()
+      expect(header).toHaveTextContent('Header')
+      expect(header).toHaveClass('-mx-4', '-mt-4', 'mb-3', 'px-4', 'pt-4', 'pb-3', 'border-b', 'border-border')
+    })
+
+    it('applies custom className', () => {
+      render(<PopoverHeader className="custom-header" data-testid="header">Header</PopoverHeader>)
+      
+      const header = screen.getByTestId('header')
+      expect(header).toHaveClass('custom-header')
+      expect(header).toHaveClass('-mx-4', '-mt-4', 'mb-3')
+    })
+
+    it('maintains displayName', () => {
+      expect(PopoverHeader.displayName).toBe('PopoverHeader')
+    })
+
+    it('passes through HTML attributes', () => {
+      render(<PopoverHeader data-custom="test" data-testid="header">Header</PopoverHeader>)
+      
+      const header = screen.getByTestId('header')
+      expect(header).toHaveAttribute('data-custom', 'test')
+    })
+  })
+
+  describe('PopoverFooter Component', () => {
+    it('renders correctly with default props', () => {
+      render(<PopoverFooter data-testid="popover-footer">Footer</PopoverFooter>)
+      
+      const footer = screen.getByTestId('popover-footer')
+      expect(footer).toBeInTheDocument()
+      expect(footer).toHaveTextContent('Footer')
+      expect(footer).toHaveClass('-mx-4', '-mb-4', 'mt-3', 'px-4', 'pt-3', 'pb-4', 'border-t', 'border-border')
+    })
+
+    it('applies custom className', () => {
+      render(<PopoverFooter className="custom-footer" data-testid="footer">Footer</PopoverFooter>)
+      
+      const footer = screen.getByTestId('footer')
+      expect(footer).toHaveClass('custom-footer')
+      expect(footer).toHaveClass('-mx-4', '-mb-4', 'mt-3')
+    })
+
+    it('maintains displayName', () => {
+      expect(PopoverFooter.displayName).toBe('PopoverFooter')
+    })
+
+    it('passes through HTML attributes', () => {
+      render(<PopoverFooter data-custom="test" data-testid="footer">Footer</PopoverFooter>)
+      
+      const footer = screen.getByTestId('footer')
+      expect(footer).toHaveAttribute('data-custom', 'test')
+    })
+  })
+
+  describe('Variant Functions', () => {
+    it('popoverContentVariants function works correctly', () => {
+      const variants = popoverContentVariants({
+        variant: 'destructive',
+        size: 'lg',
+        radius: 'full',
+        shadow: 'xl'
+      })
+      
+      expect(typeof variants).toBe('string')
+      expect(variants.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Complex Combinations', () => {
+    it('renders complete popover with all components', () => {
+      render(
+        <Popover>
+          <PopoverTrigger>Open</PopoverTrigger>
+          <PopoverAnchor>Anchor</PopoverAnchor>
+          <PopoverContent>
+            <PopoverHeader>Header</PopoverHeader>
+            <div>Content</div>
+            <PopoverSeparator />
+            <PopoverFooter>
+              Footer
+              <PopoverClose>Close</PopoverClose>
+            </PopoverFooter>
+          </PopoverContent>
+        </Popover>
+      )
+      
+      expect(screen.getByTestId('popover-root')).toBeInTheDocument()
+      expect(screen.getByTestId('popover-trigger')).toBeInTheDocument()
+      expect(screen.getByTestId('popover-anchor')).toBeInTheDocument()
+      expect(screen.getByTestId('popover-content')).toBeInTheDocument()
+      expect(screen.getByTestId('popover-close')).toBeInTheDocument()
+      expect(screen.getByText('Header')).toBeInTheDocument()
+      expect(screen.getByText('Content')).toBeInTheDocument()
+      expect(screen.getByText('Footer')).toBeInTheDocument()
+    })
+
+    it('handles all content variants and sizes together', () => {
+      render(
+        <div>
+          <Popover>
+            <PopoverContent variant="destructive" size="sm" radius="none" shadow="xl">
+              Destructive Small
+            </PopoverContent>
+          </Popover>
+          <Popover>
+            <PopoverContent variant="outline" size="lg" radius="full" shadow="none">
+              Outline Large
+            </PopoverContent>
+          </Popover>
+        </div>
+      )
+      
+      expect(screen.getByText('Destructive Small')).toBeInTheDocument()
+      expect(screen.getByText('Outline Large')).toBeInTheDocument()
+    })
+
+    it('handles backdrop and overlay combinations', () => {
+      render(
+        <Popover>
+          <PopoverContent backdrop={true} overlayBackdrop={true} closeOnInteractOutside={false}>
+            Complex Content
+          </PopoverContent>
+        </Popover>
+      )
+      
+      expect(screen.getByText('Complex Content')).toBeInTheDocument()
+      expect(document.querySelector('.fixed.inset-0')).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles empty popover', () => {
+      render(<Popover />)
+      
+      expect(screen.getByTestId('popover-root')).toBeInTheDocument()
+    })
+
+    it('handles popover without content', () => {
+      render(
+        <Popover>
+          <PopoverTrigger>Open</PopoverTrigger>
+        </Popover>
+      )
+      
+      expect(screen.getByTestId('popover-trigger')).toBeInTheDocument()
+    })
+
+    it('handles null and undefined children', () => {
+      render(
+        <Popover>
+          <PopoverContent>
+            {null}
+            {undefined}
+            <div>Valid content</div>
+          </PopoverContent>
+        </Popover>
+      )
+      
+      expect(screen.getByText('Valid content')).toBeInTheDocument()
+    })
+
+    it('handles complex nested content', () => {
+      render(
+        <Popover>
+          <PopoverContent>
+            <PopoverHeader>
+              <h3>Complex Header</h3>
+              <p>With multiple elements</p>
+            </PopoverHeader>
+            <div>
+              <ul>
+                <li>Item 1</li>
+                <li>Item 2</li>
+              </ul>
+            </div>
+            <PopoverSeparator />
+            <PopoverFooter>
+              <button>Action 1</button>
+              <PopoverClose>Cancel</PopoverClose>
+            </PopoverFooter>
+          </PopoverContent>
+        </Popover>
+      )
+      
+      expect(screen.getByText('Complex Header')).toBeInTheDocument()
+      expect(screen.getByText('With multiple elements')).toBeInTheDocument()
+      expect(screen.getByText('Item 1')).toBeInTheDocument()
+      expect(screen.getByText('Item 2')).toBeInTheDocument()
+      expect(screen.getByText('Action 1')).toBeInTheDocument()
+      expect(screen.getByText('Cancel')).toBeInTheDocument()
+    })
+
+    it('handles multiple popovers on same page', () => {
+      render(
+        <div>
+          <Popover>
+            <PopoverTrigger>First Trigger</PopoverTrigger>
+            <PopoverContent>First Content</PopoverContent>
+          </Popover>
+          <Popover>
+            <PopoverTrigger>Second Trigger</PopoverTrigger>
+            <PopoverContent>Second Content</PopoverContent>
+          </Popover>
+        </div>
+      )
+      
+      expect(screen.getByText('First Trigger')).toBeInTheDocument()
+      expect(screen.getByText('First Content')).toBeInTheDocument()
+      expect(screen.getByText('Second Trigger')).toBeInTheDocument()
+      expect(screen.getByText('Second Content')).toBeInTheDocument()
+    })
+  })
+})