From 23f75a1185b2924249d53825b59014298a870f1b Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 15 Dec 2025 21:18:58 +0800
Subject: [PATCH] chore:  some tests for configuration components (#29653)

Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
---
 .../base/group-name/index.spec.tsx            | 21 +++++
 .../base/operation-btn/index.spec.tsx         | 76 +++++++++++++++++++
 .../base/var-highlight/index.spec.tsx         | 62 +++++++++++++++
 .../ctrl-btn-group/index.spec.tsx             | 48 ++++++++++++
 .../configuration/ctrl-btn-group/index.tsx    |  4 +-
 5 files changed, 209 insertions(+), 2 deletions(-)
 create mode 100644 web/app/components/app/configuration/base/group-name/index.spec.tsx
 create mode 100644 web/app/components/app/configuration/base/operation-btn/index.spec.tsx
 create mode 100644 web/app/components/app/configuration/base/var-highlight/index.spec.tsx
 create mode 100644 web/app/components/app/configuration/ctrl-btn-group/index.spec.tsx

diff --git a/web/app/components/app/configuration/base/group-name/index.spec.tsx b/web/app/components/app/configuration/base/group-name/index.spec.tsx
new file mode 100644
index 0000000000..ac504247f2
--- /dev/null
+++ b/web/app/components/app/configuration/base/group-name/index.spec.tsx
@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react'
+import GroupName from './index'
+
+describe('GroupName', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render name when provided', () => {
+      // Arrange
+      const title = 'Inputs'
+
+      // Act
+      render(<GroupName name={title} />)
+
+      // Assert
+      expect(screen.getByText(title)).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/base/operation-btn/index.spec.tsx b/web/app/components/app/configuration/base/operation-btn/index.spec.tsx
new file mode 100644
index 0000000000..b504bdcfe7
--- /dev/null
+++ b/web/app/components/app/configuration/base/operation-btn/index.spec.tsx
@@ -0,0 +1,76 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import OperationBtn from './index'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+jest.mock('@remixicon/react', () => ({
+  RiAddLine: (props: { className?: string }) => (
+    <svg data-testid='add-icon' className={props.className} />
+  ),
+  RiEditLine: (props: { className?: string }) => (
+    <svg data-testid='edit-icon' className={props.className} />
+  ),
+}))
+
+describe('OperationBtn', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering icons and translation labels
+  describe('Rendering', () => {
+    it('should render passed custom class when provided', () => {
+      // Arrange
+      const customClass = 'custom-class'
+
+      // Act
+      render(<OperationBtn type='add' className={customClass} />)
+
+      // Assert
+      expect(screen.getByText('common.operation.add').parentElement).toHaveClass(customClass)
+    })
+    it('should render add icon when type is add', () => {
+      // Arrange
+      const onClick = jest.fn()
+
+      // Act
+      render(<OperationBtn type='add' onClick={onClick} className='custom-class' />)
+
+      // Assert
+      expect(screen.getByTestId('add-icon')).toBeInTheDocument()
+      expect(screen.getByText('common.operation.add')).toBeInTheDocument()
+    })
+
+    it('should render edit icon when provided', () => {
+      // Arrange
+      const actionName = 'Rename'
+
+      // Act
+      render(<OperationBtn type='edit' actionName={actionName} />)
+
+      // Assert
+      expect(screen.getByTestId('edit-icon')).toBeInTheDocument()
+      expect(screen.queryByTestId('add-icon')).toBeNull()
+      expect(screen.getByText(actionName)).toBeInTheDocument()
+    })
+  })
+
+  // Click handling
+  describe('Interactions', () => {
+    it('should execute click handler when button is clicked', () => {
+      // Arrange
+      const onClick = jest.fn()
+      render(<OperationBtn type='add' onClick={onClick} />)
+
+      // Act
+      fireEvent.click(screen.getByText('common.operation.add'))
+
+      // Assert
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/base/var-highlight/index.spec.tsx b/web/app/components/app/configuration/base/var-highlight/index.spec.tsx
new file mode 100644
index 0000000000..9e84aa09ac
--- /dev/null
+++ b/web/app/components/app/configuration/base/var-highlight/index.spec.tsx
@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react'
+import VarHighlight, { varHighlightHTML } from './index'
+
+describe('VarHighlight', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering highlighted variable tags
+  describe('Rendering', () => {
+    it('should render braces around the variable name with default styles', () => {
+      // Arrange
+      const props = { name: 'userInput' }
+
+      // Act
+      const { container } = render(<VarHighlight {...props} />)
+
+      // Assert
+      expect(screen.getByText('userInput')).toBeInTheDocument()
+      expect(screen.getAllByText('{{')[0]).toBeInTheDocument()
+      expect(screen.getAllByText('}}')[0]).toBeInTheDocument()
+      expect(container.firstChild).toHaveClass('item')
+    })
+
+    it('should apply custom class names when provided', () => {
+      // Arrange
+      const props = { name: 'custom', className: 'mt-2' }
+
+      // Act
+      const { container } = render(<VarHighlight {...props} />)
+
+      // Assert
+      expect(container.firstChild).toHaveClass('mt-2')
+    })
+  })
+
+  // Escaping HTML via helper
+  describe('varHighlightHTML', () => {
+    it('should escape dangerous characters before returning HTML string', () => {
+      // Arrange
+      const props = { name: '<script>alert(\'xss\')</script>' }
+
+      // Act
+      const html = varHighlightHTML(props)
+
+      // Assert
+      expect(html).toContain('&lt;script&gt;alert(&#39;xss&#39;)&lt;/script&gt;')
+      expect(html).not.toContain('<script>')
+    })
+
+    it('should include custom class names in the wrapper element', () => {
+      // Arrange
+      const props = { name: 'data', className: 'text-primary' }
+
+      // Act
+      const html = varHighlightHTML(props)
+
+      // Assert
+      expect(html).toContain('class="item text-primary')
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/ctrl-btn-group/index.spec.tsx b/web/app/components/app/configuration/ctrl-btn-group/index.spec.tsx
new file mode 100644
index 0000000000..89a99d2bfe
--- /dev/null
+++ b/web/app/components/app/configuration/ctrl-btn-group/index.spec.tsx
@@ -0,0 +1,48 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import ContrlBtnGroup from './index'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+describe('ContrlBtnGroup', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering fixed action buttons
+  describe('Rendering', () => {
+    it('should render buttons when rendered', () => {
+      // Arrange
+      const onSave = jest.fn()
+      const onReset = jest.fn()
+
+      // Act
+      render(<ContrlBtnGroup onSave={onSave} onReset={onReset} />)
+
+      // Assert
+      expect(screen.getByTestId('apply-btn')).toBeInTheDocument()
+      expect(screen.getByTestId('reset-btn')).toBeInTheDocument()
+    })
+  })
+
+  // Handling click interactions
+  describe('Interactions', () => {
+    it('should invoke callbacks when buttons are clicked', () => {
+      // Arrange
+      const onSave = jest.fn()
+      const onReset = jest.fn()
+      render(<ContrlBtnGroup onSave={onSave} onReset={onReset} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('apply-btn'))
+      fireEvent.click(screen.getByTestId('reset-btn'))
+
+      // Assert
+      expect(onSave).toHaveBeenCalledTimes(1)
+      expect(onReset).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/ctrl-btn-group/index.tsx b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
index e126e12164..69915acc7b 100644
--- a/web/app/components/app/configuration/ctrl-btn-group/index.tsx
+++ b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
@@ -15,8 +15,8 @@ const ContrlBtnGroup: FC<IContrlBtnGroupProps> = ({ onSave, onReset }) => {
   return (
     <div className="fixed bottom-0 left-[224px] h-[64px] w-[519px]">
       <div className={`${s.ctrlBtn} flex h-full items-center gap-2  bg-white pl-4`}>
-        <Button variant='primary' onClick={onSave}>{t('appDebug.operation.applyConfig')}</Button>
-        <Button onClick={onReset}>{t('appDebug.operation.resetConfig')}</Button>
+        <Button variant='primary' onClick={onSave} data-testid="apply-btn">{t('appDebug.operation.applyConfig')}</Button>
+        <Button onClick={onReset} data-testid="reset-btn">{t('appDebug.operation.resetConfig')}</Button>
       </div>
     </div>
   )