taro-uno-ui 1.0.1 → 1.0.2

package/src/components/navigation/Tabs/Tabs.test.tsx

@@ -1,662 +0,0 @@
-import React from 'react'
-import { render, screen, fireEvent, act } from '@testing-library/react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { Tabs } from '../Tabs'
-import type { TabsProps, TabsRef, TabItem } from '../Tabs.types'
-
-// Mock Taro components
-vi.mock('@tarojs/components', () => ({
-  View: 'div',
-  Text: 'span'
-}))
-
-// Mock styles
-vi.mock('../Tabs.styles', () => ({
-  tabsStyles: {
-    getBaseStyle: (props: any) => ({
-      display: 'flex',
-      flexDirection: props.position === 'left' || props.position === 'right' ? 'row' : 'column',
-      alignItems: props.centered ? 'center' : 'stretch'
-    }),
-    getTabBarStyle: (position: any, type: any) => ({
-      display: 'flex',
-      flexDirection: position === 'top' || position === 'bottom' ? 'row' : 'column',
-      borderBottom: type === 'line' ? '2px solid #f0f0f0' : 'none',
-      backgroundColor: type === 'card' ? '#f5f5f5' : 'transparent'
-    }),
-    getTabItemStyle: (props: any) => ({
-      padding: props.size === 'small' ? '8px 16px' : props.size === 'large' ? '16px 32px' : '12px 24px',
-      fontSize: props.size === 'small' ? '12px' : props.size === 'large' ? '16px' : '14px',
-      fontWeight: props.active ? 'bold' : 'normal',
-      color: props.active ? '#1890ff' : '#666',
-      borderBottom: props.active && props.type === 'line' ? '2px solid #1890ff' : 'none',
-      backgroundColor: props.active && props.type === 'card' ? 'white' : 'transparent',
-      opacity: props.disabled ? 0.5 : 1,
-      cursor: props.disabled ? 'not-allowed' : 'pointer'
-    }),
-    getBadgeStyle: () => ({
-      backgroundColor: '#ff4d4f',
-      color: 'white',
-      borderRadius: '10px',
-      padding: '2px 6px',
-      fontSize: '12px',
-      marginLeft: '4px'
-    }),
-    getRemoveButtonStyle: () => ({
-      marginLeft: '8px',
-      cursor: 'pointer',
-      fontSize: '12px',
-      color: '#999'
-    }),
-    getAddButtonStyle: (size: any) => ({
-      padding: size === 'small' ? '8px 16px' : size === 'large' ? '16px 32px' : '12px 24px',
-      fontSize: size === 'small' ? '12px' : size === 'large' ? '16px' : '14px',
-      cursor: 'pointer',
-      color: '#1890ff'
-    }),
-    getContentStyle: (_position: any, _animated: any) => ({
-      flex: 1,
-      position: 'relative',
-      overflow: 'hidden'
-    }),
-    getTabContentStyle: (active: any, animated: any) => ({
-      display: active ? 'block' : 'none',
-      transition: animated ? 'all 0.3s ease' : 'none'
-    }),
-    getClassName: (props: any) => `taro-uno-tabs taro-uno-tabs--${props.position} taro-uno-tabs--${props.type} taro-uno-tabs--${props.size} ${props.centered ? 'taro-uno-tabs--centered' : ''} ${props.className || ''}`
-  }
-}))
-
-describe('Tabs Component', () => {
-  const mockRef = React.createRef<TabsRef>()
-  const mockItems: TabItem[] = [
-    { key: 'tab1', title: 'Tab 1', content: 'Content 1' },
-    { key: 'tab2', title: 'Tab 2', content: 'Content 2' },
-    { key: 'tab3', title: 'Tab 3', content: 'Content 3' }
-  ]
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('renders tabs with default props', () => {
-      render(<Tabs items={mockItems} data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs with custom active key', () => {
-      render(<Tabs items={mockItems} activeKey="tab2" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs with default active key', () => {
-      render(<Tabs items={mockItems} defaultActiveKey="tab2" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs with custom position', () => {
-      render(<Tabs items={mockItems} position="bottom" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs with custom type', () => {
-      render(<Tabs items={mockItems} type="card" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs with custom size', () => {
-      render(<Tabs items={mockItems} size="small" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs with centered alignment', () => {
-      render(<Tabs items={mockItems} centered data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs with animation', () => {
-      render(<Tabs items={mockItems} animated={false} data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs with editable mode', () => {
-      render(<Tabs items={mockItems} editable data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs with addable mode', () => {
-      render(<Tabs items={mockItems} addable data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs with force render', () => {
-      render(<Tabs items={mockItems} forceRender data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs with destroy inactive tab pane', () => {
-      render(<Tabs items={mockItems} destroyInactiveTabPane data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs with custom className', () => {
-      render(<Tabs items={mockItems} className="custom-tabs" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-      expect(tabs).toHaveClass('custom-tabs')
-    })
-
-    it('renders tabs with custom style', () => {
-      const customStyle = { backgroundColor: '#f0f0f0', padding: '16px' }
-      render(<Tabs items={mockItems} style={customStyle} data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs with disabled tab', () => {
-      const itemsWithDisabled = [
-        ...mockItems,
-        { key: 'tab4', title: 'Tab 4', content: 'Content 4', disabled: true }
-      ]
-      render(<Tabs items={itemsWithDisabled} data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs with tab icons', () => {
-      const itemsWithIcons = [
-        { key: 'tab1', title: 'Tab 1', content: 'Content 1', icon: '📄' },
-        { key: 'tab2', title: 'Tab 2', content: 'Content 2', icon: '📊' }
-      ]
-      render(<Tabs items={itemsWithIcons} data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs with tab badges', () => {
-      const itemsWithBadges = [
-        { key: 'tab1', title: 'Tab 1', content: 'Content 1', badge: '3' },
-        { key: 'tab2', title: 'Tab 2', content: 'Content 2', badge: 'New' }
-      ]
-      render(<Tabs items={itemsWithBadges} data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('handles empty items gracefully', () => {
-      render(<Tabs items={[]} data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('handles single tab gracefully', () => {
-      const singleItem = [{ key: 'tab1', title: 'Tab 1', content: 'Content 1' }]
-      render(<Tabs items={singleItem} data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-  })
-
-  describe('Tab Navigation', () => {
-    it('switches tab on click', () => {
-      const handleChange = vi.fn()
-      render(<Tabs items={mockItems} onChange={handleChange} data-testid="tabs" />)
-
-      const tab2 = screen.getByText('Tab 2')
-      fireEvent.click(tab2)
-
-      expect(handleChange).toHaveBeenCalledWith('tab2')
-    })
-
-    it('calls onTabClick when tab is clicked', () => {
-      const handleTabClick = vi.fn()
-      render(<Tabs items={mockItems} onTabClick={handleTabClick} data-testid="tabs" />)
-
-      const tab2 = screen.getByText('Tab 2')
-      fireEvent.click(tab2)
-
-      expect(handleTabClick).toHaveBeenCalledWith('tab2', expect.any(Object))
-    })
-
-    it('does not switch to disabled tab', () => {
-      const handleChange = vi.fn()
-      const itemsWithDisabled = [
-        ...mockItems,
-        { key: 'tab4', title: 'Tab 4', content: 'Content 4', disabled: true }
-      ]
-      render(<Tabs items={itemsWithDisabled} onChange={handleChange} data-testid="tabs" />)
-
-      const disabledTab = screen.getByText('Tab 4')
-      fireEvent.click(disabledTab)
-
-      expect(handleChange).not.toHaveBeenCalled()
-    })
-
-    it('does not call onTabClick for disabled tab', () => {
-      const handleTabClick = vi.fn()
-      const itemsWithDisabled = [
-        ...mockItems,
-        { key: 'tab4', title: 'Tab 4', content: 'Content 4', disabled: true }
-      ]
-      render(<Tabs items={itemsWithDisabled} onTabClick={handleTabClick} data-testid="tabs" />)
-
-      const disabledTab = screen.getByText('Tab 4')
-      fireEvent.click(disabledTab)
-
-      expect(handleTabClick).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('Tab Management', () => {
-    it('adds new tab when add button is clicked', () => {
-      const handleAdd = vi.fn()
-      const handleEdit = vi.fn()
-      render(<Tabs items={mockItems} addable onAdd={handleAdd} onEdit={handleEdit} data-testid="tabs" />)
-
-      const addButton = screen.getByText('+')
-      fireEvent.click(addButton)
-
-      expect(handleAdd).toHaveBeenCalled()
-      expect(handleEdit).toHaveBeenCalledWith('', 'add')
-    })
-
-    it('removes tab when remove button is clicked', () => {
-      const handleRemove = vi.fn()
-      const handleEdit = vi.fn()
-      render(<Tabs items={mockItems} editable onRemove={handleRemove} onEdit={handleEdit} data-testid="tabs" />)
-
-      const removeButtons = screen.getAllByText('×')
-      fireEvent.click(removeButtons[0])
-
-      expect(handleRemove).toHaveBeenCalledWith('tab1')
-      expect(handleEdit).toHaveBeenCalledWith('tab1', 'remove')
-    })
-
-    it('stops event propagation when removing tab', () => {
-      const handleChange = vi.fn()
-      const handleRemove = vi.fn()
-      render(<Tabs items={mockItems} editable onRemove={handleRemove} onChange={handleChange} data-testid="tabs" />)
-
-      const removeButtons = screen.getAllByText('×')
-      fireEvent.click(removeButtons[0])
-
-      expect(handleRemove).toHaveBeenCalled()
-      expect(handleChange).not.toHaveBeenCalled()
-    })
-
-    it('does not show remove button for single tab', () => {
-      const singleItem = [{ key: 'tab1', title: 'Tab 1', content: 'Content 1' }]
-      render(<Tabs items={singleItem} editable data-testid="tabs" />)
-
-      const removeButtons = screen.queryAllByText('×')
-      expect(removeButtons).toHaveLength(0)
-    })
-  })
-
-  describe('Custom Rendering', () => {
-    it('uses custom tab bar render', () => {
-      const customTabBar = (_props: TabsProps) => (
-        <div data-testid="custom-tab-bar">Custom Tab Bar</div>
-      )
-      render(<Tabs items={mockItems} renderTabBar={customTabBar} data-testid="tabs" />)
-
-      expect(screen.getByTestId('custom-tab-bar')).toBeInTheDocument()
-    })
-
-    it('uses custom tab render', () => {
-      const customTab = (item: TabItem, index: number) => (
-        <div data-testid={`custom-tab-${index}`}>Custom {item.title}</div>
-      )
-      render(<Tabs items={mockItems} renderTab={customTab} data-testid="tabs" />)
-
-      expect(screen.getByTestId('custom-tab-0')).toBeInTheDocument()
-      expect(screen.getByTestId('custom-tab-1')).toBeInTheDocument()
-      expect(screen.getByTestId('custom-tab-2')).toBeInTheDocument()
-    })
-
-    it('uses custom content render', () => {
-      const customContent = (item: TabItem, index: number) => (
-        <div data-testid={`custom-content-${index}`}>Custom Content {index + 1}</div>
-      )
-      render(<Tabs items={mockItems} renderContent={customContent} data-testid="tabs" />)
-
-      expect(screen.getByTestId('custom-content-0')).toBeInTheDocument()
-    })
-  })
-
-  describe('Props Updates', () => {
-    it('updates items correctly', () => {
-      const { rerender } = render(<Tabs items={mockItems} data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-
-      const newItems = [
-        { key: 'tab1', title: 'Updated Tab 1', content: 'Updated Content 1' },
-        { key: 'tab2', title: 'Updated Tab 2', content: 'Updated Content 2' }
-      ]
-
-      rerender(<Tabs items={newItems} data-testid="tabs" />)
-      expect(tabs).toBeInTheDocument()
-      expect(screen.getByText('Updated Tab 1')).toBeInTheDocument()
-    })
-
-    it('updates active key correctly', () => {
-      const { rerender } = render(<Tabs items={mockItems} activeKey="tab1" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-
-      rerender(<Tabs items={mockItems} activeKey="tab2" data-testid="tabs" />)
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('updates position correctly', () => {
-      const { rerender } = render(<Tabs items={mockItems} position="top" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-
-      rerender(<Tabs items={mockItems} position="bottom" data-testid="tabs" />)
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('updates type correctly', () => {
-      const { rerender } = render(<Tabs items={mockItems} type="line" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-
-      rerender(<Tabs items={mockItems} type="card" data-testid="tabs" />)
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('updates size correctly', () => {
-      const { rerender } = render(<Tabs items={mockItems} size="default" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-
-      rerender(<Tabs items={mockItems} size="small" data-testid="tabs" />)
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('updates centered correctly', () => {
-      const { rerender } = render(<Tabs items={mockItems} centered={false} data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-
-      rerender(<Tabs items={mockItems} centered={true} data-testid="tabs" />)
-      expect(tabs).toBeInTheDocument()
-    })
-  })
-
-  describe('Ref API', () => {
-    it('exposes ref methods correctly', () => {
-      render(<Tabs items={mockItems} ref={mockRef} data-testid="tabs" />)
-
-      act(() => {
-        expect(mockRef.current).toBeDefined()
-        expect(mockRef.current?.getActiveKey()).toBe('tab1')
-        expect(mockRef.current?.getItems()).toEqual(mockItems)
-      })
-    })
-
-    it('sets active key via ref method', () => {
-      render(<Tabs items={mockItems} defaultActiveKey="tab1" ref={mockRef} data-testid="tabs" />)
-
-      act(() => {
-        if (mockRef.current) {
-          expect(() => mockRef.current.setActiveKey('tab2')).not.toThrow()
-        }
-      })
-    })
-
-    it('adds item via ref method', () => {
-      render(<Tabs items={mockItems} ref={mockRef} data-testid="tabs" />)
-
-      act(() => {
-        if (mockRef.current) {
-          const newItem = { key: 'tab4', title: 'Tab 4', content: 'Content 4' }
-          expect(() => mockRef.current.addItem(newItem)).not.toThrow()
-        }
-      })
-    })
-
-    it('adds item at specific index via ref method', () => {
-      render(<Tabs items={mockItems} ref={mockRef} data-testid="tabs" />)
-
-      act(() => {
-        if (mockRef.current) {
-          const newItem = { key: 'tab4', title: 'Tab 4', content: 'Content 4' }
-          expect(() => mockRef.current.addItem(newItem, 1)).not.toThrow()
-        }
-      })
-    })
-
-    it('removes item via ref method', () => {
-      render(<Tabs items={mockItems} ref={mockRef} data-testid="tabs" />)
-
-      act(() => {
-        if (mockRef.current) {
-          expect(() => mockRef.current.removeItem('tab2')).not.toThrow()
-        }
-      })
-    })
-
-    it('updates item via ref method', () => {
-      render(<Tabs items={mockItems} ref={mockRef} data-testid="tabs" />)
-
-      act(() => {
-        if (mockRef.current) {
-          const updatedItem = { title: 'Updated Tab 2' }
-          expect(() => mockRef.current.updateItem('tab2', updatedItem)).not.toThrow()
-        }
-      })
-    })
-
-    it('provides element access via ref', () => {
-      render(<Tabs items={mockItems} ref={mockRef} data-testid="tabs" />)
-
-      act(() => {
-        expect(mockRef.current?.element).toBeDefined()
-      })
-    })
-  })
-
-  describe('Controlled vs Uncontrolled', () => {
-    it('works in controlled mode', () => {
-      const handleChange = vi.fn()
-      render(<Tabs items={mockItems} activeKey="tab2" onChange={handleChange} data-testid="tabs" />)
-
-      const tab1 = screen.getByText('Tab 1')
-      fireEvent.click(tab1)
-
-      expect(handleChange).toHaveBeenCalledWith('tab1')
-    })
-
-    it('works in uncontrolled mode', () => {
-      const handleChange = vi.fn()
-      render(<Tabs items={mockItems} defaultActiveKey="tab2" onChange={handleChange} data-testid="tabs" />)
-
-      const tab1 = screen.getByText('Tab 1')
-      fireEvent.click(tab1)
-
-      expect(handleChange).toHaveBeenCalledWith('tab1')
-    })
-  })
-
-  describe('Content Rendering', () => {
-    it('renders active tab content', () => {
-      render(<Tabs items={mockItems} activeKey="tab2" data-testid="tabs" />)
-      expect(screen.getByText('Content 2')).toBeInTheDocument()
-    })
-
-    it('does not render inactive tab content when destroyInactiveTabPane is true', () => {
-      render(<Tabs items={mockItems} activeKey="tab2" destroyInactiveTabPane data-testid="tabs" />)
-      expect(screen.getByText('Content 2')).toBeInTheDocument()
-      expect(screen.queryByText('Content 1')).not.toBeInTheDocument()
-      expect(screen.queryByText('Content 3')).not.toBeInTheDocument()
-    })
-
-    it('renders all tab content when forceRender is true', () => {
-      render(<Tabs items={mockItems} forceRender data-testid="tabs" />)
-      expect(screen.getByText('Content 1')).toBeInTheDocument()
-      expect(screen.getByText('Content 2')).toBeInTheDocument()
-      expect(screen.getByText('Content 3')).toBeInTheDocument()
-    })
-
-    it('only renders active tab content by default', () => {
-      render(<Tabs items={mockItems} data-testid="tabs" />)
-      expect(screen.getByText('Content 1')).toBeInTheDocument()
-      // Note: The actual implementation may render all tabs but hide inactive ones
-      // This test verifies the active tab content is visible
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('has proper role attribute', () => {
-      render(<Tabs items={mockItems} role="tablist" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toHaveAttribute('role', 'tablist')
-    })
-
-    it('supports aria-label', () => {
-      render(<Tabs items={mockItems} aria-label="Tab navigation" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toHaveAttribute('aria-label', 'Tab navigation')
-    })
-
-    it('supports aria-labelledby', () => {
-      render(<Tabs items={mockItems} aria-labelledby="tabs-title" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toHaveAttribute('aria-labelledby', 'tabs-title')
-    })
-
-    it('supports data attributes', () => {
-      render(<Tabs items={mockItems} data-testid="tabs" data-custom="value" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toHaveAttribute('data-custom', 'value')
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('handles items with duplicate keys', () => {
-      const itemsWithDuplicateKeys = [
-        { key: 'tab1', title: 'Tab 1', content: 'Content 1' },
-        { key: 'tab1', title: 'Tab 1 Duplicate', content: 'Content 1 Duplicate' }
-      ]
-      render(<Tabs items={itemsWithDuplicateKeys} data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('handles items without content', () => {
-      const itemsWithoutContent = [
-        { key: 'tab1', title: 'Tab 1' },
-        { key: 'tab2', title: 'Tab 2' }
-      ]
-      render(<Tabs items={itemsWithoutContent} data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('handles items with undefined title', () => {
-      const itemsWithUndefinedTitle = [
-        { key: 'tab1', title: undefined, content: 'Content 1' },
-        { key: 'tab2', title: 'Tab 2', content: 'Content 2' }
-      ]
-      render(<Tabs items={itemsWithUndefinedTitle as any} data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('handles items with complex content', () => {
-      const itemsWithComplexContent = [
-        { key: 'tab1', title: 'Tab 1', content: <div data-testid="complex-content">Complex Content</div> },
-        { key: 'tab2', title: 'Tab 2', content: 'Simple Content' }
-      ]
-      render(<Tabs items={itemsWithComplexContent} data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-      expect(screen.getByTestId('complex-content')).toBeInTheDocument()
-    })
-
-    it('handles items with complex title', () => {
-      const itemsWithComplexTitle = [
-        { key: 'tab1', title: <div data-testid="complex-title">Complex Title</div>, content: 'Content 1' },
-        { key: 'tab2', title: 'Simple Title', content: 'Content 2' }
-      ]
-      render(<Tabs items={itemsWithComplexTitle} data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-      expect(screen.getByTestId('complex-title')).toBeInTheDocument()
-    })
-  })
-
-  describe('Performance', () => {
-    it('renders efficiently with many tabs', () => {
-      const manyItems = Array.from({ length: 50 }, (_, i) => ({
-        key: `tab${i}`,
-        title: `Tab ${i}`,
-        content: `Content ${i}`
-      }))
-      render(<Tabs items={manyItems} data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-      expect(screen.getAllByText(/^Tab \d+$/)).toHaveLength(50)
-    })
-
-    it('handles frequent prop updates efficiently', () => {
-      const { rerender } = render(<Tabs items={mockItems} activeKey="tab1" data-testid="tabs" />)
-
-      for (let i = 0; i < 10; i++) {
-        rerender(<Tabs items={mockItems} activeKey={mockItems[i % 3].key} data-testid="tabs" />)
-      }
-
-      expect(screen.getByTestId('tabs')).toBeInTheDocument()
-    })
-  })
-
-  describe('Position Variants', () => {
-    it('renders tabs in left position', () => {
-      render(<Tabs items={mockItems} position="left" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs in right position', () => {
-      render(<Tabs items={mockItems} position="right" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders tabs in bottom position', () => {
-      render(<Tabs items={mockItems} position="bottom" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-  })
-
-  describe('Type Variants', () => {
-    it('renders line type tabs', () => {
-      render(<Tabs items={mockItems} type="line" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders card type tabs', () => {
-      render(<Tabs items={mockItems} type="card" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-
-    it('renders segment type tabs', () => {
-      render(<Tabs items={mockItems} type="segment" data-testid="tabs" />)
-      const tabs = screen.getByTestId('tabs')
-      expect(tabs).toBeInTheDocument()
-    })
-  })
-})