wwf
2025-05-20 938c3e5a587ce950a94964ea509b9e7f8834dfae
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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')
  })
})