fix(tests): update button role queries to use regex for better matching

This commit modifies the test files for the CreateAppModal component to replace exact string matches with regular expressions for button role queries. This change enhances the robustness of the tests by allowing for more flexible matching of button names, ensuring they remain valid even if the text changes slightly in the future. Additionally, type assertions were improved in the CreateAppModal tests to enhance type safety.

web/app/components/app/create-app-modal/index.spec.tsx

@@ -1,3 +1,4 @@
+import type { App } from '@/types/app'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { useRouter } from 'next/navigation'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -13,8 +14,8 @@ import { getRedirection } from '@/utils/app-redirection'
 import CreateAppModal from './index'
 
 vi.mock('ahooks', () => ({
-  useDebounceFn: (fn: (...args: any[]) => any) => {
-    const run = (...args: any[]) => fn(...args)
+  useDebounceFn: <T extends (...args: unknown[]) => unknown>(fn: T) => {
+    const run = (...args: Parameters<T>) => fn(...args)
     const cancel = vi.fn()
     const flush = vi.fn()
     return { run, cancel, flush }
@@ -83,7 +84,7 @@ describe('CreateAppModal', () => {
 
   beforeEach(() => {
     vi.clearAllMocks()
-    mockUseRouter.mockReturnValue({ push: mockPush } as any)
+    mockUseRouter.mockReturnValue({ push: mockPush } as unknown as ReturnType<typeof useRouter>)
     mockUseProviderContext.mockReturnValue({
       plan: {
         type: AppModeEnum.ADVANCED_CHAT,
@@ -92,10 +93,10 @@ describe('CreateAppModal', () => {
         reset: {},
       },
       enableBilling: true,
-    } as any)
+    } as unknown as ReturnType<typeof useProviderContext>)
     mockUseAppContext.mockReturnValue({
       isCurrentWorkspaceEditor: true,
-    } as any)
+    } as unknown as ReturnType<typeof useAppContext>)
     mockSetItem.mockClear()
     Object.defineProperty(window, 'localStorage', {
       value: {
@@ -118,13 +119,13 @@ describe('CreateAppModal', () => {
   })
 
   it('creates an app, notifies success, and fires callbacks', async () => {
-    const mockApp = { id: 'app-1', mode: AppModeEnum.ADVANCED_CHAT }
-    mockCreateApp.mockResolvedValue(mockApp as any)
+    const mockApp: Partial<App> = { id: 'app-1', mode: AppModeEnum.ADVANCED_CHAT }
+    mockCreateApp.mockResolvedValue(mockApp as App)
     const { onClose, onSuccess } = renderModal()
 
     const nameInput = screen.getByPlaceholderText('app.newApp.appNamePlaceholder')
     fireEvent.change(nameInput, { target: { value: 'My App' } })
-    fireEvent.click(screen.getByRole('button', { name: 'app.newApp.Create' }))
+    fireEvent.click(screen.getByRole('button', { name: /app\.newApp\.Create/ }))
 
     await waitFor(() => expect(mockCreateApp).toHaveBeenCalledWith({
       name: 'My App',
@@ -152,7 +153,7 @@ describe('CreateAppModal', () => {
 
     const nameInput = screen.getByPlaceholderText('app.newApp.appNamePlaceholder')
     fireEvent.change(nameInput, { target: { value: 'My App' } })
-    fireEvent.click(screen.getByRole('button', { name: 'app.newApp.Create' }))
+    fireEvent.click(screen.getByRole('button', { name: /app\.newApp\.Create/ }))
 
     await waitFor(() => expect(mockCreateApp).toHaveBeenCalled())
     expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: 'boom' })

web/app/components/explore/create-app-modal/index.spec.tsx

@@ -138,15 +138,15 @@ describe('CreateAppModal', () => {
       setup({ appName: 'My App', isEditModal: false })
 
       expect(screen.getByText('explore.appCustomize.title:{"name":"My App"}')).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'common.operation.create' })).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'common.operation.cancel' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /common\.operation\.create/ })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /common\.operation\.cancel/ })).toBeInTheDocument()
     })
 
     it('should render edit-only fields when editing a chat app', () => {
       setup({ isEditModal: true, appMode: AppModeEnum.CHAT, max_active_requests: 5 })
 
       expect(screen.getByText('app.editAppTitle')).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /common\.operation\.save/ })).toBeInTheDocument()
       expect(screen.getByRole('switch')).toBeInTheDocument()
       expect((screen.getByRole('spinbutton') as HTMLInputElement).value).toBe('5')
     })
@@ -166,7 +166,7 @@ describe('CreateAppModal', () => {
     it('should not render modal content when hidden', () => {
       setup({ show: false })
 
-      expect(screen.queryByRole('button', { name: 'common.operation.create' })).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: /common\.operation\.create/ })).not.toBeInTheDocument()
     })
   })
 
@@ -175,13 +175,13 @@ describe('CreateAppModal', () => {
     it('should disable confirm action when confirmDisabled is true', () => {
       setup({ confirmDisabled: true })
 
-      expect(screen.getByRole('button', { name: 'common.operation.create' })).toBeDisabled()
+      expect(screen.getByRole('button', { name: /common\.operation\.create/ })).toBeDisabled()
     })
 
     it('should disable confirm action when appName is empty', () => {
       setup({ appName: '   ' })
 
-      expect(screen.getByRole('button', { name: 'common.operation.create' })).toBeDisabled()
+      expect(screen.getByRole('button', { name: /common\.operation\.create/ })).toBeDisabled()
     })
   })
 
@@ -245,7 +245,7 @@ describe('CreateAppModal', () => {
       setup({ isEditModal: false })
 
       expect(screen.getByText('billing.apps.fullTip2')).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'common.operation.create' })).toBeDisabled()
+      expect(screen.getByRole('button', { name: /common\.operation\.create/ })).toBeDisabled()
     })
 
     it('should allow saving when apps quota is reached in edit mode', () => {
@@ -257,7 +257,7 @@ describe('CreateAppModal', () => {
       setup({ isEditModal: true })
 
       expect(screen.queryByText('billing.apps.fullTip2')).not.toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeEnabled()
+      expect(screen.getByRole('button', { name: /common\.operation\.save/ })).toBeEnabled()
     })
   })
 
@@ -384,7 +384,7 @@ describe('CreateAppModal', () => {
 
         fireEvent.click(screen.getByRole('button', { name: 'app.iconPicker.ok' }))
 
-        fireEvent.click(screen.getByRole('button', { name: 'common.operation.create' }))
+        fireEvent.click(screen.getByRole('button', { name: /common\.operation\.create/ }))
         act(() => {
           vi.advanceTimersByTime(300)
         })
@@ -433,7 +433,7 @@ describe('CreateAppModal', () => {
         expect(screen.queryByRole('button', { name: 'app.iconPicker.cancel' })).not.toBeInTheDocument()
 
         // Submit and verify the payload uses the original icon (cancel reverts to props)
-        fireEvent.click(screen.getByRole('button', { name: 'common.operation.create' }))
+        fireEvent.click(screen.getByRole('button', { name: /common\.operation\.create/ }))
         act(() => {
           vi.advanceTimersByTime(300)
         })
@@ -471,7 +471,7 @@ describe('CreateAppModal', () => {
         appIconBackground: '#000000',
       })
 
-      fireEvent.click(screen.getByRole('button', { name: 'common.operation.create' }))
+      fireEvent.click(screen.getByRole('button', { name: /common\.operation\.create/ }))
       act(() => {
         vi.advanceTimersByTime(300)
       })
@@ -495,7 +495,7 @@ describe('CreateAppModal', () => {
       const { onConfirm } = setup({ appDescription: 'Old description' })
 
       fireEvent.change(screen.getByPlaceholderText('app.newApp.appDescriptionPlaceholder'), { target: { value: 'Updated description' } })
-      fireEvent.click(screen.getByRole('button', { name: 'common.operation.create' }))
+      fireEvent.click(screen.getByRole('button', { name: /common\.operation\.create/ }))
       act(() => {
         vi.advanceTimersByTime(300)
       })
@@ -512,7 +512,7 @@ describe('CreateAppModal', () => {
         appIconBackground: null,
       })
 
-      fireEvent.click(screen.getByRole('button', { name: 'common.operation.create' }))
+      fireEvent.click(screen.getByRole('button', { name: /common\.operation\.create/ }))
       act(() => {
         vi.advanceTimersByTime(300)
       })
@@ -536,7 +536,7 @@ describe('CreateAppModal', () => {
       fireEvent.click(screen.getByRole('switch'))
       fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '12' } })
 
-      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+      fireEvent.click(screen.getByRole('button', { name: /common\.operation\.save/ }))
       act(() => {
         vi.advanceTimersByTime(300)
       })
@@ -551,7 +551,7 @@ describe('CreateAppModal', () => {
     it('should omit max_active_requests when input is empty', () => {
       const { onConfirm } = setup({ isEditModal: true, max_active_requests: null })
 
-      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+      fireEvent.click(screen.getByRole('button', { name: /common\.operation\.save/ }))
       act(() => {
         vi.advanceTimersByTime(300)
       })
@@ -564,7 +564,7 @@ describe('CreateAppModal', () => {
       const { onConfirm } = setup({ isEditModal: true, max_active_requests: null })
 
       fireEvent.change(screen.getByRole('spinbutton'), { target: { value: 'abc' } })
-      fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+      fireEvent.click(screen.getByRole('button', { name: /common\.operation\.save/ }))
       act(() => {
         vi.advanceTimersByTime(300)
       })
@@ -576,7 +576,7 @@ describe('CreateAppModal', () => {
     it('should show toast error and not submit when name becomes empty before debounced submit runs', () => {
       const { onConfirm, onHide } = setup({ appName: 'My App' })
 
-      fireEvent.click(screen.getByRole('button', { name: 'common.operation.create' }))
+      fireEvent.click(screen.getByRole('button', { name: /common\.operation\.create/ }))
       fireEvent.change(screen.getByPlaceholderText('app.newApp.appNamePlaceholder'), { target: { value: '   ' } })
 
       act(() => {

web/app/components/goto-anything/index.spec.tsx

@@ -47,6 +47,10 @@ vi.mock('./context', () => ({
   GotoAnythingProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
 }))
 
+vi.mock('@/app/components/workflow/utils', () => ({
+  getKeyboardKeyNameBySystem: (key: string) => key,
+}))
+
 const createActionItem = (key: ActionItem['key'], shortcut: string): ActionItem => ({
   key,
   shortcut,

web/app/components/workflow-app/components/workflow-onboarding-modal/index.spec.tsx

@@ -11,7 +11,12 @@ vi.mock('@/app/components/base/modal', () => ({
     onClose,
     children,
     closable,
-  }: any) {
+  }: {
+    isShow: boolean
+    onClose?: () => void
+    children?: React.ReactNode
+    closable?: boolean
+  }) {
     if (!isShow)
       return null
 
@@ -39,7 +44,10 @@ vi.mock('./start-node-selection-panel', () => ({
   default: function MockStartNodeSelectionPanel({
     onSelectUserInput,
     onSelectTrigger,
-  }: any) {
+  }: {
+    onSelectUserInput?: () => void
+    onSelectTrigger?: (type: BlockEnum, config?: Record<string, unknown>) => void
+  }) {
     return (
       <div data-testid="start-node-selection-panel">
         <button data-testid="select-user-input" onClick={onSelectUserInput}>
@@ -47,13 +55,13 @@ vi.mock('./start-node-selection-panel', () => ({
         </button>
         <button
           data-testid="select-trigger-schedule"
-          onClick={() => onSelectTrigger(BlockEnum.TriggerSchedule)}
+          onClick={() => onSelectTrigger?.(BlockEnum.TriggerSchedule)}
         >
           Select Trigger Schedule
         </button>
         <button
           data-testid="select-trigger-webhook"
-          onClick={() => onSelectTrigger(BlockEnum.TriggerWebhook, { config: 'test' })}
+          onClick={() => onSelectTrigger?.(BlockEnum.TriggerWebhook, { config: 'test' })}
         >
           Select Trigger Webhook
         </button>
@@ -549,10 +557,10 @@ describe('WorkflowOnboardingModal', () => {
       // Arrange & Act
       renderComponent({ isShow: true })
 
-      // Assert
+      // Assert - ShortcutsName component renders keys in div elements with system-kbd class
       const escKey = screen.getByText('workflow.onboarding.escTip.key')
-      expect(escKey.closest('kbd')).toBeInTheDocument()
-      expect(escKey.closest('kbd')).toHaveClass('system-kbd')
+      expect(escKey).toBeInTheDocument()
+      expect(escKey).toHaveClass('system-kbd')
     })
 
     it('should have descriptive text for ESC functionality', () => {

web/eslint-suppressions.json

@@ -506,11 +506,6 @@
       "count": 1
     }
   },
-  "app/components/app/create-app-modal/index.spec.tsx": {
-    "ts/no-explicit-any": {
-      "count": 7
-    }
-  },
   "app/components/app/create-app-modal/index.tsx": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 1
@@ -2690,11 +2685,6 @@
       "count": 2
     }
   },
-  "app/components/workflow-app/components/workflow-onboarding-modal/index.spec.tsx": {
-    "ts/no-explicit-any": {
-      "count": 2
-    }
-  },
   "app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.spec.tsx": {
     "ts/no-explicit-any": {
       "count": 1