chore: some billing test (#29648)

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Coding On Star <447357187@qq.com>

web/app/components/billing/pricing/plans/cloud-plan-item/list/item/index.spec.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react'
+import Item from './index'
+
+describe('Item', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering the plan item row
+  describe('Rendering', () => {
+    it('should render the provided label when tooltip is absent', () => {
+      // Arrange
+      const label = 'Monthly credits'
+
+      // Act
+      const { container } = render(<Item label={label} />)
+
+      // Assert
+      expect(screen.getByText(label)).toBeInTheDocument()
+      expect(container.querySelector('.group')).toBeNull()
+    })
+  })
+
+  // Toggling the optional tooltip indicator
+  describe('Tooltip behavior', () => {
+    it('should render tooltip content when tooltip text is provided', () => {
+      // Arrange
+      const label = 'Workspace seats'
+      const tooltip = 'Seats define how many teammates can join the workspace.'
+
+      // Act
+      const { container } = render(<Item label={label} tooltip={tooltip} />)
+
+      // Assert
+      expect(screen.getByText(label)).toBeInTheDocument()
+      expect(screen.getByText(tooltip)).toBeInTheDocument()
+      expect(container.querySelector('.group')).not.toBeNull()
+    })
+
+    it('should treat an empty tooltip string as absent', () => {
+      // Arrange
+      const label = 'Vector storage'
+
+      // Act
+      const { container } = render(<Item label={label} tooltip='' />)
+
+      // Assert
+      expect(screen.getByText(label)).toBeInTheDocument()
+      expect(container.querySelector('.group')).toBeNull()
+    })
+  })
+})

web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.spec.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react'
+import Tooltip from './tooltip'
+
+describe('Tooltip', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering the info tooltip container
+  describe('Rendering', () => {
+    it('should render the content panel when provide with text', () => {
+      // Arrange
+      const content = 'Usage resets on the first day of every month.'
+
+      // Act
+      render(<Tooltip content={content} />)
+
+      // Assert
+      expect(() => screen.getByText(content)).not.toThrow()
+    })
+  })
+
+  describe('Icon rendering', () => {
+    it('should render the icon when provided with content', () => {
+      // Arrange
+      const content = 'Tooltips explain each plan detail.'
+
+      // Act
+      render(<Tooltip content={content} />)
+
+      // Assert
+      expect(screen.getByTestId('tooltip-icon')).toBeInTheDocument()
+    })
+  })
+
+  // Handling empty strings while keeping structure consistent
+  describe('Edge cases', () => {
+    it('should render without crashing when passed empty content', () => {
+      // Arrange
+      const content = ''
+
+      // Act and Assert
+      expect(() => render(<Tooltip content={content} />)).not.toThrow()
+    })
+  })
+})

web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx

@@ -8,13 +8,15 @@ type TooltipProps = {
 const Tooltip = ({
   content,
 }: TooltipProps) => {
+  if (!content)
+    return null
   return (
     <div className='group relative z-10 size-[18px] overflow-visible'>
       <div className='system-xs-regular absolute bottom-0 right-0 -z-10 hidden w-[260px] bg-saas-dify-blue-static px-5 py-[18px] text-text-primary-on-surface group-hover:block'>
         {content}
       </div>
       <div className='flex h-full w-full items-center justify-center rounded-[4px] bg-state-base-hover transition-all duration-500 ease-in-out group-hover:rounded-none group-hover:bg-saas-dify-blue-static'>
-        <RiInfoI className='size-3.5 text-text-tertiary group-hover:text-text-primary-on-surface' />
+        <RiInfoI className='size-3.5 text-text-tertiary group-hover:text-text-primary-on-surface' data-testid="tooltip-icon" />
       </div>
     </div>
   )