dify

dify/web/app/components/base/icons/IconBase.spec.tsx

@@ -0,0 +1,67 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import React from 'react'
+import type { IconData } from './IconBase'
+import IconBase from './IconBase'
+import * as utils from './utils'
+
+// Mock the utils module
+jest.mock('./utils', () => ({
+  generate: jest.fn((icon, key, props) => (
+    <svg
+      data-testid="mock-svg"
+      key={key}
+      {...props}
+    >
+      mocked svg content
+    </svg>
+  )),
+}))
+
+describe('IconBase Component', () => {
+  const mockData: IconData = {
+    name: 'test-icon',
+    icon: { name: 'svg', attributes: {}, children: [] },
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders properly with required props', () => {
+    render(<IconBase data={mockData} />)
+    const svg = screen.getByTestId('mock-svg')
+    expect(svg).toBeInTheDocument()
+    expect(svg).toHaveAttribute('data-icon', mockData.name)
+    expect(svg).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('passes className to the generated SVG', () => {
+    render(<IconBase data={mockData} className="custom-class" />)
+    const svg = screen.getByTestId('mock-svg')
+    expect(svg).toHaveAttribute('class', 'custom-class')
+    expect(utils.generate).toHaveBeenCalledWith(
+      mockData.icon,
+      'svg-test-icon',
+      expect.objectContaining({ className: 'custom-class' }),
+    )
+  })
+
+  it('handles onClick events', () => {
+    const handleClick = jest.fn()
+    render(<IconBase data={mockData} onClick={handleClick} />)
+    const svg = screen.getByTestId('mock-svg')
+    fireEvent.click(svg)
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('applies custom styles', () => {
+    const customStyle = { color: 'red', fontSize: '24px' }
+    render(<IconBase data={mockData} style={customStyle} />)
+    expect(utils.generate).toHaveBeenCalledWith(
+      mockData.icon,
+      'svg-test-icon',
+      expect.objectContaining({ style: customStyle }),
+    )
+  })
+})