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/annotation-full/index.spec.tsx

@@ -0,0 +1,71 @@
+import { render, screen } from '@testing-library/react'
+import AnnotationFull from './index'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+let mockUsageProps: { className?: string } | null = null
+jest.mock('./usage', () => ({
+  __esModule: true,
+  default: (props: { className?: string }) => {
+    mockUsageProps = props
+    return (
+      <div data-testid='usage-component' data-classname={props.className ?? ''}>
+        usage
+      </div>
+    )
+  },
+}))
+
+let mockUpgradeBtnProps: { loc?: string } | null = null
+jest.mock('../upgrade-btn', () => ({
+  __esModule: true,
+  default: (props: { loc?: string }) => {
+    mockUpgradeBtnProps = props
+    return (
+      <button type='button' data-testid='upgrade-btn'>
+        {props.loc}
+      </button>
+    )
+  },
+}))
+
+describe('AnnotationFull', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUsageProps = null
+    mockUpgradeBtnProps = null
+  })
+
+  // Rendering marketing copy with action button
+  describe('Rendering', () => {
+    it('should render tips when rendered', () => {
+      // Act
+      render(<AnnotationFull />)
+
+      // Assert
+      expect(screen.getByText('billing.annotatedResponse.fullTipLine1')).toBeInTheDocument()
+      expect(screen.getByText('billing.annotatedResponse.fullTipLine2')).toBeInTheDocument()
+    })
+
+    it('should render upgrade button when rendered', () => {
+      // Act
+      render(<AnnotationFull />)
+
+      // Assert
+      expect(screen.getByTestId('upgrade-btn')).toBeInTheDocument()
+    })
+
+    it('should render Usage component when rendered', () => {
+      // Act
+      render(<AnnotationFull />)
+
+      // Assert
+      const usageComponent = screen.getByTestId('usage-component')
+      expect(usageComponent).toBeInTheDocument()
+    })
+  })
+})

web/app/components/billing/annotation-full/modal.spec.tsx

@@ -0,0 +1,119 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import AnnotationFullModal from './modal'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+let mockUsageProps: { className?: string } | null = null
+jest.mock('./usage', () => ({
+  __esModule: true,
+  default: (props: { className?: string }) => {
+    mockUsageProps = props
+    return (
+      <div data-testid='usage-component' data-classname={props.className ?? ''}>
+        usage
+      </div>
+    )
+  },
+}))
+
+let mockUpgradeBtnProps: { loc?: string } | null = null
+jest.mock('../upgrade-btn', () => ({
+  __esModule: true,
+  default: (props: { loc?: string }) => {
+    mockUpgradeBtnProps = props
+    return (
+      <button type='button' data-testid='upgrade-btn'>
+        {props.loc}
+      </button>
+    )
+  },
+}))
+
+type ModalSnapshot = {
+  isShow: boolean
+  closable?: boolean
+  className?: string
+}
+let mockModalProps: ModalSnapshot | null = null
+jest.mock('../../base/modal', () => ({
+  __esModule: true,
+  default: ({ isShow, children, onClose, closable, className }: { isShow: boolean; children: React.ReactNode; onClose: () => void; closable?: boolean; className?: string }) => {
+    mockModalProps = {
+      isShow,
+      closable,
+      className,
+    }
+    if (!isShow)
+      return null
+    return (
+      <div data-testid='annotation-full-modal' data-classname={className ?? ''}>
+        {closable && (
+          <button type='button' data-testid='mock-modal-close' onClick={onClose}>
+            close
+          </button>
+        )}
+        {children}
+      </div>
+    )
+  },
+}))
+
+describe('AnnotationFullModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUsageProps = null
+    mockUpgradeBtnProps = null
+    mockModalProps = null
+  })
+
+  // Rendering marketing copy inside modal
+  describe('Rendering', () => {
+    it('should display main info when visible', () => {
+      // Act
+      render(<AnnotationFullModal show onHide={jest.fn()} />)
+
+      // Assert
+      expect(screen.getByText('billing.annotatedResponse.fullTipLine1')).toBeInTheDocument()
+      expect(screen.getByText('billing.annotatedResponse.fullTipLine2')).toBeInTheDocument()
+      expect(screen.getByTestId('usage-component')).toHaveAttribute('data-classname', 'mt-4')
+      expect(screen.getByTestId('upgrade-btn')).toHaveTextContent('annotation-create')
+      expect(mockUpgradeBtnProps?.loc).toBe('annotation-create')
+      expect(mockModalProps).toEqual(expect.objectContaining({
+        isShow: true,
+        closable: true,
+        className: '!p-0',
+      }))
+    })
+  })
+
+  // Controlling modal visibility
+  describe('Visibility', () => {
+    it('should not render content when hidden', () => {
+      // Act
+      const { container } = render(<AnnotationFullModal show={false} onHide={jest.fn()} />)
+
+      // Assert
+      expect(container).toBeEmptyDOMElement()
+      expect(mockModalProps).toEqual(expect.objectContaining({ isShow: false }))
+    })
+  })
+
+  // Handling close interactions
+  describe('Close handling', () => {
+    it('should trigger onHide when close control is clicked', () => {
+      // Arrange
+      const onHide = jest.fn()
+
+      // Act
+      render(<AnnotationFullModal show onHide={onHide} />)
+      fireEvent.click(screen.getByTestId('mock-modal-close'))
+
+      // Assert
+      expect(onHide).toHaveBeenCalledTimes(1)
+    })
+  })
+})