chore: tests for annotation (#29664)

web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.spec.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import ClearAllAnnotationsConfirmModal from './index'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'appAnnotation.table.header.clearAllConfirm': 'Clear all annotations?',
+        'common.operation.confirm': 'Confirm',
+        'common.operation.cancel': 'Cancel',
+      }
+      return translations[key] || key
+    },
+  }),
+}))
+
+beforeEach(() => {
+  jest.clearAllMocks()
+})
+
+describe('ClearAllAnnotationsConfirmModal', () => {
+  // Rendering visibility toggled by isShow flag
+  describe('Rendering', () => {
+    test('should show confirmation dialog when isShow is true', () => {
+      // Arrange
+      render(
+        <ClearAllAnnotationsConfirmModal
+          isShow
+          onHide={jest.fn()}
+          onConfirm={jest.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('Clear all annotations?')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument()
+    })
+
+    test('should not render anything when isShow is false', () => {
+      // Arrange
+      render(
+        <ClearAllAnnotationsConfirmModal
+          isShow={false}
+          onHide={jest.fn()}
+          onConfirm={jest.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.queryByText('Clear all annotations?')).not.toBeInTheDocument()
+    })
+  })
+
+  // User confirms or cancels clearing annotations
+  describe('Interactions', () => {
+    test('should trigger onHide when cancel is clicked', () => {
+      const onHide = jest.fn()
+      const onConfirm = jest.fn()
+      // Arrange
+      render(
+        <ClearAllAnnotationsConfirmModal
+          isShow
+          onHide={onHide}
+          onConfirm={onConfirm}
+        />,
+      )
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+
+      // Assert
+      expect(onHide).toHaveBeenCalledTimes(1)
+      expect(onConfirm).not.toHaveBeenCalled()
+    })
+
+    test('should trigger onConfirm when confirm is clicked', () => {
+      const onHide = jest.fn()
+      const onConfirm = jest.fn()
+      // Arrange
+      render(
+        <ClearAllAnnotationsConfirmModal
+          isShow
+          onHide={onHide}
+          onConfirm={onConfirm}
+        />,
+      )
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: 'Confirm' }))
+
+      // Assert
+      expect(onConfirm).toHaveBeenCalledTimes(1)
+      expect(onHide).not.toHaveBeenCalled()
+    })
+  })
+})

web/app/components/app/annotation/remove-annotation-confirm-modal/index.spec.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import RemoveAnnotationConfirmModal from './index'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'appDebug.feature.annotation.removeConfirm': 'Remove annotation?',
+        'common.operation.confirm': 'Confirm',
+        'common.operation.cancel': 'Cancel',
+      }
+      return translations[key] || key
+    },
+  }),
+}))
+
+beforeEach(() => {
+  jest.clearAllMocks()
+})
+
+describe('RemoveAnnotationConfirmModal', () => {
+  // Rendering behavior driven by isShow and translations
+  describe('Rendering', () => {
+    test('should display the confirm modal when visible', () => {
+      // Arrange
+      render(
+        <RemoveAnnotationConfirmModal
+          isShow
+          onHide={jest.fn()}
+          onRemove={jest.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('Remove annotation?')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument()
+    })
+
+    test('should not render modal content when hidden', () => {
+      // Arrange
+      render(
+        <RemoveAnnotationConfirmModal
+          isShow={false}
+          onHide={jest.fn()}
+          onRemove={jest.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.queryByText('Remove annotation?')).not.toBeInTheDocument()
+    })
+  })
+
+  // User interactions with confirm and cancel buttons
+  describe('Interactions', () => {
+    test('should call onHide when cancel button is clicked', () => {
+      const onHide = jest.fn()
+      const onRemove = jest.fn()
+      // Arrange
+      render(
+        <RemoveAnnotationConfirmModal
+          isShow
+          onHide={onHide}
+          onRemove={onRemove}
+        />,
+      )
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+
+      // Assert
+      expect(onHide).toHaveBeenCalledTimes(1)
+      expect(onRemove).not.toHaveBeenCalled()
+    })
+
+    test('should call onRemove when confirm button is clicked', () => {
+      const onHide = jest.fn()
+      const onRemove = jest.fn()
+      // Arrange
+      render(
+        <RemoveAnnotationConfirmModal
+          isShow
+          onHide={onHide}
+          onRemove={onRemove}
+        />,
+      )
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: 'Confirm' }))
+
+      // Assert
+      expect(onRemove).toHaveBeenCalledTimes(1)
+      expect(onHide).not.toHaveBeenCalled()
+    })
+  })
+})