test: improve coverage for some files (#33218)

web/app/components/datasets/create/website/firecrawl/__tests__/options.spec.tsx

@@ -1,6 +1,5 @@
 import type { CrawlOptions } from '@/models/datasets'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
 import Options from '../options'
 
 // Test Data Factory
@@ -104,38 +103,28 @@ describe('Options', () => {
   describe('Props Display', () => {
     it('should display crawl_sub_pages checkbox with check icon when true', () => {
       const payload = createMockCrawlOptions({ crawl_sub_pages: true })
-      const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
+      render(<Options payload={payload} onChange={mockOnChange} />)
 
-      const checkboxes = getCheckboxes(container)
       // First checkbox should have check icon when checked
-      expect(checkboxes[0].querySelector('svg')).toBeInTheDocument()
+      expect(screen.queryByTestId('check-icon-crawl-sub-page')).toBeInTheDocument()
     })
 
     it('should display crawl_sub_pages checkbox without check icon when false', () => {
       const payload = createMockCrawlOptions({ crawl_sub_pages: false })
-      const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
-
-      const checkboxes = getCheckboxes(container)
-      // First checkbox should not have check icon when unchecked
-      expect(checkboxes[0].querySelector('svg')).not.toBeInTheDocument()
+      render(<Options payload={payload} onChange={mockOnChange} />)
+      expect(screen.queryByTestId('check-icon-crawl-sub-page')).not.toBeInTheDocument()
     })
 
     it('should display only_main_content checkbox with check icon when true', () => {
       const payload = createMockCrawlOptions({ only_main_content: true })
-      const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
-
-      const checkboxes = getCheckboxes(container)
-      // Second checkbox should have check icon when checked
-      expect(checkboxes[1].querySelector('svg')).toBeInTheDocument()
+      render(<Options payload={payload} onChange={mockOnChange} />)
+      expect(screen.getByTestId('check-icon-only-main-content')).toBeInTheDocument()
     })
 
     it('should display only_main_content checkbox without check icon when false', () => {
       const payload = createMockCrawlOptions({ only_main_content: false })
-      const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
-
-      const checkboxes = getCheckboxes(container)
-      // Second checkbox should not have check icon when unchecked
-      expect(checkboxes[1].querySelector('svg')).not.toBeInTheDocument()
+      render(<Options payload={payload} onChange={mockOnChange} />)
+      expect(screen.queryByTestId('check-icon-only-main-content')).not.toBeInTheDocument()
     })
 
     it('should display limit value in input', () => {

web/app/components/datasets/create/website/firecrawl/options.tsx

@@ -32,9 +32,10 @@ const Options: FC<Props> = ({
     }
   }, [payload, onChange])
   return (
-    <div className={cn(className, ' space-y-2')}>
+    <div className={cn(className, 'space-y-2')}>
       <CheckboxWithLabel
         label={t(`${I18N_PREFIX}.crawlSubPage`, { ns: 'datasetCreation' })}
+        testId="crawl-sub-page"
         isChecked={payload.crawl_sub_pages}
         onChange={handleChange('crawl_sub_pages')}
         labelClassName="text-[13px] leading-[16px] font-medium text-text-secondary"
@@ -76,6 +77,7 @@ const Options: FC<Props> = ({
       </div>
       <CheckboxWithLabel
         label={t(`${I18N_PREFIX}.extractOnlyMainContent`, { ns: 'datasetCreation' })}
+        testId="only-main-content"
         isChecked={payload.only_main_content}
         onChange={handleChange('only_main_content')}
         labelClassName="text-[13px] leading-[16px] font-medium text-text-secondary"

web/app/components/datasets/create/website/jina-reader/__tests__/options.spec.tsx

@@ -70,34 +70,26 @@ describe('Options (jina-reader)', () => {
   describe('Props Display', () => {
     it('should display crawl_sub_pages checkbox with check icon when true', () => {
       const payload = createMockCrawlOptions({ crawl_sub_pages: true })
-      const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
-
-      const checkboxes = getCheckboxes(container)
-      expect(checkboxes[0].querySelector('svg')).toBeInTheDocument()
+      render(<Options payload={payload} onChange={mockOnChange} />)
+      expect(screen.getByTestId('check-icon-crawl-sub-pages')).toBeInTheDocument()
     })
 
     it('should display crawl_sub_pages checkbox without check icon when false', () => {
       const payload = createMockCrawlOptions({ crawl_sub_pages: false })
-      const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
-
-      const checkboxes = getCheckboxes(container)
-      expect(checkboxes[0].querySelector('svg')).not.toBeInTheDocument()
+      render(<Options payload={payload} onChange={mockOnChange} />)
+      expect(screen.queryByTestId('check-icon-crawl-sub-pages')).not.toBeInTheDocument()
     })
 
     it('should display use_sitemap checkbox with check icon when true', () => {
       const payload = createMockCrawlOptions({ use_sitemap: true })
-      const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
-
-      const checkboxes = getCheckboxes(container)
-      expect(checkboxes[1].querySelector('svg')).toBeInTheDocument()
+      render(<Options payload={payload} onChange={mockOnChange} />)
+      expect(screen.getByTestId('check-icon-use-sitemap')).toBeInTheDocument()
     })
 
     it('should display use_sitemap checkbox without check icon when false', () => {
       const payload = createMockCrawlOptions({ use_sitemap: false })
-      const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
-
-      const checkboxes = getCheckboxes(container)
-      expect(checkboxes[1].querySelector('svg')).not.toBeInTheDocument()
+      render(<Options payload={payload} onChange={mockOnChange} />)
+      expect(screen.queryByTestId('check-icon-use-sitemap')).not.toBeInTheDocument()
     })
 
     it('should display limit value in input', () => {
@@ -111,10 +103,9 @@ describe('Options (jina-reader)', () => {
   describe('User Interactions', () => {
     it('should call onChange with updated crawl_sub_pages when checkbox is clicked', () => {
       const payload = createMockCrawlOptions({ crawl_sub_pages: true })
-      const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
+      render(<Options payload={payload} onChange={mockOnChange} />)
 
-      const checkboxes = getCheckboxes(container)
-      fireEvent.click(checkboxes[0])
+      fireEvent.click(screen.getByTestId('checkbox-crawl-sub-pages'))
 
       expect(mockOnChange).toHaveBeenCalledWith({
         ...payload,
@@ -124,10 +115,9 @@ describe('Options (jina-reader)', () => {
 
     it('should call onChange with updated use_sitemap when checkbox is clicked', () => {
       const payload = createMockCrawlOptions({ use_sitemap: false })
-      const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
+      render(<Options payload={payload} onChange={mockOnChange} />)
 
-      const checkboxes = getCheckboxes(container)
-      fireEvent.click(checkboxes[1])
+      fireEvent.click(screen.getByTestId('checkbox-use-sitemap'))
 
       expect(mockOnChange).toHaveBeenCalledWith({
         ...payload,

web/app/components/datasets/create/website/watercrawl/__tests__/options.spec.tsx

@@ -87,10 +87,9 @@ describe('Options (watercrawl)', () => {
   describe('Props Display', () => {
     it('should display crawl_sub_pages checkbox with check icon when true', () => {
       const payload = createMockCrawlOptions({ crawl_sub_pages: true })
-      const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
+      render(<Options payload={payload} onChange={mockOnChange} />)
 
-      const checkboxes = getCheckboxes(container)
-      expect(checkboxes[0].querySelector('svg')).toBeInTheDocument()
+      expect(screen.getByTestId('check-icon-crawl-sub-pages')).toBeInTheDocument()
     })
 
     it('should display crawl_sub_pages checkbox without check icon when false', () => {
@@ -103,10 +102,8 @@ describe('Options (watercrawl)', () => {
 
     it('should display only_main_content checkbox with check icon when true', () => {
       const payload = createMockCrawlOptions({ only_main_content: true })
-      const { container } = render(<Options payload={payload} onChange={mockOnChange} />)
-
-      const checkboxes = getCheckboxes(container)
-      expect(checkboxes[1].querySelector('svg')).toBeInTheDocument()
+      render(<Options payload={payload} onChange={mockOnChange} />)
+      expect(screen.getByTestId('check-icon-only-main-content')).toBeInTheDocument()
     })
 
     it('should display only_main_content checkbox without check icon when false', () => {

web/app/components/datasets/documents/components/document-list/__tests__/index.spec.tsx

@@ -175,12 +175,11 @@ describe('DocumentList', () => {
         ...defaultProps,
         selectedIds: ['doc-1', 'doc-2', 'doc-3'],
       }
-      const { container } = render(<DocumentList {...props} />, { wrapper: createWrapper() })
+      render(<DocumentList {...props} />, { wrapper: createWrapper() })
 
-      const checkboxes = findCheckboxes(container)
       // When checked, checkbox should have a check icon (svg) inside
-      checkboxes.forEach((checkbox) => {
-        const checkIcon = checkbox.querySelector('svg')
+      props.selectedIds.forEach((id) => {
+        const checkIcon = screen.getByTestId(`check-icon-doc-row-${id}`)
         expect(checkIcon).toBeInTheDocument()
       })
     })

web/app/components/datasets/documents/components/document-list/components/__tests__/document-table-row.spec.tsx

@@ -126,20 +126,16 @@ describe('DocumentTableRow', () => {
   describe('Selection', () => {
     it('should show check icon when isSelected is true', () => {
       const { container } = render(<DocumentTableRow {...defaultProps} isSelected />, { wrapper: createWrapper() })
-      // When selected, the checkbox should have a check icon (RiCheckLine svg)
       const checkbox = findCheckbox(container)
       expect(checkbox).toBeInTheDocument()
-      const checkIcon = checkbox?.querySelector('svg')
-      expect(checkIcon).toBeInTheDocument()
+      expect(screen.getByTestId('check-icon-doc-row-doc-1')).toBeInTheDocument()
     })
 
     it('should not show check icon when isSelected is false', () => {
       const { container } = render(<DocumentTableRow {...defaultProps} isSelected={false} />, { wrapper: createWrapper() })
       const checkbox = findCheckbox(container)
       expect(checkbox).toBeInTheDocument()
-      // When not selected, there should be no check icon inside the checkbox
-      const checkIcon = checkbox?.querySelector('svg')
-      expect(checkIcon).not.toBeInTheDocument()
+      expect(screen.queryByTestId('check-icon-doc-row-doc-1')).not.toBeInTheDocument()
     })
 
     it('should call onSelectOne when checkbox is clicked', () => {

web/app/components/datasets/documents/components/document-list/components/document-table-row.tsx

@@ -91,6 +91,7 @@ const DocumentTableRow: FC<DocumentTableRowProps> = React.memo(({
             className="mr-2 shrink-0"
             checked={isSelected}
             onCheck={() => onSelectOne(doc.id)}
+            id={`doc-row-${doc.id}`}
           />
           {index + 1}
         </div>

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx

@@ -42,7 +42,7 @@ const Item = ({
       }
     : {}
 
-  const handleSelect = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+  const handleSelect = useCallback((e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {
     e.stopPropagation()
     onSelect(file)
   }, [file, onSelect])
@@ -91,13 +91,13 @@ const Item = ({
         >
           <FileIcon type={type} fileName={name} className="shrink-0 transform-gpu" />
           <span
-            className="system-sm-medium grow truncate text-text-secondary"
+            className="grow truncate text-text-secondary system-sm-medium"
             title={name}
           >
             {name}
           </span>
           {!isFolder && typeof size === 'number' && (
-            <span className="system-xs-regular shrink-0 text-text-tertiary">{formatFileSize(size)}</span>
+            <span className="shrink-0 text-text-tertiary system-xs-regular">{formatFileSize(size)}</span>
           )}
         </div>
       </Wrapper>

web/app/components/datasets/metadata/edit-metadata-batch/__tests__/modal.spec.tsx

@@ -84,7 +84,7 @@ vi.mock('../../metadata-dataset/select-metadata-modal', () => ({
     <div data-testid="select-modal">
       {trigger}
       <button data-testid="select-metadata" onClick={() => onSelect({ id: 'new-1', name: 'new_field', type: DataType.string, value: null, isMultipleValue: false })}>Select</button>
-      <button data-testid="save-metadata" onClick={() => onSave({ name: 'created_field', type: DataType.string }).catch(() => {})}>Save</button>
+      <button data-testid="save-metadata" onClick={() => onSave({ name: 'created_field', type: DataType.string }).catch(() => { })}>Save</button>
       <button data-testid="manage-metadata" onClick={onManage}>Manage</button>
     </div>
   ),
@@ -202,7 +202,7 @@ describe('EditMetadataBatchModal', () => {
       if (checkboxContainer) {
         fireEvent.click(checkboxContainer)
         await waitFor(() => {
-          const checkIcon = checkboxContainer.querySelector('svg')
+          const checkIcon = screen.getByTestId('check-icon-apply-to-all')
           expect(checkIcon).toBeInTheDocument()
         })
       }

web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx

@@ -118,7 +118,7 @@ const EditMetadataBatchModal: FC<Props> = ({
       onClose={onHide}
       className="!max-w-[640px]"
     >
-      <div className="system-xs-medium mt-1 text-text-accent">{t(`${i18nPrefix}.editDocumentsNum`, { ns: 'dataset', num: documentNum })}</div>
+      <div className="mt-1 text-text-accent system-xs-medium">{t(`${i18nPrefix}.editDocumentsNum`, { ns: 'dataset', num: documentNum })}</div>
       <div className="max-h-[305px] overflow-y-auto overflow-x-hidden">
         <div className="mt-4 space-y-2">
           {templeList.map(item => (
@@ -133,7 +133,7 @@ const EditMetadataBatchModal: FC<Props> = ({
         </div>
         <div className="mt-4 pl-[18px]">
           <div className="flex items-center">
-            <div className="system-xs-medium-uppercase mr-2 shrink-0 text-text-tertiary">{t('metadata.createMetadata.title', { ns: 'dataset' })}</div>
+            <div className="mr-2 shrink-0 text-text-tertiary system-xs-medium-uppercase">{t('metadata.createMetadata.title', { ns: 'dataset' })}</div>
             <Divider bgStyle="gradient" />
           </div>
           <div className="mt-2 space-y-2">
@@ -164,8 +164,8 @@ const EditMetadataBatchModal: FC<Props> = ({
 
       <div className="mt-4 flex items-center justify-between">
         <div className="flex select-none items-center">
-          <Checkbox checked={isApplyToAllSelectDocument} onCheck={() => setIsApplyToAllSelectDocument(!isApplyToAllSelectDocument)} />
-          <div className="system-xs-medium ml-2 mr-1 text-text-secondary">{t(`${i18nPrefix}.applyToAllSelectDocument`, { ns: 'dataset' })}</div>
+          <Checkbox checked={isApplyToAllSelectDocument} onCheck={() => setIsApplyToAllSelectDocument(!isApplyToAllSelectDocument)} id="apply-to-all" />
+          <div className="ml-2 mr-1 text-text-secondary system-xs-medium">{t(`${i18nPrefix}.applyToAllSelectDocument`, { ns: 'dataset' })}</div>
           <Tooltip popupContent={
             <div className="max-w-[240px]">{t(`${i18nPrefix}.applyToAllSelectDocumentTip`, { ns: 'dataset' })}</div>
           }