test: add integration tests for app card operations, list browsing, and create app flows (#32298)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>

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

@@ -1,16 +1,8 @@
 import type { UrlUpdateEvent } from 'nuqs/adapters/testing'
 import type { ReactNode } from 'react'
-/**
- * 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
- */
 import { act, renderHook, waitFor } from '@testing-library/react'
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing'
-import useAppsQueryState from './use-apps-query-state'
+import useAppsQueryState from '../use-apps-query-state'
 
 const renderWithAdapter = (searchParams = '') => {
   const onUrlUpdate = vi.fn<(event: UrlUpdateEvent) => void>()
@@ -23,13 +15,11 @@ const renderWithAdapter = (searchParams = '') => {
   return { result, onUrlUpdate }
 }
 
-// Groups scenarios for useAppsQueryState behavior.
 describe('useAppsQueryState', () => {
   beforeEach(() => {
     vi.clearAllMocks()
   })
 
-  // Covers the hook return shape and default values.
   describe('Initialization', () => {
     it('should expose query and setQuery when initialized', () => {
       const { result } = renderWithAdapter()
@@ -47,7 +37,6 @@ describe('useAppsQueryState', () => {
     })
   })
 
-  // Covers parsing of existing URL search params.
   describe('Parsing search params', () => {
     it('should parse tagIDs when URL includes tagIDs', () => {
       const { result } = renderWithAdapter('?tagIDs=tag1;tag2;tag3')
@@ -78,7 +67,6 @@ describe('useAppsQueryState', () => {
     })
   })
 
-  // Covers updates driven by setQuery.
   describe('Updating query state', () => {
     it('should update keywords when setQuery receives keywords', () => {
       const { result } = renderWithAdapter()
@@ -126,7 +114,6 @@ describe('useAppsQueryState', () => {
     })
   })
 
-  // Covers URL updates triggered by query changes.
   describe('URL synchronization', () => {
     it('should sync keywords to URL when keywords change', async () => {
       const { result, onUrlUpdate } = renderWithAdapter()
@@ -202,7 +189,6 @@ describe('useAppsQueryState', () => {
     })
   })
 
-  // Covers decoding and empty values.
   describe('Edge cases', () => {
     it('should treat empty tagIDs as empty list when URL param is empty', () => {
       const { result } = renderWithAdapter('?tagIDs=')
@@ -223,7 +209,6 @@ describe('useAppsQueryState', () => {
     })
   })
 
-  // Covers multi-step updates that mimic real usage.
   describe('Integration scenarios', () => {
     it('should keep accumulated filters when updates are sequential', () => {
       const { result } = renderWithAdapter()

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

@@ -1,15 +1,6 @@
-/**
- * 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 type { Mock } from 'vitest'
 import { act, renderHook } from '@testing-library/react'
-import { useDSLDragDrop } from './use-dsl-drag-drop'
+import { useDSLDragDrop } from '../use-dsl-drag-drop'
 
 describe('useDSLDragDrop', () => {
   let container: HTMLDivElement
@@ -26,7 +17,6 @@ describe('useDSLDragDrop', () => {
     document.body.removeChild(container)
   })
 
-  // Helper to create drag events
   const createDragEvent = (type: string, files: File[] = []) => {
     const dataTransfer = {
       types: files.length > 0 ? ['Files'] : [],
@@ -50,7 +40,6 @@ describe('useDSLDragDrop', () => {
     return event
   }
 
-  // Helper to create a mock file
   const createMockFile = (name: string) => {
     return new File(['content'], name, { type: 'application/x-yaml' })
   }
@@ -147,14 +136,12 @@ describe('useDSLDragDrop', () => {
         }),
       )
 
-      // 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,
@@ -180,14 +167,12 @@ describe('useDSLDragDrop', () => {
         }),
       )
 
-      // 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,
@@ -290,14 +275,12 @@ describe('useDSLDragDrop', () => {
         }),
       )
 
-      // 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)
@@ -409,14 +392,12 @@ describe('useDSLDragDrop', () => {
         { 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)
     })