chore: fix faild tests

web/app/components/app/configuration/config-var/index.spec.tsx

@@ -63,6 +63,9 @@ type DebugConfigurationState = any
 const defaultDebugConfigValue: DebugConfigurationState = {
   mode: AppModeEnum.CHAT,
   dataSets: [],
+  modelConfig: {
+    model_id: 'test-model',
+  },
 }
 
 const createDebugConfigValue = (overrides: Partial<DebugConfigurationState> = {}): DebugConfigurationState => ({
@@ -101,8 +104,9 @@ const renderConfigVar = (props: Partial<IConfigVarProps> = {}, debugOverrides: P
   )
 }
 
-// Rendering behavior for empty and populated states.
-describe('ConfigVar Rendering', () => {
+describe('ConfigVar', () => {
+  // Rendering behavior for empty and populated states.
+  describe('ConfigVar Rendering', () => {
     beforeEach(() => {
       vi.clearAllMocks()
       latestSortableProps = null
@@ -139,10 +143,10 @@ describe('ConfigVar Rendering', () => {
 
       expect(onPromptVariablesChange).toHaveBeenCalledWith([secondVar, firstVar])
     })
-})
+  })
 
-// Variable creation flows using the add menu.
-describe('ConfigVar Add Variable', () => {
+  // Variable creation flows using the add menu.
+  describe('ConfigVar Add Variable', () => {
     beforeEach(() => {
       vi.clearAllMocks()
       latestSortableProps = null
@@ -183,10 +187,10 @@ describe('ConfigVar Add Variable', () => {
 
       expect(onPromptVariablesChange).toHaveBeenLastCalledWith([])
     })
-})
+  })
 
-// Editing flows for variables through the modal.
-describe('ConfigVar Edit Variable', () => {
+  // Editing flows for variables through the modal.
+  describe('ConfigVar Edit Variable', () => {
     beforeEach(() => {
       vi.clearAllMocks()
       latestSortableProps = null
@@ -205,7 +209,9 @@ describe('ConfigVar Edit Variable', () => {
       })
 
       const item = screen.getByTitle('name · Name')
-    const actionButtons = item.querySelectorAll('div.h-6.w-6')
+      const itemContainer = item.closest('div.group')
+      expect(itemContainer).not.toBeNull()
+      const actionButtons = itemContainer!.querySelectorAll('div.h-6.w-6')
       expect(actionButtons).toHaveLength(2)
       fireEvent.click(actionButtons[0])
 
@@ -226,7 +232,9 @@ describe('ConfigVar Edit Variable', () => {
       })
 
       const item = screen.getByTitle('first · First')
-    const actionButtons = item.querySelectorAll('div.h-6.w-6')
+      const itemContainer = item.closest('div.group')
+      expect(itemContainer).not.toBeNull()
+      const actionButtons = itemContainer!.querySelectorAll('div.h-6.w-6')
       expect(actionButtons).toHaveLength(2)
       fireEvent.click(actionButtons[0])
 
@@ -250,7 +258,9 @@ describe('ConfigVar Edit Variable', () => {
       })
 
       const item = screen.getByTitle('first · First')
-    const actionButtons = item.querySelectorAll('div.h-6.w-6')
+      const itemContainer = item.closest('div.group')
+      expect(itemContainer).not.toBeNull()
+      const actionButtons = itemContainer!.querySelectorAll('div.h-6.w-6')
       expect(actionButtons).toHaveLength(2)
       fireEvent.click(actionButtons[0])
 
@@ -262,10 +272,10 @@ describe('ConfigVar Edit Variable', () => {
       expect(Toast.notify).toHaveBeenCalled()
       expect(onPromptVariablesChange).not.toHaveBeenCalled()
     })
-})
+  })
 
-// Removal behavior including confirm modal branch.
-describe('ConfigVar Remove Variable', () => {
+  // Removal behavior including confirm modal branch.
+  describe('ConfigVar Remove Variable', () => {
     beforeEach(() => {
       vi.clearAllMocks()
       latestSortableProps = null
@@ -283,10 +293,8 @@ describe('ConfigVar Remove Variable', () => {
         onPromptVariablesChange,
       })
 
-    const item = screen.getByTitle('name · Name')
-    const actionButtons = item.querySelectorAll('div.h-6.w-6')
-    expect(actionButtons).toHaveLength(2)
-    fireEvent.click(actionButtons[1])
+      const removeBtn = screen.getByTestId('var-item-delete-btn')
+      fireEvent.click(removeBtn)
 
       expect(onPromptVariablesChange).toHaveBeenCalledWith([])
     })
@@ -310,21 +318,17 @@ describe('ConfigVar Remove Variable', () => {
         },
       )
 
-    const item = screen.getByTitle('context · Context')
-    const actionButtons = item.querySelectorAll('div.h-6.w-6')
-    expect(actionButtons).toHaveLength(2)
-    fireEvent.click(actionButtons[1])
-
-    expect(screen.getByText('appDebug.feature.dataSet.queryVariable.deleteContextVarTitle')).toBeInTheDocument()
-
+      const deleteBtn = screen.getByTestId('var-item-delete-btn')
+      fireEvent.click(deleteBtn)
+      // confirmation modal should show up
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
 
       expect(onPromptVariablesChange).toHaveBeenCalledWith([])
     })
-})
+  })
 
-// Event subscription support for external data tools.
-describe('ConfigVar External Data Tool Events', () => {
+  // Event subscription support for external data tools.
+  describe('ConfigVar External Data Tool Events', () => {
     beforeEach(() => {
       vi.clearAllMocks()
       latestSortableProps = null
@@ -364,4 +368,5 @@ describe('ConfigVar External Data Tool Events', () => {
         }),
       ])
     })
+  })
 })

web/app/components/app/configuration/config-var/var-item.tsx

@@ -65,6 +65,7 @@ const VarItem: FC<ItemProps> = ({
             <RiEditLine className="h-4 w-4 text-text-tertiary" />
           </div>
           <div
+            data-testid="var-item-delete-btn"
             className="flex h-6 w-6 cursor-pointer items-center  justify-center text-text-tertiary hover:text-text-destructive"
             onClick={onRemove}
             onMouseOver={() => setIsDeleting(true)}