chore: add unit test to high frequency component (#17423)

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 }),
+    )
+  })
+})

web/app/components/base/icons/utils.spec.ts

@@ -0,0 +1,70 @@
+import type { AbstractNode } from './utils'
+import { generate, normalizeAttrs } from './utils'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+describe('generate icon base utils', () => {
+  describe('normalizeAttrs', () => {
+    it('should normalize class to className', () => {
+      const attrs = { class: 'test-class' }
+      const result = normalizeAttrs(attrs)
+      expect(result).toEqual({ className: 'test-class' })
+    })
+
+    it('should normalize style string to style object', () => {
+      const attrs = { style: 'color:red;font-size:14px;' }
+      const result = normalizeAttrs(attrs)
+      expect(result).toEqual({ style: { color: 'red', fontSize: '14px' } })
+    })
+
+    it('should handle attributes with dashes and colons', () => {
+      const attrs = { 'data-test': 'value', 'xlink:href': 'url' }
+      const result = normalizeAttrs(attrs)
+      expect(result).toEqual({ dataTest: 'value', xlinkHref: 'url' })
+    })
+  })
+
+  describe('generate', () => {
+    it('should generate React elements from AbstractNode', () => {
+      const node: AbstractNode = {
+        name: 'div',
+        attributes: { class: 'container' },
+        children: [
+          {
+            name: 'span',
+            attributes: { style: 'color:blue;' },
+            children: [],
+          },
+        ],
+      }
+
+      const { container } = render(generate(node, 'key'))
+      // to svg element
+      expect(container.firstChild).toHaveClass('container')
+      expect(container.querySelector('span')).toHaveStyle({ color: 'blue' })
+    })
+
+    // add not has children
+    it('should generate React elements without children', () => {
+      const node: AbstractNode = {
+        name: 'div',
+        attributes: { class: 'container' },
+      }
+      const { container } = render(generate(node, 'key'))
+      // to svg element
+      expect(container.firstChild).toHaveClass('container')
+    })
+
+    it('should merge rootProps when provided', () => {
+      const node: AbstractNode = {
+        name: 'div',
+        attributes: { class: 'container' },
+        children: [],
+      }
+
+      const rootProps = { id: 'root' }
+      const { container } = render(generate(node, 'key', rootProps))
+      expect(container.querySelector('div')).toHaveAttribute('id', 'root')
+    })
+  })
+})