dify

dify/web/app/components/base/divider/index.spec.tsx

@@ -0,0 +1,55 @@
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import Divider from './index'
+
+describe('Divider', () => {
+  it('renders with default props', () => {
+    const { container } = render(<Divider />)
+    const divider = container.firstChild as HTMLElement
+    expect(divider).toHaveClass('w-full h-[0.5px] my-2')
+    expect(divider).toHaveClass('bg-divider-regular')
+  })
+
+  it('renders horizontal solid divider correctly', () => {
+    const { container } = render(<Divider type="horizontal" bgStyle="solid" />)
+    const divider = container.firstChild as HTMLElement
+    expect(divider).toHaveClass('w-full h-[0.5px] my-2')
+    expect(divider).toHaveClass('bg-divider-regular')
+  })
+
+  it('renders vertical solid divider correctly', () => {
+    const { container } = render(<Divider type="vertical" bgStyle="solid" />)
+    const divider = container.firstChild as HTMLElement
+    expect(divider).toHaveClass('w-[1px] h-full mx-2')
+    expect(divider).toHaveClass('bg-divider-regular')
+  })
+
+  it('renders horizontal gradient divider correctly', () => {
+    const { container } = render(<Divider type="horizontal" bgStyle="gradient" />)
+    const divider = container.firstChild as HTMLElement
+    expect(divider).toHaveClass('w-full h-[0.5px] my-2')
+    expect(divider).toHaveClass('bg-gradient-to-r from-divider-regular to-background-gradient-mask-transparent')
+  })
+
+  it('renders vertical gradient divider correctly', () => {
+    const { container } = render(<Divider type="vertical" bgStyle="gradient" />)
+    const divider = container.firstChild as HTMLElement
+    expect(divider).toHaveClass('w-[1px] h-full mx-2')
+    expect(divider).toHaveClass('bg-gradient-to-r from-divider-regular to-background-gradient-mask-transparent')
+  })
+
+  it('applies custom className correctly', () => {
+    const customClass = 'test-custom-class'
+    const { container } = render(<Divider className={customClass} />)
+    const divider = container.firstChild as HTMLElement
+    expect(divider).toHaveClass(customClass)
+    expect(divider).toHaveClass('w-full h-[0.5px] my-2')
+  })
+
+  it('applies custom style correctly', () => {
+    const customStyle = { margin: '10px' }
+    const { container } = render(<Divider style={customStyle} />)
+    const divider = container.firstChild as HTMLElement
+    expect(divider).toHaveStyle('margin: 10px')
+  })
+})