test: add unit tests for some base components (#32201)

web/app/components/base/node-status/index.spec.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react'
+import NodeStatus, { NodeStatusEnum } from '.'
+
+describe('NodeStatus', () => {
+  it('renders with default status (warning) and default message', () => {
+    const { container } = render(<NodeStatus />)
+
+    expect(screen.getByText('Warning')).toBeInTheDocument()
+    // Default warning class
+    expect(container.firstChild).toHaveClass('bg-state-warning-hover')
+    expect(container.firstChild).toHaveClass('text-text-warning')
+  })
+
+  it('renders with error status and default message', () => {
+    const { container } = render(<NodeStatus status={NodeStatusEnum.error} />)
+
+    expect(screen.getByText('Error')).toBeInTheDocument()
+    expect(container.firstChild).toHaveClass('bg-state-destructive-hover')
+    expect(container.firstChild).toHaveClass('text-text-destructive')
+  })
+
+  it('renders with custom message', () => {
+    render(<NodeStatus message="Custom Message" />)
+    expect(screen.getByText('Custom Message')).toBeInTheDocument()
+  })
+
+  it('renders children correctly', () => {
+    render(
+      <NodeStatus>
+        <span data-testid="child">Child Element</span>
+      </NodeStatus>,
+    )
+    expect(screen.getByTestId('child')).toBeInTheDocument()
+    expect(screen.getByText('Child Element')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<NodeStatus className="custom-test-class" />)
+    expect(container.firstChild).toHaveClass('custom-test-class')
+  })
+
+  it('applies styleCss correctly', () => {
+    const { container } = render(<NodeStatus styleCss={{ color: 'red' }} />)
+    expect(container.firstChild).toHaveStyle({ color: 'rgb(255, 0, 0)' })
+  })
+
+  it('applies iconClassName to the icon', () => {
+    const { container } = render(<NodeStatus iconClassName="custom-icon-class" />)
+    // The icon is the first child of the div
+    const icon = container.querySelector('.custom-icon-class')
+    expect(icon).toBeInTheDocument()
+    expect(icon).toHaveClass('h-3.5')
+    expect(icon).toHaveClass('w-3.5')
+  })
+
+  it('passes additional HTML attributes to the container', () => {
+    render(<NodeStatus data-testid="node-status-container" id="my-id" />)
+    const container = screen.getByTestId('node-status-container')
+    expect(container).toHaveAttribute('id', 'my-id')
+  })
+})