test: add unit tests for plugin detail panel components including action lists, strategy lists, and endpoint management (#31053)

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

web/app/components/datasets/documents/detail/embedding/skeleton/index.spec.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react'
+import EmbeddingSkeleton from './index'
+
+// Mock Skeleton components
+vi.mock('@/app/components/base/skeleton', () => ({
+  SkeletonContainer: ({ children }: { children?: React.ReactNode }) => <div data-testid="skeleton-container">{children}</div>,
+  SkeletonPoint: () => <div data-testid="skeleton-point" />,
+  SkeletonRectangle: () => <div data-testid="skeleton-rectangle" />,
+  SkeletonRow: ({ children }: { children?: React.ReactNode }) => <div data-testid="skeleton-row">{children}</div>,
+}))
+
+// Mock Divider
+vi.mock('@/app/components/base/divider', () => ({
+  default: () => <div data-testid="divider" />,
+}))
+
+describe('EmbeddingSkeleton', () => {
+  it('should render correct number of skeletons', () => {
+    render(<EmbeddingSkeleton />)
+
+    // It renders 5 CardSkeletons. Each CardSkelton has multiple SkeletonContainers.
+    // Let's count the number of main wrapper divs (loop is 5)
+
+    // Each iteration renders a CardSkeleton and potentially a Divider.
+    // The component structure is:
+    // div.relative...
+    //   div.absolute... (mask)
+    //   map(5) -> div.w-full.px-11 -> CardSkelton + Divider (except last?)
+
+    // Actually the code says `index !== 9`, but the loop is length 5.
+    // So `index` goes 0..4. All are !== 9. So 5 dividers should be rendered.
+
+    expect(screen.getAllByTestId('divider')).toHaveLength(5)
+
+    // Just ensure it renders without crashing and contains skeleton elements
+    expect(screen.getAllByTestId('skeleton-container').length).toBeGreaterThan(0)
+    expect(screen.getAllByTestId('skeleton-rectangle').length).toBeGreaterThan(0)
+  })
+
+  it('should render the mask overlay', () => {
+    const { container } = render(<EmbeddingSkeleton />)
+    // Check for the absolute positioned mask
+    const mask = container.querySelector('.bg-dataset-chunk-list-mask-bg')
+    expect(mask).toBeInTheDocument()
+  })
+})