test: try to use Anthropic Skills to add tests for web/app/components/apps/ (#29607)

Signed-off-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

web/app/components/apps/hooks/use-apps-query-state.spec.ts

@@ -0,0 +1,363 @@
+/**
+ * Test suite for useAppsQueryState hook
+ *
+ * This hook manages app filtering state through URL search parameters, enabling:
+ * - Bookmarkable filter states (users can share URLs with specific filters active)
+ * - Browser history integration (back/forward buttons work with filters)
+ * - Multiple filter types: tagIDs, keywords, isCreatedByMe
+ *
+ * The hook syncs local filter state with URL search parameters, making filter
+ * navigation persistent and shareable across sessions.
+ */
+import { act, renderHook } from '@testing-library/react'
+
+// Mock Next.js navigation hooks
+const mockPush = jest.fn()
+const mockPathname = '/apps'
+let mockSearchParams = new URLSearchParams()
+
+jest.mock('next/navigation', () => ({
+  usePathname: jest.fn(() => mockPathname),
+  useRouter: jest.fn(() => ({
+    push: mockPush,
+  })),
+  useSearchParams: jest.fn(() => mockSearchParams),
+}))
+
+// Import the hook after mocks are set up
+import useAppsQueryState from './use-apps-query-state'
+
+describe('useAppsQueryState', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockSearchParams = new URLSearchParams()
+  })
+
+  describe('Basic functionality', () => {
+    it('should return query object and setQuery function', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query).toBeDefined()
+      expect(typeof result.current.setQuery).toBe('function')
+    })
+
+    it('should initialize with empty query when no search params exist', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.tagIDs).toBeUndefined()
+      expect(result.current.query.keywords).toBeUndefined()
+      expect(result.current.query.isCreatedByMe).toBe(false)
+    })
+  })
+
+  describe('Parsing search params', () => {
+    it('should parse tagIDs from URL', () => {
+      mockSearchParams.set('tagIDs', 'tag1;tag2;tag3')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2', 'tag3'])
+    })
+
+    it('should parse single tagID from URL', () => {
+      mockSearchParams.set('tagIDs', 'single-tag')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.tagIDs).toEqual(['single-tag'])
+    })
+
+    it('should parse keywords from URL', () => {
+      mockSearchParams.set('keywords', 'search term')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.keywords).toBe('search term')
+    })
+
+    it('should parse isCreatedByMe as true from URL', () => {
+      mockSearchParams.set('isCreatedByMe', 'true')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+
+    it('should parse isCreatedByMe as false for other values', () => {
+      mockSearchParams.set('isCreatedByMe', 'false')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.isCreatedByMe).toBe(false)
+    })
+
+    it('should parse all params together', () => {
+      mockSearchParams.set('tagIDs', 'tag1;tag2')
+      mockSearchParams.set('keywords', 'test')
+      mockSearchParams.set('isCreatedByMe', 'true')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2'])
+      expect(result.current.query.keywords).toBe('test')
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+  })
+
+  describe('Updating query state', () => {
+    it('should update keywords via setQuery', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ keywords: 'new search' })
+      })
+
+      expect(result.current.query.keywords).toBe('new search')
+    })
+
+    it('should update tagIDs via setQuery', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ tagIDs: ['tag1', 'tag2'] })
+      })
+
+      expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2'])
+    })
+
+    it('should update isCreatedByMe via setQuery', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ isCreatedByMe: true })
+      })
+
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+
+    it('should support partial updates via callback', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ keywords: 'initial' })
+      })
+
+      act(() => {
+        result.current.setQuery(prev => ({ ...prev, isCreatedByMe: true }))
+      })
+
+      expect(result.current.query.keywords).toBe('initial')
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+  })
+
+  describe('URL synchronization', () => {
+    it('should sync keywords to URL', async () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ keywords: 'search' })
+      })
+
+      // Wait for useEffect to run
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      expect(mockPush).toHaveBeenCalledWith(
+        expect.stringContaining('keywords=search'),
+        { scroll: false },
+      )
+    })
+
+    it('should sync tagIDs to URL with semicolon separator', async () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ tagIDs: ['tag1', 'tag2'] })
+      })
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      expect(mockPush).toHaveBeenCalledWith(
+        expect.stringContaining('tagIDs=tag1%3Btag2'),
+        { scroll: false },
+      )
+    })
+
+    it('should sync isCreatedByMe to URL', async () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ isCreatedByMe: true })
+      })
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      expect(mockPush).toHaveBeenCalledWith(
+        expect.stringContaining('isCreatedByMe=true'),
+        { scroll: false },
+      )
+    })
+
+    it('should remove keywords from URL when empty', async () => {
+      mockSearchParams.set('keywords', 'existing')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ keywords: '' })
+      })
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      // Should be called without keywords param
+      expect(mockPush).toHaveBeenCalled()
+    })
+
+    it('should remove tagIDs from URL when empty array', async () => {
+      mockSearchParams.set('tagIDs', 'tag1;tag2')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ tagIDs: [] })
+      })
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      expect(mockPush).toHaveBeenCalled()
+    })
+
+    it('should remove isCreatedByMe from URL when false', async () => {
+      mockSearchParams.set('isCreatedByMe', 'true')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ isCreatedByMe: false })
+      })
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      expect(mockPush).toHaveBeenCalled()
+    })
+  })
+
+  describe('Edge cases', () => {
+    it('should handle empty tagIDs string in URL', () => {
+      // NOTE: This test documents current behavior where ''.split(';') returns ['']
+      // This could potentially cause filtering issues as it's treated as a tag with empty name
+      // rather than absence of tags. Consider updating parseParams if this is problematic.
+      mockSearchParams.set('tagIDs', '')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.tagIDs).toEqual([''])
+    })
+
+    it('should handle empty keywords', () => {
+      mockSearchParams.set('keywords', '')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.keywords).toBeUndefined()
+    })
+
+    it('should handle undefined tagIDs', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ tagIDs: undefined })
+      })
+
+      expect(result.current.query.tagIDs).toBeUndefined()
+    })
+
+    it('should handle special characters in keywords', () => {
+      // Use URLSearchParams constructor to properly simulate URL decoding behavior
+      // URLSearchParams.get() decodes URL-encoded characters
+      mockSearchParams = new URLSearchParams('keywords=test%20with%20spaces')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      expect(result.current.query.keywords).toBe('test with spaces')
+    })
+  })
+
+  describe('Memoization', () => {
+    it('should return memoized object reference when query unchanged', () => {
+      const { result, rerender } = renderHook(() => useAppsQueryState())
+
+      const firstResult = result.current
+      rerender()
+      const secondResult = result.current
+
+      expect(firstResult.query).toBe(secondResult.query)
+    })
+
+    it('should return new object reference when query changes', () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      const firstQuery = result.current.query
+
+      act(() => {
+        result.current.setQuery({ keywords: 'changed' })
+      })
+
+      expect(result.current.query).not.toBe(firstQuery)
+    })
+  })
+
+  describe('Integration scenarios', () => {
+    it('should handle sequential updates', async () => {
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({ keywords: 'first' })
+      })
+
+      act(() => {
+        result.current.setQuery(prev => ({ ...prev, tagIDs: ['tag1'] }))
+      })
+
+      act(() => {
+        result.current.setQuery(prev => ({ ...prev, isCreatedByMe: true }))
+      })
+
+      expect(result.current.query.keywords).toBe('first')
+      expect(result.current.query.tagIDs).toEqual(['tag1'])
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+
+    it('should clear all filters', () => {
+      mockSearchParams.set('tagIDs', 'tag1;tag2')
+      mockSearchParams.set('keywords', 'search')
+      mockSearchParams.set('isCreatedByMe', 'true')
+
+      const { result } = renderHook(() => useAppsQueryState())
+
+      act(() => {
+        result.current.setQuery({
+          tagIDs: undefined,
+          keywords: undefined,
+          isCreatedByMe: false,
+        })
+      })
+
+      expect(result.current.query.tagIDs).toBeUndefined()
+      expect(result.current.query.keywords).toBeUndefined()
+      expect(result.current.query.isCreatedByMe).toBe(false)
+    })
+  })
+})

web/app/components/apps/hooks/use-dsl-drag-drop.spec.ts

@@ -0,0 +1,493 @@
+/**
+ * Test suite for useDSLDragDrop hook
+ *
+ * This hook provides drag-and-drop functionality for DSL files, enabling:
+ * - File drag detection with visual feedback (dragging state)
+ * - YAML/YML file filtering (only accepts .yaml and .yml files)
+ * - Enable/disable toggle for conditional drag-and-drop
+ * - Cleanup on unmount (removes event listeners)
+ */
+import { act, renderHook } from '@testing-library/react'
+import { useDSLDragDrop } from './use-dsl-drag-drop'
+
+describe('useDSLDragDrop', () => {
+  let container: HTMLDivElement
+  let mockOnDSLFileDropped: jest.Mock
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    mockOnDSLFileDropped = jest.fn()
+  })
+
+  afterEach(() => {
+    document.body.removeChild(container)
+  })
+
+  // Helper to create drag events
+  const createDragEvent = (type: string, files: File[] = []) => {
+    const dataTransfer = {
+      types: files.length > 0 ? ['Files'] : [],
+      files,
+    }
+
+    const event = new Event(type, { bubbles: true, cancelable: true }) as DragEvent
+    Object.defineProperty(event, 'dataTransfer', {
+      value: dataTransfer,
+      writable: false,
+    })
+    Object.defineProperty(event, 'preventDefault', {
+      value: jest.fn(),
+      writable: false,
+    })
+    Object.defineProperty(event, 'stopPropagation', {
+      value: jest.fn(),
+      writable: false,
+    })
+
+    return event
+  }
+
+  // Helper to create a mock file
+  const createMockFile = (name: string) => {
+    return new File(['content'], name, { type: 'application/x-yaml' })
+  }
+
+  describe('Basic functionality', () => {
+    it('should return dragging state', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should initialize with dragging as false', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      expect(result.current.dragging).toBe(false)
+    })
+  })
+
+  describe('Drag events', () => {
+    it('should set dragging to true on dragenter with files', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.yaml')
+      const event = createDragEvent('dragenter', [file])
+
+      act(() => {
+        container.dispatchEvent(event)
+      })
+
+      expect(result.current.dragging).toBe(true)
+    })
+
+    it('should not set dragging on dragenter without files', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const event = createDragEvent('dragenter', [])
+
+      act(() => {
+        container.dispatchEvent(event)
+      })
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should handle dragover event', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const event = createDragEvent('dragover')
+
+      act(() => {
+        container.dispatchEvent(event)
+      })
+
+      expect(event.preventDefault).toHaveBeenCalled()
+      expect(event.stopPropagation).toHaveBeenCalled()
+    })
+
+    it('should set dragging to false on dragleave when leaving container', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      // First, enter with files
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+      expect(result.current.dragging).toBe(true)
+
+      // Then leave with null relatedTarget (leaving container)
+      const leaveEvent = createDragEvent('dragleave')
+      Object.defineProperty(leaveEvent, 'relatedTarget', {
+        value: null,
+        writable: false,
+      })
+
+      act(() => {
+        container.dispatchEvent(leaveEvent)
+      })
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should not set dragging to false on dragleave when within container', () => {
+      const containerRef = { current: container }
+      const childElement = document.createElement('div')
+      container.appendChild(childElement)
+
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      // First, enter with files
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+      expect(result.current.dragging).toBe(true)
+
+      // Then leave but to a child element
+      const leaveEvent = createDragEvent('dragleave')
+      Object.defineProperty(leaveEvent, 'relatedTarget', {
+        value: childElement,
+        writable: false,
+      })
+
+      act(() => {
+        container.dispatchEvent(leaveEvent)
+      })
+
+      expect(result.current.dragging).toBe(true)
+
+      container.removeChild(childElement)
+    })
+  })
+
+  describe('Drop functionality', () => {
+    it('should call onDSLFileDropped for .yaml file', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.yaml')
+      const dropEvent = createDragEvent('drop', [file])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).toHaveBeenCalledWith(file)
+    })
+
+    it('should call onDSLFileDropped for .yml file', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.yml')
+      const dropEvent = createDragEvent('drop', [file])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).toHaveBeenCalledWith(file)
+    })
+
+    it('should call onDSLFileDropped for uppercase .YAML file', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.YAML')
+      const dropEvent = createDragEvent('drop', [file])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).toHaveBeenCalledWith(file)
+    })
+
+    it('should not call onDSLFileDropped for non-yaml file', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.json')
+      const dropEvent = createDragEvent('drop', [file])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).not.toHaveBeenCalled()
+    })
+
+    it('should set dragging to false on drop', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      // First, enter with files
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+      expect(result.current.dragging).toBe(true)
+
+      // Then drop
+      const dropEvent = createDragEvent('drop', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should handle drop with no dataTransfer', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const event = new Event('drop', { bubbles: true, cancelable: true }) as DragEvent
+      Object.defineProperty(event, 'dataTransfer', {
+        value: null,
+        writable: false,
+      })
+      Object.defineProperty(event, 'preventDefault', {
+        value: jest.fn(),
+        writable: false,
+      })
+      Object.defineProperty(event, 'stopPropagation', {
+        value: jest.fn(),
+        writable: false,
+      })
+
+      act(() => {
+        container.dispatchEvent(event)
+      })
+
+      expect(mockOnDSLFileDropped).not.toHaveBeenCalled()
+    })
+
+    it('should handle drop with empty files array', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const dropEvent = createDragEvent('drop', [])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).not.toHaveBeenCalled()
+    })
+
+    it('should only process the first file when multiple files are dropped', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file1 = createMockFile('test1.yaml')
+      const file2 = createMockFile('test2.yaml')
+      const dropEvent = createDragEvent('drop', [file1, file2])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).toHaveBeenCalledTimes(1)
+      expect(mockOnDSLFileDropped).toHaveBeenCalledWith(file1)
+    })
+  })
+
+  describe('Enabled prop', () => {
+    it('should not add event listeners when enabled is false', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+          enabled: false,
+        }),
+      )
+
+      const file = createMockFile('test.yaml')
+      const enterEvent = createDragEvent('dragenter', [file])
+
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should return dragging as false when enabled is false even if state is true', () => {
+      const containerRef = { current: container }
+      const { result, rerender } = renderHook(
+        ({ enabled }) =>
+          useDSLDragDrop({
+            onDSLFileDropped: mockOnDSLFileDropped,
+            containerRef,
+            enabled,
+          }),
+        { initialProps: { enabled: true } },
+      )
+
+      // Set dragging state
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+      expect(result.current.dragging).toBe(true)
+
+      // Disable the hook
+      rerender({ enabled: false })
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should default enabled to true', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+
+      expect(result.current.dragging).toBe(true)
+    })
+  })
+
+  describe('Cleanup', () => {
+    it('should remove event listeners on unmount', () => {
+      const containerRef = { current: container }
+      const removeEventListenerSpy = jest.spyOn(container, 'removeEventListener')
+
+      const { unmount } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      unmount()
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('dragenter', expect.any(Function))
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('dragover', expect.any(Function))
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('dragleave', expect.any(Function))
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('drop', expect.any(Function))
+
+      removeEventListenerSpy.mockRestore()
+    })
+  })
+
+  describe('Edge cases', () => {
+    it('should handle null containerRef', () => {
+      const containerRef = { current: null }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should handle containerRef changing to null', () => {
+      const containerRef = { current: container as HTMLDivElement | null }
+      const { result, rerender } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      containerRef.current = null
+      rerender()
+
+      expect(result.current.dragging).toBe(false)
+    })
+  })
+})