test: add comprehensive unit tests for JinaReader and WaterCrawl comp… (#29768)

Co-authored-by: CodingOnStar <hanxujiang@dify.ai>

web/app/components/datasets/create/website/base/checkbox-with-label.tsx

@@ -12,6 +12,7 @@ type Props = {
   label: string
   labelClassName?: string
   tooltip?: string
+  testId?: string
 }
 
 const CheckboxWithLabel: FC<Props> = ({
@@ -21,10 +22,11 @@ const CheckboxWithLabel: FC<Props> = ({
   label,
   labelClassName,
   tooltip,
+  testId,
 }) => {
   return (
     <label className={cn(className, 'flex h-7 items-center space-x-2')}>
-      <Checkbox checked={isChecked} onCheck={() => onChange(!isChecked)} />
+      <Checkbox checked={isChecked} onCheck={() => onChange(!isChecked)} id={testId} />
       <div className={cn('text-sm font-normal text-text-secondary', labelClassName)}>{label}</div>
       {tooltip && (
         <Tooltip

web/app/components/datasets/create/website/base/crawled-result-item.tsx

@@ -13,6 +13,7 @@ type Props = {
   isPreview: boolean
   onCheckChange: (checked: boolean) => void
   onPreview: () => void
+  testId?: string
 }
 
 const CrawledResultItem: FC<Props> = ({
@@ -21,6 +22,7 @@ const CrawledResultItem: FC<Props> = ({
   isChecked,
   onCheckChange,
   onPreview,
+  testId,
 }) => {
   const { t } = useTranslation()
 
@@ -31,7 +33,7 @@ const CrawledResultItem: FC<Props> = ({
     <div className={cn(isPreview ? 'bg-state-base-active' : 'group hover:bg-state-base-hover', 'cursor-pointer rounded-lg p-2')}>
       <div className='relative flex'>
         <div className='flex h-5 items-center'>
-          <Checkbox className='mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
+          <Checkbox className='mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} id={testId} />
         </div>
         <div className='flex min-w-0 grow flex-col'>
           <div

web/app/components/datasets/create/website/base/crawled-result.tsx

@@ -61,8 +61,10 @@ const CrawledResult: FC<Props> = ({
       <div className='flex h-[34px] items-center justify-between px-4'>
         <CheckboxWithLabel
           isChecked={isCheckAll}
-          onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
+          onChange={handleCheckedAll}
+          label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
           labelClassName='system-[13px] leading-[16px] font-medium text-text-secondary'
+          testId='select-all'
         />
         <div className='text-xs text-text-tertiary'>
           {t(`${I18N_PREFIX}.scrapTimeInfo`, {
@@ -80,6 +82,7 @@ const CrawledResult: FC<Props> = ({
             payload={item}
             isChecked={checkedList.some(checkedItem => checkedItem.source_url === item.source_url)}
             onCheckChange={handleItemCheckChange(item)}
+            testId={`item-${index}`}
           />
         ))}
       </div>