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
import React from 'react'
import { render } from '@testing-library/react'
import '@testing-library/jest-dom'
import Spinner from './index'
 
describe('Spinner component', () => {
  it('should render correctly when loading is true', () => {
    const { container } = render(<Spinner loading={true} />)
    const spinner = container.firstChild as HTMLElement
 
    expect(spinner).toHaveClass('animate-spin')
 
    // Check for accessibility text
    const screenReaderText = spinner.querySelector('span')
    expect(screenReaderText).toBeInTheDocument()
    expect(screenReaderText).toHaveTextContent('Loading...')
  })
 
  it('should be hidden when loading is false', () => {
    const { container } = render(<Spinner loading={false} />)
    const spinner = container.firstChild as HTMLElement
 
    expect(spinner).toHaveClass('hidden')
  })
 
  it('should render with custom className', () => {
    const customClass = 'text-blue-500'
    const { container } = render(<Spinner loading={true} className={customClass} />)
    const spinner = container.firstChild as HTMLElement
 
    expect(spinner).toHaveClass(customClass)
  })
 
  it('should render children correctly', () => {
    const childText = 'Child content'
    const { getByText } = render(
      <Spinner loading={true}>{childText}</Spinner>,
    )
 
    expect(getByText(childText)).toBeInTheDocument()
  })
 
  it('should use default loading value (false) when not provided', () => {
    const { container } = render(<Spinner />)
    const spinner = container.firstChild as HTMLElement
 
    expect(spinner).toHaveClass('hidden')
  })
})